diff --git a/packages/ui-buttons/src/BaseButton/__tests__/BaseButton.test.tsx b/packages/ui-buttons/src/BaseButton/__tests__/BaseButton.test.tsx index 97a6cf7db6..1bff09ddca 100644 --- a/packages/ui-buttons/src/BaseButton/__tests__/BaseButton.test.tsx +++ b/packages/ui-buttons/src/BaseButton/__tests__/BaseButton.test.tsx @@ -192,6 +192,18 @@ describe('', () => { expect(elementRef).toBeCalledWith(button) }) + it('should not be underlined when disabled with a href', () => { + render( + + Hello World + + ) + const button = screen.getByRole('link', { name: 'Hello World' }) + + const styles = window.getComputedStyle(button) + expect(styles.textDecoration).toContain('none') + }) + describe('onClick', () => { it('should call onClick when clicked', async () => { const onClick = vi.fn() diff --git a/packages/ui-buttons/src/BaseButton/index.tsx b/packages/ui-buttons/src/BaseButton/index.tsx index c55f101623..e935bae9dc 100644 --- a/packages/ui-buttons/src/BaseButton/index.tsx +++ b/packages/ui-buttons/src/BaseButton/index.tsx @@ -89,7 +89,8 @@ class BaseButton extends Component { get makeStylesVariables(): BaseButtonStyleProps { return { isDisabled: this.isDisabled, - hasOnlyIconVisible: this.hasOnlyIconVisible + hasOnlyIconVisible: this.hasOnlyIconVisible, + isEnabled: this.isEnabled } } @@ -256,7 +257,7 @@ class BaseButton extends Component { ...props } = this.props - const { isDisabled, isEnabled, isReadOnly, elementType } = this + const { isDisabled, isReadOnly, elementType } = this // only add 0 tabIndex value if it doesn't have it by default, see // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex let needsZeroTabIndex = true @@ -306,7 +307,7 @@ class BaseButton extends Component { role={onClick && as !== 'button' ? 'button' : undefined} tabIndex={tabIndexValue} disabled={isDisabled || isReadOnly} - css={isEnabled ? styles?.baseButton : null} + css={styles?.baseButton} focusRingBorderRadius={String( (styles?.content as { borderRadius?: string | number })?.borderRadius )} diff --git a/packages/ui-buttons/src/BaseButton/props.ts b/packages/ui-buttons/src/BaseButton/props.ts index 2efc0cfdae..58f7dab446 100644 --- a/packages/ui-buttons/src/BaseButton/props.ts +++ b/packages/ui-buttons/src/BaseButton/props.ts @@ -174,6 +174,7 @@ type BaseButtonOwnProps = { type BaseButtonStyleProps = { isDisabled: boolean hasOnlyIconVisible: boolean + isEnabled: boolean } type PropKeys = keyof BaseButtonOwnProps diff --git a/packages/ui-buttons/src/BaseButton/styles.ts b/packages/ui-buttons/src/BaseButton/styles.ts index 9795107d0a..dd2954cbd3 100644 --- a/packages/ui-buttons/src/BaseButton/styles.ts +++ b/packages/ui-buttons/src/BaseButton/styles.ts @@ -56,7 +56,7 @@ const generateStyle = ( isCondensed } = props - const { isDisabled, hasOnlyIconVisible } = state + const { isDisabled, hasOnlyIconVisible, isEnabled } = state const shapeVariants = { circle: { borderRadius: '50%' }, @@ -401,26 +401,32 @@ const generateStyle = ( } return { - baseButton: { - label: 'baseButton', - appearance: 'none', - textDecoration: 'none' /* for links styled as buttons */, - touchAction: 'manipulation', - - '&::-moz-focus-inner': { - border: '0' /* removes default dotted focus outline in Firefox */ - }, - '*': { - pointerEvents: - 'none' /* Ensures that button or link is always the event target */ - }, - '&:focus': { - textDecoration: 'none' - }, - '&:active > [class$=-baseButton__content]': colorVariants[color!].active, - '&:hover > [class$=-baseButton__content]': colorVariants[color!].hover - }, + baseButton: isEnabled + ? { + label: 'baseButton', + appearance: 'none', + textDecoration: 'none' /* for links styled as buttons */, + touchAction: 'manipulation', + '&::-moz-focus-inner': { + border: '0' /* removes default dotted focus outline in Firefox */ + }, + '*': { + pointerEvents: + 'none' /* Ensures that button or link is always the event target */ + }, + '&:focus': { + textDecoration: 'none' + }, + '&:active > [class$=-baseButton__content]': + colorVariants[color!].active, + '&:hover > [class$=-baseButton__content]': colorVariants[color!].hover + } + : { + textDecoration: 'none', + label: 'baseButton', + appearance: 'none' + }, content: { label: 'baseButton__content', boxSizing: 'border-box',