@instructure/ui-buttons 10.23.1-snapshot-3 → 10.23.1-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.23.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.23.0...v10.23.1-snapshot-3) (2025-07-17)
+## [10.23.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.23.0...v10.23.1-snapshot-4) (2025-07-18)
 
-**Note:** Version bump only for package @instructure/ui-buttons
+
+### Bug Fixes
+
+* **many:** fix focus ring not respecting theme overrides in Button and FileDrop ([8fffc5d](https://github.com/instructure/instructure-ui/commit/8fffc5db8f41249277283b0ad05be0d158d6d7d7))
 
 
 

package/es/BaseButton/index.js

@@ -189,7 +189,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     });
   }
   render() {
-    var _styles$content;
     const _this$props7 = this.props,
       type = _this$props7.type,
       size = _this$props7.size,
@@ -254,7 +253,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       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", {
         css: styles === null || styles === void 0 ? void 0 : styles.content,

package/es/BaseButton/styles.js

@@ -306,6 +306,8 @@ const generateStyle = (componentTheme, props, state) => {
       appearance: 'none',
       textDecoration: 'none' /* for links styled as buttons */,
       touchAction: 'manipulation',
+      // This sets the focus ring's border radius displayed by the `View`
+      borderRadius: componentTheme.borderRadius,
       '&::-moz-focus-inner': {
         border: '0' /* removes default dotted focus outline in Firefox */
       },

package/lib/BaseButton/index.js

@@ -198,7 +198,6 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
     });
   }
   render() {
-    var _styles$content;
     const _this$props7 = this.props,
       type = _this$props7.type,
       size = _this$props7.size,
@@ -263,7 +262,6 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       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", {
         css: styles === null || styles === void 0 ? void 0 : styles.content,

package/lib/BaseButton/styles.js

@@ -312,6 +312,8 @@ const generateStyle = (componentTheme, props, state) => {
       appearance: 'none',
       textDecoration: 'none' /* for links styled as buttons */,
       touchAction: 'manipulation',
+      // This sets the focus ring's border radius displayed by the `View`
+      borderRadius: componentTheme.borderRadius,
       '&::-moz-focus-inner': {
         border: '0' /* removes default dotted focus outline in Firefox */
       },

package/package.json

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

package/src/BaseButton/index.tsx

@@ -308,9 +308,6 @@ class BaseButton extends Component<BaseButtonProps> {
         tabIndex={tabIndexValue}
         disabled={isDisabled || isReadOnly}
         css={styles?.baseButton}
-        focusRingBorderRadius={String(
-          (styles?.content as { borderRadius?: string | number })?.borderRadius
-        )}
         withFocusOutline={withFocusOutline}
       >
         <span css={styles?.content}>{this.renderChildren()}</span>

package/src/BaseButton/styles.ts

@@ -359,6 +359,8 @@ const generateStyle = (
           appearance: 'none',
           textDecoration: 'none' /* for links styled as buttons */,
           touchAction: 'manipulation',
+          // This sets the focus ring's border radius displayed by the `View`
+          borderRadius: componentTheme.borderRadius,
 
           '&::-moz-focus-inner': {
             border: '0' /* removes default dotted focus outline in Firefox */