@instructure/ui-buttons 8.13.1-snapshot.9 → 8.14.0

package/src/BaseButton/index.tsx

@@ -23,9 +23,10 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 import keycode from 'keycode'
 
+import { warn } from '@instructure/console'
 import { testable } from '@instructure/ui-testable'
 import {
   getElementType,
@@ -36,6 +37,7 @@ import {
 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'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -49,6 +51,7 @@ import type { BaseButtonProps, BaseButtonStyleProps } from './props'
 ---
 category: components/utilities
 ---
+@tsProps
 **/
 
 @withStyle(generateStyles, generateComponentTheme)
@@ -59,13 +62,11 @@ class BaseButton extends Component<BaseButtonProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     type: 'button',
     size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
     color: 'secondary',
     shape: 'rectangle',
     display: 'inline-block',
@@ -74,23 +75,19 @@ class BaseButton extends Component<BaseButtonProps> {
     withBorder: true,
     isCondensed: false,
     margin: '0',
-    cursor: 'pointer',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onKeyDown: (event) => {}
+    cursor: 'pointer'
   } as const
 
   ref: Element | null = null
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStylesVariables)
+    this.props.makeStyles?.(this.makeStylesVariables)
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStylesVariables)
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStylesVariables)
   }
+
   get _rootElement() {
     console.warn(
       '_rootElement property is deprecated and will be removed in v9, please use ref instead'
@@ -131,6 +128,20 @@ class BaseButton extends Component<BaseButtonProps> {
     return this.interaction === 'enabled'
   }
 
+  // TODO: delete once the type of tabIndex is changed to number only
+  get tabIndex() {
+    const { tabIndex } = this.props
+
+    if (typeof tabIndex === 'string') {
+      warn(
+        false,
+        'The `string` value for `tabIndex` is deprecated. Only `number` type will be accepted from V9.0.0.'
+      )
+      return parseInt(tabIndex)
+    }
+    return tabIndex
+  }
+
   get focusColor() {
     const { color, focusColor, withBackground } = this.props
 
@@ -147,8 +158,7 @@ class BaseButton extends Component<BaseButtonProps> {
       return 'info'
     }
 
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    return color.includes('inverse') ? 'inverse' : 'info'
+    return color!.includes('inverse') ? 'inverse' : 'info'
   }
 
   get focused() {
@@ -156,8 +166,7 @@ class BaseButton extends Component<BaseButtonProps> {
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    this.ref && this.ref.focus()
+    this.ref && (this.ref as HTMLElement).focus()
   }
 
   handleElementRef = (el: Element | null) => {
@@ -170,8 +179,7 @@ class BaseButton extends Component<BaseButtonProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleClick = (event) => {
+  handleClick = (event: React.MouseEvent<ViewProps>) => {
     const { onClick } = this.props
     const { interaction } = this
 
@@ -186,13 +194,13 @@ class BaseButton extends Component<BaseButtonProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: React.KeyboardEvent<ViewProps>) => {
     const { onClick, onKeyDown, href } = this.props
     const { interaction } = this
 
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    onKeyDown(event)
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event)
+    }
 
     // behave like a button when space key is pressed
     const { space, enter } = keycode.codes
@@ -209,8 +217,7 @@ class BaseButton extends Component<BaseButtonProps> {
       }
 
       if (href) {
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        this.ref && this.ref.click()
+        this.ref && (this.ref as HTMLElement).click()
       }
     }
   }
@@ -274,6 +281,8 @@ class BaseButton extends Component<BaseButtonProps> {
 
     const { isDisabled, isEnabled, isReadOnly } = this
 
+    const tabIndexNumber = this.tabIndex
+
     return (
       <View
         {...passthroughProps(props)}
@@ -294,8 +303,7 @@ class BaseButton extends Component<BaseButtonProps> {
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         role={onClick && as !== 'button' ? 'button' : undefined}
-        //@ts-expect-error fix this later to be number
-        tabIndex={onClick && as ? tabIndex || '0' : tabIndex}
+        tabIndex={onClick && as ? tabIndexNumber || 0 : tabIndexNumber}
         disabled={isDisabled || isReadOnly}
         css={isEnabled ? styles?.baseButton : null}
       >

package/src/BaseButton/props.ts

@@ -34,34 +34,130 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
+  ToProp,
   AsElementType,
   BaseButtonTheme,
   OtherHTMLAttributes,
   PropValidators
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/ui-prop-types'
+import type { ViewProps } from '@instructure/ui-view'
 
 type BaseButtonOwnProps = {
+  /**
+   * Specifies the `Button` children.
+   */
   children?: React.ReactNode
+
+  /**
+   * Specifies the type of the `Button`'s underlying html element.
+   */
   type?: 'button' | 'submit' | 'reset'
+
+  /**
+   * The size of the `Button`
+   */
   size?: 'small' | 'medium' | 'large'
+
+  /**
+   * Provides a reference to the `Button`'s underlying html element.
+   */
   elementRef?: (element: Element | null) => void
+
+  /**
+   * The element to render as the component root, `Button` by default.
+   */
   as?: AsElementType
+
+  /**
+   * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
+   */
   interaction?: InteractionType
+
+  /**
+   * Specifies the color for the `Button`.
+   */
   color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+
+  /**
+   * Override the `Button`'s default focus outline color.
+   */
   focusColor?: '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?: 'inline-block' | 'block'
+
+  /**
+   * Sets the alignment of the `Button` children and/or icon.
+   */
   textAlign?: 'start' | 'center'
+
+  /**
+   * Specifies if the `Button` shape should be a circle or rectangle.
+   */
   shape?: 'rectangle' | 'circle'
+
+  /**
+   * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
+   */
   withBackground?: boolean
+
+  /**
+   * Specifies if the `Button` should render with a border.
+   */
   withBorder?: boolean
+
+  /**
+   * Designates if the `Button` should render without padding. This option should only be set when `withBorder` and
+   * `withBackground` are also set to false.
+   */
   isCondensed?: boolean
+
+  /**
+   * 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?: Spacing
+
+  /**
+   * Specify a mouse cursor to use when hovering over the button.
+   * The `pointer` cursor is used by default.
+   */
   cursor?: Cursor
+
+  /**
+   * Specifies an href attribute for the `Button`'s underlying html element.
+   */
   href?: string
-  onClick?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
+
+  /**
+   * Callback fired when the `Button` is clicked.
+   */
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+
+  /**
+   * Callback fired when the `Button` receives a keydown event.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<ViewProps>) => void
+
+  /**
+   * An icon, or function that returns an icon.
+   */
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
+
+  // Deprecated `string` tabIndex type
+  // TODO: remove string type in v9
+  /**
+   * Specifies the tabindex of the `Button`.
+   *
+   * (`string` type is __deprecated__, use `number`)
+   */
   tabIndex?: number | string
 }
 
@@ -76,7 +172,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BaseButtonProps = BaseButtonOwnProps &
   WithStyleProps<BaseButtonTheme, BaseButtonStyle> &
-  OtherHTMLAttributes<BaseButtonOwnProps>
+  OtherHTMLAttributes<BaseButtonOwnProps> &
+  ToProp
 
 type BaseButtonStyle = ComponentStyle<
   | 'baseButton'
@@ -90,33 +187,12 @@ type BaseButtonStyle = ComponentStyle<
 >
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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',
@@ -124,66 +200,21 @@ const propTypes: PropValidators<PropKeys> = {
     '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`.
-   */
+  // Deprecated `string` tabIndex type
+  // TODO: remove string type in v9
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
 

package/src/BaseButton/theme.ts

@@ -75,12 +75,7 @@ const generateButtonThemeVars = <Variant extends Variants>({
     [`${style}Background`]: backgroundColor,
     [`${style}HoverBackground`]: darken(backgroundColor, 10),
     [`${style}ActiveBackground`]: darken(backgroundColor, 10),
-    [`${style}ActiveBoxShadow`]: `${activeShadow} ${darken(
-      borderColor,
-      20,
-      // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 3.
-      0.45
-    )}`,
+    [`${style}ActiveBoxShadow`]: `${activeShadow} ${darken(borderColor, 20)}`,
 
     [`${style}GhostColor`]: ghostTextColor,
     [`${style}GhostBorderColor`]: ghostBorderColor,

package/src/Button/index.tsx

@@ -39,6 +39,7 @@ import type { ButtonProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 // needed for listing the available theme variables on docs page
 @withStyle(null, generateComponentTheme)
@@ -49,13 +50,11 @@ class Button extends Component<ButtonProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     type: 'button',
     size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
     color: 'secondary',
     display: 'inline-block',
     textAlign: 'center',
@@ -64,17 +63,15 @@ class Button extends Component<ButtonProps> {
     cursor: 'pointer'
   }
 
-  _buttonComponent = null
+  _buttonComponent: BaseButton | null = null
 
   ref: Element | null = null
 
   get focused() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     return this._buttonComponent && this._buttonComponent.focused
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     this._buttonComponent && this._buttonComponent.focus()
   }
 
@@ -88,8 +85,7 @@ class Button extends Component<ButtonProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'component' implicitly has an 'any' type... Remove this comment to see the full error message
-  handleButtonRef = (component) => {
+  handleButtonRef = (component: BaseButton | null) => {
     this._buttonComponent = component
   }
 

package/src/Button/props.ts

@@ -29,110 +29,135 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 import type {
+  ToProp,
   AsElementType,
   PropValidators,
   BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/ui-prop-types'
+import type { ViewProps } from '@instructure/ui-view'
 
 type ButtonOwnProps = {
-  children?: React.ReactNode
-  type?: 'button' | 'submit' | 'reset'
-  size?: 'small' | 'medium' | 'large'
-  elementRef?: (element: Element | null) => void
-  as?: AsElementType
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
-  focusColor?: 'info' | 'inverse'
-  display?: 'inline-block' | 'block'
-  textAlign?: 'start' | 'center'
-  withBackground?: boolean
-  margin?: Spacing
-  cursor?: Cursor
-  href?: string
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
-}
-
-type PropKeys = keyof ButtonOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type ButtonProps = ButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, null> &
-  OtherHTMLAttributes<ButtonOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Specifies the `Button` children.
    */
-  children: PropTypes.node,
+  children?: React.ReactNode
+
   /**
    * Specifies the type of the `Button`'s underlying html element.
    */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type?: 'button' | 'submit' | 'reset'
+
   /**
    * The size of the `Button`
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
+
   /**
    * Provides a reference to the `Button`'s underlying html element.
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * The element to render as the component root, `Button` by default.
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
   /**
    * Specifies the color for the `Button`.
    */
-  color: PropTypes.oneOf([
-    'primary',
-    'primary-inverse',
-    'secondary',
-    'success',
-    'danger'
-  ]),
+  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+
   /**
    * Override the `Button`'s default focus outline color.
    */
-  focusColor: PropTypes.oneOf(['info', 'inverse']),
+  focusColor?: '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']),
+  display?: 'inline-block' | 'block'
+
   /**
    * Sets the alignment of the `Button` children and/or icon.
    */
-  textAlign: PropTypes.oneOf(['start', 'center']),
+  textAlign?: 'start' | 'center'
+
   /**
    * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
    */
-  withBackground: PropTypes.bool,
+  withBackground?: boolean
+
   /**
    * 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,
+  margin?: Spacing
+
   /**
    * Specify a mouse cursor to use when hovering over the button.
    * The `pointer` cursor is used by default.
    */
-  cursor: PropTypes.string,
+  cursor?: Cursor
+
   /**
    * Specifies an href attribute for the `Button`'s underlying html element.
    */
-  href: PropTypes.string,
+  href?: string
+
   /**
    * An icon, or function that returns an icon.
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
+
+  /**
+   * Callback fired when the `Button` is clicked.
+   */
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+}
+
+type PropKeys = keyof ButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ButtonProps = ButtonOwnProps &
+  WithStyleProps<BaseButtonTheme, null> &
+  OtherHTMLAttributes<ButtonOwnProps> &
+  ToProp
+
+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'
+  ]),
+  focusColor: PropTypes.oneOf(['info', 'inverse']),
+  display: PropTypes.oneOf(['inline-block', 'block']),
+  textAlign: PropTypes.oneOf(['start', 'center']),
+  withBackground: PropTypes.bool,
+  margin: ThemeablePropTypes.spacing,
+  cursor: PropTypes.string,
+  href: PropTypes.string,
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onClick: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -150,7 +175,8 @@ const allowedProps: AllowedPropKeys = [
   'size',
   'textAlign',
   'type',
-  'withBackground'
+  'withBackground',
+  'onClick'
 ]
 
 export type { ButtonProps }