From 77fc9255dae41fea676d3d1dd60d5fb512723150 Mon Sep 17 00:00:00 2001 From: ShankarV-CodeJunkie <56068832+Shankar-CodeJunkie@users.noreply.github.com> Date: Thu, 7 Nov 2024 16:51:17 +0530 Subject: [PATCH] fix: update align prop value across various components (#17834) * fix: update align prop value across various components * fix(CodeSnippet): support align prop accept both old and new values --- .../__snapshots__/PublicAPI-test.js.snap | 88 +------------ .../components/CodeSnippet/CodeSnippet.tsx | 108 +++++++++++++--- .../src/components/ComboButton/index.tsx | 75 ++++++++--- packages/react/src/components/Copy/Copy.tsx | 107 +++++++++++++--- .../src/components/CopyButton/CopyButton.tsx | 109 +++++++++++++--- .../react/src/components/IconButton/index.tsx | 117 ++++++++++++++---- .../components/OverflowMenu/next/index.tsx | 71 +++++++++-- .../src/components/Pagination/Pagination.tsx | 2 +- 8 files changed, 485 insertions(+), 192 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a409af2d7c18..c3f8167f077d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -789,21 +789,7 @@ Map { }, "CodeSnippet" => Object { "propTypes": Object { - "align": Object { - "args": Array [ - Array [ - "top", - "top-left", - "top-right", - "bottom", - "bottom-left", - "bottom-right", - "left", - "right", - ], - ], - "type": "oneOf", - }, + "align": [Function], "aria-label": Object { "type": "string", }, @@ -1450,25 +1436,7 @@ Map { ], "type": "oneOf", }, - "tooltipAlignment": Object { - "args": Array [ - Array [ - "top", - "top-left", - "top-start", - "top-right", - "top-end", - "bottom", - "bottom-left", - "bottom-start", - "bottom-right", - "bottom-end", - "left", - "right", - ], - ], - "type": "oneOf", - }, + "tooltipAlignment": [Function], "translateWithId": Object { "type": "func", }, @@ -1797,21 +1765,7 @@ Map { }, "Copy" => Object { "propTypes": Object { - "align": Object { - "args": Array [ - Array [ - "top", - "top-left", - "top-right", - "bottom", - "bottom-left", - "bottom-right", - "left", - "right", - ], - ], - "type": "oneOf", - }, + "align": [Function], "autoAlign": Object { "type": "bool", }, @@ -1837,21 +1791,7 @@ Map { }, "CopyButton" => Object { "propTypes": Object { - "align": Object { - "args": Array [ - Array [ - "top", - "top-left", - "top-right", - "bottom", - "bottom-left", - "bottom-right", - "left", - "right", - ], - ], - "type": "oneOf", - }, + "align": [Function], "autoAlign": Object { "type": "bool", }, @@ -4243,25 +4183,7 @@ Map { "IconButton" => Object { "$$typeof": Symbol(react.forward_ref), "propTypes": Object { - "align": Object { - "args": Array [ - Array [ - "top", - "top-left", - "top-start", - "top-right", - "top-end", - "bottom", - "bottom-left", - "bottom-start", - "bottom-right", - "bottom-end", - "left", - "right", - ], - ], - "type": "oneOf", - }, + "align": [Function], "autoAlign": Object { "type": "bool", }, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.tsx b/packages/react/src/components/CodeSnippet/CodeSnippet.tsx index 680c0909b08a..c0506f7b5e75 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.tsx @@ -23,6 +23,7 @@ import getUniqueId from '../../tools/uniqueId'; import copy from 'copy-to-clipboard'; import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; +import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin'; const rowHeightInPixels = 16; const defaultMaxCollapsedNumberOfRows = 15; @@ -30,19 +31,52 @@ const defaultMaxExpandedNumberOfRows = 0; const defaultMinCollapsedNumberOfRows = 3; const defaultMinExpandedNumberOfRows = 16; +export type DeprecatedCodeSnippetAlignment = + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'left-bottom' + | 'left-top' + | 'right-bottom' + | 'right-top'; + +export type NewCodeSnippetAlignmnet = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-start' + | 'top-end' + | 'bottom-start' + | 'bottom-end' + | 'left-end' + | 'left-start' + | 'right-end' + | 'right-start'; + +export type CodeSnippetAlignment = + | DeprecatedCodeSnippetAlignment + | NewCodeSnippetAlignmnet; +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; + export interface CodeSnippetProps { /** * Specify how the trigger should align with the tooltip */ - align?: - | 'top' - | 'top-left' - | 'top-right' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'left' - | 'right'; + align?: CodeSnippetAlignment; /** * **Experimental**: Will attempt to automatically align the tooltip @@ -418,16 +452,52 @@ CodeSnippet.propTypes = { /** * Specify how the trigger should align with the tooltip */ - align: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-right', - 'bottom', - 'bottom-left', - 'bottom-right', - 'left', - 'right', - ]), + align: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * Specify a label to be read by screen readers on the containing textbox diff --git a/packages/react/src/components/ComboButton/index.tsx b/packages/react/src/components/ComboButton/index.tsx index 04c2f8f2b5af..2972cc99d9b0 100644 --- a/packages/react/src/components/ComboButton/index.tsx +++ b/packages/react/src/components/ComboButton/index.tsx @@ -26,6 +26,7 @@ import { useFeatureFlag } from '../FeatureFlags'; import mergeRefs from '../../tools/mergeRefs'; import { MenuAlignment } from '../MenuButton'; import { TranslateWithId } from '../../types/common'; +import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin'; const defaultTranslations = { 'carbon.combo-button.additional-actions': 'Additional actions', @@ -36,6 +37,20 @@ const defaultTranslations = { */ type TranslationKey = keyof typeof defaultTranslations; +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; + function defaultTranslateWithId(messageId: string) { return defaultTranslations[messageId]; } @@ -277,20 +292,52 @@ ComboButton.propTypes = { /** * Specify how the trigger tooltip should be aligned. */ - tooltipAlignment: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-start', - 'top-right', - 'top-end', - 'bottom', - 'bottom-left', - 'bottom-start', - 'bottom-right', - 'bottom-end', - 'left', - 'right', - ]), + tooltipAlignment: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * Optional method that takes in a message id and returns an diff --git a/packages/react/src/components/Copy/Copy.tsx b/packages/react/src/components/Copy/Copy.tsx index a26051187525..d730b7691fd1 100644 --- a/packages/react/src/components/Copy/Copy.tsx +++ b/packages/react/src/components/Copy/Copy.tsx @@ -20,20 +20,53 @@ import { composeEventHandlers } from '../../tools/events'; import { usePrefix } from '../../internal/usePrefix'; import { IconButton } from '../IconButton'; import { noopFn } from '../../internal/noopFn'; +import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin'; + +export type DeprecatedCopyAlignment = + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'left-bottom' + | 'left-top' + | 'right-bottom' + | 'right-top'; + +export type NewCopyAlignment = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-start' + | 'top-end' + | 'bottom-start' + | 'bottom-end' + | 'left-end' + | 'left-start' + | 'right-end' + | 'right-start'; + +export type CopyAlignment = DeprecatedCopyAlignment | NewCopyAlignment; + +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; interface CopyProps extends React.ButtonHTMLAttributes { /** * Specify how the trigger should align with the tooltip */ - align?: - | 'top' - | 'top-left' - | 'top-right' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'left' - | 'right'; + align?: CopyAlignment; /** * **Experimental**: Will attempt to automatically align the tooltip @@ -139,16 +172,52 @@ Copy.propTypes = { /** * Specify how the trigger should align with the tooltip */ - align: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-right', - 'bottom', - 'bottom-left', - 'bottom-right', - 'left', - 'right', - ]), + align: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * **Experimental**: Will attempt to automatically align the tooltip diff --git a/packages/react/src/components/CopyButton/CopyButton.tsx b/packages/react/src/components/CopyButton/CopyButton.tsx index a10ec83f6cac..d8e86076d471 100644 --- a/packages/react/src/components/CopyButton/CopyButton.tsx +++ b/packages/react/src/components/CopyButton/CopyButton.tsx @@ -14,20 +14,55 @@ import Copy from '../Copy'; import { LayoutConstraint } from '../Layout'; import { usePrefix } from '../../internal/usePrefix'; import { noopFn } from '../../internal/noopFn'; +import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin'; + +export type DeprecatedCopyButtonAlignment = + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'left-bottom' + | 'left-top' + | 'right-bottom' + | 'right-top'; + +export type NewCopyButtonAlignment = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-start' + | 'top-end' + | 'bottom-start' + | 'bottom-end' + | 'left-end' + | 'left-start' + | 'right-end' + | 'right-start'; + +export type CopyButtonAlignment = + | DeprecatedCopyButtonAlignment + | NewCopyButtonAlignment; + +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; export interface CopyButtonProps extends ButtonProps<'button'> { /** * Specify how the trigger should align with the tooltip */ - align?: - | 'top' - | 'top-left' - | 'top-right' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'left' - | 'right'; + align?: CopyButtonAlignment; /** * **Experimental**: Will attempt to automatically align the tooltip @@ -94,16 +129,52 @@ CopyButton.propTypes = { /** * Specify how the trigger should align with the tooltip */ - align: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-right', - 'bottom', - 'bottom-left', - 'bottom-right', - 'left', - 'right', - ]), + align: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * **Experimental**: Will attempt to automatically align the tooltip diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx index 05d091b004f3..224d757e40db 100644 --- a/packages/react/src/components/IconButton/index.tsx +++ b/packages/react/src/components/IconButton/index.tsx @@ -12,6 +12,7 @@ import classNames from 'classnames'; import { Tooltip } from '../Tooltip'; import { usePrefix } from '../../internal/usePrefix'; import ButtonBase from '../Button/ButtonBase'; +import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin'; export const IconButtonKinds = [ 'primary', @@ -22,24 +23,54 @@ export const IconButtonKinds = [ export type IconButtonKind = (typeof IconButtonKinds)[number]; +export type DeprecatedIconButtonAlignment = + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' + | 'left-bottom' + | 'left-top' + | 'right-bottom' + | 'right-top'; + +export type NewIconButtonAlignment = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-start' + | 'top-end' + | 'bottom-start' + | 'bottom-end' + | 'left-end' + | 'left-start' + | 'right-end' + | 'right-start'; + +export type IconButtonAlignment = + | DeprecatedIconButtonAlignment + | NewIconButtonAlignment; + +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; + interface IconButtonProps extends React.ButtonHTMLAttributes { /** * Specify how the trigger should align with the tooltip */ - align?: - | 'top' - | 'top-left' - | 'top-start' - | 'top-right' - | 'top-end' - | 'bottom' - | 'bottom-left' - | 'bottom-start' - | 'bottom-right' - | 'bottom-end' - | 'left' - | 'right'; + align?: IconButtonAlignment; /** * **Experimental**: Will attempt to automatically align the tooltip @@ -170,20 +201,52 @@ IconButton.propTypes = { /** * Specify how the trigger should align with the tooltip */ - align: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-start', - 'top-right', - 'top-end', - 'bottom', - 'bottom-left', - 'bottom-start', - 'bottom-right', - 'bottom-end', - 'left', - 'right', - ]), + align: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * **Experimental**: Will attempt to automatically align the tooltip diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx index 7b9f416e4134..2f044e0f1ce0 100644 --- a/packages/react/src/components/OverflowMenu/next/index.tsx +++ b/packages/react/src/components/OverflowMenu/next/index.tsx @@ -24,9 +24,24 @@ import mergeRefs from '../../../tools/mergeRefs'; import { useId } from '../../../internal/useId'; import { usePrefix } from '../../../internal/usePrefix'; import { useAttachedMenu } from '../../../internal/useAttachedMenu'; +import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin'; const defaultSize = 'md'; +const propMappingFunction = (deprecatedValue) => { + const mapping = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-bottom': 'left-end', + 'left-top': 'left-start', + 'right-bottom': 'right-end', + 'right-top': 'right-start', + }; + return mapping[deprecatedValue]; +}; + interface OverflowMenuProps { /** * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements. @@ -274,16 +289,52 @@ OverflowMenu.propTypes = { /** * Specify how the trigger tooltip should be aligned. */ - tooltipAlignment: PropTypes.oneOf([ - 'top', - 'top-left', - 'top-right', - 'bottom', - 'bottom-left', - 'bottom-right', - 'left', - 'right', - ]), + tooltipAlignment: deprecateValuesWithin( + PropTypes.oneOf([ + 'top', + 'top-left', // deprecated use top-start instead + 'top-right', // deprecated use top-end instead + + 'bottom', + 'bottom-left', // deprecated use bottom-start instead + 'bottom-right', // deprecated use bottom-end instead + + 'left', + 'left-bottom', // deprecated use left-end instead + 'left-top', // deprecated use left-start instead + + 'right', + 'right-bottom', // deprecated use right-end instead + 'right-top', // deprecated use right-start instead + + // new values to match floating-ui + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'left-end', + 'left-start', + 'right-end', + 'right-start', + ]), + //allowed prop values + [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + //optional mapper function + propMappingFunction + ), /** * Specify a DOM node where the Menu should be rendered in. Defaults to document.body. diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx index a2ced30374b2..4ba2f2a73d43 100644 --- a/packages/react/src/components/Pagination/Pagination.tsx +++ b/packages/react/src/components/Pagination/Pagination.tsx @@ -414,7 +414,7 @@ const Pagination = React.forwardRef(function Pagination(