diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a9d836389f5b..927fae777c62 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -420,21 +420,7 @@ Map { "isSelected": Object { "type": "bool", }, - "kind": Object { - "args": Array [ - Array [ - "primary", - "secondary", - "danger", - "ghost", - "danger--primary", - "danger--ghost", - "danger--tertiary", - "tertiary", - ], - ], - "type": "oneOf", - }, + "kind": [Function], "onBlur": Object { "type": "func", }, diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index aaacd428199c..5ef1f557c7b9 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import React, { useRef } from 'react'; -import { IconButton, IconButtonKind } from '../IconButton'; +import { IconButton, IconButtonKind, IconButtonKinds } from '../IconButton'; import { composeEventHandlers } from '../../tools/events'; import { PolymorphicProps } from '../../types/common'; import { PopoverAlignment } from '../Popover'; @@ -74,7 +74,9 @@ export interface ButtonBaseProps /** * Specify the kind of Button you want to create */ - kind?: ButtonKind; + kind?: ButtonBaseProps['hasIconOnly'] extends true + ? IconButtonKind + : ButtonKind; /** * Optional prop to allow overriding the icon rendering. @@ -266,8 +268,24 @@ Button.propTypes = { /** * Specify the kind of Button you want to create */ - // TODO: this should be either ButtonKinds or IconButtonKinds based on the value of "hasIconOnly" - kind: PropTypes.oneOf(ButtonKinds), + kind: (props, propName, componentName) => { + const { hasIconOnly } = props; + const validKinds = hasIconOnly ? IconButtonKinds : ButtonKinds; + + if (props[propName] === undefined) { + return null; + } + + if (!validKinds.includes(props[propName])) { + return new Error( + `Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join( + ', ' + )}.` + ); + } + + return null; + }, /** * Provide an optional function to be called when the button element