Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WB-1851.1] Dropdown: Remove light prop on dropdowns #2430

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[WB-1851.1] Dropdown: Remove light prop on dropdowns #2430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
482fe5f
[rm-light-dropdown] Remove light variant on wonder-blocks-dropdown
Jan 15, 2025
8de5ab8
[rm-light-dropdown] docs(changeset): Removes the `light` prop from wo…
Jan 15, 2025
36792a8
[rm-light-dropdown] Fix lint issue
Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tricky-yaks-mate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-dropdown": major
---

Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`.
9 changes: 0 additions & 9 deletions __docs__/wonder-blocks-dropdown/base-select.argtypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,6 @@ const argTypes: ArgTypes = {
},
},

light: {
description: `Whether to display the "light" version of this component
instead, for use when the component is used on a dark background.`,
table: {
category: "States",
defaultValue: {summary: "false"},
},
},

opened: {
control: "boolean",
description:
Expand Down
5 changes: 0 additions & 5 deletions __docs__/wonder-blocks-dropdown/combobox.argtypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,6 @@ const argTypes: ArgTypes = {
category: "Visual style",
},
},
light: {
table: {
category: "Visual style",
},
},

/**
* Events
Expand Down
1 change: 0 additions & 1 deletion __docs__/wonder-blocks-dropdown/combobox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ const defaultArgs = {
placeholder: "Select an item",
testId: "",
autoComplete: "none",
light: false,
loading: false,
};

Expand Down
117 changes: 21 additions & 96 deletions __docs__/wonder-blocks-dropdown/multi-select-variants.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import {StyleSheet} from "aphrodite";
import type {Meta, StoryObj} from "@storybook/react";

import {View} from "@khanacademy/wonder-blocks-core";
import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {spacing} from "@khanacademy/wonder-blocks-tokens";
import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";

Expand All @@ -14,11 +13,8 @@ import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
*/
export default {
title: "Packages / Dropdown / MultiSelect / All Variants",
parameters: {
docs: {
autodocs: false,
},
},
render: () => <AllVariants />,
tags: ["!autodocs"],
} as Meta;

type StoryComponentType = StoryObj<typeof MultiSelect>;
Expand All @@ -33,121 +29,50 @@ const selectItems = [
<OptionItem label="item 3" value="3" />,
];

const KindVariants = ({light}: {light: boolean}) => {
return (
<ThemeSwitcherContext.Consumer>
{(theme) => (
<>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Default
</LabelMedium>
<MultiSelect {...defaultProps} light={light}>
{selectItems}
</MultiSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Disabled
</LabelMedium>
<MultiSelect
{...defaultProps}
light={light}
disabled={true}
>
{selectItems}
</MultiSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Error
</LabelMedium>
<MultiSelect
{...defaultProps}
light={light}
error={true}
>
{selectItems}
</MultiSelect>
</View>
</>
)}
</ThemeSwitcherContext.Consumer>
);
};

const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
const AllVariants = ({themeName = "Default"}: {themeName?: string}) => (
<View style={{marginBottom: spacing.large_24}}>
<HeadingLarge>{themeName} theme</HeadingLarge>
<View style={styles.grid}>
<KindVariants light={false} />
<KindVariants light={true} />
<View style={[styles.gridRow]}>
<LabelMedium>Default</LabelMedium>
<MultiSelect {...defaultProps}>{selectItems}</MultiSelect>
</View>
<View style={[styles.gridRow]}>
<LabelMedium>Disabled</LabelMedium>
<MultiSelect {...defaultProps} disabled={true}>
{selectItems}
</MultiSelect>
</View>
<View style={[styles.gridRow]}>
<LabelMedium>Error</LabelMedium>
<MultiSelect {...defaultProps} error={true}>
{selectItems}
</MultiSelect>
</View>
</View>
</View>
);

const AllVariants = () => (
<>
<VariantsByTheme />
</>
);

export const Default: StoryComponentType = {
render: AllVariants,
};
export const Default: StoryComponentType = {};

export const Hover: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {hover: true}},
};

export const Focus: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {focusVisible: true}},
};

export const HoverFocus: StoryComponentType = {
name: "Hover + Focus",
render: AllVariants,
parameters: {pseudo: {hover: true, focusVisible: true}},
};

export const Active: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {active: true}},
};

const styles = StyleSheet.create({
darkDefault: {
backgroundColor: color.darkBlue,
},
darkKhanmigo: {
backgroundColor: color.eggplant,
},
grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 250px)",
Expand Down
1 change: 0 additions & 1 deletion __docs__/wonder-blocks-dropdown/multi-select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export default {
error: false,
opened: false,
disabled: false,
light: false,
shortcuts: false,
implicitAllEnabled: false,
id: "",
Expand Down
117 changes: 21 additions & 96 deletions __docs__/wonder-blocks-dropdown/single-select-variants.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import {StyleSheet} from "aphrodite";
import type {Meta, StoryObj} from "@storybook/react";

import {View} from "@khanacademy/wonder-blocks-core";
import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {spacing} from "@khanacademy/wonder-blocks-tokens";
import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";

Expand All @@ -14,11 +13,8 @@ import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
*/
export default {
title: "Packages / Dropdown / SingleSelect / All Variants",
parameters: {
docs: {
autodocs: false,
},
},
render: () => <AllVariants />,
tags: ["!autodocs"],
} as Meta;

type StoryComponentType = StoryObj<typeof SingleSelect>;
Expand All @@ -34,121 +30,50 @@ const selectItems = [
<OptionItem label="item 3" value="3" />,
];

const KindVariants = ({light}: {light: boolean}) => {
return (
<ThemeSwitcherContext.Consumer>
{(theme) => (
<>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Default
</LabelMedium>
<SingleSelect {...defaultProps} light={light}>
{selectItems}
</SingleSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Disabled
</LabelMedium>
<SingleSelect
{...defaultProps}
light={light}
disabled={true}
>
{selectItems}
</SingleSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Error
</LabelMedium>
<SingleSelect
{...defaultProps}
light={light}
error={true}
>
{selectItems}
</SingleSelect>
</View>
</>
)}
</ThemeSwitcherContext.Consumer>
);
};

const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
const AllVariants = ({themeName = "Default"}: {themeName?: string}) => (
<View style={{marginBottom: spacing.large_24}}>
<HeadingLarge>{themeName} theme</HeadingLarge>
<View style={styles.grid}>
<KindVariants light={false} />
<KindVariants light={true} />
<View style={[styles.gridRow]}>
<LabelMedium>Default</LabelMedium>
<SingleSelect {...defaultProps}>{selectItems}</SingleSelect>
</View>
<View style={[styles.gridRow]}>
<LabelMedium>Disabled</LabelMedium>
<SingleSelect {...defaultProps} disabled={true}>
{selectItems}
</SingleSelect>
</View>
<View style={[styles.gridRow]}>
<LabelMedium>Error</LabelMedium>
<SingleSelect {...defaultProps} error={true}>
{selectItems}
</SingleSelect>
</View>
</View>
</View>
);

const AllVariants = () => (
<>
<VariantsByTheme />
</>
);

export const Default: StoryComponentType = {
render: AllVariants,
};
export const Default: StoryComponentType = {};

export const Hover: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {hover: true}},
};

export const Focus: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {focusVisible: true}},
};

export const HoverFocus: StoryComponentType = {
name: "Hover + Focus",
render: AllVariants,
parameters: {pseudo: {hover: true, focusVisible: true}},
};

export const Active: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {active: true}},
};

const styles = StyleSheet.create({
darkDefault: {
backgroundColor: color.darkBlue,
},
darkKhanmigo: {
backgroundColor: color.eggplant,
},
grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 250px)",
Expand Down
Loading
Loading