@instructure/ui-buttons 10.26.1 → 11.0.0

package/lib/Button/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Button = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
@@ -16,7 +15,7 @@ var _BaseButton = require("../BaseButton");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
-var _dec, _dec2, _class, _Button;
+var _dec, _class, _Button;
 /*
  * The MIT License (MIT)
  *
@@ -46,7 +45,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_Button = class Button extends _react.Component {
+let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_Button = class Button extends _react.Component {
   constructor(...args) {
     super(...args);
     this._buttonComponent = null;
@@ -109,10 +108,11 @@ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.defau
     };
     return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
       ...buttonProps,
+      "data-cid": "Button",
       children: children
     });
   }
-}, _Button.displayName = "Button", _Button.componentId = 'Button', _Button.propTypes = _props.propTypes, _Button.allowedProps = _props.allowedProps, _Button.defaultProps = {
+}, _Button.displayName = "Button", _Button.componentId = 'Button', _Button.allowedProps = _props.allowedProps, _Button.defaultProps = {
   type: 'button',
   size: 'medium',
   as: 'button',
@@ -124,5 +124,5 @@ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.defau
   withBackground: true,
   margin: '0',
   cursor: 'pointer'
-}, _Button)) || _class) || _class);
+}, _Button)) || _class);
 var _default = exports.default = Button;

package/lib/Button/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,22 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node,
-  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  elementRef: _propTypes.default.func,
-  as: _propTypes.default.elementType,
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
-  focusColor: _propTypes.default.oneOf(['info', 'inverse']),
-  display: _propTypes.default.oneOf(['inline-block', 'block']),
-  textAlign: _propTypes.default.oneOf(['start', 'center']),
-  withBackground: _propTypes.default.bool,
-  margin: _propTypes.default.string,
-  cursor: _propTypes.default.string,
-  href: _propTypes.default.string,
-  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  onClick: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'textAlign', 'type', 'withBackground', 'onClick'];

package/lib/CloseButton/index.js

@@ -9,7 +9,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _IconXSolid = require("@instructure/ui-icons/lib/IconXSolid.js");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
@@ -19,7 +18,7 @@ var _BaseButton = require("../BaseButton");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
-var _dec, _dec2, _class, _CloseButton;
+var _dec, _class, _CloseButton;
 /*
  * The MIT License (MIT)
  *
@@ -48,7 +47,7 @@ var _dec, _dec2, _class, _CloseButton;
 category: components
 ---
 **/
-let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_CloseButton = class CloseButton extends _react.Component {
+let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_CloseButton = class CloseButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -95,13 +94,17 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
     return (0, _jsxRuntime.jsx)("span", {
       ...(0, _passthroughProps.passthroughProps)(props),
       css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
-      ref: el => this.ref = el,
+      ref: el => {
+        this.ref = el;
+      },
       children: (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
         renderIcon: _IconXSolid.IconXSolid,
         elementRef: this.handleRef,
         interaction: this.interaction,
         type: type,
-        color: this.color,
+        ...(this.color ? {
+          color: this.color
+        } : {}),
         size: size,
         onClick: onClick,
         margin: margin,
@@ -111,13 +114,14 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
         href: href,
         cursor: cursor,
         tabIndex: tabIndex,
+        "data-cid": "CloseButton",
         children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
           children: screenReaderLabel
         })
       })
     });
   }
-}, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.propTypes = _props.propTypes, _CloseButton.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
+}, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
   interaction: void 0,
   type: 'button',
@@ -127,5 +131,5 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
   margin: '0',
   as: 'button',
   cursor: 'pointer'
-}, _CloseButton)) || _class) || _class);
+}, _CloseButton)) || _class);
 var _default = exports.default = CloseButton;

package/lib/CloseButton/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,20 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  screenReaderLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  elementRef: _propTypes.default.func,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  onClick: _propTypes.default.func,
-  margin: _propTypes.default.string,
-  placement: _propTypes.default.oneOf(['start', 'end', 'static']),
-  offset: _propTypes.default.oneOf(['none', 'x-small', 'small', 'medium']),
-  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
-  as: _propTypes.default.elementType,
-  href: _propTypes.default.string,
-  cursor: _propTypes.default.string,
-  tabIndex: _propTypes.default.number
-};
 const allowedProps = exports.allowedProps = ['as', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'offset', 'onClick', 'placement', 'screenReaderLabel', 'size', 'tabIndex', 'type'];

package/lib/CondensedButton/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.CondensedButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
 var _theme = _interopRequireDefault(require("./theme"));
