Skip to content

Commit

Permalink
refactor!: remove deprecated props (#486)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje authored Jan 20, 2023
1 parent 1211b11 commit 0852a84
Show file tree
Hide file tree
Showing 10 changed files with 44 additions and 63 deletions.
10 changes: 6 additions & 4 deletions src/components/Breadcrumbs/BreadcrumbsMore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ export function BreadcrumbsMore({popupStyle, popupPlacement, items}: Props) {
return (
<DropdownMenu
items={items}
popupClassName={b('popup', {
staircase: popupStyle === 'staircase',
})}
popupPlacement={popupPlacement}
popupProps={{
className: b('popup', {
staircase: popupStyle === 'staircase',
}),
placement: popupPlacement,
}}
switcher={<Switcher />}
/>
);
Expand Down
17 changes: 6 additions & 11 deletions src/components/DropdownMenu/DropdownMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -65,13 +65,12 @@ export type DropdownMenuProps<T> = {
defaultSwitcherClassName?: string;
onSwitcherClick?: MouseEventHandler<HTMLElement>;
/**
* Overrides the default dropdown menu popup props.
* Overrides the default dropdown menu props.
*/
menuProps?: Partial<MenuProps>;
/**
* Overrides the default dropdown popup props.
*/
menuProps?: MenuProps;
/** @deprecated Use `popupProps` instead */
popupClassName?: string;
/** @deprecated Use `popupProps` instead */
popupPlacement?: PopupPlacement;
popupProps?: Partial<PopupProps>;
/**
* Custom content inside the menu popup.
Expand Down Expand Up @@ -99,8 +98,6 @@ const DropdownMenu = <T,>({
defaultSwitcherClassName,
onSwitcherClick,
menuProps,
popupClassName,
popupPlacement,
popupProps,
children,
}: DropdownMenuProps<T> | ControlledDropdownMenuProps<T>) => {
Expand Down Expand Up @@ -158,11 +155,9 @@ const DropdownMenu = <T,>({
</div>
<DropdownMenuNavigationContextProvider anchorRef={anchorRef} disabled={!isPopupShown}>
<DropdownMenuPopup
popupClassName={popupClassName}
items={itemsList}
open={isPopupShown}
size={size}
placement={popupPlacement}
menuProps={menuProps}
anchorRef={anchorRef}
onClose={closePopup}
Expand Down
12 changes: 8 additions & 4 deletions src/components/DropdownMenu/DropdownMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {useRef, useCallback, useContext, useMemo} from 'react';
import type {ReactNode} from 'react';
import type {PopupProps} from '../Popup';

import {Icon} from '../Icon';
import {Menu} from '../Menu';
Expand All @@ -13,7 +14,7 @@ import {DropdownMenuPopup} from './DropdownMenuPopup';
import {DropdownMenuContext} from './DropdownMenuContext';

export type DropdownMenuItemProps<T> = DropdownMenuListItem<T> & {
popupClassName?: string;
popupProps?: Partial<PopupProps>;
closeMenu?: () => void;
children?: ReactNode;
path?: number[];
Expand All @@ -23,7 +24,7 @@ export const DropdownMenuItem = <T,>({
text,
action,
items: subMenuItems,
popupClassName,
popupProps,
closeMenu,
children,
path,
Expand Down Expand Up @@ -112,12 +113,15 @@ export const DropdownMenuItem = <T,>({
</Menu.Item>
{hasSubmenu && subMenuItems && (
<DropdownMenuPopup
popupClassName={cnDropdownMenu('sub-menu', popupClassName)}
popupProps={{
...popupProps,
className: cnDropdownMenu('sub-menu', popupProps?.className),
placement: subMenuPlacement,
}}
items={subMenuItems}
path={path}
open={isSubmenuOpen}
anchorRef={menuItemRef}
placement={subMenuPlacement}
onClose={handleCloseMenu}
/>
)}
Expand Down
10 changes: 2 additions & 8 deletions src/components/DropdownMenu/DropdownMenuPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -21,8 +21,6 @@ export type DropdownMenuPopupProps<T> = {
open: boolean;
anchorRef: RefObject<HTMLDivElement>;
onClose?: () => void;
popupClassName?: string;
placement?: PopupPlacement;
size?: DropdownMenuSize;
menuProps?: MenuProps;
children?: ReactNode;
Expand All @@ -35,8 +33,6 @@ export const DropdownMenuPopup = <T,>({
open,
anchorRef,
onClose,
popupClassName,
placement,
size,
menuProps,
children,
Expand Down Expand Up @@ -139,8 +135,6 @@ export const DropdownMenuPopup = <T,>({
<Popup
open={open}
anchorRef={anchorRef}
className={popupClassName}
placement={placement}
onClose={onClose}
{...popupProps}
onMouseEnter={handleMouseEnter}
Expand All @@ -166,7 +160,7 @@ export const DropdownMenuPopup = <T,>({
item.className,
)}
selected={isActive}
popupClassName={popupClassName}
popupProps={popupProps}
closeMenu={onClose}
{...item}
extraProps={extraProps}
Expand Down
36 changes: 17 additions & 19 deletions src/components/DropdownMenu/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLElement>` | | | 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 `<a>` tag. |
| `rel` | `string` | | | Same as the `rel` attribute of the `<a>` 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 `<a>` tag. |
| `rel` | `string` | | | Same as the `rel` attribute of the `<a>` 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

Expand Down
2 changes: 1 addition & 1 deletion src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ const LabelSwitcherTemplate: Story<{statuses: {text: string; style: LabelProps['
{status.text}
</Label>
}
popupClassName={b('label-switcher-menu')}
popupProps={{className: b('label-switcher-menu')}}
/>
);
};
Expand Down
7 changes: 0 additions & 7 deletions src/components/Text/Text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ export interface TextProps extends TextBaseProps, ColorTextBaseProps {
className?: string;
children?: React.ReactNode;
title?: string;
/**
* @deprecated - use title prop instead
*/
titleAttribute?: string;
}

/**
Expand Down Expand Up @@ -50,8 +46,6 @@ export const Text: React.FC<TextProps> = ({
className,
ellipsis,
color,
title,
titleAttribute,
whiteSpace,
wordBreak,
...rest
Expand All @@ -63,7 +57,6 @@ export const Text: React.FC<TextProps> = ({
color ? colorText({color}, className) : className,
)}
{...rest}
title={title || titleAttribute}
>
{children}
</Tag>
Expand Down
5 changes: 2 additions & 3 deletions src/components/Toaster/ToasterSingleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
5 changes: 2 additions & 3 deletions src/components/Toaster/ToasterSingletonReact18.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 0 additions & 3 deletions src/components/Toaster/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down

0 comments on commit 0852a84

Please sign in to comment.