feat: updates icon component and prop types for cross-package consistency

docs/migration.md

@@ -34,7 +34,10 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-accordions
 
-- Removed `IItem` type export. Use `ITimelineItemProps` instead.
+- The following React component prop types have changed:
+  - Removed `IItem` type export. Use `ITimelineItemProps` instead.
+  - `IStepperLabelProps['icon']`: `ReactNode` -> `ReactElement`
+  - `ITimelineItemProps['icon']`: `ReactNode` -> `ReactElement`
 
 #### @zendeskgarden/react-buttons
 
@@ -44,7 +47,10 @@ consider additional positioning prop support on a case-by-case basis.
 #### @zendeskgarden/react-chrome
 
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
-- Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
+- The following React component types have changed:
+  - Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
+  - `Header.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
+  - `Nav.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
 - Subcomponent exports have been deprecated and will be removed in a future major version. Update
   to subcomponent properties:
   - `FooterItem` -> `Footer.Item`
@@ -100,6 +106,8 @@ consider additional positioning prop support on a case-by-case basis.
 - The following types have changed:
   - removed `IFieldProps`
   - removed `IIconProps`. Use `IFauxInputStartIconProps` or `IFauxInputEndIconProps` instead.
+  - `IMediaInputProps['start']`: `any` -> `ReactElement`
+  - `IMediaInputProps['end']`: `any` -> `ReactElement`
 - Subcomponent exports have been deprecated and will be removed in a future major version. Update
   to subcomponent properties:
   - `Hint` -> `Field.Hint`
@@ -170,6 +178,12 @@ consider additional positioning prop support on a case-by-case basis.
 - All subcomponent exports have been deprecated and will be removed in a future major version.
   Update to subcomponent properties (e.g., `Tooltip.Title`).
 
+#### @zendeskgarden/react-typography
+
+- The following React component types have changed:
+  - `Span.Icon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
+  - `Span.StartIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
+
 #### @zendeskgarden/react-utilities
 
 - This package has been removed.

packages/accordions/demo/stories/StepperStory.tsx

