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

feat(Button): support for not-allowed cursor when disabled #2052

Merged
merged 1 commit into from
Sep 3, 2024
Merged

feat(Button): support for not-allowed cursor when disabled #2052

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
18 changes: 6 additions & 12 deletions src/components/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,23 +263,21 @@
* Disabled
*/
.button--disabled {
pointer-events: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We disable all the pointer events for these buttons to make them truly disabled (and this avoids having to add styles to override the :hover, :active and other pseudo-selectors


&.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 {
color: var(--eds-theme-color-text-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;
}

&.button--secondary.button--variant-default,
Expand All @@ -288,34 +286,30 @@
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,
&.button--tertiary.button--variant-critical,
&.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 {
Copy link
Contributor Author

@booc0mtaco booc0mtaco Aug 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is to style a container when disabled. because pointer-events is also how the cursor gets styled, we cannot just add cursor: not-allow

cursor: not-allowed;
}

/**
* Flag usages of just :disabled as erroneous
*/
Expand Down
27 changes: 17 additions & 10 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
) => {
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,
);

Expand All @@ -137,7 +137,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
typeof isDisabled === 'undefined' &&
typeof other.disabled !== 'undefined',
],
'Use "isDisabled" instead of "disabled" on button instances',
'Use "isDisabled" instead of "disabled" on Button instances',
'error',
);

Expand All @@ -146,7 +146,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
'Specifying content for "children" when using icon-only layout is not required and can be removed.',
);

return (
const coreButton = (
<Component
className={componentClassName}
disabled={isDisabled}
Expand Down Expand Up @@ -183,6 +183,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
)}
</Component>
);

// Wrap the button in a simple SPAN to allow for adding the not-allowed cursor
return isDisabled ? (
<span className={styles['button__disabled']}>{coreButton}</span>
) : (
coreButton
);
},
);

Expand Down
132 changes: 78 additions & 54 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 @@ -91,39 +91,51 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
<div
class="flex gap-1"
>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
disabled=""
type="button"
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
disabled=""
type="button"
>
Primary
</span>
</button>
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
disabled=""
type="button"
<span
class="button__text"
>
Primary
</span>
</button>
</span>
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
disabled=""
type="button"
>
Secondary
</span>
</button>
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
disabled=""
type="button"
<span
class="button__text"
>
Secondary
</span>
</button>
</span>
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
disabled=""
type="button"
>
Tertiary
</span>
</button>
<span
class="button__text"
>
Tertiary
</span>
</button>
</span>
</div>
`;

Expand Down Expand Up @@ -250,39 +262,51 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
<div
class="flex gap-1"
>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
disabled=""
type="button"
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
disabled=""
type="button"
>
Primary
</span>
</button>
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
disabled=""
type="button"
<span
class="button__text"
>
Primary
</span>
</button>
</span>
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
disabled=""
type="button"
>
Secondary
</span>
</button>
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
disabled=""
type="button"
<span
class="button__text"
>
Secondary
</span>
</button>
</span>
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
disabled=""
type="button"
>
Tertiary
</span>
</button>
<span
class="button__text"
>
Tertiary
</span>
</button>
</span>
</div>
</div>
`;
Expand Down
22 changes: 13 additions & 9 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 @@ -166,17 +166,21 @@ exports[`<SearchField /> Disabled story renders snapshot 1`] = `
/>
</svg>
</div>
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default search-button"
disabled=""
type="button"
<span
class="button__disabled"
>
<span
class="button__text"
<button
class="button button--layout-none button--disabled button--primary button--lg button--variant-default search-button"
disabled=""
type="button"
>
Search
</span>
</button>
<span
class="button__text"
>
Search
</span>
</button>
</span>
</div>
</div>
`;
Expand Down
Loading