Skip to content

Button: new variants #3931

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

Merged
merged 17 commits into from
Jan 22, 2025
Merged

Button: new variants #3931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d02a05e
new variant
gabrielpereirapinheiro Jan 7, 2025
861a001
adding new color
gabrielpereirapinheiro Jan 9, 2025
c7f6240
removing hover
gabrielpereirapinheiro Jan 9, 2025
e628305
adding css
gabrielpereirapinheiro Jan 10, 2025
62c6f25
color
gabrielpereirapinheiro Jan 16, 2025
ddf911f
fixing color
gabrielpereirapinheiro Jan 16, 2025
4737a03
Merge branch 'master' into Gabriel/NewButtonVariant
gabrielpereirapinheiro Jan 16, 2025
f62910b
fixing lint
gabrielpereirapinheiro Jan 16, 2025
e8c0ccd
Merge branch 'Gabriel/NewButtonVariant' of https://github.com/gabriel…
gabrielpereirapinheiro Jan 16, 2025
59d7b3f
fixing jso
gabrielpereirapinheiro Jan 16, 2025
64f48c5
fixing
gabrielpereirapinheiro Jan 16, 2025
eb512e8
fixing classic
gabrielpereirapinheiro Jan 17, 2025
04ad689
fixing classic
gabrielpereirapinheiro Jan 17, 2025
a91d112
updated tests
gabrielpereirapinheiro Jan 17, 2025
59eb625
fixing snap
gabrielpereirapinheiro Jan 21, 2025
32775f4
Merge branch 'master' into Gabriel/NewButtonVariant
gabrielpereirapinheiro Jan 21, 2025
bc11e3c
fixing snap
gabrielpereirapinheiro Jan 21, 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
2 changes: 1 addition & 1 deletion docs/examples/button/colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Example() {
return (
<Box padding={4}>
<Flex gap={6} height="100%" width="100%" wrap>
{['gray', 'red', 'blue', 'transparent', 'transparentWhiteText'].map((color) => (
{['gray', 'red', 'transparent', 'transparentWhiteText', 'dark', 'light'].map((color) => (
<Flex key={color} direction="column" gap={2}>
<Box
alignItems="center"
Expand Down
8 changes: 6 additions & 2 deletions docs/examples/buttonlink/colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ export default function Example() {
return (
<Box padding={4}>
<Flex gap={6} height="100%" width="100%" wrap>
{['gray', 'red', 'transparent'].map((color) => {
const colorCopy: 'gray' | 'red' | 'transparent' = color as 'gray' | 'red' | 'transparent';
{['gray', 'red', 'transparent', 'dark'].map((color) => {
const colorCopy: 'gray' | 'red' | 'transparent' | 'dark' = color as
| 'gray'
| 'red'
| 'transparent'
| 'dark';

return (
<Flex key={color} direction="column" gap={2}>
Expand Down
56 changes: 52 additions & 4 deletions packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,28 @@
"value": "#1f1f1f"
}
},
"dark": {
"default": {
"value": "{color.background.dark}"
},
"hover": {
"value": "#000000"
},
"active": {
"value": "#000000"
}
},
"light": {
"default": {
"value": "{color.background.light}"
},
"hover": {
"value": "#F8F7F2"
},
"active": {
"value": "#F8F7F2"
}
},
"gray": {
"default": {
"value": "{color.background.neutral.value}"
Expand Down
22 changes: 22 additions & 0 deletions packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,28 @@
"value": "{color.background.secondary.base.value}"
}
},
"dark": {
"default": {
"value": "{color.background.dark}"
},
"hover": {
"value": "#000000"
},
"active": {
"value": "#000000"
}
},
"light": {
"default": {
"value": "{color.background.light}"
},
"hover": {
"value": "#F8F7F2"
},
"active": {
"value": "#F8F7F2"
}
},
"gray": {
"default": {
"value": "{color.background.neutral.value}"
Expand Down
23 changes: 22 additions & 1 deletion packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,28 @@
}
}
},
"dark": {
"default": {
"value": "{sema.color.background.dark.value}"
},
"hover": {
"value": "{sema.color.hover.background.dark.value}"
},
"active": {
"value": "{sema.color.pressed.background.dark.value}"
}
},
"light": {
"default": {
"value": "{sema.color.background.light.value}"
},
"hover": {
"value": "{sema.color.hover.background.light.value}"
},
"active": {
"value": "{sema.color.pressed.background.light.value}"
}
},
"elevation": {
"default": {
"value": "{sema.color.background.elevation.value}"
Expand All @@ -129,7 +151,6 @@
"value": "{sema.color.background.disabled.value}"
}
},

"gray": {
"default": {
"value": "{sema.color.background.tertiary.value}"
Expand Down
22 changes: 22 additions & 0 deletions packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,28 @@
"value": "{sema.color.background.disabled.value}"
}
},
"dark": {
"default": {
"value": "{sema.color.background.dark.value}"
},
"hover": {
"value": "{sema.color.hover.background.dark.value}"
},
"active": {
"value": "{sema.color.pressed.background.dark.value}"
}
},
"light": {
"default": {
"value": "{sema.color.background.light.value}"
},
"hover": {
"value": "{sema.color.hover.background.light.value}"
},
"active": {
"value": "{sema.color.pressed.background.light.value}"
}
},
"gray": {
"default": {
"value": "{sema.color.background.tertiary.value}"
Expand Down
24 changes: 24 additions & 0 deletions packages/gestalt/src/Button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,3 +201,27 @@ a.lgVr:focus {
.white:active {
background-color: var(--color-background-button-white-active);
}

.light {
background-color: var(--color-background-light);
}

.light:hover {
background-color: var(--color-background-button-light-hover);
}

.light:active {
background-color: var(--color-background-button-light-active);
}

.dark {
background-color: var(--color-background-dark);
}

.dark:hover {
background-color: var(--color-background-button-dark-hover);
}

.dark:active {
background-color: var(--color-background-button-dark-active);
}
7 changes: 5 additions & 2 deletions packages/gestalt/src/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const DEFAULT_TEXT_COLORS = {
semiTransparentWhite: 'default',
transparentWhiteText: 'inverse',
white: 'default',
light: 'dark',
dark: 'light',
} as const;

const SIZE_NAME_TO_PIXEL = {
Expand Down Expand Up @@ -65,7 +67,9 @@ type Props = {
| 'transparent'
| 'semiTransparentWhite'
| 'transparentWhiteText'
| 'white';
| 'white'
| 'dark'
| 'light';
/**
* Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
*/
Expand Down Expand Up @@ -251,7 +255,6 @@ const ButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function Butto
const isDarkModeRed = isDarkMode && color === 'red';

const colorClass = color === 'transparentWhiteText' && !isInVRExperiment ? 'transparent' : color;

const { isFocusVisible } = useFocusVisible();

const sharedTypeClasses = isInVRExperiment
Expand Down
2 changes: 2 additions & 0 deletions packages/gestalt/src/ButtonLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const DEFAULT_TEXT_COLORS = {
semiTransparentWhite: 'default',
transparentWhiteText: 'inverse',
white: 'default',
light: 'dark',
dark: 'light',
} as const;

const SIZE_NAME_TO_PIXEL = {
Expand Down
72 changes: 72 additions & 0 deletions packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,12 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
--color-background-button-white-default: #030303;
--color-background-button-white-hover: #121212;
--color-background-button-white-active: #1f1f1f;
--color-background-button-dark-default: #111111;
--color-background-button-dark-hover: #000000;
--color-background-button-dark-active: #000000;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #f8f7f2;
--color-background-button-gray-default: #cdcdcd;
--color-background-button-gray-hover: #919191;
--color-background-button-gray-active: #9b9b9b;
Expand Down Expand Up @@ -741,6 +747,12 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
--color-background-button-white-hover: #f0f0f0;
--color-background-button-white-active: #e0e0e0;
--color-background-button-white-disabled: #e9e9e9;
--color-background-button-dark-default: #111111;
--color-background-button-dark-hover: #000000;
--color-background-button-dark-active: #000000;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #f8f7f2;
--color-background-button-gray-default: #767676;
--color-background-button-gray-hover: #878787;
--color-background-button-gray-active: #828282;
Expand Down Expand Up @@ -1265,6 +1277,12 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
--color-background-button-white-hover: #f0f0f0;
--color-background-button-white-active: #e0e0e0;
--color-background-button-white-disabled: #e9e9e9;
--color-background-button-dark-default: #111111;
--color-background-button-dark-hover: #000000;
--color-background-button-dark-active: #000000;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #f8f7f2;
--color-background-button-gray-default: #767676;
--color-background-button-gray-hover: #878787;
--color-background-button-gray-active: #828282;
Expand Down Expand Up @@ -1789,6 +1807,12 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
--color-background-button-white-hover: #f0f0f0;
--color-background-button-white-active: #e0e0e0;
--color-background-button-white-disabled: #e9e9e9;
--color-background-button-dark-default: #111111;
--color-background-button-dark-hover: #000000;
--color-background-button-dark-active: #000000;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #f8f7f2;
--color-background-button-gray-default: #767676;
--color-background-button-gray-hover: #878787;
--color-background-button-gray-active: #828282;
Expand Down Expand Up @@ -2309,6 +2333,12 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
--color-background-button-white-default: #030303;
--color-background-button-white-hover: #121212;
--color-background-button-white-active: #1f1f1f;
--color-background-button-dark-default: #111111;
--color-background-button-dark-hover: #000000;
--color-background-button-dark-active: #000000;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #f8f7f2;
--color-background-button-gray-default: #cdcdcd;
--color-background-button-gray-hover: #919191;
--color-background-button-gray-active: #9b9b9b;
Expand Down Expand Up @@ -3360,6 +3390,12 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
--color-background-button-tertiary-active: rgba(57, 57, 55, 0.9);
--color-background-button-tertiary-disabled-default: rgba(255, 255, 255, 0);
--color-background-button-tertiary-disabled-selected: #2e2e2d;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-elevation-default: #2e2e2d;
--color-background-button-elevation-hover: #242423;
--color-background-button-elevation-active: #393937;
Expand Down Expand Up @@ -4373,6 +4409,12 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -5383,6 +5425,12 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -6393,6 +6441,12 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -7403,6 +7457,12 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -8413,6 +8473,12 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -9423,6 +9489,12 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-dark-default: #000000;
--color-background-button-dark-hover: #242423;
--color-background-button-dark-active: #393937;
--color-background-button-light-default: #ffffff;
--color-background-button-light-hover: #f8f7f2;
--color-background-button-light-active: #ebebe5;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down
Loading