fix(Toolbar*): change spelling of visiblity prop (#4555)

deprecate visiblity prop and add visibility prop in ToolbarItem, Toolbar
Content, ToolbarGroup, and ToolbarToggleGroup

fix #4501

Author: zanewoodfin

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

@@ -9,6 +9,14 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
   className?: string;
   /** Visibility at various breakpoints. */
+  visibility?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
+  /** Deprecated: prop misspelled */
   visiblity?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -55,6 +63,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       children,
       isExpanded,
       toolbarId,
+      visibility,
       visiblity,
       alignment,
       clearAllFilters,
@@ -63,11 +72,19 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       ...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 (
       <div
         className={css(
           styles.toolbarContent,
-          formatBreakpointMods(visiblity, styles),
+          formatBreakpointMods(visibility || visiblity, styles),
           formatBreakpointMods(alignment, styles),
           className
         )}

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

@@ -15,6 +15,14 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** A type modifier which modifies spacing specifically depending on the type of group */
   variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group';
   /** Visibility at various breakpoints. */
+  visibility?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
+  /** Deprecated: prop misspelled */
   visiblity?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -54,13 +62,33 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   render() {
-    const { visiblity, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;
+    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.'
+      );
+    }
+
     return (
       <div
         className={css(
           styles.toolbarGroup,
           variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
-          formatBreakpointMods(visiblity, styles),
+          formatBreakpointMods(visibility || visiblity, styles),
           formatBreakpointMods(alignment, styles),
           formatBreakpointMods(spacer, styles),
           formatBreakpointMods(spaceItems, styles),

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

@@ -29,6 +29,14 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     | 'chip-group'
     | 'separator';
   /** Visibility at various breakpoints. */
+  visibility?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
+  /** Deprecated: prop misspelled */
   visiblity?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -61,6 +69,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
 export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
+  visibility,
   visiblity,
   alignment,
   spacer,
@@ -72,6 +81,14 @@ 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.'
+    );
+  }
+
   return (
     <div
       className={css(
@@ -80,7 +97,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           styles.modifiers[
             toCamel(variant) as 'bulkSelect' | 'overflowMenu' | 'pagination' | 'searchFilter' | 'label' | 'chipGroup'
           ],
-        formatBreakpointMods(visiblity, styles),
+        formatBreakpointMods(visibility || visiblity, styles),
         formatBreakpointMods(alignment, styles),
         formatBreakpointMods(spacer, styles),
         className

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

@@ -15,6 +15,14 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** Controls when filters are shown and when the toggle button is hidden. */
   breakpoint: 'md' | 'lg' | 'xl' | '2xl';
   /** Visibility at various breakpoints. */
+  visibility?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
+  /** Deprecated: prop misspelled */
   visiblity?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -60,6 +68,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
     const {
       toggleIcon,
       variant,
+      visibility,
       visiblity,
       breakpoint,
       alignment,
@@ -75,6 +84,14 @@ 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 (
       <ToolbarContext.Consumer>
         {({ isExpanded, toggleIsExpanded }) => (
@@ -102,7 +119,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                           | 'showOnXl'
                           | 'showOn_2xl'
                       ],
-                    formatBreakpointMods(visiblity, styles),
+                    formatBreakpointMods(visibility || visiblity, styles),
                     formatBreakpointMods(alignment, styles),
                     formatBreakpointMods(spacer, styles),
                     formatBreakpointMods(spaceItems, styles),