From 35a0b1fa9a473a5c5b2c3f3c8ed7e859f7339c71 Mon Sep 17 00:00:00 2001 From: literat Date: Tue, 6 Feb 2024 16:23:53 +0100 Subject: [PATCH] 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. --- packages/web-react/src/components/Field/HelperText.tsx | 5 ++--- packages/web-react/src/components/Heading/Heading.tsx | 5 ++--- packages/web-react/src/components/Icon/Icon.tsx | 7 +++---- packages/web-react/src/components/Stack/Stack.tsx | 9 ++++----- .../src/components/VisuallyHidden/VisuallyHidden.tsx | 8 +------- 5 files changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/web-react/src/components/Field/HelperText.tsx b/packages/web-react/src/components/Field/HelperText.tsx index 070e5a8fcc..85a8d9398a 100644 --- 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 index 0491f9dbc5..6a8546f53f 100644 --- 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 = (props: SpiritHeadingProps): 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 = (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 index c5f0bdaa52..36c429dd4a 100644 --- 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 index e5fd5e917f..6caabd2fa5 100644 --- 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 = (props: SpiritStackProps): 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 = (props: SpiritStackProps) ); }; -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 index 9023c875ce..7e7f532c12 100644 --- 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 = (props: SpiritVisuallyHiddenProps): JSX.Element => { const { children, elementType: ElementTag = 'span', ...rest } = props; const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest); @@ -20,6 +16,4 @@ const VisuallyHidden = (props: SpiritVisuallyHid ); }; -VisuallyHidden.defaultProps = defaultProps; - export default VisuallyHidden;