@instructure/ui-buttons 10.26.1 → 11.0.0

package/src/Button/index.tsx

@@ -24,7 +24,6 @@
 
 import { Component } from 'react'
 
-import { testable } from '@instructure/ui-testable'
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -32,7 +31,7 @@ import { withStyle } from '@instructure/emotion'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ButtonProps } from './props'
 
 /**
@@ -42,11 +41,9 @@ category: components
 **/
 // needed for listing the available theme variables on docs page
 @withStyle(null, generateComponentTheme)
-@testable()
 class Button extends Component<ButtonProps> {
   static readonly componentId = 'Button'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
@@ -130,7 +127,11 @@ class Button extends Component<ButtonProps> {
       themeOverride
     }
 
-    return <BaseButton {...buttonProps}>{children}</BaseButton>
+    return (
+      <BaseButton {...buttonProps} data-cid="Button">
+        {children}
+      </BaseButton>
+    )
   }
 }
 

package/src/Button/props.ts

@@ -23,17 +23,14 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 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 { Cursor } from '@instructure/shared-types'
 import type { ViewProps } from '@instructure/ui-view'
 
 type ButtonOwnProps = {
@@ -139,34 +136,6 @@ 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',
-    'ai-primary',
-    'ai-secondary'
-  ]),
-  focusColor: PropTypes.oneOf(['info', 'inverse']),
-  display: PropTypes.oneOf(['inline-block', 'block']),
-  textAlign: PropTypes.oneOf(['start', 'center']),
-  withBackground: PropTypes.bool,
-  margin: PropTypes.string,
-  cursor: PropTypes.string,
-  href: PropTypes.string,
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  onClick: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'children',
@@ -187,4 +156,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ButtonProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/CloseButton/index.tsx

@@ -26,7 +26,6 @@ import { Component } from 'react'
 
 import { IconXSolid } from '@instructure/ui-icons'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
-import { testable } from '@instructure/ui-testable'
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -35,7 +34,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { CloseButtonProps } from './props'
 
 /**
@@ -44,11 +43,9 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class CloseButton extends Component<CloseButtonProps> {
   static readonly componentId = 'CloseButton'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
@@ -111,14 +108,16 @@ class CloseButton extends Component<CloseButtonProps> {
       <span
         {...passthroughProps(props)}
         css={styles?.closeButton}
-        ref={(el) => (this.ref = el)}
+        ref={(el) => {
+          this.ref = el
+        }}
       >
         <BaseButton
           renderIcon={IconXSolid}
           elementRef={this.handleRef}
           interaction={this.interaction}
           type={type}
-          color={this.color}
+          {...(this.color ? { color: this.color } : {})}
           size={size}
           onClick={onClick}
           margin={margin}
@@ -128,6 +127,7 @@ class CloseButton extends Component<CloseButtonProps> {
           href={href}
           cursor={cursor}
           tabIndex={tabIndex}
+          data-cid="CloseButton"
         >
           <ScreenReaderContent>{screenReaderLabel}</ScreenReaderContent>
         </BaseButton>

package/src/CloseButton/props.ts

@@ -23,8 +23,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -34,10 +32,9 @@ import type {
   ToProp,
   AsElementType,
   CloseButtonTheme,
-  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'
 
 type CloseButtonOwnProps = {
@@ -130,25 +127,6 @@ type CloseButtonProps = CloseButtonOwnProps &
   ToProp
 
 type CloseButtonStyle = ComponentStyle<'closeButton'>
-
-const propTypes: PropValidators<PropKeys> = {
-  screenReaderLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-    .isRequired,
-  color: PropTypes.oneOf(['primary', 'primary-inverse']),
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  elementRef: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  onClick: PropTypes.func,
-  margin: PropTypes.string,
-  placement: PropTypes.oneOf(['start', 'end', 'static']),
-  offset: PropTypes.oneOf(['none', 'x-small', 'small', 'medium']),
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  as: PropTypes.elementType,
-  href: PropTypes.string,
-  cursor: PropTypes.string,
-  tabIndex: PropTypes.number
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'color',
@@ -167,4 +145,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { CloseButtonProps, CloseButtonStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/CondensedButton/index.tsx

@@ -24,7 +24,6 @@
 
 import { Component } from 'react'
 
-import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -32,7 +31,7 @@ import { withStyle } from '@instructure/emotion'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { CondensedButtonProps } from './props'
 
 /**
@@ -42,11 +41,9 @@ category: components
 **/
 // needed for listing the available theme variables on docs page
 @withStyle(null, generateComponentTheme)
