diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index a25873dfb..46fbee3ed 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -263,14 +263,14 @@ * Disabled */ .button--disabled { + pointer-events: none; + &.button--primary.button--variant-default, &.button--primary.button--variant-critical, &.button--primary.button--variant-neutral { 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--primary.button--variant-inverse { @@ -278,8 +278,6 @@ /* 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; } &.button--secondary.button--variant-default, @@ -288,15 +286,11 @@ 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--secondary.button--variant-inverse { 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, @@ -304,18 +298,18 @@ &.button--tertiary.button--variant-neutral { color: var(--eds-theme-color-text-utility-disabled-primary); background-color: var(--eds-theme-color-background-utility-default-no-emphasis); - - pointer-events: none; } &.button--tertiary.button--variant-inverse { color: var(--eds-theme-color-text-utility-disabled-primary); border-color: transparent; - - pointer-events: none; } } +.button__disabled { + cursor: not-allowed; +} + /** * Flag usages of just :disabled as erroneous */ diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 5bd101876..76f40b1e0 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -116,14 +116,14 @@ export const Button = forwardRef( ) => { const componentClassName = clsx( styles['button'], - context && clsx(styles[`button--context-${context}`]), - iconLayout && clsx(styles[`button--layout-${iconLayout}`]), - isDisabled && clsx(styles['button--disabled']), - isFullWidth && clsx(styles['button--full-width']), - isLoading && clsx(styles['button--loading']), - rank && clsx(styles[`button--${rank}`]), - size && clsx(styles[`button--${size}`]), - variant && clsx(styles[`button--variant-${variant}`]), + context && styles[`button--context-${context}`], + iconLayout && styles[`button--layout-${iconLayout}`], + isDisabled && styles['button--disabled'], + isFullWidth && styles['button--full-width'], + isLoading && styles['button--loading'], + rank && styles[`button--${rank}`], + size && styles[`button--${size}`], + variant && styles[`button--variant-${variant}`], className, ); @@ -137,7 +137,7 @@ export const Button = forwardRef( typeof isDisabled === 'undefined' && typeof other.disabled !== 'undefined', ], - 'Use "isDisabled" instead of "disabled" on button instances', + 'Use "isDisabled" instead of "disabled" on Button instances', 'error', ); @@ -146,7 +146,7 @@ export const Button = forwardRef( 'Specifying content for "children" when using icon-only layout is not required and can be removed.', ); - return ( + const coreButton = ( ( )} ); + + // Wrap the button in a simple SPAN to allow for adding the not-allowed cursor + return isDisabled ? ( + {coreButton} + ) : ( + coreButton + ); }, ); diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap index f32fc092f..ada3371b1 100644 --- a/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -91,39 +91,51 @@ exports[` - + + - - Secondary - - - + + - - Tertiary - - + + Tertiary + + + `; @@ -250,39 +262,51 @@ exports[` - + + - - Secondary - - - + + - - Tertiary - - + + Tertiary + + + `; diff --git a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap index aa9c68811..7102efcf5 100644 --- a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap +++ b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap @@ -166,17 +166,21 @@ exports[` Disabled story renders snapshot 1`] = ` /> - + + Search + + + `;