@instructure/ui-buttons 8.8.1-snapshot.7 → 8.9.1-snapshot.2

package/lib/ToggleButton/index.js

@@ -13,12 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -27,6 +23,8 @@ var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
 
 var _IconButton = require("../IconButton");
 
+var _props = require("./props");
+
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
 
 var _dec, _class, _class2, _temp;
@@ -94,89 +92,15 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
     }), (0, _callRenderProp.callRenderProp)(renderIcon)));
   }
 
-}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = {
-  /**
-   * Text to output only to screen readers
-   */
-  screenReaderLabel: _propTypes.default.string.isRequired,
-
-  /**
-   * Text to render in the tooltip shown on hover/focus
-   */
-  renderTooltipContent: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * An icon or function that returns an icon
-   */
-  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
-   */
-  status: _propTypes.default.oneOf(['pressed', 'unpressed']).isRequired,
-
-  /**
-   * The element to render as the component root; `button` by default
-   */
-  as: _propTypes.default.elementType,
-
-  /**
-   * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
-   */
-  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * The size of the `ToggleButton`
-   */
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Provides a reference to `ToggleButton`'s underlying HTML element
-   */
-  elementRef: _propTypes.default.func,
-
-  /**
-   * Callback fired when the `ToggleButton` is clicked
-   */
-  onClick: _propTypes.default.func,
-
-  /**
-   * The color in which to display the icon
-   */
-  color: _propTypes.default.string,
-
-  /**
-   * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
-   */
-  isShowingTooltip: _propTypes.default.bool,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   */
-  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-
-  /**
-   * The placement of the tooltip in relation to the button
-   */
-  placement: _PositionPropTypes.PositionPropTypes.placement,
-
-  /**
-   * The parent in which to constrain the tooltip.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element.
-   */
-  constrain: _PositionPropTypes.PositionPropTypes.constrain
-}, _class2.defaultProps = {
+}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   size: 'medium',
   as: 'button',
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
   elementRef: el => {},
   renderIcon: () => {},
   onClick: () => {},
   mountNode: null,
   color: 'secondary',
-  isShowingTooltip: void 0,
   placement: 'top center',
   constrain: 'window'
 }, _temp)) || _class);

package/lib/ToggleButton/props.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const propTypes = {
+  /**
+   * Text to output only to screen readers
+   */
+  screenReaderLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * Text to render in the tooltip shown on hover/focus
+   */
+  renderTooltipContent: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+
+  /**
+   * An icon or function that returns an icon
+   */
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+
+  /**
+   * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
+   */
+  status: _propTypes.default.oneOf(['pressed', 'unpressed']).isRequired,
+
+  /**
+   * The element to render as the component root; `button` by default
+   */
+  as: _propTypes.default.elementType,
+
+  /**
+   * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
+   */
+  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
+
+  /**
+   * The size of the `ToggleButton`
+   */
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * Provides a reference to `ToggleButton`'s underlying HTML element
+   */
+  elementRef: _propTypes.default.func,
+
+  /**
+   * Callback fired when the `ToggleButton` is clicked
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * The color in which to display the icon
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
+   */
+  isShowingTooltip: _propTypes.default.bool,
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   */
+  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
+
+  /**
+   * The placement of the tooltip in relation to the button
+   */
+  placement: _PositionPropTypes.PositionPropTypes.placement,
+
+  /**
+   * The parent in which to constrain the tooltip.
+   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
+   * or a function returning an element.
+   */
+  constrain: _PositionPropTypes.PositionPropTypes.constrain
+};
+exports.propTypes = propTypes;
+const allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "8.8.1-snapshot.7+90b251d58",
+  "version": "8.9.1-snapshot.2+7f5faa3df",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-queries": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-themes": "8.8.1-snapshot.7+90b251d58"
+    "@instructure/ui-babel-preset": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-locator": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-queries": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-themes": "8.9.1-snapshot.2+7f5faa3df"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/emotion": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-a11y-content": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-a11y-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-icons": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-position": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-testable": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-tooltip": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-view": "8.8.1-snapshot.7+90b251d58",
+    "@instructure/console": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/emotion": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/shared-types": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-a11y-content": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-a11y-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-color-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-dom-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-icons": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-position": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-react-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-testable": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-tooltip": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-view": "8.9.1-snapshot.2+7f5faa3df",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "90b251d580c75205b6cbb884fe922059cfc494dd"
+  "gitHead": "7f5faa3df83667636304e0901ef1008d98dffc9a"
 }

package/src/BaseButton/index.tsx

@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 import keycode from 'keycode'
 
 import { testable } from '@instructure/ui-testable'
