[EuiFilterButton] Fix unstyled '0' content when numFilters is undefined #5268
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- showBadge was evaluating as '0' because numActiveFilters was evaluating as 0 - if numActiveFilters was 0 (0 && 0 > 0) validated as 0 :/ just JS things
cee-chen
commented
Oct 13, 2021
| @@ -68,7 +68,8 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({ | |||
| ...rest | |||
| }) => { | |||
| const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined | |||
| const numActiveFiltersDefined = numActiveFilters && numActiveFilters > 0; | |||
| const numActiveFiltersDefined = | |||
| numActiveFilters != null && numActiveFilters > 0; | |||
There was a problem hiding this comment.
You know what's doubly hilarious in retrospect, undefined > 0 and null > 0 both evaluate to false so there's actually no need for a numActiveFilters && in the first place 💀 I can simplify that if folks prefer here.
I still can't get over 0 && 0 > 0 evaluating to 0 tbh
There was a problem hiding this comment.
I don't mind keeping it as is. We don't have to think about what undefined > 0 and null > 0 evaluate to with the current logic.
thompsongl
approved these changes
Oct 13, 2021
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5268/ |
This reverts commit 81ffe4a.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5268/ |
ym
pushed a commit
to ym/eui
that referenced
this pull request
Oct 29, 2021
…ed (elastic#5268) * [EuiFilterButton] Fix unstyled '0' content when numFilters is undefined - showBadge was evaluating as '0' because numActiveFilters was evaluating as 0 - if numActiveFilters was 0 (0 && 0 > 0) validated as 0 :/ just JS things * Add changelog entry
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
@andreadelrio fixed this in #5012 but I undid her good work in #5061 🤦♀️ I thought I was refactoring the original
numActiveFilters && numActiveFilters > 0check to be more succinct, but it turns out JS evaluates0 && 0 > 0to0instead of tofalse(WTF, Javascript). When used within a JSX&&, this turns into an unstyled0getting printed instead of the desired conditional JSX.I could also have solved this by coercing the
showBadgeflag on line 95 to a!!bool, but I thought it would be better to ensurenumActiveFiltersDefinedalways evaluates to a boolean.I also added a Jest test to ensure regressions don't occur again in the future, and tested the snapshot against the un-fixed code to ensure it failed.
QA
Before:
After:
Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes