BREAKING CHANGE(web-react): Remove isFullWidth and breakpoint pro…

…ps from `Dropdown` #DS-588 ## Migration Guide Use `fullWidthMode` prop instead of `isFullWidth` and `breakpoint` on `Dropdown` component. - `<Dropdown isFullWidth …>` → `<Dropdown fullWidthMode="all" …>` - `<Dropdown isFullWidth breakpoint="mobile" …>` → `<Dropdown fullWidthMode="mobile-only" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · d84016c · d84016c
1 parent 31296ea
commit d84016c
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 153 deletions.
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.stories.ts b/packages/web-react/src/components/Dropdown/Dropdown.stories.ts
@@ -10,7 +10,5 @@ export default {
 
 export { default as Dropdown } from './stories/Dropdown';
 export { default as DropdownDisableAutoClose } from './stories/DropdownDisableAutoClose';
-export { default as DropdownFullWidth } from './stories/DropdownFullWidth';
 export { default as DropdownPlacements } from './stories/DropdownPlacements';
-export { default as DropdownBreakpoints } from './stories/DropdownBreakpoints';
 export { default as DropdownFullWidthMode } from './stories/DropdownFullWidthMode';
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx
@@ -1,15 +1,13 @@
 import React, { createElement, useRef, LegacyRef } from 'react';
 import classNames from 'classnames';
 import DropdownWrapper from './DropdownWrapper';
-import { useStyleProps, useDeprecationMessage } from '../../hooks';
+import { useStyleProps } from '../../hooks';
 import { DropdownPlacements, SpiritDropdownProps } from '../../types';
 import { useDropdown } from './useDropdown';
 import { useDropdownStyleProps } from './useDropdownStyleProps';
 import { useDropdownAriaProps } from './useDropdownAriaProps';
 
 const defaultProps = {
-  /** @deprecated Will be removed in the next major version. */
-  isFullWidth: false,
   placement: DropdownPlacements.BOTTOM_LEFT,
   enableAutoClose: true,
 };
@@ -20,8 +18,6 @@ const Dropdown = (props: SpiritDropdownProps) => {
     children,
     renderTrigger,
     enableAutoClose,
-    /** @deprecated Will be removed in the next major version. */
-    breakpoint,
     fullWidthMode,
     onAutoClose,
     ...rest
@@ -32,7 +28,7 @@ const Dropdown = (props: SpiritDropdownProps) => {
 
   const { isOpen, toggleHandler } = useDropdown({ dropdownRef, triggerRef, enableAutoClose, onAutoClose });
   const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });
-  const { triggerProps, contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler, breakpoint, fullWidthMode });
+  const { triggerProps, contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler, fullWidthMode });
 
   const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps({ ...modifiedProps });
   const { styleProps: triggerStyleProps } = useStyleProps({
@@ -69,28 +65,6 @@ const Dropdown = (props: SpiritDropdownProps) => {
     children,
   );
 
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!breakpoint,
-    componentName: 'Dropdown',
-    propertyProps: {
-      deprecatedName: 'breakpoint',
-      newName: 'fullWidthMode',
-    },
-  });
-
-  useDeprecationMessage({
-    method: 'property',
-    // use only to mark deprecation
-    // eslint-disable-next-line react/destructuring-assignment
-    trigger: !!props.isFullWidth,
-    componentName: 'Dropdown',
-    propertyProps: {
-      deprecatedName: 'isFullWidth',
-      newName: 'fullWidthMode',
-    },
-  });
-
   return (
     <DropdownWrapper>
       {triggerRenderHandler()}

diff --git a/packages/web-react/src/components/Dropdown/README.md b/packages/web-react/src/components/Dropdown/README.md
@@ -16,18 +16,16 @@ import { Dropdown } from '@lmc-eu/spirit-web-react/components';
 
 ## Props
 
-| Prop name          | Type                                             | Default       | Required | Description                                                                                                                |
-| ------------------ | ------------------------------------------------ | ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`               | `string`                                         | `<random>`    | no       | Component id                                                                                                               |
-| `renderTrigger`    | `(render: DropdownRenderProps) => ReactNode`     | -             | no       | Properties for trigger render                                                                                              |
-| `enableAutoClose`  | `boolean`                                        | `true`        | no       | Enables close on click outside of Dropdown                                                                                 |
-| `onAutoClose` .    | `(event: Event) => void`                         |               | no       | Callback on close on click outside of Dropdown                                                                             |
-| `isFullWidth`      | `boolean`                                        | `false`       | no       | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Whether is component displayed in full width                     |
-| `placement`        | [`DropdownPlacement`][dropdownplacement]         | `bottom-left` | no       | Alignment of the component                                                                                                 |
-| `breakpoint`       | [`DropdownBreakpoint`][dropdownbreakpoint]       | -             | no       | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Breakpoint to switch from the full-width to the auto-width mode. |
-| `fullWidthMode`    | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`         | no       | Full-width mode                                                                                                            |
-| `UNSAFE_className` | `string`                                         | -             | no       | Wrapper custom classname                                                                                                   |
-| `UNSAFE_style`     | `CSSProperties`                                  | -             | no       | Wrapper custom style                                                                                                       |
+| Prop name          | Type                                             | Default       | Required | Description                                    |
+| ------------------ | ------------------------------------------------ | ------------- | -------- | ---------------------------------------------- |
+| `enableAutoClose`  | `boolean`                                        | `true`        | no       | Enables close on click outside of Dropdown     |
+| `fullWidthMode`    | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`         | no       | Full-width mode                                |
+| `id`               | `string`                                         | `<random>`    | no       | Component id                                   |
+| `onAutoClose` .    | `(event: Event) => void`                         |               | no       | Callback on close on click outside of Dropdown |
+| `placement`        | [`DropdownPlacement`][dropdownplacement]         | `bottom-left` | no       | Alignment of the component                     |
+| `renderTrigger`    | `(render: DropdownRenderProps) => ReactNode`     | -             | no       | Properties for trigger render                  |
+| `UNSAFE_className` | `string`                                         | -             | no       | Wrapper custom classname                       |
+| `UNSAFE_style`     | `CSSProperties`                                  | -             | no       | Wrapper custom style                           |
 
 ## DropdownRenderProps
 
@@ -45,4 +43,3 @@ import { Dropdown } from '@lmc-eu/spirit-web-react/components';
 [dropdownplacement]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L4
 [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
-[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/Dropdown/__tests__/useDropdownAriaProps.test.ts b/packages/web-react/src/components/Dropdown/__tests__/useDropdownAriaProps.test.ts
@@ -4,8 +4,6 @@ import { useDropdownAriaProps } from '../useDropdownAriaProps';
 describe('useDropdownAriaProps', () => {
   it('should return defaults', () => {
     const props = {
-      /** @deprecated Will be removed in the next major version. */
-      breakpoint: undefined,
       fullWidthMode: undefined,
       id: 'test-dropdown-id',
       isOpen: true,

diff --git a/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts b/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts
@@ -4,7 +4,7 @@ import { useDropdownStyleProps, UseDropdownStyleProps } from '../useDropdownStyl
 
 describe('useDropdownStyleProps', () => {
   it('should return defaults', () => {
-    const props = { isOpen: true, isFullWidth: false, placement: 'bottom-left' } as UseDropdownStyleProps;
+    const props = { isOpen: true, placement: 'bottom-left' } as UseDropdownStyleProps;
     const { result } = renderHook(() => useDropdownStyleProps(props));
 
     expect(result.current.classProps.contentClassName).toBe('Dropdown is-open Dropdown--bottom Dropdown--left');
@@ -15,8 +15,6 @@ describe('useDropdownStyleProps', () => {
   it('should transfer additional props', () => {
     const props = {
       isOpen: false,
-      /** @deprecated Will be removed in the next major version. */
-      isFullWidth: false,
       placement: DropdownPlacements.BOTTOM_LEFT,
       transferProp: 'test',
     };
@@ -25,25 +23,9 @@ describe('useDropdownStyleProps', () => {
     expect(result.current.props).toEqual({ transferProp: 'test' });
   });
 
-  it('should set `fullWidth` class', () => {
-    const props = {
-      isOpen: false,
-      /** @deprecated Will be removed in the next major version. */
-      isFullWidth: true,
-      placement: DropdownPlacements.BOTTOM_LEFT,
-    };
-    const { result } = renderHook(() => useDropdownStyleProps(props));
-
-    expect(result.current.classProps.contentClassName).toBe(
-      'Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left',
-    );
-  });
-
   it('should change placement class', () => {
     const props = {
       isOpen: false,
-      /** @deprecated Will be removed in the next major version. */
-      isFullWidth: false,
       placement: DropdownPlacements.TOP_RIGHT,
     };
     const { result } = renderHook(() => useDropdownStyleProps(props));

diff --git a/packages/web-react/src/components/Dropdown/stories/DropdownBreakpoints.tsx b/packages/web-react/src/components/Dropdown/stories/DropdownBreakpoints.tsx
diff --git a/packages/web-react/src/components/Dropdown/stories/DropdownFullWidth.tsx b/packages/web-react/src/components/Dropdown/stories/DropdownFullWidth.tsx
diff --git a/packages/web-react/src/components/Dropdown/useDropdownAriaProps.ts b/packages/web-react/src/components/Dropdown/useDropdownAriaProps.ts
@@ -1,9 +1,7 @@
-import { Booleanish, ClickEvent, DropdownBreakpoint, DropdownFullWidthMode } from '../../types';
+import { Booleanish, ClickEvent, DropdownFullWidthMode } from '../../types';
 
 const NAME_ARIA_EXPANDED = 'aria-expanded';
 const NAME_ARIA_CONTROLS = 'aria-controls';
-/** @deprecated Will be removed in the next major version. */
-const NAME_DATA_BREAKPOINT = 'data-breakpoint';
 const NAME_DATA_FULLWIDTHMODE = 'data-fullwidthmode';
 
 export enum fullWidthModeKeys {
@@ -18,18 +16,14 @@ export interface UseDropdownAriaPropsProps {
   isOpen: boolean;
   /** toggle callback */
   toggleHandler: (event: ClickEvent) => void;
-  /** breakpoint */
-  /** @deprecated Will be removed in the next major version. */
-  breakpoint: DropdownBreakpoint | undefined;
+  /** fullWidthMode */
   fullWidthMode: DropdownFullWidthMode | undefined;
 }
 
 export interface UseDropdownAriaPropsReturn {
   /** content returned props */
   contentProps: {
     id: string;
-    /** @deprecated Will be removed in the next major version. */
-    [NAME_DATA_BREAKPOINT]?: DropdownBreakpoint | undefined;
     [NAME_DATA_FULLWIDTHMODE]?: keyof typeof fullWidthModeKeys | undefined;
   };
   /** trigger returned props */
@@ -41,15 +35,15 @@ export interface UseDropdownAriaPropsReturn {
 }
 
 export const useDropdownAriaProps = (props: UseDropdownAriaPropsProps): UseDropdownAriaPropsReturn => {
-  const { breakpoint, fullWidthMode, id, isOpen, toggleHandler } = props;
+  const { fullWidthMode, id, isOpen, toggleHandler } = props;
 
   const triggerProps = {
     id,
     [NAME_ARIA_EXPANDED]: isOpen,
     [NAME_ARIA_CONTROLS]: String(id),
     onClick: toggleHandler,
   };
-  const contentProps = { id, [NAME_DATA_BREAKPOINT]: breakpoint, [NAME_DATA_FULLWIDTHMODE]: fullWidthMode };
+  const contentProps = { id, [NAME_DATA_FULLWIDTHMODE]: fullWidthMode };
 
   return {
     contentProps,

diff --git a/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts b/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts
@@ -17,13 +17,11 @@ export interface UseDropdownStylePropsReturn {
 }
 
 export const useDropdownStyleProps = (
-  props: UseDropdownStyleProps = { isOpen: false, isFullWidth: false },
+  props: UseDropdownStyleProps = { isOpen: false },
 ): UseDropdownStylePropsReturn => {
-  const { isOpen, isFullWidth, placement = DropdownPlacements.BOTTOM_LEFT, ...modifiedProps } = props;
+  const { isOpen, placement = DropdownPlacements.BOTTOM_LEFT, ...modifiedProps } = props;
   const dropdownClass = useClassNamePrefix('Dropdown');
   const dropdownWrapperClass = `${dropdownClass}Wrapper`;
-  /** @deprecated Will be removed in the next major version. */
-  const dropdownFullWidthClass = `${dropdownClass}--fullWidth`;
   const dropdownBottomClass = `${dropdownClass}--bottom`;
   const dropdownTopClass = `${dropdownClass}--top`;
   const dropdownLeftClass = `${dropdownClass}--left`;
@@ -37,8 +35,6 @@ export const useDropdownStyleProps = (
     'top-right': classNames(dropdownTopClass, dropdownRightClass),
   };
   const dropdownClassName = classNames(dropdownClass, openClass, {
-    /** @deprecated Will be removed in the next major version. */
-    [dropdownFullWidthClass]: isFullWidth,
     [dropdownPlacementClassNames[placement]]: placement,
   });
   const triggerClassName = classNames(expandedClass);

diff --git a/packages/web-react/src/types/dropdown.ts b/packages/web-react/src/types/dropdown.ts
@@ -8,13 +8,6 @@ export const DropdownPlacements = {
   TOP_RIGHT: 'top-right',
 } as const;
 
-/** @deprecated Will be removed in the next major version. */
-export const DropdownBreakpoints = {
-  MOBILE: 'mobile',
-  TABLET: 'tablet',
-  DESKTOP: 'desktop',
-} as const;
-
 export const DropdownFullWidthModes = {
   OFF: 'off',
   MOBILE_ONLY: 'mobile-only',
@@ -24,10 +17,6 @@ export const DropdownFullWidthModes = {
 export type DropdownPlacementKeys = keyof typeof DropdownPlacements;
 export type DropdownPlacement = (typeof DropdownPlacements)[DropdownPlacementKeys];
 
-/** @deprecated Will be removed in the next major version. */
-export type DropdownBreakpointKeys = keyof typeof DropdownBreakpoints;
-export type DropdownBreakpoint = (typeof DropdownBreakpoints)[DropdownBreakpointKeys];
-
 export type DropdownFullWidthModeKeys = keyof typeof DropdownFullWidthModes;
 export type DropdownFullWidthMode = (typeof DropdownFullWidthModes)[DropdownFullWidthModeKeys];
 
@@ -51,11 +40,7 @@ export interface DropdownProps extends ChildrenProps, StyleProps {
 
 export interface SpiritDropdownProps extends DropdownProps {
   enableAutoClose?: boolean;
-  /** @deprecated Will be removed in the next major version. */
-  isFullWidth?: boolean;
   placement?: DropdownPlacement;
-  /** @deprecated Will be removed in the next major version. */
-  breakpoint?: DropdownBreakpoint;
   fullWidthMode?: DropdownFullWidthMode;
   onAutoClose?: (event: Event) => void;
 }