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

fix(Button): align disabled treatment to latest design #1931

Merged
merged 1 commit into from
May 9, 2024
Merged

fix(Button): align disabled treatment to latest design #1931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
89 changes: 84 additions & 5 deletions src/components/Button/Button-v2.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
justify-content: center;

width: 100%;

.button--sm & {
/* Offset to better align text in small button */
transform: translateY(-1px);
}
}

.button__text.button--is-loading {
Expand Down Expand Up @@ -70,6 +75,7 @@
min-width: 3rem;
max-width: 12rem;
max-height: 1.5rem;

}

.button--full-width {
Expand All @@ -78,6 +84,7 @@

/**
* Anatomy and iconLayout (w/ size)
* lg=40, md=32, sm=24 when layout is icon-only
*/
.button--layout-icon-only {
min-width: unset;
Expand All @@ -93,14 +100,17 @@

.button--lg.button--layout-icon-only {
padding: 0.5rem;
width: 2.5rem;
}

.button--md.button--layout-icon-only {
padding: 0.5rem
padding: 0.5rem;
width: 2rem;
}

.button--sm.button--layout-icon-only {
padding: 0.25rem;
width: 1.5rem;
}

.button:focus-visible {
Expand All @@ -116,6 +126,7 @@

/**
* Rank & Emphasis
* TODO-AH: nest the states under the relevant variants/ranks
*/
.button--primary.button--variant-default {
color: var(--eds-theme-color-text-utility-inverse);
Expand Down Expand Up @@ -151,14 +162,62 @@
.button--secondary.button--variant-critical {
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
border-color: currentColor;
background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
}

.button--tertiary.button--variant-critical {
color: var(--eds-theme-color-background-utility-critical-high-emphasis);
border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
}

.button--primary.button--variant-neutral {
color: var(--eds-theme-color-text-utility-inverse);
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis);

&:hover {
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
}

&:active {
border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
}
}

.button--secondary.button--variant-neutral {
color: var(--eds-theme-color-text-utility-default-secondary);
border-color: currentColor;
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);

&:hover {
border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
}

&:active {
border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
}
}

.button--tertiary.button--variant-neutral {
color: var(--eds-theme-color-text-utility-default-secondary);
border-color: transparent;
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);

&:hover {
border-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
}

&:active {
border-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
}
}

/**
* Inverse
*/
Expand All @@ -185,23 +244,43 @@
* Disabled
*/

.button--variant-default.button--disabled,
.button--variant-critical.button--disabled {
.button--primary.button--variant-default.button--disabled,
.button--primary.button--variant-critical.button--disabled,
.button--primary.button--variant-neutral.button--disabled {
color: var(--eds-theme-color-text-utility-disabled-primary);
border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);

pointer-events: none;
}

.button--variant-inverse.button--disabled {
.button--primary.button--variant-inverse.button--disabled {
color: var(--eds-theme-color-text-utility-inverse-disabled);
border-color: var(--eds-theme-color-background-utility-inverse-disabled);
background-color: var(--eds-theme-color-background-utility-inverse-disabled);

pointer-events: none;
}

.button--secondary.button--variant-default.button--disabled,
.button--secondary.button--variant-critical.button--disabled,
.button--secondary.button--variant-neutral.button--disabled {
color: var(--eds-theme-color-text-utility-disabled-primary);
border-color: var(--eds-theme-color-border-disabled);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);

pointer-events: none;
}

.button--tertiary.button--variant-default.button--disabled,
.button--tertiary.button--variant-critical.button--disabled,
.button--tertiary.button--variant-neutral.button--disabled {
color: var(--eds-theme-color-text-utility-disabled-primary);
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);

pointer-events: none;
}

/**
* States
*/
Expand Down
11 changes: 11 additions & 0 deletions src/components/Button/Button-v2.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,17 @@ export const CriticalRanks: StoryObj<Args> = {
render: DefaultRanks.render,
};

/**
* There is also a neutral variant, to combine into other components, or provide a muted appearance.
*/
export const NeutralRanks: StoryObj<Args> = {
args: {
...DefaultRanks.args,
variant: 'neutral',
},
render: DefaultRanks.render,
};

