From ac4cd9589aeb3a59a5eb8fbd15d6ee1ba135595f 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. --- .../web-react/src/components/Alert/Alert.tsx | 14 ++++++++--- .../components/Breadcrumbs/Breadcrumbs.tsx | 14 ++++++++--- .../Breadcrumbs/BreadcrumbsItem.tsx | 5 ++-- .../src/components/Button/Button.tsx | 12 ++++++--- .../src/components/ButtonLink/ButtonLink.tsx | 14 +++++++---- .../src/components/Collapse/Collapse.tsx | 13 +++++++--- .../Collapse/UncontrolledCollapse.tsx | 5 ++-- .../__tests__/UncontrolledCollapse.test.tsx | 4 +-- .../src/components/Dropdown/Dropdown.tsx | 7 +++--- .../src/components/Field/HelperText.tsx | 25 ++++++++----------- .../src/components/Field/ValidationText.tsx | 25 ++++++++----------- .../web-react/src/components/Field/types.ts | 24 ++++++++++++++++++ .../src/components/Heading/Heading.tsx | 12 ++++++--- .../web-react/src/components/Icon/Icon.tsx | 6 ++--- .../web-react/src/components/Link/Link.tsx | 16 +++++++----- .../web-react/src/components/Pill/Pill.tsx | 14 +++++++---- .../web-react/src/components/Stack/Stack.tsx | 13 ++++++---- packages/web-react/src/components/Tag/Tag.tsx | 13 ++++++---- .../web-react/src/components/Text/Text.tsx | 12 ++++++--- .../VisuallyHidden/VisuallyHidden.tsx | 8 +----- packages/web-react/src/types/collapse.ts | 5 ++-- 21 files changed, 158 insertions(+), 103 deletions(-) create mode 100644 packages/web-react/src/components/Field/types.ts diff --git a/packages/web-react/src/components/Alert/Alert.tsx b/packages/web-react/src/components/Alert/Alert.tsx index bb1713ee7f..99a6ad45a3 100644 --- a/packages/web-react/src/components/Alert/Alert.tsx +++ b/packages/web-react/src/components/Alert/Alert.tsx @@ -7,13 +7,21 @@ import { Icon } from '../Icon'; import { useAlertIcon } from './useAlertIcon'; import { useAlertStyleProps } from './useAlertStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'success', isCentered: false, + elementType: 'div', }; export const Alert = (props: SpiritAlertProps): JSX.Element => { - const { elementType: ElementTag = 'div', children, color, iconName, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + color, + iconName, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useAlertStyleProps({ color, ...restProps }); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); const alertIconName = useAlertIcon({ color, iconName, ...otherProps }); @@ -36,6 +44,4 @@ export const Alert = (props: SpiritAler ); }; -Alert.defaultProps = defaultProps; - export default Alert; diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx index e5c9d9b59f..ca917038d5 100644 --- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -5,12 +5,20 @@ import { SpiritBreadcrumbsProps } from '../../types'; import BreadcrumbsItem from './BreadcrumbsItem'; import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps'; -const defaultProps = { +const defaultProps: Partial = { + elementType: 'nav', items: [], }; export const Breadcrumbs = (props: SpiritBreadcrumbsProps): JSX.Element => { - const { children, elementType: ElementTag = 'nav', goBackTitle, items, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + children, + elementType: ElementTag = defaultProps.elementType as ElementType, + goBackTitle, + items, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps }); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); @@ -44,6 +52,4 @@ export const Breadcrumbs = (props: SpiritBreadcru ); }; -Breadcrumbs.defaultProps = defaultProps; - export default Breadcrumbs; diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 0dc8eebf03..88b8ff4bc3 100644 --- a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -14,7 +14,8 @@ const defaultProps = { }; export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => { - const { children, href, isCurrent, iconNameStart, iconNameEnd, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { children, href, isCurrent, iconNameStart, iconNameEnd, ...restProps } = propsWithDefaults; const { classProps, props: otherProps } = useBreadcrumbsStyleProps({ ...restProps }); const { styleProps, props: transferProps } = useStyleProps(otherProps); @@ -38,6 +39,4 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => { ); }; -BreadcrumbsItem.defaultProps = defaultProps; - export default BreadcrumbsItem; diff --git a/packages/web-react/src/components/Button/Button.tsx b/packages/web-react/src/components/Button/Button.tsx index 33511580fe..ee373f30e0 100644 --- a/packages/web-react/src/components/Button/Button.tsx +++ b/packages/web-react/src/components/Button/Button.tsx @@ -6,7 +6,7 @@ import { Spinner } from '../Spinner'; import { useButtonAriaProps } from './useButtonAriaProps'; import { useButtonStyleProps } from './useButtonStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'primary', isBlock: false, isDisabled: false, @@ -14,6 +14,7 @@ const defaultProps = { isSquare: false, size: 'medium', type: 'button', + elementType: 'button', }; /* We need an exception for components exported with forwardRef */ @@ -22,7 +23,12 @@ const _Button = ( props: SpiritButtonProps, ref: ForwardedRef, ) => { - const { elementType: ElementTag = 'button', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { buttonProps } = useButtonAriaProps(restProps); const { classProps, props: modifiedProps } = useButtonStyleProps(restProps); @@ -44,6 +50,4 @@ const _Button = ( export const Button = forwardRef>(_Button); -Button.defaultProps = defaultProps; - export default Button; diff --git a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx index 9e472f6307..7a812fad49 100644 --- a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx +++ b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx @@ -3,11 +3,12 @@ import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritButtonLinkProps } from '../../types'; import { Spinner } from '../Spinner'; -import { useButtonLinkStyleProps } from './useButtonLinkStyleProps'; import { useButtonLinkAriaProps } from './useButtonLinkAriaProps'; +import { useButtonLinkStyleProps } from './useButtonLinkStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'primary', + elementType: 'a', isBlock: false, isDisabled: false, isLoading: false, @@ -21,7 +22,12 @@ const _ButtonLink = ( props: SpiritButtonLinkProps, ref: ForwardedRef, ) => { - const { elementType: ElementTag = 'a', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { buttonLinkProps } = useButtonLinkAriaProps(restProps); const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps); @@ -43,6 +49,4 @@ const _ButtonLink = ( export const ButtonLink = forwardRef>(_ButtonLink); -ButtonLink.defaultProps = defaultProps; - export default ButtonLink; diff --git a/packages/web-react/src/components/Collapse/Collapse.tsx b/packages/web-react/src/components/Collapse/Collapse.tsx index 360d0abaa5..b9c9505f1c 100644 --- a/packages/web-react/src/components/Collapse/Collapse.tsx +++ b/packages/web-react/src/components/Collapse/Collapse.tsx @@ -16,14 +16,21 @@ const transitioningStyles = { exited: '', }; -const defaultProps = { +const defaultProps: Partial = { + elementType: 'div', isOpen: false, collapsibleToBreakpoint: undefined, transitionDuration: TRANSITION_DURATION, }; const Collapse = (props: SpiritCollapseProps) => { - const { elementType: ElementTag = 'div', children, transitionDuration = TRANSITION_DURATION, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as React.ElementType, + children, + transitionDuration = TRANSITION_DURATION, + ...restProps + } = propsWithDefaults; const rootElementRef: MutableRefObject = useRef(null); const collapseElementRef: MutableRefObject = useRef(null); @@ -59,6 +66,4 @@ const Collapse = (props: SpiritCollapseProps) => { ); }; -Collapse.defaultProps = defaultProps; - export default Collapse; diff --git a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx index 988e60577b..3322b66e4e 100644 --- a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx +++ b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx @@ -11,7 +11,8 @@ const defaultProps = { }; const UncontrolledCollapse = (props: SpiritUncontrolledCollapseProps) => { - const { children, hideOnCollapse, renderTrigger, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { children, hideOnCollapse, renderTrigger, ...restProps } = propsWithDefaults; const { isOpen, toggleHandler } = useCollapse(restProps.isOpen); const { ariaProps } = useCollapseAriaProps({ ...restProps, isOpen }); @@ -41,6 +42,4 @@ const UncontrolledCollapse = (props: SpiritUncontrolledCollapseProps) => { ); }; -UncontrolledCollapse.defaultProps = defaultProps; - export default UncontrolledCollapse; diff --git a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx index 3b7f319b46..e4d813dc1e 100644 --- a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx +++ b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx @@ -1,9 +1,9 @@ import '@testing-library/jest-dom'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; +import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import UncontrolledCollapse from '../UncontrolledCollapse'; describe('UncontrolledCollapse', () => { diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx index 8dd199545b..b23c6f5188 100644 --- a/packages/web-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/web-react/src/components/Dropdown/Dropdown.tsx @@ -17,6 +17,7 @@ const defaultProps = { }; export const Dropdown = (props: SpiritDropdownProps) => { + const propsWithDefaults = { ...defaultProps, ...props }; const { /** @deprecated ID will be made a required user input in the next major version. */ id = Math.random().toString(36).slice(2, 7), @@ -24,10 +25,10 @@ export const Dropdown = (props: SpiritDropdownProps) => { enableAutoClose, fullWidthMode, onAutoClose, - placement = defaultProps.placement, + placement, renderTrigger, ...rest - } = props; + } = propsWithDefaults; const dropdownRef = useRef(null); const triggerRef = useRef(); @@ -87,6 +88,4 @@ export const Dropdown = (props: SpiritDropdownProps) => { ); }; -Dropdown.defaultProps = defaultProps; - export default Dropdown; diff --git a/packages/web-react/src/components/Field/HelperText.tsx b/packages/web-react/src/components/Field/HelperText.tsx index 070e5a8fcc..d99b69e7e0 100644 --- a/packages/web-react/src/components/Field/HelperText.tsx +++ b/packages/web-react/src/components/Field/HelperText.tsx @@ -1,23 +1,22 @@ import React, { ElementType, useEffect } from 'react'; -import { RegisterType } from './useAriaIds'; +import { HelperTextProps } from './types'; -interface Props { - helperText: React.ReactNode; - className?: string; - elementType?: ElementType; - id?: string; - registerAria?: RegisterType; -} - -const defaultProps = { +const defaultProps: Partial = { className: undefined, elementType: 'div', id: undefined, registerAria: undefined, }; -const HelperText = (props: Props) => { - const { helperText, className, elementType: ElementTag = 'div', id, registerAria } = props; +const HelperText = (props: HelperTextProps) => { + const propsWithDefaults = { ...defaultProps, ...props }; + const { + helperText, + className, + elementType: ElementTag = defaultProps.elementType as ElementType, + id, + registerAria, + } = propsWithDefaults; useEffect(() => { registerAria?.({ add: id }); @@ -38,6 +37,4 @@ const HelperText = (props: Props) => { return null; }; -HelperText.defaultProps = defaultProps; - export default HelperText; diff --git a/packages/web-react/src/components/Field/ValidationText.tsx b/packages/web-react/src/components/Field/ValidationText.tsx index db72bbee20..d4ec8bbc9c 100644 --- a/packages/web-react/src/components/Field/ValidationText.tsx +++ b/packages/web-react/src/components/Field/ValidationText.tsx @@ -1,23 +1,22 @@ import React, { ElementType, useEffect } from 'react'; -import { ValidationTextProp } from '../../types'; -import { RegisterType } from './useAriaIds'; +import { ValidationTextProps } from './types'; -export interface ValidationTextProps extends ValidationTextProp { - className?: string; - elementType?: ElementType; - id?: string; - registerAria?: RegisterType; -} - -const defaultProps = { +const defaultProps: Partial = { className: undefined, elementType: 'div', id: undefined, registerAria: undefined, }; -export const ValidationText = (props: ValidationTextProps) => { - const { className, validationText, elementType: ElementTag = 'div', id, registerAria } = props; +export const ValidationText = (props: ValidationTextProps) => { + const propsWithDefaults = { ...defaultProps, ...props }; + const { + className, + validationText, + elementType: ElementTag = defaultProps.elementType as ElementType, + id, + registerAria, + } = propsWithDefaults; useEffect(() => { registerAria?.({ add: id }); @@ -44,6 +43,4 @@ export const ValidationText = (props: ValidationTextProps) => { return null; }; -ValidationText.defaultProps = defaultProps; - export default ValidationText; diff --git a/packages/web-react/src/components/Field/types.ts b/packages/web-react/src/components/Field/types.ts new file mode 100644 index 0000000000..45930f6548 --- /dev/null +++ b/packages/web-react/src/components/Field/types.ts @@ -0,0 +1,24 @@ +import { ElementType, JSXElementConstructor, ReactNode } from 'react'; +import { ValidationTextProp } from '../../types'; +import { RegisterType } from './useAriaIds'; + +export interface FieldElementTypeProps { + /** + * The HTML element or React element used to render the pill, e.g. 'div', 'span'. + * + * @default 'div' + */ + elementType?: T | JSXElementConstructor; +} + +export interface FieldProps extends FieldElementTypeProps { + className?: string; + id?: string; + registerAria?: RegisterType; +} + +export interface HelperTextProps extends FieldProps { + helperText: ReactNode; +} + +export interface ValidationTextProps extends FieldProps, ValidationTextProp {} diff --git a/packages/web-react/src/components/Heading/Heading.tsx b/packages/web-react/src/components/Heading/Heading.tsx index 0491f9dbc5..aa5d30b7e0 100644 --- a/packages/web-react/src/components/Heading/Heading.tsx +++ b/packages/web-react/src/components/Heading/Heading.tsx @@ -4,12 +4,18 @@ import { useStyleProps } from '../../hooks'; import { SpiritHeadingProps } from '../../types'; import { useHeadingStyleProps } from './useHeadingStyleProps'; -const defaultProps = { +const defaultProps: Partial = { size: 'medium', + elementType: 'div', }; export const Heading = (props: SpiritHeadingProps): JSX.Element => { - const { elementType: ElementTag = 'div', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useHeadingStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); @@ -20,6 +26,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 28d8dfc3ed..0c3408955f 100644 --- a/packages/web-react/src/components/Icon/Icon.tsx +++ b/packages/web-react/src/components/Icon/Icon.tsx @@ -11,7 +11,8 @@ const defaultProps = { /* We need an exception for components exported with forwardRef */ /* eslint no-underscore-dangle: ['error', { allow: ['_Icon'] }] */ export const _Icon = (props: IconProps, ref: ForwardedRef) => { - 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); @@ -39,7 +40,4 @@ export const _Icon = (props: IconProps, ref: ForwardedRef) => { }; export const Icon = forwardRef(_Icon); - -Icon.defaultProps = defaultProps; - export default Icon; diff --git a/packages/web-react/src/components/Link/Link.tsx b/packages/web-react/src/components/Link/Link.tsx index d8b9d0c383..ec41f36e71 100644 --- a/packages/web-react/src/components/Link/Link.tsx +++ b/packages/web-react/src/components/Link/Link.tsx @@ -1,10 +1,11 @@ -import React, { ElementType, forwardRef } from 'react'; import classNames from 'classnames'; +import React, { ElementType, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; -import { SpiritLinkProps, PolymorphicRef } from '../../types'; +import { PolymorphicRef, SpiritLinkProps } from '../../types'; import { useLinkStyleProps } from './useLinkStyleProps'; -const defaultProps = { +const defaultProps: Partial = { + elementType: 'a', color: 'primary', }; @@ -14,7 +15,12 @@ const _Link = ( props: SpiritLinkProps, ref: PolymorphicRef, ): JSX.Element => { - const { elementType: ElementTag = 'a', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useLinkStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); @@ -33,6 +39,4 @@ const _Link = ( export const Link = forwardRef>(_Link); -Link.defaultProps = defaultProps; - export default Link; diff --git a/packages/web-react/src/components/Pill/Pill.tsx b/packages/web-react/src/components/Pill/Pill.tsx index 73c73b6334..04eb8e287b 100644 --- a/packages/web-react/src/components/Pill/Pill.tsx +++ b/packages/web-react/src/components/Pill/Pill.tsx @@ -1,15 +1,21 @@ -import React, { ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritPillProps, StyleProps } from '../../types'; import { usePillStyleProps } from './usePillStyleProps'; -const defaultProps = { +const defaultProps: Partial = { + elementType: 'span', color: 'selected', }; export const Pill = (props: SpiritPillProps): JSX.Element => { - const { elementType: ElementTag = 'span', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = usePillStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps as StyleProps); @@ -20,6 +26,4 @@ export const Pill = (props: SpiritPill ); }; -Pill.defaultProps = defaultProps; - export default Pill; diff --git a/packages/web-react/src/components/Stack/Stack.tsx b/packages/web-react/src/components/Stack/Stack.tsx index e5fd5e917f..33e2abfc25 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,12 @@ const defaultProps: SpiritStackProps = { }; export const Stack = (props: SpiritStackProps): JSX.Element => { - const { elementType: ElementTag = 'div', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps, styleProps: stackStyle } = useStackStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); @@ -31,6 +36,4 @@ export const Stack = (props: SpiritStackProps) ); }; -Stack.defaultProps = defaultProps; - export default Stack; diff --git a/packages/web-react/src/components/Tag/Tag.tsx b/packages/web-react/src/components/Tag/Tag.tsx index 2ad22f0d49..071a6e69c7 100644 --- a/packages/web-react/src/components/Tag/Tag.tsx +++ b/packages/web-react/src/components/Tag/Tag.tsx @@ -1,10 +1,10 @@ -import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import classNames from 'classnames'; +import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritTagProps, StyleProps } from '../../types'; import { useTagStyleProps } from './useTagStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'neutral', elementType: 'span', isSubtle: false, @@ -17,7 +17,12 @@ const _Tag = ( props: SpiritTagProps, ref: ForwardedRef, ): JSX.Element => { - const { elementType: ElementTag = 'span', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useTagStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps as StyleProps); @@ -30,6 +35,4 @@ const _Tag = ( export const Tag = forwardRef>(_Tag); -Tag.defaultProps = defaultProps; - export default Tag; diff --git a/packages/web-react/src/components/Text/Text.tsx b/packages/web-react/src/components/Text/Text.tsx index 54dbb3a04a..5147752eea 100644 --- a/packages/web-react/src/components/Text/Text.tsx +++ b/packages/web-react/src/components/Text/Text.tsx @@ -4,12 +4,18 @@ import { useStyleProps } from '../../hooks'; import { SpiritTextProps } from '../../types'; import { useTextStyleProps } from './useTextStyleProps'; -const defaultProps = { +const defaultProps: Partial = { + elementType: 'p', size: 'medium', }; export const Text = (props: SpiritTextProps): JSX.Element => { - const { elementType: ElementTag = 'p', children, ...restProps } = props; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useTextStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); @@ -20,6 +26,4 @@ export const Text = (props: SpiritTextPro ); }; -Text.defaultProps = defaultProps; - export default Text; 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; diff --git a/packages/web-react/src/types/collapse.ts b/packages/web-react/src/types/collapse.ts index 4a8ccd6448..3f98fc4f2d 100644 --- a/packages/web-react/src/types/collapse.ts +++ b/packages/web-react/src/types/collapse.ts @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { ChildrenProps, ClickEvent, StyleProps, Booleanish } from './shared'; +import { Booleanish, ChildrenProps, ClickEvent, StyleProps } from './shared'; export type CollapseElementType = 'div' | 'article' | 'section' | 'main' | 'header' | 'footer'; @@ -28,7 +28,8 @@ export interface TransitionCollapseProps { export interface SpiritCollapseProps extends CollapseProps, TransitionCollapseProps {} -export interface SpiritUncontrolledCollapseProps extends SpiritCollapseProps { +export interface SpiritUncontrolledCollapseProps extends Omit { + isOpen?: boolean; hideOnCollapse?: boolean; renderTrigger?: (render: CollapseRenderProps) => ReactNode; }