@@ -38,11 +37,13 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { View } from '@instructure/ui-view'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
-import { BaseButtonProps, BaseButtonStyleProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { BaseButtonProps, BaseButtonStyleProps } from './props'
 
 /**
 ---
@@ -55,108 +56,8 @@ category: components/utilities
 class BaseButton extends Component<BaseButtonProps> {
   static readonly componentId = 'BaseButton'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * Specifies the `Button` children.
-     */
-    children: PropTypes.node,
-    /**
-     * Specifies the type of the `Button`'s underlying html element.
-     */
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
-    /**
-     * The size of the `Button`
-     */
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    /**
-     * Provides a reference to the `Button`'s underlying html element.
-     */
-    elementRef: PropTypes.func,
-    /**
-     * The element to render as the component root, `Button` by default.
-     */
-    as: PropTypes.elementType,
-    /**
-     * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
-     */
-    interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-    /**
-     * Specifies the color for the `Button`.
-     */
-    color: PropTypes.oneOf([
-      'primary',
-      'primary-inverse',
-      'secondary',
-      'success',
-      'danger'
-    ]),
-    /**
-     * Override the `Button`'s default focus outline color.
-     */
-    focusColor: PropTypes.oneOf(['info', 'inverse']),
-    /**
-     * The `Button` display property. When set to `inline-block`, the `Button` displays inline with other elements.
-     * When set to block, the `Button` expands to fill the width of the container.
-     */
-    display: PropTypes.oneOf(['inline-block', 'block']),
-    /**
-     * Sets the alignment of the `Button` children and/or icon.
-     */
-    textAlign: PropTypes.oneOf(['start', 'center']),
-    /**
-     * Specifies if the `Button` shape should be a circle or rectangle.
-     */
-    shape: PropTypes.oneOf(['rectangle', 'circle']),
-    /**
-     * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
-     */
-    withBackground: PropTypes.bool,
-    /**
-     * Specifies if the `Button` should render with a border.
-     */
-    withBorder: PropTypes.bool,
-    /**
-     * Designates if the `Button` should render without padding. This option should only be set when `withBorder` and
-     * `withBackground` are also set to false.
-     */
-    isCondensed: PropTypes.bool,
-    /**
-     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-     */
-    margin: ThemeablePropTypes.spacing,
-    /**
-     * Specify a mouse cursor to use when hovering over the button.
-     * The `pointer` cursor is used by default.
-     */
-    cursor: PropTypes.string,
-    /**
-     * Specifies an href attribute for the `Button`'s underlying html element.
-     */
-    href: PropTypes.string,
-    /**
-     * Callback fired when the `Button` is clicked.
-     */
-    onClick: PropTypes.func,
-    /**
-     * Callback fired when the `Button` receives a keydown event.
-     */
-    onKeyDown: PropTypes.func,
-    /**
-     * An icon, or function that returns an icon.
-     */
-    renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * Specifies the tabindex of the `Button`.
-     */
-    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  } as const
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
     type: 'button',
@@ -165,9 +66,7 @@ class BaseButton extends Component<BaseButtonProps> {
     elementRef: (el) => {},
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
     color: 'secondary',
-    focusColor: undefined,
     shape: 'rectangle',
     display: 'inline-block',
     textAlign: 'start',
@@ -176,12 +75,8 @@ class BaseButton extends Component<BaseButtonProps> {
     isCondensed: false,
     margin: '0',
     cursor: 'pointer',
-    href: undefined,
-    onClick: undefined,
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onKeyDown: (event) => {},
-    renderIcon: undefined,
-    tabIndex: undefined
+    onKeyDown: (event) => {}
   } as const
 
   _rootElement = null
@@ -313,7 +208,7 @@ class BaseButton extends Component<BaseButtonProps> {
   renderChildren() {
     const { renderIcon, children, styles } = this.props
 
-    const wrappedChildren = <span css={styles.children}>{children}</span>
+    const wrappedChildren = <span css={styles?.children}>{children}</span>
 
     if (!renderIcon) {
       return wrappedChildren
@@ -321,25 +216,25 @@ class BaseButton extends Component<BaseButtonProps> {
 
     const { hasOnlyIconVisible } = this
     const wrappedIcon = (
-      <span css={styles.iconSVG}>{callRenderProp(renderIcon)}</span>
+      <span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
     )
 
     const flexChildren = hasOnlyIconVisible ? (
-      <span css={styles.iconOnly}>
+      <span css={styles?.iconOnly}>
         {wrappedIcon}
         {children}
       </span>
     ) : (
       [
-        <span key="icon" css={styles.iconWrapper}>
+        <span key="icon" css={styles?.iconWrapper}>
           {wrappedIcon}
         </span>,
-        <span key="children" css={styles.childrenWrapper}>
+        <span key="children" css={styles?.childrenWrapper}>
           {wrappedChildren}
         </span>
       ]
     )
-    return <span css={styles.childrenLayout}>{flexChildren}</span>
+    return <span css={styles?.childrenLayout}>{flexChildren}</span>
   }
 
   render() {
@@ -392,9 +287,9 @@ class BaseButton extends Component<BaseButtonProps> {
         //@ts-expect-error fix this later to be number
         tabIndex={onClick && as ? tabIndex || '0' : tabIndex}
         disabled={isDisabled || isReadOnly}
-        css={isEnabled ? styles.baseButton : null}
+        css={isEnabled ? styles?.baseButton : null}
       >
-        <span css={styles.content}>{this.renderChildren()}</span>
+        <span css={styles?.content}>{this.renderChildren()}</span>
       </View>
     )
   }