fix(Icon): make "name" prop required

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))
 

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<WithAsProp<IconProps>, 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,

packages/react/test/specs/commonTests/implementsShorthandProp.tsx

@@ -5,6 +5,7 @@ import { Props, PropsOf, InstanceOf } from 'src/types'
 
 export type ShorthandTestOptions<TProps = any> = {
   mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | 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',
+        })
       })
     })
   }

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', () => {

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', () => {

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', () => {

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' })

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' })
 })