@@ -15,7 +14,7 @@ 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", "display"];
-var _dec, _dec2, _class, _CondensedButton;
+var _dec, _class, _CondensedButton;
 /*
  * The MIT License (MIT)
  *
@@ -45,7 +44,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_CondensedButton = class CondensedButton extends _react.Component {
+let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_CondensedButton = class CondensedButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this._baseButton = null;
@@ -100,10 +99,11 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
       ref: component => {
         this._baseButton = component;
       },
+      "data-cid": "CondensedButton",
       children: children
     });
   }
-}, _CondensedButton.displayName = "CondensedButton", _CondensedButton.componentId = 'CondensedButton', _CondensedButton.propTypes = _props.propTypes, _CondensedButton.allowedProps = _props.allowedProps, _CondensedButton.defaultProps = {
+}, _CondensedButton.displayName = "CondensedButton", _CondensedButton.componentId = 'CondensedButton', _CondensedButton.allowedProps = _props.allowedProps, _CondensedButton.defaultProps = {
   type: 'button',
   size: 'medium',
   as: 'button',
@@ -113,5 +113,5 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
   margin: '0',
   cursor: 'pointer',
   display: 'inline-block'
-}, _CondensedButton)) || _class) || _class);
+}, _CondensedButton)) || _class);
 var _default = exports.default = CondensedButton;

package/lib/CondensedButton/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,19 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node,
-  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  elementRef: _propTypes.default.func,
-  as: _propTypes.default.elementType,
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary']),
-  margin: _propTypes.default.string,
-  cursor: _propTypes.default.string,
-  href: _propTypes.default.string,
-  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _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', 'display'];

package/lib/IconButton/index.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.IconButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
 var _emotion = require("@instructure/emotion");
 var _theme = _interopRequireDefault(require("./theme"));
 var _BaseButton = require("../BaseButton");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
-var _dec, _dec2, _class, _IconButton;
+var _dec, _class, _IconButton;
 /*
  * The MIT License (MIT)
  *
@@ -46,7 +46,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_IconButton = class IconButton extends _react.Component {
+let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_IconButton = class IconButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this._baseButton = null;
@@ -105,12 +105,13 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
       ref: component => {
         this._baseButton = component;
       },
+      "data-cid": (0, _combineDataCid.combineDataCid)('IconButton', this.props),
       children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
         children: screenReaderLabel
       })
     });
   }
-}, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.propTypes = _props.propTypes, _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
+}, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
   type: 'button',
   size: 'medium',
   as: 'button',
@@ -122,5 +123,5 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
   withBorder: true,
   margin: '0',
   cursor: 'pointer'
-}, _IconButton)) || _class) || _class);
+}, _IconButton)) || _class);
 var _default = exports.default = IconButton;

package/lib/IconButton/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,23 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  screenReaderLabel: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  elementRef: _propTypes.default.func,
-  as: _propTypes.default.elementType,
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
-  focusColor: _propTypes.default.oneOf(['info', 'inverse']),
-  shape: _propTypes.default.oneOf(['rectangle', 'circle']),
-  withBackground: _propTypes.default.bool,
-  withBorder: _propTypes.default.bool,
-  margin: _propTypes.default.string,
-  cursor: _propTypes.default.string,
-  href: _propTypes.default.string,
-  onClick: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder', 'onClick'];

package/lib/ToggleButton/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ToggleButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
@@ -15,7 +14,6 @@ var _IconButton = require("../IconButton");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
-var _dec, _class, _ToggleButton;
 /*
  * The MIT License (MIT)
  *
@@ -44,7 +42,8 @@ var _dec, _class, _ToggleButton;
 category: components
 ---
 **/
-let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_ToggleButton = class ToggleButton extends _react.Component {
+
+class ToggleButton extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -106,11 +105,17 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _de
         onClick: onClick,
         interaction: interaction,
         "aria-pressed": status === 'pressed',
+        "data-cid": "ToggleButton",
         children: (0, _callRenderProp.callRenderProp)(renderIcon)
       })
     });
   }
-}, _ToggleButton.displayName = "ToggleButton", _ToggleButton.componentId = 'ToggleButton', _ToggleButton.propTypes = _props.propTypes, _ToggleButton.allowedProps = _props.allowedProps, _ToggleButton.defaultProps = {
+}
+exports.ToggleButton = ToggleButton;
+ToggleButton.displayName = "ToggleButton";
+ToggleButton.componentId = 'ToggleButton';
+ToggleButton.allowedProps = _props.allowedProps;
+ToggleButton.defaultProps = {
   size: 'medium',
   as: 'button',
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
@@ -119,5 +124,5 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _de
   color: 'secondary',
   placement: 'top center',
   constrain: 'window'
-}, _ToggleButton)) || _class);
+};
 var _default = exports.default = ToggleButton;

