Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor!: remove deprecated props #486

Merged
merged 3 commits into from
Jan 20, 2023
Merged

refactor!: remove deprecated props #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
075757c
refactor(Toaster)!: remove deprecated prop additionalClass
amje Jan 19, 2023
1d5058c
refactor(Text)!: remove deprecated prop titleAttribute
amje Jan 19, 2023
c199dc4
refactor(DropdownMenu)!: remove deprecated popup props
amje Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/components/Breadcrumbs/BreadcrumbsMore.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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