fix(ui-buttons): remove underline from disabled Button with href

INSTUI-4540

Author: ToMESSKa

packages/ui-buttons/src/BaseButton/__tests__/BaseButton.test.tsx

@@ -192,6 +192,18 @@ describe('<BaseButton/>', () => {
     expect(elementRef).toBeCalledWith(button)
   })
 
+  it('should not be underlined when disabled with a href', () => {
+    render(
+      <BaseButton disabled href="#">
+        Hello World
+      </BaseButton>
+    )
+    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()

packages/ui-buttons/src/BaseButton/index.tsx

@@ -89,7 +89,8 @@ class BaseButton extends Component<BaseButtonProps> {
   get makeStylesVariables(): BaseButtonStyleProps {
     return {
       isDisabled: this.isDisabled,
-      hasOnlyIconVisible: this.hasOnlyIconVisible
+      hasOnlyIconVisible: this.hasOnlyIconVisible,
+      isEnabled: this.isEnabled
     }
   }
 
@@ -256,7 +257,7 @@ class BaseButton extends Component<BaseButtonProps> {
       ...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<BaseButtonProps> {
         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
         )}

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

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