fix: replace defaultProps with function default parameters

docs/api.md

@@ -66,9 +66,6 @@ ensuring the details live up to expectations.
   `${componentStyles}` which allows an implementer to leverage the
   [`theme`](https://zendeskgarden.github.io/react-components/theming/)
   "components" object to override specific component styles.
-- The view component `defaultProps` must contain `theme: DEFAULT_THEME` for
-  cases when the component might be used outside the context of a
-  `<ThemeProvider>`.
 - With the exception of embedded icons, view components do not return JSX.
 
 ## Element components

docs/documentation.md

@@ -41,7 +41,6 @@ the standard rules for Garden element component documentation:
       API](https://garden.zendesk.com/components/select#dropdown) for an
       external linking example
   - Only add prop JSDoc to [TypeScript prop interfaces](typescript.md)
-    - Refrain from documenting React `defaultProps`
     - Refrain from documenting styled components props
   - Use `@ignore` to prevent a prop from being added to generated documentation.
     Use this tag sparingly to hide internal-only APIs.

packages/.template/src/styled/Styled{{capitalize component}}.ts

@@ -80,7 +80,3 @@ export const Styled{{capitalize component}} = styled.div.attrs<IStyled{{capitali
 
   ${componentStyles};
 `;
-
-Styled{{capitalize component}}.defaultProps = {
-  theme: DEFAULT_THEME
-};

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>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledPanel>`
+  'data-garden-version': PACKAGE_VERSION,
+  $isAnimated: props.$isAnimated ?? true
+}))<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

@@ -28,7 +28,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
       children,
       foregroundColor,
       isSystem,
-      size,
+      size = 'medium',
       status,
       statusLabel,
       surfaceColor,
@@ -122,10 +122,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;
 
@@ -80,7 +80,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>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledAvatarProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $size: props.$size ?? 'medium'
+}))<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>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledStatusIndicatorProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $type: props.$type ?? 'offline'
+}))<IStyledStatusIndicatorProps>`
   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';
@@ -93,17 +93,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<IStatusIndicatorProps>(
+  props => ({
+    'data-garden-id': COMPONENT_ID,
+    'data-garden-version': PACKAGE_VERSION,
+    $size: props.$size ?? 'medium'
+  })
+)<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,
@@ -88,7 +88,7 @@ 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>`
@@ -99,8 +99,3 @@ export const StyledStatusIndicatorBase = styled.div.attrs({
 
   ${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 ref={ref} isBasic={isBasic} isPill={isPill} size={size} {...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} size={size} ref={ref} {...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} />
+  ({ isPressed, isPill = true, isBasic = true, size = 'medium', ...otherProps }, ref) => (
+    <IconButton
+      aria-pressed={isPressed}
+      isPill={isPill}
+      isBasic={isBasic}
+      size={size}
+      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'
-};