chore: migrate defaultProps to default assignment

packages/accordions/src/elements/accordion/Accordion.tsx

@@ -21,9 +21,9 @@ const AccordionComponent = forwardRef<HTMLDivElement, IAccordionProps>(
       children,
       isBare,
       isCompact,
-      isAnimated,
+      isAnimated = true,
       isExpandable,
-      isCollapsible,
+      isCollapsible = true,
       level,
       onChange,
       defaultExpandedSections,
@@ -103,11 +103,6 @@ const AccordionComponent = forwardRef<HTMLDivElement, IAccordionProps>(
 
 AccordionComponent.displayName = 'Accordion';
 
-AccordionComponent.defaultProps = {
-  isAnimated: true,
-  isCollapsible: true
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

packages/accordions/src/elements/stepper/Stepper.tsx

@@ -57,10 +57,6 @@ const StepperComponent = forwardRef<HTMLOListElement, IStepperProps>(
 
 StepperComponent.displayName = 'Stepper';
 
-StepperComponent.defaultProps = {
-  activeIndex: DEFAULT_ACTIVE_INDEX
-};
-
 /**
  * @extends OlHTMLAttributes<HTMLOListElement>
  */

packages/accordions/src/styled/accordion/StyledPanel.ts

@@ -6,12 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  getLineHeight,
-  componentStyles,
-  DEFAULT_THEME,
-  getColor
-} from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 interface IStyledPanel {
   inert?: string;
@@ -58,10 +53,11 @@ const sizeStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledPanel = styled.section.attrs<IStyledPanel>({
+export const StyledPanel = styled.section.attrs<IStyledPanel>(({ $isAnimated = true }) => ({
+  $isAnimated,
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledPanel>`
+}))`
   display: grid;
   transition: ${props =>
     props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out'};
@@ -72,8 +68,3 @@ export const StyledPanel = styled.section.attrs<IStyledPanel>({
 
   ${componentStyles};
 `;
-
-StyledPanel.defaultProps = {
-  $isAnimated: true,
-  theme: DEFAULT_THEME
-};

packages/avatars/src/elements/Avatar.tsx

@@ -26,7 +26,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
       children,
       foregroundColor,
       isSystem,
-      size,
+      size = 'medium',
       status,
       statusLabel,
       surfaceColor,
@@ -119,10 +119,6 @@ AvatarComponent.propTypes = {
   statusLabel: PropTypes.string
 };
 
-AvatarComponent.defaultProps = {
-  size: 'medium'
-};
-
 /**
  * @extends HTMLAttributes<HTMLElement>
  */

packages/avatars/src/elements/StatusIndicator.tsx

@@ -31,7 +31,7 @@ import {
  * @extends HTMLAttributes<HTMLElement>
  */
 export const StatusIndicator = forwardRef<HTMLElement, IStatusIndicatorProps>(
-  ({ children, type, isCompact, 'aria-label': label, ...props }, ref) => {
+  ({ children, type = 'offline', isCompact, 'aria-label': label, ...props }, ref) => {
     let ClockIcon = ClockIcon16;
     let ArrowLeftIcon = ArrowLeftIcon16;
 
@@ -72,7 +72,3 @@ StatusIndicator.propTypes = {
   type: PropTypes.oneOf(STATUS),
   isCompact: PropTypes.bool
 };
-
-StatusIndicator.defaultProps = {
-  type: 'offline'
-};

packages/avatars/src/styled/StyledAvatar.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, keyframes, DefaultTheme } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -180,10 +180,11 @@ export interface IStyledAvatarProps {
 /**
  * Accepts all `<figure>` props
  */
-export const StyledAvatar = styled.figure.attrs({
+export const StyledAvatar = styled.figure.attrs<IStyledAvatarProps>(({ $size = 'medium' }) => ({
+  $size,
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledAvatarProps>`
+}))`
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -231,8 +232,3 @@ export const StyledAvatar = styled.figure.attrs({
 
   ${componentStyles};
 `;
-
-StyledAvatar.defaultProps = {
-  $size: 'medium',
-  theme: DEFAULT_THEME
-};

packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts

@@ -6,26 +6,24 @@
  */
 
 import styled from 'styled-components';
-import { componentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 import { getStatusSize, IStyledStatusIndicatorProps } from './utility';
 import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase';
 
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 
-export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+export const StyledStandaloneStatusIndicator = styled(
+  StyledStatusIndicatorBase
+).attrs<IStyledStatusIndicatorProps>(({ $type = 'offline' }) => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledStatusIndicatorProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $type
+}))`
   position: relative;
   box-sizing: content-box;
   margin-top: ${props =>
     `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`};
 
   ${componentStyles};
 `;
-
-StyledStandaloneStatusIndicator.defaultProps = {
-  $type: 'offline',
-  theme: DEFAULT_THEME
-};

packages/avatars/src/styled/StyledStatusIndicator.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -90,17 +90,15 @@ const colorStyles = ({
   `;
 };
 
-export const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStatusIndicatorProps>`
+export const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs(
+  ({ $size = 'medium' }) => ({
+    $size,
+    'data-garden-id': COMPONENT_ID,
+    'data-garden-version': PACKAGE_VERSION
+  })
+)<IStatusIndicatorProps>`
   ${sizeStyles}
   ${colorStyles}
 
   ${componentStyles};
 `;
-
-StyledStatusIndicator.defaultProps = {
-  $size: 'medium',
-  theme: DEFAULT_THEME
-};

packages/avatars/src/styled/StyledStatusIndicatorBase.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, keyframes } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 import {
   TRANSITION_DURATION,
@@ -86,19 +86,14 @@ const colorStyles = ({ theme, $type }: IStyledStatusIndicatorProps) => {
   `;
 };
 
-export const StyledStatusIndicatorBase = styled.div.attrs({
+export const StyledStatusIndicatorBase = styled.div.attrs<IStyledStatusIndicatorProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledStatusIndicatorProps>`
+})`
   transition: inherit;
 
   ${sizeStyles}
   ${colorStyles}
 
   ${componentStyles};
 `;
-
-StyledStatusIndicatorBase.defaultProps = {
-  theme: DEFAULT_THEME,
-  $size: 'small'
-};

packages/buttons/src/elements/Button.tsx

@@ -24,7 +24,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, IButtonProps>(
       isPill,
       isPrimary,
       isStretched,
-      size,
+      size = 'medium',
       ...other
     },
     ref
@@ -64,10 +64,6 @@ ButtonComponent.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
 
-ButtonComponent.defaultProps = {
-  size: 'medium'
-};
-
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */

packages/buttons/src/elements/ChevronButton.tsx

@@ -13,18 +13,14 @@ import { IIconButtonProps } from '../types';
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export const ChevronButton = forwardRef<HTMLButtonElement, IIconButtonProps>((props, ref) => (
-  <IconButton ref={ref} {...props}>
-    <ChevronDownIcon />
-  </IconButton>
-));
+export const ChevronButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
+  ({ isBasic = false, isPill = false, size = 'medium', ...props }, ref) => (
+    <IconButton isBasic={isBasic} isPill={isPill} size={size} ref={ref} {...props}>
+      <ChevronDownIcon />
+    </IconButton>
+  )
+);
 
 ChevronButton.displayName = 'ChevronButton';
 
 ChevronButton.propTypes = IconButton.propTypes;
-
-ChevronButton.defaultProps = {
-  isBasic: false,
-  isPill: false,
-  size: 'medium'
-};

packages/buttons/src/elements/IconButton.tsx

@@ -19,13 +19,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
     {
       children,
       focusInset,
-      isBasic,
+      isBasic = true,
       isDanger,
       isNeutral,
-      isPill,
+      isPill = true,
       isPrimary,
       isRotated,
-      size,
+      size = 'medium',
       ...other
     },
     ref
@@ -62,9 +62,3 @@ IconButton.propTypes = {
   isRotated: PropTypes.bool,
   size: PropTypes.oneOf(SIZE)
 };
-
-IconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};

packages/buttons/src/elements/ToggleButton.tsx

@@ -14,8 +14,8 @@ import { Button } from './Button';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const ToggleButton = forwardRef<HTMLButtonElement, IToggleButtonProps>(
-  ({ isPressed, ...otherProps }, ref) => (
-    <Button aria-pressed={isPressed} ref={ref} {...otherProps} />
+  ({ isPressed, size = 'medium', ...otherProps }, ref) => (
+    <Button aria-pressed={isPressed} ref={ref} size={size} {...otherProps} />
   )
 );
 
@@ -25,7 +25,3 @@ ToggleButton.propTypes = {
   ...Button.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
 };
-
-ToggleButton.defaultProps = {
-  size: 'medium'
-};

packages/buttons/src/elements/ToggleIconButton.tsx

@@ -14,8 +14,15 @@ import { IconButton } from './IconButton';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const ToggleIconButton = forwardRef<HTMLButtonElement, IToggleIconButtonProps>(
-  ({ isPressed, ...otherProps }, ref) => (
-    <IconButton aria-pressed={isPressed} ref={ref} {...otherProps} />
+  ({ isPill = true, isBasic = true, size = 'medium', isPressed, ...otherProps }, ref) => (
+    <IconButton
+      isPill={isPill}
+      isBasic={isBasic}
+      size={size}
+      aria-pressed={isPressed}
+      ref={ref}
+      {...otherProps}
+    />
   )
 );
 
@@ -25,9 +32,3 @@ ToggleIconButton.propTypes = {
   ...IconButton.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
 };
-
-ToggleIconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};

packages/chrome/src/elements/SkipNav.tsx

@@ -14,7 +14,7 @@ import { StyledSkipNav, StyledSkipNavIcon } from '../styled';
  * @extends AnchorHTMLAttributes<HTMLAnchorElement>
  */
 export const SkipNav = React.forwardRef<HTMLAnchorElement, ISkipNavProps>(
-  ({ targetId, zIndex, children, ...props }, ref) => (
+  ({ targetId, zIndex = 1, children, ...props }, ref) => (
     <StyledSkipNav href={`#${targetId}`} $zIndex={zIndex} ref={ref} {...props}>
       <StyledSkipNavIcon />
       {children}
@@ -28,7 +28,3 @@ SkipNav.propTypes = {
   targetId: PropTypes.string.isRequired,
   zIndex: PropTypes.number
 };
-
-SkipNav.defaultProps = {
-  zIndex: 1
-};