package/lib/ToggleButton/props.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -31,20 +28,4 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  screenReaderLabel: _propTypes.default.string.isRequired,
-  renderTooltipContent: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-  status: _propTypes.default.oneOf(['pressed', 'unpressed']).isRequired,
-  as: _propTypes.default.elementType,
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  elementRef: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
-  isShowingTooltip: _propTypes.default.bool,
-  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-  placement: _PositionPropTypes.PositionPropTypes.placement,
-  constrain: _PositionPropTypes.PositionPropTypes.constrain
-};
 const allowedProps = exports.allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.26.1",
+  "version": "11.0.0",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,36 +23,33 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.0",
+    "@instructure/ui-babel-preset": "11.0.0",
+    "@instructure/ui-themes": "11.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-a11y-content": "10.26.1",
-    "@instructure/ui-a11y-utils": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-position": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-tooltip": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "keycode": "^2",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.0",
+    "@instructure/emotion": "11.0.0",
+    "@instructure/shared-types": "11.0.0",
+    "@instructure/ui-a11y-content": "11.0.0",
+    "@instructure/ui-a11y-utils": "11.0.0",
+    "@instructure/ui-color-utils": "11.0.0",
+    "@instructure/ui-dom-utils": "11.0.0",
+    "@instructure/ui-icons": "11.0.0",
+    "@instructure/ui-position": "11.0.0",
+    "@instructure/ui-react-utils": "11.0.0",
+    "@instructure/ui-tooltip": "11.0.0",
+    "@instructure/ui-utils": "11.0.0",
+    "@instructure/ui-view": "11.0.0",
+    "keycode": "^2"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/BaseButton/index.tsx

@@ -25,7 +25,6 @@
 import { Component } from 'react'
 import keycode from 'keycode'
 
-import { testable } from '@instructure/ui-testable'
 import {
   getElementType,
   getInteraction,
@@ -36,14 +35,18 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { View } from '@instructure/ui-view'
 import type { ViewProps } from '@instructure/ui-view'
+
+// TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
+// this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
 import { isSafari } from '@instructure/ui-utils'
+import { combineDataCid } from '@instructure/ui-utils'
 
 import { withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { BaseButtonProps, BaseButtonStyleProps } from './props'
 
 /**
@@ -53,11 +56,9 @@ category: components/utilities
 **/
 
 @withStyle(generateStyles, generateComponentTheme)
-@testable()
 class BaseButton extends Component<BaseButtonProps> {
   static readonly componentId = 'BaseButton'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
@@ -285,6 +286,7 @@ class BaseButton extends Component<BaseButtonProps> {
     if ((onClick && as && needsZeroTabIndex) || (isSafari() && as)) {
       tabIndexValue = tabIndex || 0
     }
+
     return (
       <View
         {...passthroughProps(props)}
@@ -309,6 +311,7 @@ class BaseButton extends Component<BaseButtonProps> {
         disabled={isDisabled || isReadOnly}
         css={styles?.baseButton}
         withFocusOutline={withFocusOutline}
+        data-cid={combineDataCid('BaseButton', this.props)}
       >
         <span css={styles?.content}>{this.renderChildren()}</span>
       </View>

package/src/BaseButton/props.ts

@@ -23,8 +23,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type { InteractionType } from '@instructure/ui-react-utils'
 import type {
   Spacing,
@@ -35,10 +33,9 @@ import type {
   ToProp,
   AsElementType,
   BaseButtonTheme,
-  OtherHTMLAttributes,
-  PropValidators
+  OtherHTMLAttributes
 } from '@instructure/shared-types'
-import type { Cursor } from '@instructure/ui-prop-types'
+import type { Cursor } from '@instructure/shared-types'
 import type { ViewProps } from '@instructure/ui-view'
 import { Renderable } from '@instructure/shared-types'
 
@@ -196,40 +193,6 @@ type BaseButtonStyle = ComponentStyle<
   | 'iconWrapper'
   | 'childrenWrapper'
 >
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  elementRef: PropTypes.func,
-  as: PropTypes.elementType,
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  color: PropTypes.oneOf([
-    'primary',
-    'primary-inverse',
-    'secondary',
-    'success',
-    'danger',
-    'ai-primary',
-    'ai-secondary'
-  ]),
-  focusColor: PropTypes.oneOf(['info', 'inverse']),
-  display: PropTypes.oneOf(['inline-block', 'block']),
-  textAlign: PropTypes.oneOf(['start', 'center']),
-  shape: PropTypes.oneOf(['rectangle', 'circle']),
-  withBackground: PropTypes.bool,
-  withBorder: PropTypes.bool,
-  isCondensed: PropTypes.bool,
-  margin: PropTypes.string,
-  cursor: PropTypes.string,
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  tabIndex: PropTypes.number,
-  withFocusOutline: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'children',
@@ -260,4 +223,4 @@ export type {
   BaseButtonStyleProps,
   BaseButtonStyle
 }
-export { propTypes, allowedProps }
+export { allowedProps }