Convert MultiSelect and SingleSelect to functional components #2370

beaesguerra · 2024-11-23T00:04:45Z

Summary:

Convert MultiSelect and SingleSelect to functional components to support the validation work to support LabeledField.

I was trying to add in the validation logic without refactoring too much since we might replace these components with Combobox. It was more complicated to account for different cases so I am refactoring it first to make it easier!

Issue: WB-1782

Test plan:

SingleSelect continues to work as expected
MultiSelect continues to work as expected

(would appreciate help with extra testing in case I missed something. These components were a bit more complicated to convert to FC!)

…ner function since that's where sharedProps is applied

changeset-bot · 2024-11-23T00:04:49Z

🦋 Changeset detected

Latest commit: e08647d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-11-23T00:07:35Z

Size Change: -15 B (-0.01%)

Total Size: 101 kB

Filename	Size	Change
`packages/wonder-blocks-dropdown/dist/es/index.js`	18.4 kB	-15 B (-0.08%)

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.78 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.77 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	887 B
`packages/wonder-blocks-button/dist/es/index.js`	4.04 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.01 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.06 kB
`packages/wonder-blocks-core/dist/es/index.js`	3.44 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.24 kB
`packages/wonder-blocks-form/dist/es/index.js`	6.28 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-i18n/dist/es/index.js`	4.77 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3 kB
`packages/wonder-blocks-icon/dist/es/index.js`	871 B
`packages/wonder-blocks-labeled-field/dist/es/index.js`	72 B
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.28 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.37 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.65 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.87 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.3 kB
`packages/wonder-blocks-switch/dist/es/index.js`	1.94 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.74 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	693 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	2.36 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	905 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	7.08 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.23 kB

_{compressed-size-action}

github-actions · 2024-11-23T00:10:01Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-hwglmdzfvu.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	372
Tests with visual changes	0
Total stories	506
Inherited (not captured) snapshots [TurboSnap]	0
Tests on the build	372

beaesguerra · 2024-11-25T20:07:52Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-type State = Readonly<{
-    /**
-     * Whether or not the dropdown is open.
-     */
-    open: boolean;
-    /**
-     * The text input to filter the items by their label. Defaults to an empty
-     * string.
-     */
-    searchText: string;
-    /**
-     * The selected values that are set when the dropdown is opened. We use
-     * this to move the selected items to the top when the dropdown is
-     * re-opened.
-     */
-    lastSelectedValues: Array<string>;
-    /**
-     * The object containing the custom labels used inside this component.
-     */
-    labels: Labels;
-    /**
-     * The DOM reference to the opener element. This is mainly used to set focus
-     * to this element, and also to pass the reference to Popper.js.
-     */
-    openerElement?: HTMLElement;
-}>;


open, searchText, lastSelectedValues and openerElement have useState equivalents

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 223 to 238 in e02ada1

// Whether or not the dropdown is open.

const [open, setOpen] = React.useState(false);

// The text input to filter the items by their label. Defaults to an empty

// string.

const [searchText, setSearchText] = React.useState("");

// The selected values that are set when the dropdown is opened. We use this

// to move the selected items to the top when the dropdown is re-opened.

const [lastSelectedValues, setLastSelectedValues] = React.useState<

string[]

>([]);

// The DOM reference to the opener element. This is mainly used to set focus

// to this element, and also to pass the reference to Popper.js.

const [openerElement, setOpenerElement] = React.useState<HTMLElement>();

labels doesn't need to be in state and combines the default labels and prop labels:

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 220 to 221 in e02ada1

// Merge custom labels with the default ones

const labels = {...defaultLabels, ...propLabels};

beaesguerra · 2024-11-25T20:11:10Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-export default class MultiSelect extends React.Component<Props, State> {
-    labels: Labels;
-
-    static defaultProps: DefaultProps = {


Default props are set when we deconstruct props in the functional component

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 194 to 218 in e02ada1

const {

id,

light = false,

opener,

testId,

alignment = "left",

dropdownStyle,

implicitAllEnabled,

isFilterable,

labels: propLabels,

onChange,

onToggle,

opened,

selectedValues = [],

shortcuts = false,

style,

className,

"aria-invalid": ariaInvalid,

"aria-required": ariaRequired,

disabled = false,

error = false,

children,

dropdownId,

...sharedProps

} = props;

beaesguerra · 2024-11-25T20:15:05Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-            labels: {...defaultLabels, ...props.labels},
-        };
-        // merge custom labels with the default ones
-        this.labels = {...defaultLabels, ...props.labels};


labels on the class wasn't being used so it can be removed. We combine default labels and prop labels:

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 220 to 221 in e02ada1

// Merge custom labels with the default ones

const labels = {...defaultLabels, ...propLabels};

beaesguerra · 2024-11-25T20:23:38Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

            // open should always be false if select is disabled
-            open: props.disabled
-                ? false
-                : typeof props.opened === "boolean"
-                ? props.opened
-                : state.open,


The logic for getDerivedStateFromProps is translated to a useEffect:

If disabled prop is set to true, we update the local open state to false.

If the opened prop changes, we update the local open state to the value of the prop

Otherwise, don't change local open state

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 240 to 248 in 32b4f84

React.useEffect(() => {

// Used to sync the `opened` state when this component acts as a controlled component

if (disabled) {

// open should always be false if select is disabled

setOpen(false);

} else if (typeof opened === "boolean") {

setOpen(opened);

}

}, [disabled, opened]);

beaesguerra · 2024-11-25T20:27:26Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-    componentDidUpdate(prevProps: Props) {
-        if (this.props.labels !== prevProps.labels) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-                labels: {...this.state.labels, ...this.props.labels},
-            });


Labels will stay up to date since it will combine the default labels and the prop labels

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 220 to 221 in 32b4f84

// Merge custom labels with the default ones

const labels = {...defaultLabels, ...propLabels};

yes! one benefit of switching to hooks. These kind of lifecycle events get more simpler.

beaesguerra · 2024-11-25T20:36:35Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-            light,
-            opener,
-            testId,
-            // the following props are being included here to avoid


Since we deconstruct the props at the start of the function, we don't need to again in the renderOpener function.

wonder-blocks/packages/wonder-blocks-dropdown/src/components/multi-select.tsx

Lines 194 to 218 in 32b4f84

const {

id,

light = false,

opener,

testId,

alignment = "left",

dropdownStyle,

implicitAllEnabled,

isFilterable,

labels: propLabels,

onChange,

onToggle,

opened,

selectedValues = [],

shortcuts = false,

style,

className,

"aria-invalid": ariaInvalid,

"aria-required": ariaRequired,

disabled = false,

error = false,

children,

dropdownId,

...sharedProps

} = props;

The deconstruction previously is almost the same. The FC will also extract disabled, error, children, and dropdownId so they won't be included in sharedProps when it is spread. The only one that matters to the SelectOpener is error, which is why we also explicitly set the error prop: https://github.com/Khan/wonder-blocks/pull/2370/files#diff-f7d0f4de4f6447c1f878dd6c51e6646adae276658cf9d7f29fcea7f630b17430R484

(changes for the disabled doesn't matter since we were already explicitly setting it https://github.com/Khan/wonder-blocks/pull/2370/files#diff-f7d0f4de4f6447c1f878dd6c51e6646adae276658cf9d7f29fcea7f630b17430R485)

beaesguerra · 2024-11-25T20:43:46Z

packages/wonder-blocks-dropdown/src/components/single-select.tsx

@@ -48,16 +48,16 @@ type DefaultProps = Readonly<{
     * Whether this dropdown should be left-aligned or right-aligned with the
     * opener component. Defaults to left-aligned.
     */
-    alignment: "left" | "right";


Most of the changes in SingleSelect are similar to the ones annotated in MultiSelect. Will highlight specific changes related to SingleSelect

beaesguerra · 2024-11-25T20:44:47Z

packages/wonder-blocks-dropdown/src/components/single-select.tsx

-    constructor(props: Props) {
-        super(props);
-
-        this.selectedIndex = 0;


We use a ref for this now:

wonder-blocks/packages/wonder-blocks-dropdown/src/components/single-select.tsx

Line 212 in 32b4f84

const selectedIndex = React.useRef(0);

khan-actions-bot · 2024-11-25T22:38:12Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/mean-sheep-shout.md, packages/wonder-blocks-dropdown/src/components/multi-select.tsx, packages/wonder-blocks-dropdown/src/components/single-select.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2024-11-25T22:38:51Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (d976be8) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2370"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2370

jandrade

This is awesome!! thanks for all the detailed notes. I did a lot of manual testing and can confidently say that works as expected (also tests passing is a good signal) 👏

jandrade · 2024-11-27T16:19:48Z

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

-    componentDidUpdate(prevProps: Props) {
-        if (this.props.labels !== prevProps.labels) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-                labels: {...this.state.labels, ...this.props.labels},
-            });


yes! one benefit of switching to hooks. These kind of lifecycle events get more simpler.

codecov · 2024-12-10T20:59:33Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (d67761d) to head (e08647d).
Report is 6 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2370   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

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

## Summary: Convert MultiSelect and SingleSelect to functional components to support the validation work to support LabeledField. I was trying to add in the validation logic without refactoring too much since we might replace these components with Combobox. It was more complicated to account for different cases so I am refactoring it first to make it easier! Issue: WB-1782 ## Test plan: - SingleSelect continues to work as expected - MultiSelect continues to work as expected (would appreciate help with extra testing in case I missed something. These components were a bit more complicated to convert to FC!) Author: beaesguerra Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: #2370

beaesguerra added 4 commits November 22, 2024 16:13

Convert SingleSelect to FC

4dd3fdd

Refactor MultiSelect to FC

f11a658

Add changeset

2f163c8

make sure props desconstruction is equivalent with previous renderOpe…

e02ada1

…ner function since that's where sharedProps is applied

beaesguerra self-assigned this Nov 23, 2024

fix comment

32b4f84

beaesguerra force-pushed the dropdown-fc branch from cad7bd0 to 32b4f84 Compare November 25, 2024 20:24

beaesguerra commented Nov 25, 2024

View reviewed changes

beaesguerra marked this pull request as ready for review November 25, 2024 22:37

khan-actions-bot requested a review from a team November 25, 2024 22:38

jandrade approved these changes Nov 27, 2024

View reviewed changes

Merge branch 'main' into dropdown-fc

388de15

beaesguerra changed the base branch from dropdown-updates to main December 2, 2024 23:23

Merge branch 'main' into dropdown-fc

e08647d

beaesguerra merged commit c7178e1 into main Dec 10, 2024
14 checks passed

beaesguerra deleted the dropdown-fc branch December 10, 2024 20:59

beaesguerra mentioned this pull request Dec 10, 2024

SingleSelect validation props #2376

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert MultiSelect and SingleSelect to functional components #2370

Convert MultiSelect and SingleSelect to functional components #2370

beaesguerra commented Nov 23, 2024 •

edited

Loading

changeset-bot bot commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

jandrade Nov 27, 2024

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

beaesguerra Nov 25, 2024

khan-actions-bot commented Nov 25, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited

Loading

jandrade left a comment

jandrade Nov 27, 2024

codecov bot commented Dec 10, 2024

	// Whether or not the dropdown is open.
	const [open, setOpen] = React.useState(false);

	// The text input to filter the items by their label. Defaults to an empty
	// string.
	const [searchText, setSearchText] = React.useState("");

	// The selected values that are set when the dropdown is opened. We use this
	// to move the selected items to the top when the dropdown is re-opened.
	const [lastSelectedValues, setLastSelectedValues] = React.useState<
	string[]
	>([]);

	// The DOM reference to the opener element. This is mainly used to set focus
	// to this element, and also to pass the reference to Popper.js.
	const [openerElement, setOpenerElement] = React.useState<HTMLElement>();

	// Merge custom labels with the default ones
	const labels = {...defaultLabels, ...propLabels};

	const {
	id,
	light = false,
	opener,
	testId,
	alignment = "left",
	dropdownStyle,
	implicitAllEnabled,
	isFilterable,
	labels: propLabels,
	onChange,
	onToggle,
	opened,
	selectedValues = [],
	shortcuts = false,
	style,
	className,
	"aria-invalid": ariaInvalid,
	"aria-required": ariaRequired,
	disabled = false,
	error = false,
	children,
	dropdownId,
	...sharedProps
	} = props;

	React.useEffect(() => {
	// Used to sync the `opened` state when this component acts as a controlled component
	if (disabled) {
	// open should always be false if select is disabled
	setOpen(false);
	} else if (typeof opened === "boolean") {
	setOpen(opened);
	}
	}, [disabled, opened]);

Convert MultiSelect and SingleSelect to functional components #2370

Convert MultiSelect and SingleSelect to functional components #2370

Conversation

beaesguerra commented Nov 23, 2024 • edited Loading

Summary:

Test plan:

changeset-bot bot commented Nov 23, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 23, 2024 • edited Loading

github-actions bot commented Nov 23, 2024 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

khan-actions-bot commented Nov 25, 2024 • edited Loading

Gerald

github-actions bot commented Nov 25, 2024 • edited Loading

npm Snapshot: Published

jandrade left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Dec 10, 2024

Codecov Report

beaesguerra commented Nov 23, 2024 •

edited

Loading

changeset-bot bot commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

github-actions bot commented Nov 23, 2024 •

edited

Loading

khan-actions-bot commented Nov 25, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited

Loading