BREAKING CHANGE(web-react): Remove Dropdown and Tooltip non-flow-rela…

…tive placements #DS-1138 See the Placement in Tooltip and Dropdown section in the web-react package Migration Guide to version 2.
lmc-eu · May 2, 2024 · fc37a66 · fc37a66
1 parent 2f64243
commit fc37a66
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 117 deletions.
diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md
@@ -35,41 +35,6 @@ The `id` prop will be mandatory for the `Dropdown` and `Collapse` components.
 Add `id` prop to the `Dropdown` component.
 Add `id` prop to the `Collapse` component.
 
-### Tooltip and Dropdown Placements
-
-The `Tooltip` and `Dropdown` components no longer support non-flow-relative placements.
-
-#### Migration Guide
-
-Use codemod to automatically update your codebase.
-
-```sh
-npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/dropdown-tooltip-flow-placement
-```
-
-See [Codemods documentation][readme-codemods] for more details.
-
-Or manually edit your usages of Tooltip and Dropdown. Instead of using `top-left` or
-`left-bottom` and etc, use `top-start` or `left-end` and so on.
-See [Placement dictionary][dictionary-placement] for more details.
-
-- `<Tooltip placement="top-left" … />` → `<Tooltip placement="top-start" … />`
-- `<Tooltip placement="top-right" … />` → `<Tooltip placement="top-end" … />`
-- `<Tooltip placement="right-top" … />` → `<Tooltip placement="right-start" … />`
-- `<Tooltip placement="right-bottom" … />` → `<Tooltip placement="right-end" … />`
-- `<Tooltip placement="bottom-left" … />` → `<Tooltip placement="bottom-start" … />`
-- `<Tooltip placement="bottom-right" … />` → `<Tooltip placement="bottom-end" … />`
-- `<Tooltip placement="left-top" … />` → `<Tooltip placement="left-start" … />`
-- `<Tooltip placement="left-bottom" … />` → `<Tooltip placement="left-end" … />`
-- `<Dropdown placement="top-left" … />` → `<Dropdown placement="top-start" … />`
-- `<Dropdown placement="top-right" … />` → `<Dropdown placement="top-end" … />`
-- `<Dropdown placement="right-top" … />` → `<Dropdown placement="right-start" … />`
-- `<Dropdown placement="right-bottom" … />` → `<Dropdown placement="right-end" … />`
-- `<Dropdown placement="bottom-left" … />` → `<Dropdown placement="bottom-start" … />`
-- `<Dropdown placement="bottom-right" … />` → `<Dropdown placement="bottom-end" … />`
-- `<Dropdown placement="left-top" … />` → `<Dropdown placement="left-start" … />`
-- `<Dropdown placement="left-bottom" … />` → `<Dropdown placement="left-end" … />`
-
 ### Tooltip & TooltipModern
 
 The `Tooltip` component will be replaced by the `TooltipModern` component.
@@ -130,7 +95,6 @@ See [Codemods documentation][readme-codemods] for more details.
 Or manually add `isScrollable` prop to the `ModalDialog` component.
 
 [readme-codemods]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/README.md
