feat(Toolbar): remove depricated visiblity (#8212)

Author: gitdallas

packages/react-core/src/components/Toolbar/ToolbarContent.tsx

@@ -17,14 +17,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     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,29 +57,20 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
-      visiblity,
       alignment,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
       ...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 (
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <div
             className={css(
               styles.toolbarContent,
-              formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
               className
             )}

packages/react-core/src/components/Toolbar/ToolbarGroup.tsx

@@ -23,14 +23,6 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     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<React.HTMLProps<HTMLDivElement>,
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   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 (
       <PageContext.Consumer>
@@ -91,7 +64,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
             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)),

packages/react-core/src/components/Toolbar/ToolbarItem.tsx

@@ -39,14 +39,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     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<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  visiblity,
   alignment,
   spacer,
   widths,
@@ -97,14 +88,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
     return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
   }
 
-  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<ToolbarItemProps> = ({
                   | '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

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<ToolbarToggleGroupProps>
       toggleIcon,
       variant,
       visibility,
-      visiblity,
       breakpoint,
       alignment,
       spacer,
@@ -84,14 +75,6 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       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 (
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
@@ -123,7 +106,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         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)),

packages/react-core/src/helpers/Popper/Popper.tsx

@@ -181,7 +181,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }
   }, [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<any>).current) {
         setPopperElement((popperRef as React.RefObject<any>).current);

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',

packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx

@@ -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';