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',