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

Jump to bottom

fix(Button): apply external styles when disabled #2060

Merged
merged 1 commit into from
Sep 26, 2024
Merged

fix(Button): apply external styles when disabled #2060

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
6 changes: 3 additions & 3 deletions src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ export const DefaultRanks: Story = {
render: (args) => {
return (
<div className="flex gap-1">
<Button {...args} rank="primary">
<Button {...args} className="btn-primary" rank="primary">
Primary
</Button>
<Button {...args} rank="secondary">
<Button {...args} className="btn-secondary" rank="secondary">
Secondary
</Button>
<Button {...args} rank="tertiary">
<Button {...args} className="btn-tertiary" rank="tertiary">
Tertiary
</Button>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
rank && styles[`button--${rank}`],
size && styles[`button--${size}`],
variant && styles[`button--variant-${variant}`],
className,
!isDisabled && className,
);

const buttonContentClassName = clsx(
Expand Down Expand Up @@ -186,7 +186,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(

// Wrap the button in a simple SPAN to allow for adding the not-allowed cursor
return isDisabled ? (
<span className={styles['button__disabled']}>{coreButton}</span>
<span className={clsx(className, styles['button__disabled'])}>
{coreButton}
</span>
) : (
coreButton
);
Expand Down
42 changes: 21 additions & 21 deletions src/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-critical"
class="button button--layout-none button--primary button--lg button--variant-critical btn-primary"
type="button"
>
<span
Expand All @@ -15,7 +15,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-critical"
class="button button--layout-none button--secondary button--lg button--variant-critical btn-secondary"
type="button"
>
<span
Expand All @@ -25,7 +25,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-critical"
class="button button--layout-none button--tertiary button--lg button--variant-critical btn-tertiary"
type="button"
>
<span
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-default"
class="button button--layout-none button--primary button--lg button--variant-default btn-primary"
type="button"
>
<span
Expand All @@ -65,7 +65,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-default"
class="button button--layout-none button--secondary button--lg button--variant-default btn-secondary"
type="button"
>
<span
Expand All @@ -75,7 +75,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-default"
class="button button--layout-none button--tertiary button--lg button--variant-default btn-tertiary"
type="button"
>
<span
Expand All @@ -92,7 +92,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
class="flex gap-1"
>
<span
class="button__disabled"
class="btn-primary button__disabled"
>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
Expand All @@ -107,7 +107,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
</button>
</span>
<span
class="button__disabled"
class="btn-secondary button__disabled"
>
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
Expand All @@ -122,7 +122,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
</button>
</span>
<span
class="button__disabled"
class="btn-tertiary button__disabled"
>
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
Expand Down Expand Up @@ -263,7 +263,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
class="flex gap-1"
>
<span
class="button__disabled"
class="btn-primary button__disabled"
>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
Expand All @@ -278,7 +278,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
</button>
</span>
<span
class="button__disabled"
class="btn-secondary button__disabled"
>
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
Expand All @@ -293,7 +293,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
</button>
</span>
<span
class="button__disabled"
class="btn-tertiary button__disabled"
>
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
Expand All @@ -319,7 +319,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-inverse"
class="button button--layout-none button--primary button--lg button--variant-inverse btn-primary"
type="button"
>
<span
Expand All @@ -329,7 +329,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-inverse"
class="button button--layout-none button--secondary button--lg button--variant-inverse btn-secondary"
type="button"
>
<span
Expand All @@ -339,7 +339,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-inverse"
class="button button--layout-none button--tertiary button--lg button--variant-inverse btn-tertiary"
type="button"
>
<span
Expand All @@ -360,7 +360,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-default"
class="button button--layout-none button--primary button--lg button--variant-default btn-primary"
disabled=""
type="button"
>
Expand All @@ -371,7 +371,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-default"
class="button button--layout-none button--secondary button--lg button--variant-default btn-secondary"
disabled=""
type="button"
>
Expand All @@ -382,7 +382,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-default"
class="button button--layout-none button--tertiary button--lg button--variant-default btn-tertiary"
disabled=""
type="button"
>
Expand Down Expand Up @@ -582,7 +582,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
class="flex gap-1"
>
<button
class="button button--layout-none button--primary button--lg button--variant-neutral"
class="button button--layout-none button--primary button--lg button--variant-neutral btn-primary"
type="button"
>
<span
Expand All @@ -592,7 +592,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--secondary button--lg button--variant-neutral"
class="button button--layout-none button--secondary button--lg button--variant-neutral btn-secondary"
type="button"
>
<span
Expand All @@ -602,7 +602,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
</span>
</button>
<button
class="button button--layout-none button--tertiary button--lg button--variant-neutral"
class="button button--layout-none button--tertiary button--lg button--variant-neutral btn-tertiary"
type="button"
>
<span
Expand Down
4 changes: 2 additions & 2 deletions src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,10 +167,10 @@ exports[`<SearchField /> Disabled story renders snapshot 1`] = `
</svg>
</div>
<span
class="button__disabled"
class="search-button button__disabled"
>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default search-button"
class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
disabled=""
type="button"
>
Expand Down
Loading