diff --git a/CHANGELOG.md b/CHANGELOG.md index 343e92fcd0..5e3ba678ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Expose `isFromKeyboard` in `Grid` component @sophieH29 ([#1729](https://github.com/stardust-ui/react/pull/1729)) - Add `onActiveIndexChange` prop to `Tree` component @lucivpav ([#1728](https://github.com/stardust-ui/react/pull/1728)) +### Fixes +- Require `name` prop in `Icon` component @lucivpav ([#1723](https://github.com/stardust-ui/react/pull/1723)) + ### Documentation - Fix code in changing component variables section of theming examples @lucivpav ([#1626](https://github.com/stardust-ui/react/pull/1626)) diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index 60a9c5d7f3..77ece1ee93 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/packages/react/src/components/Icon/Icon.tsx @@ -30,7 +30,7 @@ export interface IconProps extends UIComponentProps, ColorComponentProps { disabled?: boolean /** Name of the icon. */ - name?: string + name: string /** An icon can provide an outline variant. */ outline?: boolean @@ -61,7 +61,7 @@ class Icon extends UIComponent, any> { bordered: PropTypes.bool, circular: PropTypes.bool, disabled: PropTypes.bool, - name: PropTypes.string, + name: PropTypes.string.isRequired, outline: PropTypes.bool, rotate: PropTypes.number, size: customPropTypes.size, diff --git a/packages/react/test/specs/commonTests/implementsShorthandProp.tsx b/packages/react/test/specs/commonTests/implementsShorthandProp.tsx index 0df0581144..e23bd1d553 100644 --- a/packages/react/test/specs/commonTests/implementsShorthandProp.tsx +++ b/packages/react/test/specs/commonTests/implementsShorthandProp.tsx @@ -5,6 +5,7 @@ import { Props, PropsOf, InstanceOf } from 'src/types' export type ShorthandTestOptions = { mapsValueToProp: keyof (TProps & React.HTMLProps) | false + requiredProps?: any } export const DefaultShorthandTestOptions: ShorthandTestOptions = { @@ -65,7 +66,11 @@ export default ((Component: React.ComponentType) => { } test(`object value is spread as ${displayName}'s props`, () => { - expectShorthandPropsAreHandled({ foo: 'foo value', bar: 'bar value' }) + expectShorthandPropsAreHandled({ + ...options.requiredProps, + foo: 'foo value', + bar: 'bar value', + }) }) }) } diff --git a/packages/react/test/specs/components/Attachment/Attachment-test.tsx b/packages/react/test/specs/components/Attachment/Attachment-test.tsx index fb55285283..66b260fffc 100644 --- a/packages/react/test/specs/components/Attachment/Attachment-test.tsx +++ b/packages/react/test/specs/components/Attachment/Attachment-test.tsx @@ -28,7 +28,10 @@ describe('Attachment', () => { isConformant(Attachment) attachmentImplementsShorthandProp('header', Text) attachmentImplementsShorthandProp('description', Text) - attachmentImplementsShorthandProp('icon', Icon, { mapsValueToProp: 'name' }) + attachmentImplementsShorthandProp('icon', Icon, { + mapsValueToProp: 'name', + requiredProps: { name: 'at' }, + }) attachmentImplementsShorthandProp('action', Button) describe('accessibility', () => { diff --git a/packages/react/test/specs/components/Button/Button-test.tsx b/packages/react/test/specs/components/Button/Button-test.tsx index 35cc702dda..e4d7800836 100644 --- a/packages/react/test/specs/components/Button/Button-test.tsx +++ b/packages/react/test/specs/components/Button/Button-test.tsx @@ -17,7 +17,10 @@ const buttonImplementsShorthandProp = implementsShorthandProp(Button) describe('Button', () => { isConformant(Button) - buttonImplementsShorthandProp('icon', Icon, { mapsValueToProp: 'name' }) + buttonImplementsShorthandProp('icon', Icon, { + mapsValueToProp: 'name', + requiredProps: { name: 'at' }, + }) describe('accessibility', () => { describe('button', () => { diff --git a/packages/react/test/specs/components/Icon/Icon-test.tsx b/packages/react/test/specs/components/Icon/Icon-test.tsx index 9c27b2b739..e67250bf56 100644 --- a/packages/react/test/specs/components/Icon/Icon-test.tsx +++ b/packages/react/test/specs/components/Icon/Icon-test.tsx @@ -6,11 +6,14 @@ import { mountWithProviderAndGetComponent } from 'test/utils' import { ThemeInput } from 'src/themes/types' describe('Icon', () => { - isConformant(Icon) + isConformant(Icon, { requiredProps: { name: 'at' } }) describe('accessibility', () => { handlesAccessibility(Icon, { defaultRootRole: 'img', + requiredProps: { + name: 'at', + }, }) describe('aria-hidden', () => { diff --git a/packages/react/test/specs/components/Input/Input-test.tsx b/packages/react/test/specs/components/Input/Input-test.tsx index 65c748d90e..f2307bd384 100644 --- a/packages/react/test/specs/components/Input/Input-test.tsx +++ b/packages/react/test/specs/components/Input/Input-test.tsx @@ -43,7 +43,10 @@ describe('Input', () => { }) implementsShorthandProp(Input)('input', Box, { mapsValueToProp: 'type' }) - implementsShorthandProp(Input)('icon', Icon, { mapsValueToProp: 'name' }) + implementsShorthandProp(Input)('icon', Icon, { + mapsValueToProp: 'name', + requiredProps: { name: 'at' }, + }) describe('wrapper', () => { implementsShorthandProp(Input)('wrapper', Box, { mapsValueToProp: 'children' }) diff --git a/packages/react/test/specs/components/Label/Label-test.tsx b/packages/react/test/specs/components/Label/Label-test.tsx index a6ec7f2ba7..e5a75fb789 100644 --- a/packages/react/test/specs/components/Label/Label-test.tsx +++ b/packages/react/test/specs/components/Label/Label-test.tsx @@ -8,6 +8,9 @@ const labelImplementsShorthandProp = implementsShorthandProp(Label) describe('Label', () => { isConformant(Label) - labelImplementsShorthandProp('icon', Icon, { mapsValueToProp: 'name' }) + labelImplementsShorthandProp('icon', Icon, { + mapsValueToProp: 'name', + requiredProps: { name: 'at' }, + }) labelImplementsShorthandProp('image', Image, { mapsValueToProp: 'src' }) })