@instructure/ui-buttons 10.19.2-snapshot-9 → 10.19.2-snapshot-11

package/CHANGELOG.md

@@ -3,13 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.19.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-9) (2025-06-13)
+## [10.19.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-11) (2025-06-13)
 
 
 ### Bug Fixes
 
 * **many:** update dependencies, browsersdb and moment timezone database ([3813636](https://github.com/instructure/instructure-ui/commit/3813636458c901ad4bc74a4d5ae015cb55defcb2))
 * **ui-buttons:** make Button have a focus ring in Safari ([54118ac](https://github.com/instructure/instructure-ui/commit/54118ac22f3745c7b34f4da9d1c857951c63f8df))
+* **ui-buttons:** remove underline from disabled Button with href ([90e8ce7](https://github.com/instructure/instructure-ui/commit/90e8ce710faf7d71b0a8cbd28940a89d3aa7f065))
 
 
 

package/es/BaseButton/index.js

@@ -103,7 +103,8 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   get makeStylesVariables() {
     return {
       isDisabled: this.isDisabled,
-      hasOnlyIconVisible: this.hasOnlyIconVisible
+      hasOnlyIconVisible: this.hasOnlyIconVisible,
+      isEnabled: this.isEnabled
     };
   }
   get hasOnlyIconVisible() {
@@ -213,7 +214,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       withFocusOutline = _this$props7.withFocusOutline,
       props = _objectWithoutProperties(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
-      isEnabled = this.isEnabled,
       isReadOnly = this.isReadOnly,
       elementType = this.elementType;
     // only add 0 tabIndex value if it doesn't have it by default, see
@@ -253,7 +253,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       role: onClick && as !== 'button' ? 'button' : void 0,
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
-      css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
+      css: styles === null || styles === void 0 ? void 0 : styles.baseButton,
       focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius),
       withFocusOutline: withFocusOutline,
       children: _jsx("span", {

package/es/BaseButton/styles.js

@@ -43,7 +43,8 @@ const generateStyle = (componentTheme, props, state) => {
     withBorder = props.withBorder,
     isCondensed = props.isCondensed;
   const isDisabled = state.isDisabled,
-    hasOnlyIconVisible = state.hasOnlyIconVisible;
+    hasOnlyIconVisible = state.hasOnlyIconVisible,
+    isEnabled = state.isEnabled;
   const shapeVariants = {
     circle: {
       borderRadius: '50%'
@@ -320,7 +321,7 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
   return {
-    baseButton: {
+    baseButton: isEnabled ? {
       label: 'baseButton',
       appearance: 'none',
       textDecoration: 'none' /* for links styled as buttons */,
@@ -336,6 +337,10 @@ const generateStyle = (componentTheme, props, state) => {
       },
       '&:active > [class$=-baseButton__content]': colorVariants[color].active,
       '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
+    } : {
+      textDecoration: 'none',
+      label: 'baseButton',
+      appearance: 'none'
     },
     content: {
       label: 'baseButton__content',

package/lib/BaseButton/index.js

@@ -112,7 +112,8 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
   get makeStylesVariables() {
     return {
       isDisabled: this.isDisabled,
-      hasOnlyIconVisible: this.hasOnlyIconVisible
+      hasOnlyIconVisible: this.hasOnlyIconVisible,
+      isEnabled: this.isEnabled
     };
   }
   get hasOnlyIconVisible() {
@@ -222,7 +223,6 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       withFocusOutline = _this$props7.withFocusOutline,
       props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
-      isEnabled = this.isEnabled,
       isReadOnly = this.isReadOnly,
       elementType = this.elementType;
     // only add 0 tabIndex value if it doesn't have it by default, see
@@ -262,7 +262,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       role: onClick && as !== 'button' ? 'button' : void 0,
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
-      css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
+      css: styles === null || styles === void 0 ? void 0 : styles.baseButton,
       focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius),
       withFocusOutline: withFocusOutline,
       children: (0, _jsxRuntime.jsx)("span", {

package/lib/BaseButton/styles.js

@@ -49,7 +49,8 @@ const generateStyle = (componentTheme, props, state) => {
     withBorder = props.withBorder,
     isCondensed = props.isCondensed;
   const isDisabled = state.isDisabled,
-    hasOnlyIconVisible = state.hasOnlyIconVisible;
+    hasOnlyIconVisible = state.hasOnlyIconVisible,
+    isEnabled = state.isEnabled;
   const shapeVariants = {
     circle: {
       borderRadius: '50%'
@@ -326,7 +327,7 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
   return {
-    baseButton: {
+    baseButton: isEnabled ? {
       label: 'baseButton',
       appearance: 'none',
       textDecoration: 'none' /* for links styled as buttons */,
@@ -342,6 +343,10 @@ const generateStyle = (componentTheme, props, state) => {
       },
       '&:active > [class$=-baseButton__content]': colorVariants[color].active,
       '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
+    } : {
+      textDecoration: 'none',
+      label: 'baseButton',
+      appearance: 'none'
     },
     content: {
       label: 'baseButton__content',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.19.2-snapshot-9",
+  "version": "10.19.2-snapshot-11",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.19.2-snapshot-9",
-    "@instructure/ui-babel-preset": "10.19.2-snapshot-9",
-    "@instructure/ui-test-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-themes": "10.19.2-snapshot-9",
+    "@instructure/ui-axe-check": "10.19.2-snapshot-11",
+    "@instructure/ui-babel-preset": "10.19.2-snapshot-11",
+    "@instructure/ui-test-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-themes": "10.19.2-snapshot-11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.19.2-snapshot-9",
-    "@instructure/emotion": "10.19.2-snapshot-9",
-    "@instructure/shared-types": "10.19.2-snapshot-9",
-    "@instructure/ui-a11y-content": "10.19.2-snapshot-9",
-    "@instructure/ui-a11y-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-color-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-dom-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-icons": "10.19.2-snapshot-9",
-    "@instructure/ui-position": "10.19.2-snapshot-9",
-    "@instructure/ui-prop-types": "10.19.2-snapshot-9",
-    "@instructure/ui-react-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-testable": "10.19.2-snapshot-9",
-    "@instructure/ui-tooltip": "10.19.2-snapshot-9",
-    "@instructure/ui-utils": "10.19.2-snapshot-9",
-    "@instructure/ui-view": "10.19.2-snapshot-9",
+    "@instructure/console": "10.19.2-snapshot-11",
+    "@instructure/emotion": "10.19.2-snapshot-11",
+    "@instructure/shared-types": "10.19.2-snapshot-11",
+    "@instructure/ui-a11y-content": "10.19.2-snapshot-11",
+    "@instructure/ui-a11y-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-color-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-dom-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-icons": "10.19.2-snapshot-11",
+    "@instructure/ui-position": "10.19.2-snapshot-11",
+    "@instructure/ui-prop-types": "10.19.2-snapshot-11",
+    "@instructure/ui-react-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-testable": "10.19.2-snapshot-11",
+    "@instructure/ui-tooltip": "10.19.2-snapshot-11",
+    "@instructure/ui-utils": "10.19.2-snapshot-11",
+    "@instructure/ui-view": "10.19.2-snapshot-11",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/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
         )}

package/src/BaseButton/props.ts

@@ -174,6 +174,7 @@ type BaseButtonOwnProps = {
 type BaseButtonStyleProps = {
   isDisabled: boolean
   hasOnlyIconVisible: boolean
+  isEnabled: boolean
 }
 
 type PropKeys = keyof BaseButtonOwnProps

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