fixup! Refactor(web-react): Refactor Dropdown to controlled component…

… #DS-637
lmc-eu · Nov 6, 2023 · 4a3d15f · 4a3d15f
1 parent e09f3e9
commit 4a3d15f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 39 deletions.
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx
@@ -14,7 +14,7 @@ const defaultProps = {
 };
 
 /**
- * @deprecated Dropdown component will be deprecated soon. Please use "DropdownModern" component instead.
+ * @deprecated Dropdown component is deprecated and will be removed in the next major version. Please use "DropdownModern" component instead.
  */
 export const Dropdown = (props: SpiritDropdownProps) => {
   const {
@@ -44,7 +44,7 @@ export const Dropdown = (props: SpiritDropdownProps) => {
     trigger: true,
     componentName: 'Dropdown',
     customText:
-      'Dropdown component composition will be deprecated in the next major version. Please use "DropdownModern" component composition instead.',
+      'Dropdown component is deprecated and will be removed in the next major version. Please use "DropdownModern" component instead.',
   });
 
   const triggerRenderHandler = () => {

diff --git a/packages/web-react/src/components/Dropdown/DropdownContext.ts b/packages/web-react/src/components/Dropdown/DropdownContext.ts
@@ -1,26 +1,26 @@
 import { MutableRefObject, createContext, useContext } from 'react';
-import { ClickEvent, PlacementDictionaryType } from '../../types';
 import { Placements } from '../../constants';
+import { ClickEvent, PlacementDictionaryType } from '../../types';
 import { fullWidthModeKeys } from './useDropdownAriaProps';
 
 type DropdownContextType = {
+  dropdownRef: MutableRefObject<HTMLElement | null>;
   fullWidthMode?: keyof typeof fullWidthModeKeys;
   id: string;
   isOpen: boolean;
-  placement?: PlacementDictionaryType;
   onToggle: (event: ClickEvent) => void;
-  dropdownRef: MutableRefObject<HTMLElement | null>;
+  placement?: PlacementDictionaryType;
   triggerRef: MutableRefObject<HTMLElement | undefined>;
 };
 
 const defaultContext: DropdownContextType = {
+  dropdownRef: { current: null },
   fullWidthMode: fullWidthModeKeys.off,
   id: '',
   isOpen: false,
   onToggle: () => {},
-  dropdownRef: { current: null },
-  triggerRef: { current: undefined },
   placement: Placements.BOTTOM_LEFT,
+  triggerRef: { current: undefined },
 };
 
 const DropdownContext = createContext<DropdownContextType>(defaultContext);

diff --git a/packages/web-react/src/components/Dropdown/DropdownModern.tsx b/packages/web-react/src/components/Dropdown/DropdownModern.tsx
@@ -13,10 +13,10 @@ export const DropdownModern = (props: DropdownProps) => {
     enableAutoClose = true,
     fullWidthMode,
     id,
-    onAutoClose,
-    placement,
     isOpen = false,
+    onAutoClose,
     onToggle,
+    placement,
     ...rest
   } = props;
   const { classProps } = useDropdownStyleProps();

diff --git a/packages/web-react/src/components/Dropdown/README.md b/packages/web-react/src/components/Dropdown/README.md
@@ -1,6 +1,6 @@
 # Dropdown
 
-⚠️ Dropdown component composition will be [deprecated][Deprecated] in the next major version. Please use "DropdownModern" component composition instead.
+⚠️ Dropdown component is [deprecated][Deprecated] and will be removed in the next major version. Please use "DropdownModern" component instead.
 This is the React implementation of the [Dropdown] component.
 
 ## Usage
@@ -17,16 +17,16 @@ import { Dropdown } from '@lmc-eu/spirit-web-react/components';
 
 ## API
 
-| Name               | Type                                             | Default       | Required | Description                                                                             |
-| ------------------ | ------------------------------------------------ | ------------- | -------- | --------------------------------------------------------------------------------------- |
-| `enableAutoClose`  | `bool`                                           | `true`        | ✕        | Enables close on click outside of Dropdown                                              |
-| `fullWidthMode`    | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`         | ✕        | Full-width mode                                                                         |
-| `id`               | `string`                                         | `<random>`    | ✕        | Component id                                                                            |
-| `onAutoClose` .    | `(event: Event) => void`                         | —             | ✕        | Callback on close on click outside of Dropdown                                          |
-| `placement`        | [Placement dictionary][dictionary-placement]     | `bottom-left` | ✕        | Alignment of the component                                                              |
-| `renderTrigger`    | `(render: DropdownRenderProps) => ReactNode`     | —             | ✕        | [**DEPRECATED**][Deprecated] Will be removed in favor of new `DropdownModern` component |
-| `UNSAFE_className` | `string`                                         | —             | ✕        | Wrapper custom classname                                                                |
-| `UNSAFE_style`     | `CSSProperties`                                  | —             | ✕        | Wrapper custom style                                                                    |
+| Name               | Type                                             | Default       | Required | Description                                                                              |
+| ------------------ | ------------------------------------------------ | ------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `enableAutoClose`  | `bool`                                           | `true`        | ✕        | Enables close on click outside of Dropdown                                               |
+| `fullWidthMode`    | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`         | ✕        | Full-width mode                                                                          |
+| `id`               | `string`                                         | `<random>`    | ✕        | Component id                                                                             |
+| `onAutoClose` .    | `(event: Event) => void`                         | —             | ✕        | Callback on close on click outside of Dropdown                                           |
+| `placement`        | [Placement dictionary][dictionary-placement]     | `bottom-left` | ✕        | Alignment of the component                                                               |
+| `renderTrigger`    | `(render: DropdownRenderProps) => ReactNode`     | —             | ✕        | [**DEPRECATED**][Deprecated] Will be removed in favor of new `DropdownTrigger` component |
+| `UNSAFE_className` | `string`                                         | —             | ✕        | Wrapper custom classname                                                                 |
+| `UNSAFE_style`     | `CSSProperties`                                  | —             | ✕        | Wrapper custom style                                                                     |
 
 ### DropdownRenderProps
 
@@ -44,39 +44,35 @@ import { Dropdown } from '@lmc-eu/spirit-web-react/components';
 
 # DropdownModern
 
-⚠️ `DropdownModern` component will be deprecated and renamed to `Dropdown` in the next major version.
-This is the React implementation of the [DropdownModern] component.
+⚠️ `DropdownModern` component is [deprecated] and will be renamed to `Dropdown` in the next major version.
+This is the React implementation of the `DropdownModern` component.
 
 ## Usage
 
 ```jsx
-import { DropdownModern, DropdownModernTrigger, DropdownModernPopover } from '@lmc-eu/spirit-web-react/components';
+import { DropdownModern, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';
 ```
 
 ```jsx
 const [isOpen, setIsOpen] = React.useState(false);
 const onToggle = () => setIsOpen(!isOpen);
 
 <DropdownModern id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
-  <DropdownModernTrigger elementType="button">Trigger button</DropdownModernTrigger>
-  <DropdownModernPopover>…</DropdownModernPopover>
+  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
+  <DropdownPopover>…</DropdownPopover>
 </DropdownModern>;
 ```
 
 ### Uncontrolled dropdown
 
 ```jsx
-import {
-  UncontrolledDropdown,
-  DropdownModernTrigger,
-  DropdownModernPopover,
-} from '@lmc-eu/spirit-web-react/components';
+import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';
 ```
 
 ```jsx
 <UncontrolledDropdown id="UncontrolledDropdownExample">
-  <DropdownModernTrigger elementType="button">Trigger button</DropdownModernTrigger>
-  <DropdownModernPopover>…</DropdownModernPopover>
+  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
+  <DropdownPopover>…</DropdownPopover>
 </UncontrolledDropdown>
 ```
 
@@ -96,7 +92,7 @@ import {
 | `UNSAFE_className` | `string`                                         | —             | ✕        | Wrapper custom classname                       |
 | `UNSAFE_style`     | `CSSProperties`                                  | —             | ✕        | Wrapper custom style                           |
 
-### DropdownModernTrigger
+### DropdownTrigger
 
 | Name               | Type                      | Default  | Required | Description                      |
 | ------------------ | ------------------------- | -------- | -------- | -------------------------------- |
@@ -105,13 +101,13 @@ import {
 | `UNSAFE_className` | `string`                  | —        | ✕        | DropdownTrigger custom classname |
 | `UNSAFE_style`     | `CSSProperties`           | —        | ✕        | DropdownTrigger custom style     |
 
-### DropdownModernPopover
+### DropdownPopover
 
 | Name               | Type                      | Default | Required | Description                      |
 | ------------------ | ------------------------- | ------- | -------- | -------------------------------- |
 | `children`         | [`string` \| `ReactNode`] | —       | ✔        | Content of trigger element       |
-| `UNSAFE_className` | `string`                  | —       | ✕        | DropdownContent custom classname |
-| `UNSAFE_style`     | `CSSProperties`           | —       | ✕        | DropdownContent custom style     |
+| `UNSAFE_className` | `string`                  | —       | ✕        | DropdownPopover custom classname |
+| `UNSAFE_style`     | `CSSProperties`           | —       | ✕        | DropdownPopover custom style     |
 
 ### UncontrolledDropdown
 
@@ -125,9 +121,8 @@ import {
 | `UNSAFE_className` | `string`                                         | —             | ✕        | Wrapper custom classname                       |
 | `UNSAFE_style`     | `CSSProperties`                                  | —             | ✕        | Wrapper custom style                           |
 
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
+[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
-[DropdownModern]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/DropdownModern
 [dropdownbreakpoint]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L11
 [dropdownfullwidthmode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19
-[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
-[Deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
diff --git a/packages/web-react/src/components/DropdownModern/README.md b/packages/web-react/src/components/DropdownModern/README.md
@@ -0,0 +1,8 @@
+# DropdownModern
+
+⚠️ `DropdownModern` component is [deprecated] and will be renamed to `Dropdown` in the next major version.
+
+For more information and implementation examples, please visit the `DropdownModern` section in the [readme][dropdown] for the `Dropdown` component.
+
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
+[dropdown]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Dropdown/README.md