@instructure/ui-buttons 10.25.0 → 10.25.1-snapshot-0

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.25.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-snapshot-0) (2025-09-11)
+
+
+### Features
+
+* **ui-buttons:** expose display prop on CondensedButton ([c827833](https://github.com/instructure/instructure-ui/commit/c8278332fb8cae64cb6e3608baf7a748e118849c))
+
+
+
+
+
 # [10.25.0](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.25.0) (2025-09-09)
 
 

package/es/CondensedButton/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
+const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon", "display"];
 var _dec, _dec2, _class, _CondensedButton;
 /*
  * The MIT License (MIT)
@@ -71,11 +71,13 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
       cursor = _this$props.cursor,
       href = _this$props.href,
       renderIcon = _this$props.renderIcon,
+      display = _this$props.display,
       props = _objectWithoutProperties(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
     return _jsx(BaseButton, {
       ...passthroughProps(props),
       isCondensed: true,
+      display: display,
       withBackground: false,
       withBorder: false,
       type: type,
@@ -103,7 +105,8 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
   interaction: void 0,
   color: 'primary',
   margin: '0',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  display: 'inline-block'
 }, _CondensedButton)) || _class) || _class);
 export default CondensedButton;
 export { CondensedButton };

package/es/CondensedButton/props.js

@@ -35,7 +35,8 @@ const propTypes = {
   cursor: PropTypes.string,
   href: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  display: PropTypes.oneOf(['inline-block', 'block'])
 };
-const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type', 'onClick'];
+const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type', 'onClick', 'display'];
 export { propTypes, allowedProps };

package/lib/CondensedButton/index.js

@@ -14,7 +14,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _BaseButton = require("../BaseButton");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
+const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon", "display"];
 var _dec, _dec2, _class, _CondensedButton;
 /*
  * The MIT License (MIT)
@@ -77,11 +77,13 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
       cursor = _this$props.cursor,
       href = _this$props.href,
       renderIcon = _this$props.renderIcon,
+      display = _this$props.display,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
     return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
       ...(0, _passthroughProps.passthroughProps)(props),
       isCondensed: true,
+      display: display,
       withBackground: false,
       withBorder: false,
       type: type,
@@ -109,6 +111,7 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
   interaction: void 0,
   color: 'primary',
   margin: '0',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  display: 'inline-block'
 }, _CondensedButton)) || _class) || _class);
 var _default = exports.default = CondensedButton;

package/lib/CondensedButton/props.js

@@ -42,6 +42,7 @@ const propTypes = exports.propTypes = {
   cursor: _propTypes.default.string,
   href: _propTypes.default.string,
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+  display: _propTypes.default.oneOf(['inline-block', 'block'])
 };
-const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type', 'onClick'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type', 'onClick', 'display'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.25.0",
+  "version": "10.25.1-snapshot-0",
   "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.25.0",
-    "@instructure/ui-babel-preset": "10.25.0",
-    "@instructure/ui-themes": "10.25.0",
+    "@instructure/ui-axe-check": "10.25.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.25.1-snapshot-0",
+    "@instructure/ui-themes": "10.25.1-snapshot-0",
     "@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.25.0",
-    "@instructure/emotion": "10.25.0",
-    "@instructure/shared-types": "10.25.0",
-    "@instructure/ui-a11y-content": "10.25.0",
-    "@instructure/ui-a11y-utils": "10.25.0",
-    "@instructure/ui-color-utils": "10.25.0",
-    "@instructure/ui-dom-utils": "10.25.0",
-    "@instructure/ui-icons": "10.25.0",
-    "@instructure/ui-position": "10.25.0",
-    "@instructure/ui-prop-types": "10.25.0",
-    "@instructure/ui-react-utils": "10.25.0",
-    "@instructure/ui-testable": "10.25.0",
-    "@instructure/ui-tooltip": "10.25.0",
-    "@instructure/ui-utils": "10.25.0",
-    "@instructure/ui-view": "10.25.0",
+    "@instructure/console": "10.25.1-snapshot-0",
+    "@instructure/emotion": "10.25.1-snapshot-0",
+    "@instructure/shared-types": "10.25.1-snapshot-0",
+    "@instructure/ui-a11y-content": "10.25.1-snapshot-0",
+    "@instructure/ui-a11y-utils": "10.25.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.25.1-snapshot-0",
+    "@instructure/ui-dom-utils": "10.25.1-snapshot-0",
+    "@instructure/ui-icons": "10.25.1-snapshot-0",
+    "@instructure/ui-position": "10.25.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.25.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.25.1-snapshot-0",
+    "@instructure/ui-testable": "10.25.1-snapshot-0",
+    "@instructure/ui-tooltip": "10.25.1-snapshot-0",
+    "@instructure/ui-utils": "10.25.1-snapshot-0",
+    "@instructure/ui-view": "10.25.1-snapshot-0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/CondensedButton/index.tsx

@@ -56,7 +56,8 @@ class CondensedButton extends Component<CondensedButtonProps> {
     interaction: undefined,
     color: 'primary',
     margin: '0',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    display: 'inline-block'
   }
 
   _baseButton: BaseButton | null = null
@@ -94,6 +95,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
       cursor,
       href,
       renderIcon,
+      display,
       ...props
     } = this.props
 
@@ -103,6 +105,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
       <BaseButton
         {...passthroughProps(props)}
         isCondensed
+        display={display}
         withBackground={false}
         withBorder={false}
         type={type}

package/src/CondensedButton/props.ts

@@ -101,6 +101,11 @@ type CondensedButtonOwnProps = {
   onClick?: (
     event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
   ) => void
+
+  /**
+   * The CSS display property of the button, `inline-block` or `block`
+   */
+  display?: 'inline-block' | 'block'
 }
 
 type PropKeys = keyof CondensedButtonOwnProps
@@ -124,7 +129,8 @@ const propTypes: PropValidators<PropKeys> = {
   cursor: PropTypes.string,
   href: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  display: PropTypes.oneOf(['inline-block', 'block'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -139,7 +145,8 @@ const allowedProps: AllowedPropKeys = [
   'renderIcon',
   'size',
   'type',
-  'onClick'
+  'onClick',
+  'display'
 ]
 
 export type { CondensedButtonProps }