-[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#placement
 [dropdown-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Dropdown/README.md
 [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations
 [tooltip-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Tooltip/README.md
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx
@@ -11,7 +11,7 @@ const DropdownFullwidthAll = () => {
   const onToggle = () => setIsOpen(!isOpen);
 
   return (
-    <Dropdown id="DropdownFullwidthAll" isOpen={isOpen} onToggle={onToggle} fullWidthMode="all" placement="top-left">
+    <Dropdown id="DropdownFullwidthAll" isOpen={isOpen} onToggle={onToggle} fullWidthMode="all" placement="top-start">
       <DropdownTrigger elementType={Button}>Finibus quis imperdiet, semper imperdiet aliquam</DropdownTrigger>
       <DropdownPopover>
         <DropdownContentFactory content={dropdownContent} />

diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx
@@ -16,7 +16,7 @@ const DropdownFullwidthMobileOnly = () => {
       isOpen={isOpen}
       onToggle={onToggle}
       fullWidthMode="mobile-only"
-      placement="top-left"
+      placement="top-start"
     >
       <DropdownTrigger elementType={Button}>Finibus quis imperdiet, semper imperdiet aliquam</DropdownTrigger>
       <DropdownPopover>

diff --git a/packages/web-react/src/components/Dropdown/demo/UncontrolledDropdown.tsx b/packages/web-react/src/components/Dropdown/demo/UncontrolledDropdown.tsx
@@ -7,7 +7,7 @@ import DropdownContentFactory from './DropdownContentFactory';
 import { dropdownContent } from './constants';
 
 const UncontrolledDropdownDemo = () => (
-  <UncontrolledDropdown id="UncontrolledDropdownExample" placement="top-left">
+  <UncontrolledDropdown id="UncontrolledDropdownExample" placement="top-start">
     <DropdownTrigger elementType={Button}>Trigger button</DropdownTrigger>
     <DropdownPopover>
       <DropdownContentFactory content={dropdownContent} />

diff --git a/packages/web-react/src/components/Dropdown/stories/UncontolledDropdown.stories.tsx b/packages/web-react/src/components/Dropdown/stories/UncontolledDropdown.stories.tsx
@@ -41,7 +41,7 @@ const meta: Meta<typeof UncontrolledDropdown> = {
       control: 'select',
       options: Object.values(Placements),
       table: {
-        defaultValue: { summary: Placements.BOTTOM_LEFT },
+        defaultValue: { summary: Placements.BOTTOM_START },
       },
     },
   },

diff --git a/packages/web-react/src/components/Dropdown/useDropdownAriaProps.ts b/packages/web-react/src/components/Dropdown/useDropdownAriaProps.ts
@@ -1,5 +1,4 @@
 import { Placements } from '../../constants';
-import { useDeprecationMessage } from '../../hooks';
 import { Booleanish, ClickEvent, DropdownFullWidthMode, PlacementDictionaryType } from '../../types';
 
 const NAME_ARIA_EXPANDED = 'aria-expanded';
@@ -40,29 +39,8 @@ export interface UseDropdownAriaPropsReturn {
   };
 }
 
-const deprecatedPlacements = {
-  'top-left': 'top-start',
-  'top-right': 'top-end',
-  'right-top': 'right-start',
-  'right-bottom': 'right-end',
-  'bottom-left': 'bottom-start',
-  'bottom-right': 'bottom-end',
-  'left-top': 'left-start',
-  'left-bottom': 'left-end',
-};
-
 export const useDropdownAriaProps = (props: UseDropdownAriaPropsProps): UseDropdownAriaPropsReturn => {
   const { fullWidthMode, id, isOpen, placement = Placements.BOTTOM_START, toggleHandler } = props;
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!deprecatedPlacements[placement as keyof typeof deprecatedPlacements],
-    componentName: 'Dropdown',
-    propertyProps: {
-      deprecatedValue: placement,
-      newValue: deprecatedPlacements[placement as keyof typeof deprecatedPlacements],
-      propertyName: 'placement',
-    },
-  });
 
   const triggerProps = {
     id,

diff --git a/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts b/packages/web-react/src/components/Tooltip/useTooltipStyleProps.ts
@@ -16,31 +16,9 @@ export interface UseTooltipStylePropsReturn {
   props: TooltipProps;
 }
 
-const deprecatedPlacements = {
-  'top-left': 'top-start',
-  'top-right': 'top-end',
-  'right-top': 'right-start',
-  'right-bottom': 'right-end',
-  'bottom-left': 'bottom-start',
-  'bottom-right': 'bottom-end',
-  'left-top': 'left-start',
-  'left-bottom': 'left-end',
-};
-
 export const useTooltipStyleProps = (props: UseTooltipStyleProps): UseTooltipStylePropsReturn => {
   const { placement = 'bottom', isDismissible, open, ...modifiedProps } = props;
 
-  useDeprecationMessage({
-    method: 'property',
-    trigger: placement !== 'off' && !!deprecatedPlacements[placement as keyof typeof deprecatedPlacements],
-    componentName: 'Tooltip',
-    propertyProps: {
-      deprecatedValue: placement,
-      newValue: deprecatedPlacements[placement as keyof typeof deprecatedPlacements],
-      propertyName: 'placement',
-    },
-  });
-
   useDeprecationMessage({
     method: 'custom',
     trigger: placement === 'off',

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipPlacements.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipPlacements.tsx
@@ -22,7 +22,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'top-start'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_top_start"
+            id="placement-top-start"
             label="top-start"
             value="top-start"
           />{' '}
@@ -31,7 +31,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'top'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_top"
+            id="placement-top"
             label="top"
             value="top"
           />{' '}
@@ -40,7 +40,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'top-end'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_top_end"
+            id="placement-top-end"
             label="top-end"
             value="top-end"
           />
@@ -51,7 +51,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'bottom-start'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_bottom_start"
+            id="placement-bottom-start"
             label="bottom-start"
             value="bottom-start"
           />{' '}
@@ -60,7 +60,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'bottom'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_bottom"
+            id="placement-bottom"
             label="bottom"
             value="bottom"
           />{' '}
@@ -69,7 +69,7 @@ const TooltipPlacements = () => {
             isChecked={placement === 'bottom-end'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_bottom_end"
+            id="placement-bottom-end"
             label="bottom-end"
             value="bottom-end"
           />
@@ -81,30 +81,30 @@ const TooltipPlacements = () => {
         >
           <Radio
             name="placement"
-            isChecked={placement === 'left-top'}
+            isChecked={placement === 'left-start'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_start_top"
-            label="left-top"
-            value="left-top"
+            id="placement-left-start"
+            label="left-start"
+            value="left-start"
           />
           <Radio
             name="placement"
             isChecked={placement === 'left'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_start"
+            id="placement-left"
             label="left"
             value="left"
           />
           <Radio
             name="placement"
-            isChecked={placement === 'left-bottom'}
+            isChecked={placement === 'left-end'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_start_bottom"
-            label="left-bottom"
-            value="left-bottom"
+            id="placement-left-end"
+            label="left-end"
+            value="left-end"
           />
         </GridItem>
         <GridItem
@@ -114,30 +114,30 @@ const TooltipPlacements = () => {
         >
           <Radio
             name="placement"
-            isChecked={placement === 'right-top'}
+            isChecked={placement === 'right-start'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_end_top"
-            label="right-top"
-            value="right-top"
+            id="placement-right-start"
+            label="right-start"
+            value="right-start"
           />
           <Radio
             name="placement"
             isChecked={placement === 'right'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_end"
+            id="placement-right"
             label="right"
             value="right"
           />
           <Radio
             name="placement"
-            isChecked={placement === 'right-bottom'}
+            isChecked={placement === 'right-end'}
             isLabelHidden
             onChange={handlePlacementChange}
-            id="placement_end_bottom"
-            label="right-bottom"
-            value="right-bottom"
+            id="placement-right-end"
+            label="right-end"
+            value="right-end"
           />
         </GridItem>
         <GridItem columnStart={2} rowStart={2}>

diff --git a/packages/web-react/src/constants/dictionaries.ts b/packages/web-react/src/constants/dictionaries.ts
@@ -66,15 +66,6 @@ export const Placements = {
   RIGHT: 'right',
   RIGHT_START: 'right-start',
   RIGHT_END: 'right-end',
-  // @deprecated All following placements are deprecated and will be removed in the next major version. Use flow-relative placements (above) instead.
-  TOP_RIGHT: 'top-right',
-  TOP_LEFT: 'top-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  BOTTOM_LEFT: 'bottom-left',
-  LEFT_TOP: 'left-top',
-  LEFT_BOTTOM: 'left-bottom',
-  RIGHT_TOP: 'right-top',
-  RIGHT_BOTTOM: 'right-bottom',
 } as const;
 
 /* Validation */