WB-483: Add custom labels to MultiSelect #659

jandrade · 2019-12-17T14:02:18Z

Summary

MultiSelect

Added the labels prop to the MultiSelect component that allows us to pass a set of custom labels to the component.

This is the set of keys allowed by the component:

labels={
    clearSearch: string,
    filter: string,
    noResults: string,
    selectAllLabel: (numOptions: number) => string,
    selectNoneLabel: string,
    noneSelected: string,
    someSelected: (numSelectedValues: number) => string,
    allSelected: string,
}

Test plan

Run tests: yarn test.
Open the example that uses a set of translated strings: http://localhost:6060/#!/MultiSelect/21.

cc @annr

…ners

…ingle

packages/wonder-blocks-dropdown/components/multi-select.js

…nd selectItemType)

jandrade · 2019-12-17T21:33:12Z

packages/wonder-blocks-dropdown/components/multi-select.js

     */
-    selectItemType: string,


I'm deprecating these two props in favor of labels.

jandrade · 2019-12-17T21:34:49Z

packages/wonder-blocks-dropdown/components/multi-select.js

@@ -184,6 +225,8 @@ export default class MultiSelect extends React.Component<Props, State> {
            searchText: "",
            lastSelectedValues: [],
        };
+        // merge custom labels with the default ones
+        this.labels = {...defaultLabels, ...props.labels};


I ended up creating this labels instance variable to merge the custom labels with the default labels defined in constants.js.

Will this update if the props change later on?

mmm It won't. I'll make the pertinent changes.

codecov · 2019-12-17T21:35:06Z

Codecov Report

Merging #659 into master will increase coverage by 0.16%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #659      +/-   ##
==========================================
+ Coverage   95.48%   95.64%   +0.16%     
==========================================
  Files         135      134       -1     
  Lines        2260     2275      +15     
  Branches      425      428       +3     
==========================================
+ Hits         2158     2176      +18     
+ Misses         96       93       -3     
  Partials        6        6

Impacted Files	Coverage Δ
...wonder-blocks-dropdown/components/single-select.js	`100% <ø> (ø)`	⬆️
packages/wonder-blocks-dropdown/util/constants.js	`100% <100%> (ø)`	⬆️
...wonder-blocks-dropdown/components/dropdown-core.js	`99.45% <100%> (ø)`	⬆️
...nder-blocks-dropdown/components/dropdown-opener.js	`100% <100%> (ø)`	⬆️
...s/wonder-blocks-dropdown/components/action-menu.js	`100% <100%> (ø)`	⬆️
.../wonder-blocks-dropdown/components/multi-select.js	`96.7% <100%> (+0.27%)`	⬆️
...er-blocks-dropdown/components/search-text-input.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6fff8f4...0f63c8c. Read the comment docs.

jandrade · 2019-12-17T21:35:30Z

packages/wonder-blocks-dropdown/util/constants.js

@@ -34,3 +34,15 @@ export const SEPARATOR_ITEM_HEIGHT = 9;

 export const SEARCH_ITEM_HEIGHT =
    DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
+
+// The default labels that will be used by different components
+export const defaultLabels = {


Now all the default labels are centralized in this file.

jeresig

Excellent, thank you! A few questions inline.

jeresig · 2019-12-17T23:33:08Z

packages/wonder-blocks-dropdown/components/multi-select.js

-     * When this is true, the menu text shows "All {selectItemType}" when no
-     * item is selected.
+     * When this is true, the menu text shows "All items" when no item is
+     * selected.


Might be worth mentioning which label this is, as well

jeresig · 2019-12-17T23:33:43Z

packages/wonder-blocks-dropdown/components/multi-select.js

@@ -184,6 +225,8 @@ export default class MultiSelect extends React.Component<Props, State> {
            searchText: "",
            lastSelectedValues: [],
        };
+        // merge custom labels with the default ones
+        this.labels = {...defaultLabels, ...props.labels};


Will this update if the props change later on?

packages/wonder-blocks-dropdown/components/multi-select.js

jeresig · 2019-12-17T23:35:41Z

packages/wonder-blocks-dropdown/components/search-text-input.js

+            clearSearch: defaultLabels.clearSearch,
+            filter: defaultLabels.filter,
+        },
+    };


I notice you're not doing this this.labels here, any reason?

