Skip to content

Commit d8d41dc

Browse files
jandradejandrade
authored
[WB-1851.1] Dropdown: Remove light prop on dropdowns (#2430)
## Summary: Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`. This is based on the discussion with the design team where we decided to remove the `light` prop from Wonder Blocks due to its low usage and to prepare for the upcoming design changes. Issue: https://khanacademy.atlassian.net/browse/WB-1851 ## Test plan: Verify that the `light` prop is removed from `SingleSelect` and `MultiSelect`. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra 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), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2430
1 parent d8c91db commit d8d41dc

15 files changed

+123
-420
lines changed

‎.changeset/tricky-yaks-mate.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/wonder-blocks-dropdown": major
3+
---
4+
5+
Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`.

‎__docs__/wonder-blocks-dropdown/base-select.argtypes.ts

-9
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,6 @@ const argTypes: ArgTypes = {
8686
},
8787
},
8888

89-
light: {
90-
description: `Whether to display the "light" version of this component
91-
instead, for use when the component is used on a dark background.`,
92-
table: {
93-
category: "States",
94-
defaultValue: {summary: "false"},
95-
},
96-
},
97-
9889
opened: {
9990
control: "boolean",
10091
description:

‎__docs__/wonder-blocks-dropdown/combobox.argtypes.ts

-5
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,6 @@ const argTypes: ArgTypes = {
3333
category: "Visual style",
3434
},
3535
},
36-
light: {
37-
table: {
38-
category: "Visual style",
39-
},
40-
},
4136

4237
/**
4338
* Events

‎__docs__/wonder-blocks-dropdown/combobox.stories.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const defaultArgs = {
6464
placeholder: "Select an item",
6565
testId: "",
6666
autoComplete: "none",
67-
light: false,
6867
loading: false,
6968
};
7069

‎__docs__/wonder-blocks-dropdown/multi-select-variants.stories.tsx

+34-94
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,19 @@ import {StyleSheet} from "aphrodite";
33
import type {Meta, StoryObj} from "@storybook/react";
44

55
import {View} from "@khanacademy/wonder-blocks-core";
6-
import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
7-
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
8-
import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
6+
import {spacing} from "@khanacademy/wonder-blocks-tokens";
7+
import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
98
import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
9+
import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
1010

1111
/**
1212
* The following stories are used to generate the pseudo states for the
1313
* multi select component. This is only used for visual testing in Chromatic.
1414
*/
1515
export default {
1616
title: "Packages / Dropdown / MultiSelect / All Variants",
17-
parameters: {
18-
docs: {
19-
autodocs: false,
20-
},
21-
},
17+
render: () => <AllVariants />,
18+
tags: ["!autodocs"],
2219
} as Meta;
2320

2421
type StoryComponentType = StoryObj<typeof MultiSelect>;
@@ -33,121 +30,64 @@ const selectItems = [
3330
<OptionItem label="item 3" value="3" />,
3431
];
3532

36-
const KindVariants = ({light}: {light: boolean}) => {
37-
return (
38-
<ThemeSwitcherContext.Consumer>
39-
{(theme) => (
40-
<>
41-
<View
42-
style={[
43-
styles.gridRow,
44-
light &&
45-
(theme === "khanmigo"
46-
? styles.darkKhanmigo
47-
: styles.darkDefault),
48-
]}
49-
>
50-
<LabelMedium style={light && {color: color.white}}>
51-
Default
52-
</LabelMedium>
53-
<MultiSelect {...defaultProps} light={light}>
33+
const AllVariants = ({themeName = "Default"}: {themeName?: string}) => (
34+
<View style={{marginBottom: spacing.large_24}}>
35+
<HeadingLarge>{themeName} theme</HeadingLarge>
36+
<View style={styles.grid}>
37+
<View style={[styles.gridRow]}>
38+
<LabeledField
39+
label="Default"
40+
field={
41+
<MultiSelect {...defaultProps}>
5442
{selectItems}
5543
</MultiSelect>
56-
</View>
57-
<View
58-
style={[
59-
styles.gridRow,
60-
light &&
61-
(theme === "khanmigo"
62-
? styles.darkKhanmigo
63-
: styles.darkDefault),
64-
]}
65-
>
66-
<LabelMedium style={light && {color: color.white}}>
67-
Disabled
68-
</LabelMedium>
69-
<MultiSelect
70-
{...defaultProps}
71-
light={light}
72-
disabled={true}
73-
>
44+
}
45+
/>
46+
</View>
47+
<View style={[styles.gridRow]}>
48+
<LabeledField
49+
label="Disabled"
50+
field={
51+
<MultiSelect {...defaultProps} disabled={true}>
7452
{selectItems}
7553
</MultiSelect>
76-
</View>
77-
<View
78-
style={[
79-
styles.gridRow,
80-
light &&
81-
(theme === "khanmigo"
82-
? styles.darkKhanmigo
83-
: styles.darkDefault),
84-
]}
85-
>
86-
<LabelMedium style={light && {color: color.white}}>
87-
Error
88-
</LabelMedium>
89-
<MultiSelect
90-
{...defaultProps}
91-
light={light}
92-
error={true}
93-
>
54+
}
55+
/>
56+
</View>
57+
<View style={[styles.gridRow]}>
58+
<LabeledField
59+
label="Error"
60+
field={
61+
<MultiSelect {...defaultProps} error={true}>
9462
{selectItems}
9563
</MultiSelect>
96-
</View>
97-
</>
98-
)}
99-
</ThemeSwitcherContext.Consumer>
100-
);
101-
};
102-
103-
const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
104-
<View style={{marginBottom: spacing.large_24}}>
105-
<HeadingLarge>{themeName} theme</HeadingLarge>
106-
<View style={styles.grid}>
107-
<KindVariants light={false} />
108-
<KindVariants light={true} />
64+
}
65+
/>
66+
</View>
10967
</View>
11068
</View>
11169
);
11270

113-
const AllVariants = () => (
114-
<>
115-
<VariantsByTheme />
116-
</>
117-
);
118-
119-
export const Default: StoryComponentType = {
120-
render: AllVariants,
121-
};
71+
export const Default: StoryComponentType = {};
12272

12373
export const Hover: StoryComponentType = {
124-
render: AllVariants,
12574
parameters: {pseudo: {hover: true}},
12675
};
12776

12877
export const Focus: StoryComponentType = {
129-
render: AllVariants,
13078
parameters: {pseudo: {focusVisible: true}},
13179
};
13280

13381
export const HoverFocus: StoryComponentType = {
13482
name: "Hover + Focus",
135-
render: AllVariants,
13683
parameters: {pseudo: {hover: true, focusVisible: true}},
13784
};
13885

13986
export const Active: StoryComponentType = {
140-
render: AllVariants,
14187
parameters: {pseudo: {active: true}},
14288
};
14389

14490
const styles = StyleSheet.create({
145-
darkDefault: {
146-
backgroundColor: color.darkBlue,
147-
},
148-
darkKhanmigo: {
149-
backgroundColor: color.eggplant,
150-
},
15191
grid: {
15292
display: "grid",
15393
gridTemplateColumns: "repeat(3, 250px)",

‎__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export default {
5959
error: false,
6060
opened: false,
6161
disabled: false,
62-
light: false,
6362
shortcuts: false,
6463
implicitAllEnabled: false,
6564
id: "",

0 commit comments

Comments
 (0)