@@ -23,7 +23,7 @@ export const StepperStory: Story<IArgs> = ({ steps, ...args }) => (
     {steps.map((step, index) => (
       <Stepper.Step key={index}>
         <Stepper.Label
-          icon={args.hasIcon && <Icon />}
+          icon={args.hasIcon ? <Icon /> : undefined}
           isHidden={args.isLabelHidden}
           iconProps={args.iconProps}
         >

packages/accordions/demo/stories/TimelineStory.tsx

@@ -23,7 +23,11 @@ export const TimelineStory: Story<IArgs> = ({ items, ...args }) => (
   <div style={{ backgroundColor: args.surfaceColor }}>
     <Timeline {...args}>
       {items.map((item, index) => (
-        <Timeline.Item key={index} icon={args.hasIcon && <Icon />} surfaceColor={args.surfaceColor}>
+        <Timeline.Item
+          key={index}
+          icon={args.hasIcon ? <Icon /> : undefined}
+          surfaceColor={args.surfaceColor}
+        >
           {args.hasOppositeContent && (
             <Timeline.OppositeContent>
               <Span hue="grey">{item.description}</Span>

packages/accordions/src/types/index.ts

@@ -7,11 +7,11 @@
 
 import { IUseAccordionProps } from '@zendeskgarden/container-accordion';
 import {
-  ReactNode,
   SVGAttributes,
   HTMLAttributes,
   LiHTMLAttributes,
-  OlHTMLAttributes
+  OlHTMLAttributes,
+  ReactElement
 } from 'react';
 
 export interface IAccordionProps<Value = any>
@@ -49,7 +49,7 @@ export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
 
 export interface IStepperLabelProps extends HTMLAttributes<HTMLDivElement> {
   /** Replaces the label number with an icon */
-  icon?: ReactNode;
+  icon?: ReactElement;
   /** Passes props to the default check icon */
   iconProps?: SVGAttributes<SVGElement>;
   /** Hides the label text */
@@ -63,7 +63,7 @@ export interface ITimelineProps extends OlHTMLAttributes<HTMLOListElement> {
 
 export interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
   /** Replaces the dot with an icon */
-  icon?: ReactNode;
+  icon?: ReactElement;
   /** Provides surface color for an icon placed on a non-white background */
   surfaceColor?: string;
 }

packages/breadcrumbs/src/styled/StyledChevronIcon.tsx

@@ -5,28 +5,19 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes } from 'react';
-import styled, { ThemeProps, DefaultTheme } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import { em } from 'polished';
 import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg';
 
-/**
- * styled-components injects a theme prop that is rendered as an attribute
- * of the SVG icon in the browser. This function removes the `theme` prop injected
- * by styled-components.
- */
-const ValidChevronIcon: React.FC<HTMLAttributes<SVGElement> & ThemeProps<DefaultTheme>> = props => {
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  const { theme, ...validProps } = props;
-
-  return <ChevronRightStrokeIcon {...validProps} />;
-};
-
 /**
  * Accepts all `<svg>` props
  */
-export const StyledChevronIcon = styled(ValidChevronIcon).attrs({
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+export const StyledChevronIcon = styled(({ children, theme, ...props }) => (
+  <ChevronRightStrokeIcon {...props} />
+)).attrs({
   role: 'presentation',
   'aria-hidden': 'true'
 })`

packages/chrome/src/elements/header/HeaderItemIcon.tsx

@@ -8,32 +8,32 @@
 import React, {
   Children,
   cloneElement,
-  HTMLAttributes,
   isValidElement,
   PropsWithChildren,
-  ReactHTMLElement
+  SVGAttributes,
+  ReactSVGElement
 } from 'react';
 import { DefaultTheme, ThemeProps } from 'styled-components';
 import { StyledHeaderItemIcon } from '../../styled';
 
 /**
  * @deprecated use `Header.ItemIcon` instead
  *
- * @extends HTMLAttributes<HTMLElement>
+ * @extends SVGAttributes<SVGElement>
  */
 export const HeaderItemIcon = ({
   children,
   ...props
-}: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
-  const element = Children.only(children) as ReactHTMLElement<HTMLElement>;
+}: PropsWithChildren<SVGAttributes<SVGElement>>) => {
+  const element = Children.only(children) as ReactSVGElement;
 
   if (isValidElement(element)) {
     const Icon = ({
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       theme,
       ...iconProps
-    }: ThemeProps<DefaultTheme> & HTMLAttributes<HTMLElement>) =>
-      cloneElement<HTMLAttributes<HTMLElement>, HTMLElement>(element, { ...props, ...iconProps });
+    }: ThemeProps<DefaultTheme> & SVGAttributes<SVGElement>) =>
+      cloneElement<SVGAttributes<SVGElement>, SVGElement>(element, { ...props, ...iconProps });
 
     return <StyledHeaderItemIcon as={Icon} {...props} />;
   }

packages/chrome/src/elements/nav/NavItemIcon.tsx

@@ -8,32 +8,32 @@
 import React, {
   Children,
   cloneElement,
-  HTMLAttributes,
+  SVGAttributes,
   isValidElement,
   PropsWithChildren,
-  ReactHTMLElement
+  ReactSVGElement
 } from 'react';
 import { DefaultTheme, ThemeProps } from 'styled-components';
 import { StyledNavItemIcon } from '../../styled';
 
 /**
  * @deprecated use `Nav.ItemIcon` instead
  *
- * @extends HTMLAttributes<HTMLElement>
+ * @extends SVGAttributes<SVGElement>
  */
 export const NavItemIcon = ({
   children,
   ...props
-}: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
-  const element = Children.only(children) as ReactHTMLElement<HTMLElement>;
+}: PropsWithChildren<SVGAttributes<SVGElement>>) => {
+  const element = Children.only(children) as ReactSVGElement;
 
   if (isValidElement(element)) {
     const Icon = ({
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       theme,
       ...iconProps
-    }: ThemeProps<DefaultTheme> & HTMLAttributes<HTMLElement>) =>
-      cloneElement<HTMLAttributes<HTMLElement>, HTMLElement>(element, { ...props, ...iconProps });
+    }: ThemeProps<DefaultTheme> & SVGAttributes<SVGElement>) =>
+      cloneElement<SVGAttributes<SVGElement>, SVGElement>(element, { ...props, ...iconProps });
 
     return <StyledNavItemIcon as={Icon} {...props} />;
   }

packages/forms/src/elements/MediaInput.tsx

@@ -133,8 +133,8 @@ MediaInput.propTypes = {
   isBare: PropTypes.bool,
   focusInset: PropTypes.bool,
   validation: PropTypes.oneOf(VALIDATION),
-  start: PropTypes.node,
-  end: PropTypes.node,
+  start: PropTypes.any,
+  end: PropTypes.any,
   wrapperProps: PropTypes.object,
   wrapperRef: PropTypes.any
 };

packages/forms/src/types/index.ts

@@ -10,6 +10,7 @@ import {
   HTMLAttributes,
   InputHTMLAttributes,
   LabelHTMLAttributes,
+  ReactElement,
   SelectHTMLAttributes,
   SVGAttributes,
   TextareaHTMLAttributes
@@ -85,9 +86,9 @@ export interface IInputProps extends IRadioProps {
 
 export interface IMediaInputProps extends IInputProps {
   /** Accepts a "start" icon to display */
-  start?: any;
+  start?: ReactElement;
   /** Accepts an "end" icon to display */
-  end?: any;
+  end?: ReactElement;
   /** Applies props to the wrapping [FauxInput](#fauxinput) element */
   wrapperProps?: any;
   /** Applies a ref to the wrapping [FauxInput](#fauxinput) element */