Yes, this component is only accessed by MultiSelect and we are doing the corresponding this.labels check in that component. In this case, we have two options:

No custom labels set: It will use the values from defaultValues.

Custom labels set: It will override the values of this.props.labels with the values passed from MultiSelect.

Disregard my previous comment. We still need to sync the labels sent by the parent component, so I might to reuse the same logic to get the current labels from MultiSelect.

jeresig · 2019-12-17T23:36:02Z

packages/wonder-blocks-dropdown/util/constants.js

@@ -34,3 +34,15 @@ export const SEPARATOR_ITEM_HEIGHT = 9;

 export const SEARCH_ITEM_HEIGHT =
    DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
+
+// The default labels that will be used by different components
+export const defaultLabels = {


jandrade added 13 commits December 13, 2019 15:09

WB-660.1: Add custom opener to ActionMenu

ff8a062

WB-660.1: Add comments to example

dab66a5

WB-660.2: Add custom opener to SingleSelect

edae605

WB-660.1: Address PR feedback

ec6a35b

Merge remote-tracking branch 'origin/master' into dropdown/custom-ope…

cf927be

…ners

Merge branch 'dropdown/custom-openers' into dropdown/custom-openers-s…

f5aba7b

…ingle

WB-660.2: Address PR feedback

1994b81

WB-660.2: Address PR feedback (remove anchorRef)

b9d3764

WB-660.2: Address PR feedback (remove testId from custom opener)

282327d

WB-660.3: Add custom opener to MultiSelect

dea0bd9

WB-660.4: Add text arg to the opener prop

da1e088

WB-662: Remove Dropdown component

e81e187

WB-483: Add translated labels to MultiSelect

289a839

jandrade requested review from jangmi-jo and a team December 17, 2019 14:02

jeresig reviewed Dec 17, 2019

View reviewed changes

packages/wonder-blocks-dropdown/components/multi-select.js Outdated Show resolved Hide resolved

WB-483: Address feedback (rename prop to labels, remove placeholder a…

fa24f80

…nd selectItemType)

jandrade commented Dec 17, 2019

View reviewed changes

WB-483: Update unit test, remove unused file

752c9ea

jandrade requested a review from jeresig December 17, 2019 21:56

jandrade changed the title ~~WB-483: Add translated labels to MultiSelect~~ WB-483: Add custom labels to MultiSelect Dec 17, 2019

jeresig approved these changes Dec 17, 2019

View reviewed changes

jandrade changed the base branch from dropdown/remove-dropdown to master December 18, 2019 00:17

jandrade added 4 commits December 17, 2019 19:20

Merge remote-tracking branch 'origin/master' into dropdown/translated

ff7a4ea

WB-483: Address comments - use state.labels

c1dce21

WB-483: Modify opener arguments

786779a

Merge branch 'master' into dropdown/translated

0f63c8c

jandrade merged commit 8b0916b into master Dec 18, 2019

jandrade mentioned this pull request May 20, 2020

fix(dropdown) WB-858: Fix dropdown container width #891

Merged

jandrade mentioned this pull request Apr 23, 2021

Th tm user input validation the-collab-lab/tcl-21-smart-shopping-list#21

Merged

jandrade deleted the dropdown/translated branch April 20, 2022 21:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WB-483: Add custom labels to MultiSelect #659

WB-483: Add custom labels to MultiSelect #659

jandrade commented Dec 17, 2019 •

edited

jandrade Dec 17, 2019

jandrade Dec 17, 2019

jeresig Dec 17, 2019

jandrade Dec 18, 2019

codecov bot commented Dec 17, 2019 •

edited

jandrade Dec 17, 2019

jeresig Dec 17, 2019

jeresig left a comment

jeresig Dec 17, 2019

jeresig Dec 17, 2019

jeresig Dec 17, 2019

jandrade Dec 18, 2019

jandrade Dec 18, 2019

jeresig Dec 17, 2019

WB-483: Add custom labels to MultiSelect #659

WB-483: Add custom labels to MultiSelect #659

Conversation

jandrade commented Dec 17, 2019 • edited

Summary

MultiSelect

Test plan

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Dec 17, 2019 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeresig left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jandrade commented Dec 17, 2019 •

edited

codecov bot commented Dec 17, 2019 •

edited