/**
* Each rank also includes an inverse variant, for use on dark backgrounds.
*/
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button-v2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import React from 'react';
import { Button } from './Button-v2';
import * as stories from './Button-v2.stories';

describe('<Button />', () => {
describe('<Button /> (v2)', () => {
generateSnapshots(stories as StoryFile);

it('renders the text in the button', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export type ButtonV2Props<ExtendedElement = unknown> =
*
* **Default is `"default"`**.
*/
variant?: 'default' | 'critical' | 'inverse';
variant?: 'default' | 'neutral' | 'critical' | 'inverse';

/**
* Whether the width of the button is set to the full layout.
Expand Down
63 changes: 50 additions & 13 deletions src/components/Button/__snapshots__/Button-v2.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
exports[`<Button /> (v2) CriticalRanks story renders snapshot 1`] = `
<div
class="flex gap-1"
>
Expand Down Expand Up @@ -37,7 +37,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> Default story renders snapshot 1`] = `
exports[`<Button /> (v2) Default story renders snapshot 1`] = `
<button
class="button button--layout-none button--primary button--lg button--variant-default"
type="button"
Expand All @@ -50,7 +50,7 @@ exports[`<Button /> Default story renders snapshot 1`] = `
</button>
`;

exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
exports[`<Button /> (v2) DefaultRanks story renders snapshot 1`] = `
<div
class="flex gap-1"
>
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> Disabled story renders snapshot 1`] = `
exports[`<Button /> (v2) Disabled story renders snapshot 1`] = `
<div
class="flex gap-1"
>
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> FullWidths story renders snapshot 1`] = `
exports[`<Button /> (v2) FullWidths story renders snapshot 1`] = `
<div
class="flex items-center gap-1"
>
Expand Down Expand Up @@ -164,7 +164,7 @@ exports[`<Button /> FullWidths story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> IconLayouts story renders snapshot 1`] = `
exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
<div
class="flex items-center gap-1"
>
Expand Down Expand Up @@ -243,7 +243,7 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> InverseRanks story renders snapshot 1`] = `
exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
<div
class="bg-[var(--eds-color-blue-850)] p-1"
>
Expand Down Expand Up @@ -284,7 +284,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> LoadingStates story renders snapshot 1`] = `
exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
<div
class="flex items-center gap-1"
>
Expand Down Expand Up @@ -465,7 +465,44 @@ exports[`<Button /> LoadingStates story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> Sizes story renders snapshot 1`] = `
exports[`<Button /> (v2) NeutralRanks story renders snapshot 1`] = `
<div
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-neutral"
type="button"
>
<span
class="button__text"
>
Primary
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-neutral"
type="button"
>
<span
class="button__text"
>
Secondary
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-neutral"
type="button"
>
<span
class="button__text"
>
Tertiary
</span>
</button>
</div>
`;

exports[`<Button /> (v2) Sizes story renders snapshot 1`] = `
<div
class="flex items-center gap-1"
>
Expand Down Expand Up @@ -502,7 +539,7 @@ exports[`<Button /> Sizes story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
exports[`<Button /> (v2) TertiaryStandalone story renders snapshot 1`] = `
<button
class="button button--context-standalone button--layout-none button--tertiary button--lg button--variant-default"
type="button"
Expand All @@ -515,7 +552,7 @@ exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
</button>
`;

exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
<div>
Lorem ipsum dolor sit amet,

Expand All @@ -535,7 +572,7 @@ exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
</div>
`;

exports[`<Button /> passes class names down properly 1`] = `
exports[`<Button /> (v2) passes class names down properly 1`] = `
<button
class="button button--layout-none button--primary button--lg button--variant-default exampleClassName"
data-testid="example-class-name"
Expand All @@ -549,7 +586,7 @@ exports[`<Button /> passes class names down properly 1`] = `
</button>
`;

exports[`<Button /> passes test ids down properly 1`] = `
exports[`<Button /> (v2) passes test ids down properly 1`] = `
<button
class="button button--layout-none button--primary button--lg button--variant-default"
data-testid="example-test-id"
Expand Down
Loading