@instructure/ui-buttons 10.18.1 → 10.18.2-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.18.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-1) (2025-06-03)
+
+
+### Bug Fixes
+
+* **ui-top-nav-bar,ui-buttons:** display a focus ring in TopNavBar if a button has a Popover open ([1a03763](https://github.com/instructure/instructure-ui/commit/1a03763f99db390ec6cea58a71ef118930be64d8))
+
+
+
+
+
 ## [10.18.1](https://github.com/instructure/instructure-ui/compare/v10.18.0...v10.18.1) (2025-05-29)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/es/BaseButton/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
+const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles", "withFocusOutline"];
 var _dec, _dec2, _class, _BaseButton;
 /*
  * The MIT License (MIT)
@@ -209,6 +209,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       tabIndex = _this$props7.tabIndex,
       styles = _this$props7.styles,
       makeStyles = _this$props7.makeStyles,
+      withFocusOutline = _this$props7.withFocusOutline,
       props = _objectWithoutProperties(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
       isEnabled = this.isEnabled,
@@ -252,6 +253,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
       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,
         children: this.renderChildren()

package/es/BaseButton/props.js

@@ -44,7 +44,8 @@ const propTypes = {
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  withFocusOutline: PropTypes.bool
 };
 const allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'isCondensed', 'margin', 'onClick', 'onKeyDown', 'renderIcon', 'shape', 'size', 'tabIndex', 'textAlign', 'type', 'withBackground', 'withBorder'];
 export { propTypes, allowedProps };

package/lib/BaseButton/index.js

@@ -21,7 +21,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
+const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles", "withFocusOutline"];
 var _dec, _dec2, _class, _BaseButton;
 /*
  * The MIT License (MIT)
@@ -218,6 +218,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       tabIndex = _this$props7.tabIndex,
       styles = _this$props7.styles,
       makeStyles = _this$props7.makeStyles,
+      withFocusOutline = _this$props7.withFocusOutline,
       props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
       isEnabled = this.isEnabled,
@@ -261,6 +262,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
       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,
         children: this.renderChildren()

package/lib/BaseButton/props.js

@@ -51,6 +51,7 @@ const propTypes = exports.propTypes = {
   onClick: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  tabIndex: _propTypes.default.number
+  tabIndex: _propTypes.default.number,
+  withFocusOutline: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'isCondensed', 'margin', 'onClick', 'onKeyDown', 'renderIcon', 'shape', 'size', 'tabIndex', 'textAlign', 'type', 'withBackground', 'withBorder'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.18.1",
+  "version": "10.18.2-snapshot-1",
   "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.18.1",
-    "@instructure/ui-babel-preset": "10.18.1",
-    "@instructure/ui-test-utils": "10.18.1",
-    "@instructure/ui-themes": "10.18.1",
+    "@instructure/ui-axe-check": "10.18.2-snapshot-1",
+    "@instructure/ui-babel-preset": "10.18.2-snapshot-1",
+    "@instructure/ui-test-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-themes": "10.18.2-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.18.1",
-    "@instructure/emotion": "10.18.1",
-    "@instructure/shared-types": "10.18.1",
-    "@instructure/ui-a11y-content": "10.18.1",
-    "@instructure/ui-a11y-utils": "10.18.1",
-    "@instructure/ui-color-utils": "10.18.1",
-    "@instructure/ui-dom-utils": "10.18.1",
-    "@instructure/ui-icons": "10.18.1",
-    "@instructure/ui-position": "10.18.1",
-    "@instructure/ui-prop-types": "10.18.1",
-    "@instructure/ui-react-utils": "10.18.1",
-    "@instructure/ui-testable": "10.18.1",
-    "@instructure/ui-tooltip": "10.18.1",
-    "@instructure/ui-utils": "10.18.1",
-    "@instructure/ui-view": "10.18.1",
+    "@instructure/console": "10.18.2-snapshot-1",
+    "@instructure/emotion": "10.18.2-snapshot-1",
+    "@instructure/shared-types": "10.18.2-snapshot-1",
+    "@instructure/ui-a11y-content": "10.18.2-snapshot-1",
+    "@instructure/ui-a11y-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-color-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-dom-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-icons": "10.18.2-snapshot-1",
+    "@instructure/ui-position": "10.18.2-snapshot-1",
+    "@instructure/ui-prop-types": "10.18.2-snapshot-1",
+    "@instructure/ui-react-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-testable": "10.18.2-snapshot-1",
+    "@instructure/ui-tooltip": "10.18.2-snapshot-1",
+    "@instructure/ui-utils": "10.18.2-snapshot-1",
+    "@instructure/ui-view": "10.18.2-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/index.tsx

@@ -251,6 +251,7 @@ class BaseButton extends Component<BaseButtonProps> {
       tabIndex,
       styles,
       makeStyles,
+      withFocusOutline,
       ...props
     } = this.props
 
@@ -307,6 +308,7 @@ class BaseButton extends Component<BaseButtonProps> {
         focusRingBorderRadius={String(
           (styles?.content as { borderRadius?: string | number })?.borderRadius
         )}
+        withFocusOutline={withFocusOutline}
       >
         <span css={styles?.content}>{this.renderChildren()}</span>
       </View>

package/src/BaseButton/props.ts

@@ -159,9 +159,16 @@ type BaseButtonOwnProps = {
 
   /**
    * Specifies the tabindex of the `Button`.
-   *
    */
   tabIndex?: number
+
+  /**
+   * Manually control if the `Button` should display a focus outline.
+   *
+   * When left `undefined` (which is the default) the focus outline will display
+   * if this component is focusable and receives focus.
+   */
+  withFocusOutline?: boolean
 }
 
 type BaseButtonStyleProps = {
@@ -218,7 +225,8 @@ const propTypes: PropValidators<PropKeys> = {
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  withFocusOutline: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [