fix: replace defaultProps with function default parameters (#2045)

Author: chris-schneider-zen

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
-};