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-1853] Button: Refactor theme to support semanticColor tokens #2431

Merged
merged 13 commits into from
Jan 29, 2025
+428 −235
Merged

[WB-1853] Button: Refactor theme to support semanticColor tokens #2431

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0a7ebce
[wb-button-semantic] Add light.destructive.disabled variant to Dark s…
Jan 16, 2025
e13036f
[wb-button-semantic] Add light.destructive.disabled variant to All va…
Jan 16, 2025
8cdb4d2
[wb-button-semantic] Use semanticColor in primary variant
Jan 16, 2025
0310bdf
[wb-button-semantic] docs(changeset): Use `semanticColor` in Button. …
Jan 16, 2025
c9e8252
[wb-button-semantic] Fix primary styles
Jan 20, 2025
cb0d2e8
[wb-button-semantic] Fix primary styles, adapt secondary styles
Jan 21, 2025
5752c53
[wb-button-semantic] Refactor tertiary variant
Jan 21, 2025
7ebe1f0
[wb-button-semantic] Refactor tertiary variant (fixes), update khanmi…
Jan 21, 2025
32452e0
[wb-button-semantic] Fix secondary bg color (light)
Jan 21, 2025
ab40c2d
[wb-button-semantic] Remove irrelevant unit tests
Jan 21, 2025
bf2bbce
[wb-button-semantic] Use new semantic tokens convention (filled, outl…
Jan 22, 2025
ed334a5
[wb-button-semantic] Address feedback
Jan 27, 2025
1b0bc80
[wb-button-semantic] Fix styles based on Chromatic feedback
Jan 29, 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/many-apes-play.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-button": patch
---

Use `semanticColor` in Button. This replaces the use of `color` primitive tokens in favor of semantic color tokens
26 changes: 20 additions & 6 deletions __docs__/wonder-blocks-button/button-variants.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@ import Button from "@khanacademy/wonder-blocks-button";
export default {
title: "Packages / Button / All Variants",
parameters: {
docs: {
autodocs: false,
},
chromatic: {
// NOTE: This is required to prevent Chromatic from cutting off the
// dark background in screenshots (accounts for all the space taken
// by the variants).
viewports: [1700],
},
},
tags: ["!autodocs"],
} as Meta;

type StoryComponentType = StoryObj<typeof Button>;
Expand Down Expand Up @@ -115,13 +113,29 @@ const KindVariants = ({light}: {light: boolean}) => {
{sizes.map((size) => (
<>
{colors.map((color) => (
<>
<VariantsGroup
size={size}
color={color}
light={light}
/>
{light && (
<VariantsGroup
size={size}
color={color}
disabled={true}
light={light}
/>
)}
</>
))}
{!light && (
<VariantsGroup
size={size}
color={color}
disabled={true}
light={light}
/>
))}
<VariantsGroup size={size} disabled={true} light={light} />
)}
</>
))}
</>
Expand Down
50 changes: 38 additions & 12 deletions __docs__/wonder-blocks-button/button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,26 +187,28 @@ WithColor.parameters = {
};

export const Dark: StoryComponentType = () => (
<View style={{backgroundColor: color.darkBlue, padding: spacing.medium_16}}>
<View style={{flexDirection: "row"}}>
<View
style={{
backgroundColor: color.darkBlue,
gap: spacing.medium_16,
padding: spacing.medium_16,
}}
>
<View style={{flexDirection: "row", gap: spacing.medium_16}}>
<Button onClick={() => {}} light={true}>
Hello, world!
</Button>
<Strut size={16} />
<Button onClick={() => {}} light={true} kind="secondary">
Hello, world!
</Button>
<Strut size={16} />
<Button onClick={() => {}} light={true} kind="tertiary">
Hello, world!
</Button>
</View>
<Strut size={16} />
<View style={{flexDirection: "row"}}>
<View style={{flexDirection: "row", gap: spacing.medium_16}}>
<Button onClick={() => {}} light={true} disabled={true}>
Hello, world!
</Button>
<Strut size={16} />
<Button
onClick={() => {}}
light={true}
Expand All @@ -215,7 +217,6 @@ export const Dark: StoryComponentType = () => (
>
Hello, world!
</Button>
<Strut size={16} />
<Button
onClick={() => {}}
light={true}
Expand All @@ -225,12 +226,10 @@ export const Dark: StoryComponentType = () => (
Hello, world!
</Button>
</View>
<Strut size={16} />
<View style={{flexDirection: "row"}}>
<View style={{flexDirection: "row", gap: spacing.medium_16}}>
<Button onClick={() => {}} light={true} color="destructive">
Hello, world!
</Button>
<Strut size={16} />
<Button
onClick={() => {}}
light={true}
Expand All @@ -239,7 +238,6 @@ export const Dark: StoryComponentType = () => (
>
Hello, world!
</Button>
<Strut size={16} />
<Button
onClick={() => {}}
light={true}
Expand All @@ -249,6 +247,34 @@ export const Dark: StoryComponentType = () => (
Hello, world!
</Button>
</View>
<View style={{flexDirection: "row", gap: spacing.medium_16}}>
<Button
onClick={() => {}}
disabled={true}
light={true}
color="destructive"
>
Hello, world!
</Button>
<Button
onClick={() => {}}
disabled={true}
light={true}
kind="secondary"
color="destructive"
>
Hello, world!
</Button>
<Button
onClick={() => {}}
disabled={true}
light={true}
kind="tertiary"
color="destructive"
>
Hello, world!
</Button>
</View>
</View>
);

Expand Down
46 changes: 0 additions & 46 deletions packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,50 +228,4 @@ describe("button with icon", () => {
expect(icon).toBeInTheDocument();
expect(icon).toHaveAttribute("aria-hidden", "true");
});

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: These tests no longer apply as tertiary buttons don't need any changes for the Khanmigo theme.

test("default theme tertiary button icon has no hover style", async () => {
// Arrange
render(
<Button kind="tertiary" testId={"button-icon-test"} endIcon={plus}>
Label
</Button>,
);

// Act
const button = await screen.findByTestId("button-icon-test");
const iconWrapper = await screen.findByTestId(
"button-icon-test-end-icon-wrapper",
);
await userEvent.hover(button);

// Assert
expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
});

test("Khanmigo tertiary button icon has hover style", async () => {
// Arrange
render(
<ThemeSwitcherContext.Provider value="khanmigo">
<Button
kind="tertiary"
testId={"button-icon-test"}
endIcon={plus}
>
Label
</Button>
</ThemeSwitcherContext.Provider>,
);

// Act
const button = await screen.findByTestId("button-icon-test");
const iconWrapper = await screen.findByTestId(
"button-icon-test-end-icon-wrapper",
);
await userEvent.hover(button);

// Assert
expect(iconWrapper).toHaveStyle(
`backgroundColor: ${color.fadedBlue16}`,
);
});
});
Loading
Loading