From 102e06ede5be45ae2bf4147204f9ba8884115ef8 Mon Sep 17 00:00:00 2001 From: Dallas Date: Thu, 13 Oct 2022 14:44:55 -0500 Subject: [PATCH] feat(Toolbar): remove depricated visiblity (#8212) --- .../src/components/Toolbar/ToolbarContent.tsx | 19 +-- .../src/components/Toolbar/ToolbarGroup.tsx | 31 +--- .../src/components/Toolbar/ToolbarItem.tsx | 19 +-- .../components/Toolbar/ToolbarToggleGroup.tsx | 19 +-- .../react-core/src/helpers/Popper/Popper.tsx | 2 +- .../demo-app-ts/src/Demos.ts | 5 - .../ToolbarDemo/ToolbarVisiblityDemo.tsx | 132 ------------------ .../demo-app-ts/src/components/demos/index.ts | 1 - 8 files changed, 6 insertions(+), 222 deletions(-) delete mode 100644 packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index ec5f5c5acf6..a5003a378a2 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -17,14 +17,6 @@ export interface ToolbarContentProps extends React.HTMLProps { xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** @deprecated prop misspelled */ - visiblity?: { - default?: 'hidden' | 'visible'; - md?: 'hidden' | 'visible'; - lg?: 'hidden' | 'visible'; - xl?: 'hidden' | 'visible'; - '2xl'?: 'hidden' | 'visible'; - }; /** Alignment at various breakpoints. */ alignment?: { default?: 'alignRight' | 'alignLeft'; @@ -65,7 +57,6 @@ export class ToolbarContent extends React.Component { isExpanded, toolbarId, visibility, - visiblity, alignment, clearAllFilters, showClearFiltersButton, @@ -73,21 +64,13 @@ export class ToolbarContent extends React.Component { ...props } = this.props; - if (visiblity !== undefined) { - // eslint-disable-next-line no-console - console.warn( - 'The ToolbarContent visiblity prop has been deprecated. ' + - 'Please use the correctly spelled visibility prop instead.' - ); - } - return ( {({ width, getBreakpoint }) => (
, xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** @deprecated prop misspelled */ - visiblity?: { - default?: 'hidden' | 'visible'; - md?: 'hidden' | 'visible'; - lg?: 'hidden' | 'visible'; - xl?: 'hidden' | 'visible'; - '2xl'?: 'hidden' | 'visible'; - }; /** Alignment at various breakpoints. */ alignment?: { default?: 'alignRight' | 'alignLeft'; @@ -63,26 +55,7 @@ export interface ToolbarGroupProps extends Omit, class ToolbarGroupWithRef extends React.Component { render() { - const { - visibility, - visiblity, - alignment, - spacer, - spaceItems, - className, - variant, - children, - innerRef, - ...props - } = this.props; - - if (visiblity !== undefined) { - // eslint-disable-next-line no-console - console.warn( - 'The ToolbarGroup visiblity prop has been deprecated. ' + - 'Please use the correctly spelled visibility prop instead.' - ); - } + const { visibility, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props; return ( @@ -91,7 +64,7 @@ class ToolbarGroupWithRef extends React.Component { className={css( styles.toolbarGroup, variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'], - formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)), + formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)), diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx index 492cf4db707..d74c3d561d0 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -39,14 +39,6 @@ export interface ToolbarItemProps extends React.HTMLProps { xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** @deprecated prop misspelled */ - visiblity?: { - default?: 'hidden' | 'visible'; - md?: 'hidden' | 'visible'; - lg?: 'hidden' | 'visible'; - xl?: 'hidden' | 'visible'; - '2xl'?: 'hidden' | 'visible'; - }; /** Alignment at various breakpoints. */ alignment?: { default?: 'alignRight' | 'alignLeft'; @@ -84,7 +76,6 @@ export const ToolbarItem: React.FunctionComponent = ({ className, variant, visibility, - visiblity, alignment, spacer, widths, @@ -97,14 +88,6 @@ export const ToolbarItem: React.FunctionComponent = ({ return ; } - if (visiblity !== undefined) { - // eslint-disable-next-line no-console - console.warn( - 'The ToolbarItem visiblity prop has been deprecated. ' + - 'Please use the correctly spelled visibility prop instead.' - ); - } - const widthStyles: any = {}; if (widths) { Object.entries(widths || {}).map( @@ -130,7 +113,7 @@ export const ToolbarItem: React.FunctionComponent = ({ | 'chipGroup' ], isAllExpanded && styles.modifiers.expanded, - formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)), + formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles, '', getBreakpoint(width)), className diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index 65ad8d3f9c8..e5040aad334 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -22,14 +22,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps { xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** @deprecated prop misspelled */ - visiblity?: { - default?: 'hidden' | 'visible'; - md?: 'hidden' | 'visible'; - lg?: 'hidden' | 'visible'; - xl?: 'hidden' | 'visible'; - '2xl'?: 'hidden' | 'visible'; - }; /** Alignment at various breakpoints. */ alignment?: { default?: 'alignRight' | 'alignLeft'; @@ -69,7 +61,6 @@ export class ToolbarToggleGroup extends React.Component toggleIcon, variant, visibility, - visiblity, breakpoint, alignment, spacer, @@ -84,14 +75,6 @@ export class ToolbarToggleGroup extends React.Component console.error('ToolbarToggleGroup will not be visible without a breakpoint or toggleIcon.'); } - if (visiblity !== undefined) { - // eslint-disable-next-line no-console - console.warn( - 'The ToolbarToggleGroup visiblity prop has been deprecated. ' + - 'Please use the correctly spelled visibility prop instead.' - ); - } - return ( {({ width, getBreakpoint }) => ( @@ -123,7 +106,7 @@ export class ToolbarToggleGroup extends React.Component variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'], formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)), - formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)), + formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)), diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 0333f0431aa..3d45ebe4f44 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -181,7 +181,7 @@ export const Popper: React.FunctionComponent = ({ } }, [reference]); React.useEffect(() => { - // When the popperRef is defined or the popper visiblity changes, ensure the popper element is up to date + // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date if (popperRef) { if ((popperRef as React.RefObject).current) { setPopperElement((popperRef as React.RefObject).current); diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts index 6fbbe20ea56..c11966ad322 100644 --- a/packages/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/react-integration/demo-app-ts/src/Demos.ts @@ -497,11 +497,6 @@ export const Demos: DemoInterface[] = [ name: 'Toolbar Visibility Demo', componentType: Examples.ToolbarVisibilityDemo }, - { - id: 'toolbar-visiblity-demo', - name: 'Toolbar Visiblity Demo (Deprecated)', - componentType: Examples.ToolbarVisiblityDemo - }, { id: 'tooltip-demo', name: 'Tooltip Demo', diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx deleted file mode 100644 index b1eec04fcfc..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; -import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core'; -import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; - -export class ToolbarVisiblityDemo extends React.Component { - static displayName = 'ToolbarVisibilityDemo'; - - render() { - const toolbarContents = ( - - ToolbarContent visiblity sm - - ToolbarContent visiblity md - - - ToolbarContent visiblity lg - - - ToolbarContent visiblity xl - - - ToolbarContent visiblity 2xl - - - ); - - const toolbarGroups = ( - - ToolbarGroup visiblity sm - - ToolbarGroup visiblity md - - - ToolbarGroup visiblity lg - - - ToolbarGroup visiblity xl - - ToolbarGroup visiblity 2xl - - ); - - const toolbarItems = ( - - ToolbarItem visiblity sm - - ToolbarItem visiblity md - - - ToolbarItem visiblity lg - - - ToolbarItem visiblity xl - - ToolbarItem visiblity 2xl - - ); - - const toolbarToggleGroups = ( - - - - } - breakpoint="md" - visiblity={{ default: 'visible', md: 'hidden' }} - > - ToolbarToggleGroup visiblity sm - - - - - - } - breakpoint="lg" - visiblity={{ default: 'hidden', md: 'visible', lg: 'hidden' }} - > - ToolbarToggleGroup visiblity md - - - - - - } - breakpoint="xl" - visiblity={{ default: 'hidden', lg: 'visible', xl: 'hidden' }} - > - ToolbarToggleGroup visiblity lg - - - - - - } - breakpoint="2xl" - visiblity={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }} - > - ToolbarToggleGroup visiblity xl - - - - - - } - breakpoint="md" - visiblity={{ default: 'hidden', '2xl': 'visible' }} - > - ToolbarToggleGroup visiblity 2xl - - - - - ); - - return ( -
- {toolbarContents} - - {toolbarGroups} - - - {toolbarItems} - - {toolbarToggleGroups} -
- ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts index 3fbf2ba8693..edf3e6f641c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts @@ -23,7 +23,6 @@ export * from './ToolbarDemo/ToolbarDemo'; export * from './DescriptionListDemo/DescriptionListDemo'; export * from './DescriptionListDemo/DescriptionListBreakpointsDemo'; export * from './ToolbarDemo/ToolbarVisibilityDemo'; -export * from './ToolbarDemo/ToolbarVisiblityDemo'; export * from './DrawerDemo/DrawerDemo'; export * from './DrawerDemo/DrawerResizeDemo'; export * from './DropdownDemo/DropdownDemo';