diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css index 92077b3c4..e4155d32f 100644 --- a/src/components/Button/Button-v2.module.css +++ b/src/components/Button/Button-v2.module.css @@ -272,7 +272,8 @@ .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); + /* Using transparent for border color to avoid blending opacity of border and background */ + border-color: transparent; background-color: var(--eds-theme-color-background-utility-inverse-disabled); pointer-events: none; @@ -288,6 +289,13 @@ pointer-events: none; } +.button--secondary.button--variant-inverse.button--disabled { + color: var(--eds-theme-color-text-utility-inverse-disabled); + border-color: var(--eds-theme-color-border-utility-inverse-disabled); + + pointer-events: none; +} + .button--tertiary.button--variant-default.button--disabled, .button--tertiary.button--variant-critical.button--disabled, .button--tertiary.button--variant-neutral.button--disabled { @@ -297,6 +305,13 @@ pointer-events: none; } +.button--tertiary.button--variant-inverse.button--disabled { + color: var(--eds-theme-color-text-utility-disabled-primary); + border-color: transparent; + + pointer-events: none; +} + /** * States */ diff --git a/src/components/Button/Button-v2.stories.tsx b/src/components/Button/Button-v2.stories.tsx index 4babd87c6..7448dae0f 100644 --- a/src/components/Button/Button-v2.stories.tsx +++ b/src/components/Button/Button-v2.stories.tsx @@ -124,6 +124,24 @@ export const InverseRanks: StoryObj = { ], }; +/** + * Inverse buttons can be disabled as well + */ +export const InverseDisabledRanks: StoryObj = { + args: { + ...DefaultRanks.args, + variant: 'inverse', + isDisabled: true, + }, + render: DefaultRanks.render, + // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds: + decorators: [ + (Story) => ( +
{Story()}
+ ), + ], +}; + /** * Buttons come in three sizes */ diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap index fb19d9f29..596ef3968 100644 --- a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap @@ -243,6 +243,50 @@ exports[` + + + + +`; + exports[`