@instructure/ui-buttons 10.26.1-snapshot-2 → 10.26.1

package/lib/Button/index.js

@@ -7,6 +7,7 @@ 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");
@@ -15,7 +16,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, _class, _Button;
+var _dec, _dec2, _class, _Button;
 /*
  * The MIT License (MIT)
  *
@@ -45,7 +46,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_Button = class Button extends _react.Component {
+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 {
   constructor(...args) {
     super(...args);
     this._buttonComponent = null;
@@ -108,11 +109,10 @@ 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.allowedProps = _props.allowedProps, _Button.defaultProps = {
+}, _Button.displayName = "Button", _Button.componentId = 'Button', _Button.propTypes = _props.propTypes, _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);
+}, _Button)) || _class) || _class);
 var _default = exports.default = Button;

package/lib/Button/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,22 @@ exports.allowedProps = void 0;
  * 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,6 +9,7 @@ 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");
@@ -18,7 +19,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, _class, _CloseButton;
+var _dec, _dec2, _class, _CloseButton;
 /*
  * The MIT License (MIT)
  *
@@ -47,7 +48,7 @@ var _dec, _class, _CloseButton;
 category: components
 ---
 **/
-let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_CloseButton = class CloseButton extends _react.Component {
+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 {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -94,17 +95,13 @@ 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,
-        ...(this.color ? {
-          color: this.color
-        } : {}),
+        color: this.color,
         size: size,
         onClick: onClick,
         margin: margin,
@@ -114,14 +111,13 @@ 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.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
+}, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.propTypes = _props.propTypes, _CloseButton.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
   interaction: void 0,
   type: 'button',
@@ -131,5 +127,5 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
   margin: '0',
   as: 'button',
   cursor: 'pointer'
-}, _CloseButton)) || _class);
+}, _CloseButton)) || _class) || _class);
 var _default = exports.default = CloseButton;

package/lib/CloseButton/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,20 @@ exports.allowedProps = void 0;
  * 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,6 +7,7 @@ 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"));
@@ -14,7 +15,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, _class, _CondensedButton;
+var _dec, _dec2, _class, _CondensedButton;
 /*
  * The MIT License (MIT)
  *
@@ -44,7 +45,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_CondensedButton = class CondensedButton extends _react.Component {
+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 {
   constructor(...args) {
     super(...args);
     this._baseButton = null;
@@ -99,11 +100,10 @@ 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.allowedProps = _props.allowedProps, _CondensedButton.defaultProps = {
+}, _CondensedButton.displayName = "CondensedButton", _CondensedButton.componentId = 'CondensedButton', _CondensedButton.propTypes = _props.propTypes, _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);
+}, _CondensedButton)) || _class) || _class);
 var _default = exports.default = CondensedButton;

package/lib/CondensedButton/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,19 @@ exports.allowedProps = void 0;
  * 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, _class, _IconButton;
+var _dec, _dec2, _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), _dec(_class = (_IconButton = class IconButton extends _react.Component {
+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 {
   constructor(...args) {
     super(...args);
     this._baseButton = null;
@@ -105,13 +105,12 @@ 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.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
+}, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.propTypes = _props.propTypes, _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
   type: 'button',
   size: 'medium',
   as: 'button',
@@ -123,5 +122,5 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
   withBorder: true,
   margin: '0',
   cursor: 'pointer'
-}, _IconButton)) || _class);
+}, _IconButton)) || _class) || _class);
 var _default = exports.default = IconButton;

package/lib/IconButton/props.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +30,23 @@ exports.allowedProps = void 0;
  * 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,6 +7,7 @@ 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");
@@ -14,6 +15,7 @@ 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)
  *
@@ -42,8 +44,7 @@ const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNod
 category: components
 ---
 **/
-
-class ToggleButton extends _react.Component {
+let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_ToggleButton = class ToggleButton extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -105,17 +106,11 @@ class ToggleButton extends _react.Component {
         onClick: onClick,
         interaction: interaction,
         "aria-pressed": status === 'pressed',
-        "data-cid": "ToggleButton",
         children: (0, _callRenderProp.callRenderProp)(renderIcon)
       })
     });
   }
-}
-exports.ToggleButton = ToggleButton;
-ToggleButton.displayName = "ToggleButton";
-ToggleButton.componentId = 'ToggleButton';
-ToggleButton.allowedProps = _props.allowedProps;
-ToggleButton.defaultProps = {
+}, _ToggleButton.displayName = "ToggleButton", _ToggleButton.componentId = 'ToggleButton', _ToggleButton.propTypes = _props.propTypes, _ToggleButton.allowedProps = _props.allowedProps, _ToggleButton.defaultProps = {
   size: 'medium',
   as: 'button',
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
@@ -124,5 +119,5 @@ ToggleButton.defaultProps = {
   color: 'secondary',
   placement: 'top center',
   constrain: 'window'
-};
+}, _ToggleButton)) || _class);
 var _default = exports.default = ToggleButton;

package/lib/ToggleButton/props.js

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +31,20 @@ exports.allowedProps = void 0;
  * 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-snapshot-2",
+  "version": "10.26.1",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,33 +23,36 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.1",
+    "@instructure/ui-babel-preset": "10.26.1",
+    "@instructure/ui-themes": "10.26.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-dom-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-position": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-tooltip": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-view": "10.26.1-snapshot-2",
-    "keycode": "^2"
+    "@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"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/BaseButton/index.tsx

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 import keycode from 'keycode'
 
+import { testable } from '@instructure/ui-testable'
 import {
   getElementType,
   getInteraction,
@@ -35,18 +36,14 @@ 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 { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { BaseButtonProps, BaseButtonStyleProps } from './props'
 
 /**
@@ -56,9 +53,11 @@ 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',
@@ -286,7 +285,6 @@ class BaseButton extends Component<BaseButtonProps> {
     if ((onClick && as && needsZeroTabIndex) || (isSafari() && as)) {
       tabIndexValue = tabIndex || 0
     }
-
     return (
       <View
         {...passthroughProps(props)}
@@ -311,7 +309,6 @@ 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,6 +23,8 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type { InteractionType } from '@instructure/ui-react-utils'
 import type {
   Spacing,
@@ -33,9 +35,10 @@ import type {
   ToProp,
   AsElementType,
   BaseButtonTheme,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
-import type { Cursor } from '@instructure/shared-types'
+import type { Cursor } from '@instructure/ui-prop-types'
 import type { ViewProps } from '@instructure/ui-view'
 import { Renderable } from '@instructure/shared-types'
 
@@ -193,6 +196,40 @@ 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',
@@ -223,4 +260,4 @@ export type {
   BaseButtonStyleProps,
   BaseButtonStyle
 }
-export { allowedProps }
+export { propTypes, allowedProps }