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

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 }

package/src/Button/index.tsx

@@ -24,6 +24,7 @@
 
 import { Component } from 'react'
 
+import { testable } from '@instructure/ui-testable'
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -31,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ButtonProps } from './props'
 
 /**
@@ -41,9 +42,11 @@ 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',
@@ -127,11 +130,7 @@ class Button extends Component<ButtonProps> {
       themeOverride
     }
 
-    return (
-      <BaseButton {...buttonProps} data-cid="Button">
-        {children}
-      </BaseButton>
-    )
+    return <BaseButton {...buttonProps}>{children}</BaseButton>
   }
 }
 

package/src/Button/props.ts

@@ -23,14 +23,17 @@
  */
 
 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/shared-types'
+import type { Cursor } from '@instructure/ui-prop-types'
 import type { ViewProps } from '@instructure/ui-view'
 
 type ButtonOwnProps = {
@@ -136,6 +139,34 @@ 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',
@@ -156,4 +187,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ButtonProps }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/CloseButton/index.tsx

@@ -26,6 +26,7 @@ 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'
@@ -34,7 +35,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { CloseButtonProps } from './props'
 
 /**
@@ -43,9 +44,11 @@ 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
@@ -108,16 +111,14 @@ 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}
-          {...(this.color ? { color: this.color } : {})}
+          color={this.color}
           size={size}
           onClick={onClick}
           margin={margin}
@@ -127,7 +128,6 @@ class CloseButton extends Component<CloseButtonProps> {
           href={href}
           cursor={cursor}
           tabIndex={tabIndex}
-          data-cid="CloseButton"
         >
           <ScreenReaderContent>{screenReaderLabel}</ScreenReaderContent>
         </BaseButton>

package/src/CloseButton/props.ts

@@ -23,6 +23,8 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
   Spacing,
   WithStyleProps,
@@ -32,9 +34,10 @@ import type {
   ToProp,
   AsElementType,
   CloseButtonTheme,
-  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'
 
 type CloseButtonOwnProps = {
@@ -127,6 +130,25 @@ 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',
@@ -145,4 +167,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { CloseButtonProps, CloseButtonStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/CondensedButton/index.tsx

@@ -24,6 +24,7 @@
 
 import { Component } from 'react'
 
+import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -31,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateComponentTheme from './theme'
 import { BaseButton } from '../BaseButton'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { CondensedButtonProps } from './props'
 
 /**
@@ -41,9 +42,11 @@ 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',
@@ -119,7 +122,6 @@ class CondensedButton extends Component<CondensedButtonProps> {
         ref={(component) => {
           this._baseButton = component
         }}
-        data-cid="CondensedButton"
       >
         {children}
       </BaseButton>

package/src/CondensedButton/props.ts

@@ -23,14 +23,17 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 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'
 
 type CondensedButtonOwnProps = {
@@ -114,6 +117,22 @@ 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',
@@ -131,4 +150,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { CondensedButtonProps }
-export { allowedProps }
+export { propTypes, 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 { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { IconButtonProps } from './props'
 
 /**
@@ -44,9 +44,11 @@ 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',
@@ -128,7 +130,6 @@ 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,16 +23,18 @@
  */
 
 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/shared-types'
+import type { Cursor } from '@instructure/ui-prop-types'
 import type { ViewProps } from '@instructure/ui-view'
 
 type IconButtonOwnProps = {
@@ -142,6 +144,35 @@ 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',
@@ -163,4 +194,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { IconButtonProps }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/ToggleButton/index.tsx

@@ -24,12 +24,14 @@
 
 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 { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ToggleButtonProps, ToggleButtonState } from './props'
 
 /**
@@ -38,9 +40,11 @@ category: components
 ---
 **/
 
+@testable()
 class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
   static readonly componentId = 'ToggleButton'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     size: 'medium',
@@ -121,7 +125,6 @@ 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,10 +23,14 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import { PositionPropTypes } from '@instructure/ui-position'
 
 import type {
   AsElementType,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
 import type {
   PlacementPropValues,
@@ -122,6 +126,31 @@ 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',
@@ -140,4 +169,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ToggleButtonProps, ToggleButtonState }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -17,8 +17,10 @@
     { "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" },