-@testable()
 class CondensedButton extends Component<CondensedButtonProps> {
   static readonly componentId = 'CondensedButton'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
@@ -122,6 +119,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
         ref={(component) => {
           this._baseButton = component
         }}
+        data-cid="CondensedButton"
       >
         {children}
       </BaseButton>

package/src/CondensedButton/props.ts

@@ -23,17 +23,14 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 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'
 
 type CondensedButtonOwnProps = {
@@ -117,22 +114,6 @@ type CondensedButtonProps = CondensedButtonOwnProps &
   OtherHTMLAttributes<CondensedButtonOwnProps> &
   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']),
-  margin: PropTypes.string,
-  cursor: PropTypes.string,
-  href: PropTypes.string,
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  onClick: PropTypes.func,
-  display: PropTypes.oneOf(['inline-block', 'block'])
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'children',
@@ -150,4 +131,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { CondensedButtonProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/IconButton/index.tsx

@@ -24,16 +24,16 @@
 
 import { Component } from 'react'
 
-import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { combineDataCid } from '@instructure/ui-utils'
 
 import { withStyle } from '@instructure/emotion'
 
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { IconButtonProps } from './props'
 
 /**
@@ -44,11 +44,9 @@ category: components
 
 // needed for listing the available theme variables on docs page
 @withStyle(null, generateComponentTheme)
-@testable()
 class IconButton extends Component<IconButtonProps> {
   static readonly componentId = 'IconButton'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
@@ -130,6 +128,7 @@ class IconButton extends Component<IconButtonProps> {
         ref={(component) => {
           this._baseButton = component
         }}
+        data-cid={combineDataCid('IconButton', this.props)}
       >
         <ScreenReaderContent>{screenReaderLabel}</ScreenReaderContent>
       </BaseButton>

package/src/IconButton/props.ts

@@ -23,18 +23,16 @@
  */
 
 import { ReactNode } from 'react'
-import PropTypes from 'prop-types'
 
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 import type {
   ToProp,
   AsElementType,
-  PropValidators,
   BaseButtonTheme,
   OtherHTMLAttributes,
   Renderable
 } 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'
 
 type IconButtonOwnProps = {
@@ -144,35 +142,6 @@ type IconButtonProps = IconButtonOwnProps &
   WithStyleProps<BaseButtonTheme, null> &
   OtherHTMLAttributes<IconButtonOwnProps> &
   ToProp
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  screenReaderLabel: PropTypes.string.isRequired,
-  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']),
-  shape: PropTypes.oneOf(['rectangle', 'circle']),
-  withBackground: PropTypes.bool,
-  withBorder: PropTypes.bool,
-  margin: PropTypes.string,
-  cursor: PropTypes.string,
-  href: PropTypes.string,
-  onClick: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'children',
@@ -194,4 +163,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { IconButtonProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/ToggleButton/index.tsx

@@ -24,14 +24,12 @@
 
 import { Component } from 'react'
 
-import { testable } from '@instructure/ui-testable'
-
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 
 import { Tooltip } from '@instructure/ui-tooltip'
 import { IconButton } from '../IconButton'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ToggleButtonProps, ToggleButtonState } from './props'
 
 /**
@@ -40,11 +38,9 @@ category: components
 ---
 **/
 
-@testable()
 class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
   static readonly componentId = 'ToggleButton'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     size: 'medium',
@@ -125,6 +121,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
           onClick={onClick}
           interaction={interaction}
           aria-pressed={status === 'pressed'}
+          data-cid="ToggleButton"
         >
           {callRenderProp(renderIcon)}
         </IconButton>

package/src/ToggleButton/props.ts

@@ -23,14 +23,10 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { PositionPropTypes } from '@instructure/ui-position'
 
 import type {
   AsElementType,
-  OtherHTMLAttributes,
-  PropValidators
+  OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type {
   PlacementPropValues,
@@ -126,31 +122,6 @@ type ToggleButtonProps = ToggleButtonOwnProps &
 type ToggleButtonState = {
   isShowingTooltip: boolean
 }
-
-const propTypes: PropValidators<PropKeys> = {
-  screenReaderLabel: PropTypes.string.isRequired,
-  renderTooltipContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-    .isRequired,
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  status: PropTypes.oneOf(['pressed', 'unpressed']).isRequired,
-  as: PropTypes.elementType,
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  elementRef: PropTypes.func,
-  onClick: PropTypes.func,
-  color: PropTypes.oneOf([
-    'primary',
-    'primary-inverse',
-    'secondary',
-    'success',
-    'danger'
-  ]),
-  isShowingTooltip: PropTypes.bool,
-  mountNode: PositionPropTypes.mountNode,
-  placement: PositionPropTypes.placement,
-  constrain: PositionPropTypes.constrain
-}
-
 const allowedProps: AllowedPropKeys = [
   'as',
   'color',
@@ -169,4 +140,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ToggleButtonProps, ToggleButtonState }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -17,10 +17,8 @@
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },