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-1847: Dropdown - Update SelectOpener to match design specs #2422

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

WB-1847: Dropdown - Update SelectOpener to match design specs #2422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75325a0
Update light variant to match design specs
jandrade Jan 9, 2025
efdd4ef
docs(changeset): Add `pressing` tokens to actions
jandrade Jan 9, 2025
d365a31
docs(changeset): Update styles to match design specs
jandrade Jan 9, 2025
0a073a8
[dropdown-opener-light-fix] Reorg story layout
Jan 10, 2025
ed1f690
[dropdown-opener-light-fix] Include selected variant in MultiSelect a…
Jan 10, 2025
6a28134
[dropdown-opener-light-fix] Use semanticColor in Dropdown opener
Jan 10, 2025
3ae0350
[dropdown-opener-light-fix] Remove a redundant chromatic snapshot
Jan 10, 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/tender-points-melt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-dropdown": minor
---

SelectOpener: Update styles to match design specs
5 changes: 5 additions & 0 deletions .changeset/yellow-mails-fold.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-tokens": minor
---

Add `pressing` tokens to actions
33 changes: 15 additions & 18 deletions __docs__/foundations-color.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,12 @@ how to use these colors depending on the context.
For buttons, links, and controls to communicate the presence and meaning of
interaction.

<View style={styles.grid}>
<ColorGroup colors={semanticColor.action.primary} group="action.primary" />
<ColorGroup
colors={semanticColor.action.destructive}
group="action.destructive"
/>
<ColorGroup
colors={semanticColor.action.disabled}
group="action.disabled"
/>
</View>
<ColorGroup colors={semanticColor.action.primary} group="action.primary" />
<ColorGroup
colors={semanticColor.action.destructive}
group="action.destructive"
/>
<ColorGroup colors={semanticColor.action.disabled} group="action.disabled" />

### Status

Expand Down Expand Up @@ -389,10 +384,12 @@ content is accessible to all users.

For more detail, you can check the following Success Criteria documents:

- <a
href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color">Use of Color</a>
- <a
href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum">Contrast (minimum)</a>
- <a
href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast">Non-text
Contrast (Level AA)</a>
- <a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color">
Use of Color
</a>
- <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum">
Contrast (minimum)
</a>
- <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast">
Non-text Contrast (Level AA)
</a>
22 changes: 21 additions & 1 deletion __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 @@ -94,6 +94,26 @@ const KindVariants = ({light}: {light: boolean}) => {
{selectItems}
</MultiSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Selected
</LabelMedium>
<MultiSelect
{...defaultProps}
selectedValues={["1", "2"]}
light={light}
>
{selectItems}
</MultiSelect>
</View>
</>
)}
</ThemeSwitcherContext.Consumer>
Expand Down Expand Up @@ -150,7 +170,7 @@ const styles = StyleSheet.create({
},
grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 250px)",
gridTemplateColumns: "repeat(4, 250px)",
gap: spacing.large_24,
},
gridRow: {
Expand Down
22 changes: 21 additions & 1 deletion __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 @@ -95,6 +95,26 @@ const KindVariants = ({light}: {light: boolean}) => {
{selectItems}
</SingleSelect>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium style={light && {color: color.white}}>
Selected
</LabelMedium>
<SingleSelect
{...defaultProps}
selectedValue="1"
light={light}
>
{selectItems}
</SingleSelect>
</View>
</>
)}
</ThemeSwitcherContext.Consumer>
Expand Down Expand Up @@ -151,7 +171,7 @@ const styles = StyleSheet.create({
},
grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 250px)",
gridTemplateColumns: "repeat(4, 250px)",
gap: spacing.large_24,
},
gridRow: {
Expand Down
7 changes: 7 additions & 0 deletions __docs__/wonder-blocks-dropdown/single-select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,13 @@ export const Light: StoryComponentType = {
</View>
);
},
parameters: {
chromatic: {
// Disabling because it is already covered in "All variants".
// @see single-select-variants.stories.tsx
disableSnapshot: true,
},
},
};

const optionItems = allCountries.map(([code, translatedName]) => (
Expand Down
Loading
Loading