Refactor(web-react): Move away from the defaultProps

* Support for defaultProps will be removed from function components in a future major release. * Use JavaScript default parameters instead.
lmc-eu · Feb 6, 2024 · 35a0b1f · 35a0b1f
1 parent 65d6577
commit 35a0b1f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 22 deletions.
diff --git a/packages/web-react/src/components/Field/HelperText.tsx b/packages/web-react/src/components/Field/HelperText.tsx
@@ -17,7 +17,8 @@ const defaultProps = {
 };
 
 const HelperText = (props: Props) => {
-  const { helperText, className, elementType: ElementTag = 'div', id, registerAria } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { helperText, className, elementType: ElementTag = 'div', id, registerAria } = propsWithDefaults;
 
   useEffect(() => {
     registerAria?.({ add: id });
@@ -38,6 +39,4 @@ const HelperText = (props: Props) => {
   return null;
 };
 
-HelperText.defaultProps = defaultProps;
-
 export default HelperText;
diff --git a/packages/web-react/src/components/Heading/Heading.tsx b/packages/web-react/src/components/Heading/Heading.tsx
@@ -9,7 +9,8 @@ const defaultProps = {
 };
 
 export const Heading = <T extends ElementType = 'div', S = void>(props: SpiritHeadingProps<T, S>): JSX.Element => {
-  const { elementType: ElementTag = 'div', children, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
   const { classProps, props: modifiedProps } = useHeadingStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
@@ -20,6 +21,4 @@ export const Heading = <T extends ElementType = 'div', S = void>(props: SpiritHe
   );
 };
 
-Heading.defaultProps = defaultProps;
-
 export default Heading;
diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx
@@ -5,12 +5,13 @@ import { htmlParser } from '../../utils/htmlParser';
 import { NoSsr } from '../NoSsr';
 
 const defaultProps = {
-  ariaHidden: true,
   boxSize: 24,
+  ariaHidden: true,
 };
 
 export const Icon = (props: IconProps) => {
-  const { boxSize, name, title, ariaHidden, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { boxSize, name, title, ariaHidden, ...restProps } = propsWithDefaults;
   let icon = useIcon(name);
   const { styleProps, props: otherProps } = useStyleProps(restProps);
   const isHtmlParserLoaded = typeof htmlParser === 'function';
@@ -63,6 +64,4 @@ export const Icon = (props: IconProps) => {
   );
 };
 
-Icon.defaultProps = defaultProps;
-
 export default Icon;
diff --git a/packages/web-react/src/components/Stack/Stack.tsx b/packages/web-react/src/components/Stack/Stack.tsx
@@ -1,8 +1,8 @@
-import React, { ElementType } from 'react';
 import classNames from 'classnames';
-import { useStackStyleProps } from './useStackStyleProps';
+import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritStackProps } from '../../types';
+import { useStackStyleProps } from './useStackStyleProps';
 
 const defaultProps: SpiritStackProps = {
   elementType: 'div',
@@ -13,7 +13,8 @@ const defaultProps: SpiritStackProps = {
 };
 
 export const Stack = <T extends ElementType = 'div'>(props: SpiritStackProps<T>): JSX.Element => {
-  const { elementType: ElementTag = 'div', children, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
   const { classProps, props: modifiedProps, styleProps: stackStyle } = useStackStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
@@ -31,6 +32,4 @@ export const Stack = <T extends ElementType = 'div'>(props: SpiritStackProps<T>)
   );
 };
 
-Stack.defaultProps = defaultProps;
-
 export default Stack;
diff --git a/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -1,13 +1,9 @@
-import React, { ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritVisuallyHiddenProps } from '../../types/visuallyHidden';
 import { useVisuallyHiddenProps } from './useVisuallyHiddenProps';
 
-const defaultProps = {
-  elementType: 'span',
-};
-
 const VisuallyHidden = <T extends ElementType = 'span'>(props: SpiritVisuallyHiddenProps<T>): JSX.Element => {
   const { children, elementType: ElementTag = 'span', ...rest } = props;
   const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
@@ -20,6 +16,4 @@ const VisuallyHidden = <T extends ElementType = 'span'>(props: SpiritVisuallyHid
   );
 };
 
-VisuallyHidden.defaultProps = defaultProps;
-
 export default VisuallyHidden;