From 0852a84fb778f71402ce672ebfd7865315c4cdb0 Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Fri, 20 Jan 2023 14:34:01 +0300 Subject: [PATCH] refactor!: remove deprecated props (#486) --- .../Breadcrumbs/BreadcrumbsMore.tsx | 10 +++--- src/components/DropdownMenu/DropdownMenu.tsx | 17 ++++----- .../DropdownMenu/DropdownMenuItem.tsx | 12 ++++--- .../DropdownMenu/DropdownMenuPopup.tsx | 10 ++---- src/components/DropdownMenu/README.md | 36 +++++++++---------- .../__stories__/DropdownMenu.stories.tsx | 2 +- src/components/Text/Text.tsx | 7 ---- src/components/Toaster/ToasterSingleton.tsx | 5 ++- .../Toaster/ToasterSingletonReact18.tsx | 5 ++- src/components/Toaster/types.ts | 3 -- 10 files changed, 44 insertions(+), 63 deletions(-) diff --git a/src/components/Breadcrumbs/BreadcrumbsMore.tsx b/src/components/Breadcrumbs/BreadcrumbsMore.tsx index 13e747c326..b618131ea7 100644 --- a/src/components/Breadcrumbs/BreadcrumbsMore.tsx +++ b/src/components/Breadcrumbs/BreadcrumbsMore.tsx @@ -21,10 +21,12 @@ export function BreadcrumbsMore({popupStyle, popupPlacement, items}: Props) { return ( } /> ); diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx index d8bc66f9d4..3f08ea1c15 100644 --- a/src/components/DropdownMenu/DropdownMenu.tsx +++ b/src/components/DropdownMenu/DropdownMenu.tsx @@ -1,7 +1,7 @@ import React, {useRef, useMemo} from 'react'; import type {ReactNode, MouseEventHandler, Dispatch, SetStateAction} from 'react'; -import type {PopupPlacement, PopupProps} from '../Popup'; +import type {PopupProps} from '../Popup'; import {Button} from '../Button'; import type {ButtonProps} from '../Button'; import {Icon} from '../Icon'; @@ -65,13 +65,12 @@ export type DropdownMenuProps = { defaultSwitcherClassName?: string; onSwitcherClick?: MouseEventHandler; /** - * Overrides the default dropdown menu popup props. + * Overrides the default dropdown menu props. + */ + menuProps?: Partial; + /** + * Overrides the default dropdown popup props. */ - menuProps?: MenuProps; - /** @deprecated Use `popupProps` instead */ - popupClassName?: string; - /** @deprecated Use `popupProps` instead */ - popupPlacement?: PopupPlacement; popupProps?: Partial; /** * Custom content inside the menu popup. @@ -99,8 +98,6 @@ const DropdownMenu = ({ defaultSwitcherClassName, onSwitcherClick, menuProps, - popupClassName, - popupPlacement, popupProps, children, }: DropdownMenuProps | ControlledDropdownMenuProps) => { @@ -158,11 +155,9 @@ const DropdownMenu = ({ = DropdownMenuListItem & { - popupClassName?: string; + popupProps?: Partial; closeMenu?: () => void; children?: ReactNode; path?: number[]; @@ -23,7 +24,7 @@ export const DropdownMenuItem = ({ text, action, items: subMenuItems, - popupClassName, + popupProps, closeMenu, children, path, @@ -112,12 +113,15 @@ export const DropdownMenuItem = ({ {hasSubmenu && subMenuItems && ( )} diff --git a/src/components/DropdownMenu/DropdownMenuPopup.tsx b/src/components/DropdownMenu/DropdownMenuPopup.tsx index 717813ce16..ce11da8520 100644 --- a/src/components/DropdownMenu/DropdownMenuPopup.tsx +++ b/src/components/DropdownMenu/DropdownMenuPopup.tsx @@ -2,7 +2,7 @@ import React, {useCallback, useContext, useEffect} from 'react'; import type {ReactNode, RefObject, MouseEvent} from 'react'; import {Popup} from '../Popup'; -import type {PopupPlacement, PopupProps} from '../Popup'; +import type {PopupProps} from '../Popup'; import {Menu} from '../Menu'; import type {MenuProps} from '../Menu'; import {useListNavigation} from '../utils/useListNavigation'; @@ -21,8 +21,6 @@ export type DropdownMenuPopupProps = { open: boolean; anchorRef: RefObject; onClose?: () => void; - popupClassName?: string; - placement?: PopupPlacement; size?: DropdownMenuSize; menuProps?: MenuProps; children?: ReactNode; @@ -35,8 +33,6 @@ export const DropdownMenuPopup = ({ open, anchorRef, onClose, - popupClassName, - placement, size, menuProps, children, @@ -139,8 +135,6 @@ export const DropdownMenuPopup = ({ ({ item.className, )} selected={isActive} - popupClassName={popupClassName} + popupProps={popupProps} closeMenu={onClose} {...item} extraProps={extraProps} diff --git a/src/components/DropdownMenu/README.md b/src/components/DropdownMenu/README.md index 9bf54c830f..4c957742eb 100644 --- a/src/components/DropdownMenu/README.md +++ b/src/components/DropdownMenu/README.md @@ -21,31 +21,29 @@ A dropdown menu with a customizable toggle. By default, the toggle is an ellipsi | `onOpenToggle` | `() => void` | | | Called when the menu is opened or closed. | | `onSwitcherClick` | `React.MouseEventHandler` | | | Called when `switcher` is clicked. | | `hideOnScroll` | `boolean` | | `true` | Specifies whether to hide the menu when a parent element is scrolled. | -| `popupPlacement` | `PopupPlacement` | | | Allowed positions of the menu popup. | -| `popupClassName` | `string` | | | A value of the `className` prop of the menu popup. | | `children` | `ReactNode` | | | Custom content inside the menu popup. | ### DropdownMenuItem This type describes an individual dropdown menu item. -| Name | Type | Required | Default | Description | -| :--------------- | :--------------------------------------------- | :------: | :------ | :------------------------------------------------------------------------------------------------------------------------ | -| `text` | `ReactNode` | yes | | Menu item content. | -| `action` | `(event: React.MouseEvent, data: any) => void` | yes | | A menu item click handler. Recieves the parameters (both `event` and `data`) from the parent dropdown menu component. | -| `icon` | `ReactNode` | | | A menu item icon. | -| `hidden` | `boolean` | | | | -| `disabled` | `boolean` | | | | -| `href` | `string` | | | A menu item with this prop becomes a link to the specified location. | -| `target` | `string` | | | Same as the `target` attribute of the `` tag. | -| `rel` | `string` | | | Same as the `rel` attribute of the `` tag. | -| `extraProps` | `object` | | | Additional menu item props. | -| `title` | `string` | | | A tooltip text. | -| `className` | `string` | | | | -| `items` | `(DropdownMenuItem` or `DropdownMenuItem[])[]` | | | Sub-menu items | -| `popupClassName` | `string` | | | Sub-menu popup class | -| `path` | `number[]` | | | Path of indexes from the root to the current item | -| `closeMenu` | `() => void` | | | Custom `closeMenu` callback, can be called instead of closing the main menu, used to close sub-menus before the main menu | +| Name | Type | Required | Default | Description | +| :----------- | :--------------------------------------------- | :------: | :------ | :------------------------------------------------------------------------------------------------------------------------ | +| `text` | `ReactNode` | yes | | Menu item content. | +| `action` | `(event: React.MouseEvent, data: any) => void` | yes | | A menu item click handler. Recieves the parameters (both `event` and `data`) from the parent dropdown menu component. | +| `icon` | `ReactNode` | | | A menu item icon. | +| `hidden` | `boolean` | | | | +| `disabled` | `boolean` | | | | +| `href` | `string` | | | A menu item with this prop becomes a link to the specified location. | +| `target` | `string` | | | Same as the `target` attribute of the `` tag. | +| `rel` | `string` | | | Same as the `rel` attribute of the `` tag. | +| `extraProps` | `object` | | | Additional menu item props. | +| `title` | `string` | | | A tooltip text. | +| `className` | `string` | | | | +| `items` | `(DropdownMenuItem` or `DropdownMenuItem[])[]` | | | Sub-menu items | +| `popupProps` | `string` | | | Sub-menu popup props | +| `path` | `number[]` | | | Path of indexes from the root to the current item | +| `closeMenu` | `() => void` | | | Custom `closeMenu` callback, can be called instead of closing the main menu, used to close sub-menus before the main menu | ## Example diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx index 0a0dfe26e0..ad7a8dd1d9 100644 --- a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx +++ b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx @@ -116,7 +116,7 @@ const LabelSwitcherTemplate: Story<{statuses: {text: string; style: LabelProps[' {status.text} } - popupClassName={b('label-switcher-menu')} + popupProps={{className: b('label-switcher-menu')}} /> ); }; diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 753a3cfa85..0c3541652e 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -11,10 +11,6 @@ export interface TextProps extends TextBaseProps, ColorTextBaseProps { className?: string; children?: React.ReactNode; title?: string; - /** - * @deprecated - use title prop instead - */ - titleAttribute?: string; } /** @@ -50,8 +46,6 @@ export const Text: React.FC = ({ className, ellipsis, color, - title, - titleAttribute, whiteSpace, wordBreak, ...rest @@ -63,7 +57,6 @@ export const Text: React.FC = ({ color ? colorText({color}, className) : className, )} {...rest} - title={title || titleAttribute} > {children} diff --git a/src/components/Toaster/ToasterSingleton.tsx b/src/components/Toaster/ToasterSingleton.tsx index 0fffd6541e..634b7b5268 100644 --- a/src/components/Toaster/ToasterSingleton.tsx +++ b/src/components/Toaster/ToasterSingleton.tsx @@ -22,19 +22,18 @@ export class ToasterSingleton { private componentAPI: null | ToasterPublicMethods = null; constructor(args?: ToasterArgs) { - const additionalClass = get(args, ['additionalClass'], ''); const className = get(args, ['className'], ''); const mobile = get(args, ['mobile'], false); if (window[TOASTER_KEY] instanceof ToasterSingleton) { const me = window[TOASTER_KEY]; - me.className = className || additionalClass; + me.className = className; me.mobile = mobile; me.setRootNodeClassName(); return me; } - this.className = additionalClass; + this.className = className; this.mobile = mobile; this.createRootNode(); this.render(); diff --git a/src/components/Toaster/ToasterSingletonReact18.tsx b/src/components/Toaster/ToasterSingletonReact18.tsx index ee7f9c9aac..fd3a63dcf3 100644 --- a/src/components/Toaster/ToasterSingletonReact18.tsx +++ b/src/components/Toaster/ToasterSingletonReact18.tsx @@ -23,19 +23,18 @@ export class ToasterSingleton { private componentAPI: null | ToasterPublicMethods = null; constructor(args?: ToasterArgs) { - const additionalClass = get(args, ['additionalClass'], ''); const className = get(args, ['className'], ''); const mobile = get(args, ['mobile'], false); if (window[TOASTER_KEY] instanceof ToasterSingleton) { const me = window[TOASTER_KEY]; - me.className = className || additionalClass; + me.className = className; me.mobile = mobile; me.setRootNodeClassName(); return me; } - this.className = additionalClass; + this.className = className; this.mobile = mobile; this.createRootNode(); this.createReactRoot(); diff --git a/src/components/Toaster/types.ts b/src/components/Toaster/types.ts index d5093376d9..b96e6b92c4 100644 --- a/src/components/Toaster/types.ts +++ b/src/components/Toaster/types.ts @@ -2,9 +2,6 @@ import React from 'react'; import {ButtonView} from '../Button'; export type ToasterArgs = { - // FIXME: BREAKING CHANGE. Remove in the next major - /** @deprecated Will be deleted in te next major. Use className instead */ - additionalClass?: string; className?: string; mobile?: boolean; };