@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerCustomSize: React.FunctionComponent = () => (
-  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+  <Spinner diameter="80px" aria-label="Contents of the custom size example" />
 );

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -6,23 +6,23 @@ export const SpinnerInline: React.FunctionComponent = () => (
     <TextContent>
       <Text component="h1">
         Heading
-        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+        <Spinner isInline aria-label="Spinner in a heading" />
       </Text>
       <Text component="p">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
       </Text>
       <Text component="h2">
         Second level
-        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+        <Spinner isInline aria-label="spinner in a subheading" />
       </Text>
       <Text component="p">
         Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
-        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
-        urna vel cursus venenatis. Suspendisse potenti.
+        <Spinner isInline aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium urna vel
+        cursus venenatis. Suspendisse potenti.
       </Text>
       <small>
         Sometimes you need small text
-        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+        <Spinner isInline aria-label="Spinner in a small element" />
       </small>
     </TextContent>
   </React.Fragment>

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -3,9 +3,9 @@ import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerSizeVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
-    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
-    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
-    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+    <Spinner size="sm" aria-label="Contents of the small example" />
+    <Spinner size="md" aria-label="Contents of the medium example" />
+    <Spinner size="lg" aria-label="Contents of the large example" />
+    <Spinner size="xl" aria-label="Contents of the extra large example" />
   </React.Fragment>
 );

package/src/components/Tabs/OverflowTab.tsx

@@ -19,8 +19,6 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   defaultTitleText?: string;
   /** The aria label applied to the button which toggles the tab overflow menu */
   toggleAriaLabel?: string;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the overflow tab */
   zIndex?: number;
 }
@@ -31,7 +29,6 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   showTabCount,
   defaultTitleText = 'More',
   toggleAriaLabel,
-  removeFindDomNode = false,
   zIndex = 9999,
   ...props
 }: OverflowTabProps) => {
@@ -135,15 +132,18 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   );
 
   return (
-    <Popper
-      trigger={overflowTab}
-      popper={overflowMenu}
-      isVisible={isExpanded}
-      popperMatchesTriggerWidth={false}
-      appendTo={overflowLIRef.current}
-      removeFindDomNode={removeFindDomNode}
-      zIndex={zIndex}
-    />
+    <React.Fragment>
+      {overflowTab}
+      <Popper
+        reference={overflowTabRef}
+        popper={overflowMenu}
+        popperRef={menuRef}
+        isVisible={isExpanded}
+        popperMatchesTriggerWidth={false}
+        appendTo={overflowLIRef.current}
+        zIndex={zIndex}
+      />
+    </React.Fragment>
   );
 };
 

package/src/components/Tabs/Tab.tsx

@@ -33,7 +33,7 @@ export interface TabProps
   isAriaDisabled?: boolean;
   /** Events to prevent when the button is in an aria-disabled state */
   inoperableEvents?: string[];
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;

package/src/components/Tabs/TabAction.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
-export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type'>, OUIAProps {
+export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size'>, OUIAProps {
   /** Content rendered in the tab action */
   children?: React.ReactNode;
   /** Additional classes added to the tab action span */

package/src/components/Tabs/TabContent.tsx

@@ -15,7 +15,7 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   activeKey?: number | string;
   /** uniquely identifies the controlling Tab if used outside Tabs component */
   eventKey?: number | string;
-  /** Callback for the section ref */
+  /** @hide Callback for the section ref */
   innerRef?: React.Ref<any>;
   /** id passed from parent to identify the content section */
   id: string;

package/src/components/Tabs/Tabs.tsx

@@ -29,9 +29,12 @@ export interface HorizontalOverflowObject {
   toggleAriaLabel?: string;
 }
 
+type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
+type TabsChild = TabElement | boolean | null | undefined;
+
 export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
-  /** Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] */
-  children: React.ReactNode;
+  /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
+  children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */
   className?: string;
   /** Tabs background color variant */
@@ -58,10 +61,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
-  hasBorderBottom?: boolean;
-  /** Enables border bottom styling for secondary tabs */
-  hasSecondaryBorderBottom?: boolean;
+  /** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
+  hasNoBorderBottom?: boolean;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -174,7 +175,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     isSecondary: false,
     isVertical: false,
     isBox: false,
-    hasBorderBottom: true,
+    hasNoBorderBottom: false,
     leftScrollAriaLabel: 'Scroll left',
     rightScrollAriaLabel: 'Scroll right',
     component: TabsComponent.div,
@@ -205,8 +206,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     // process any tab content sections outside of the component
     if (tabContentRef) {
       React.Children.toArray(this.props.children)
-        .map(child => child as React.ReactElement<TabProps>)
-        .filter(child => child.props && child.props.tabContentRef && child.props.tabContentRef.current)
+        .filter((child): child is TabElement => React.isValidElement(child))
+        .filter(({ props }) => props.tabContentRef && props.tabContentRef.current)
         .forEach(child => (child.props.tabContentRef.current.hidden = true));
       // most recently selected tabContent
       if (tabContentRef.current) {
@@ -372,8 +373,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       isSecondary,
       isVertical,
       isBox,
-      hasBorderBottom,
-      hasSecondaryBorderBottom,
+      hasNoBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
@@ -407,9 +407,9 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       uncontrolledIsExpandedLocal,
       overflowingTabCount
     } = this.state;
-    const filteredChildren = (React.Children.toArray(children) as React.ReactElement<TabProps>[])
-      .filter(Boolean)
-      .filter(child => !child.props.isHidden);
+    const filteredChildren = React.Children.toArray(children)
+      .filter((child): child is TabElement => React.isValidElement(child))
+      .filter(({ props }) => !props.isHidden);
 
     const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount);
     const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
@@ -456,8 +456,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             isBox && styles.modifiers.box,
             showScrollButtons && styles.modifiers.scrollable,
             usePageInsets && styles.modifiers.pageInsets,
-            !hasBorderBottom && styles.modifiers.noBorderBottom,
-            hasSecondaryBorderBottom && styles.modifiers.borderBottom,
+            hasNoBorderBottom && styles.modifiers.noBorderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             hasOverflowTab && styles.modifiers.overflow,

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -183,7 +183,6 @@ test('Renders tabs passed via overflowingTabs when expanded in strict mode', asy
   const { asFragment } = render(
     <React.StrictMode>
       <OverflowTab
-        removeFindDomNode
         overflowingTabs={[
           { title: 'Tab one', eventKey: 1 },
           { title: 'Tab two', eventKey: 2 }

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => {
 
 test('should render tabs with no bottom border', () => {
   const { asFragment } = render(
-    <Tabs id="noBottomBorderTabs" hasBorderBottom={false}>
+    <Tabs id="noBottomBorderTabs" hasNoBorderBottom>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
   render(
-    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -389,12 +389,12 @@ test('should not render tabs with secondary border bottom when not passed hasSec
 
   const tabsContainer = screen.queryByLabelText('Secondary bottom border');
 
-  expect(tabsContainer).not.toHaveClass('pf-m-border-bottom');
+  expect(tabsContainer).toHaveClass('pf-m-no-border-bottom');
 });
 
-test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
+test('should render secondary tabs with border bottom', () => {
   render(
-    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
+    <Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -409,7 +409,7 @@ test('should render tabs with secondary border bottom when passed hasSecondaryBo
 
   const tabsContainer = screen.queryByLabelText('Secondary bottom border');
 
-  expect(tabsContainer).toHaveClass('pf-m-border-bottom');
+  expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom');
 });
 
 test('should not render scroll buttons by default', () => {

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -2,48 +2,47 @@
 
 exports[`Matches snapshot when expanded 1`] = `
 <DocumentFragment>
+  <li
+    class="pf-c-tabs__item pf-m-overflow pf-m-current"
+    role="presentation"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="menu"
+      class="pf-c-tabs__link pf-m-expanded"
+      role="tab"
+      type="button"
+    >
+      <span
+        class="pf-c-tabs__item-text"
+      >
+        Tab one
+      </span>
+      <span
+        class="pf-c-tabs__link-toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
   <div
     data-testid="popper-mock"
   >
     <div
       data-testid="trigger"
-    >
-      <li
-        class="pf-c-tabs__item pf-m-overflow pf-m-current"
-        role="presentation"
-      >
-        <button
-          aria-expanded="true"
-          aria-haspopup="menu"
-          class="pf-c-tabs__link pf-m-expanded"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="pf-c-tabs__item-text"
-          >
-            Tab one
-          </span>
-          <span
-            class="pf-c-tabs__link-toggle-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 256 512"
-              width="1em"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-    </div>
+    />
     <div
       data-testid="popper"
     >
@@ -91,48 +90,47 @@ exports[`Matches snapshot when expanded 1`] = `
 
 exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`] = `
 <DocumentFragment>
+  <li
+    class="pf-c-tabs__item pf-m-overflow"
+    role="presentation"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="menu"
+      class="pf-c-tabs__link pf-m-expanded"
+      role="tab"
+      type="button"
+    >
+      <span
+        class="pf-c-tabs__item-text"
+      >
+        More
+      </span>
+      <span
+        class="pf-c-tabs__link-toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
   <div
     data-testid="popper-mock"
   >
     <div
       data-testid="trigger"
-    >
-      <li
-        class="pf-c-tabs__item pf-m-overflow"
-        role="presentation"
-      >
-        <button
-          aria-expanded="true"
-          aria-haspopup="menu"
-          class="pf-c-tabs__link pf-m-expanded"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="pf-c-tabs__item-text"
-          >
-            More
-          </span>
-          <span
-            class="pf-c-tabs__link-toggle-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 256 512"
-              width="1em"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-    </div>
+    />
     <div
       data-testid="popper"
     >

package/src/components/Tabs/examples/Tabs.md

@@ -146,10 +146,10 @@ To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable t
 
 ### Help action
 
-```ts file="./TabsHelp.tsx"
+```ts file="./TabsHelp.tsx" isBeta
 ```
 
 ### Help and close actions
 
-```ts file="./TabsHelpAndClose.tsx"
+```ts file="./TabsHelpAndClose.tsx" isBeta
 ```

package/src/components/TextArea/TextArea.tsx

@@ -44,7 +44,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the text area. */
+  /** @hide A reference object to attach to the text area. */
   innerRef?: React.RefObject<any>;
 }
 

package/src/components/TextInput/TextInput.tsx

@@ -61,7 +61,7 @@ export interface TextInputProps
   value?: string | number;
   /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the text input box. */
+  /** @hide A reference object to attach to the text input box. */
   innerRef?: React.RefObject<any>;
   /** Trim text on left */
   isLeftTruncated?: boolean;
@@ -125,7 +125,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   componentDidMount() {
     if (this.props.isLeftTruncated) {
       const inputRef = this.props.innerRef || this.inputRef;
-      this.observer = getResizeObserver(inputRef.current, this.handleResize);
+      this.observer = getResizeObserver(inputRef.current, this.handleResize, true);
       this.handleResize();
     }
   }

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -37,13 +37,25 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   value?: string | number;
   /** Placeholder value for the input */
   placeholder?: string;
-  /** A reference object to attach to the input box */
+  /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
   /** Name for the input */
   name?: string;
+  /** @beta The id of the active element. Required if role has a value of "combobox", and focus
+   * should remain on the input.
+   */
+  'aria-activedescendant'?: string;
+  /** @beta Determines the accessible role of the input. */
+  role?: string;
+  /** @beta Flag for whether an associated element controlled by the input is visible. Required if
+   * role has a value of "combobox".
+   */
+  isExpanded?: boolean;
+  /** @beta The id of the element(s) controlled by the input. Required if role has a value of "combobox". */
+  'aria-controls'?: string;
 }
 
-export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
+const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
   children,
   className,
   icon,
@@ -57,6 +69,10 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   placeholder: inputPlaceHolder,
   innerRef,
   name,
+  'aria-activedescendant': ariaActivedescendant,
+  role,
+  isExpanded,
+  'aria-controls': ariaControls,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -93,10 +109,20 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
           value={inputValue || ''}
           placeholder={inputPlaceHolder}
           name={name}
+          aria-activedescendant={ariaActivedescendant}
+          {...(role && { role })}
+          {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
+          {...(ariaControls && { 'aria-controls': ariaControls })}
         />
       </span>
     </div>
   );
 };
 
+export const TextInputGroupMain = React.forwardRef(
+  (props: TextInputGroupMainProps, ref: React.Ref<HTMLInputElement>) => (
+    <TextInputGroupMainBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+
 TextInputGroupMain.displayName = 'TextInputGroupMain';

package/src/components/TimePicker/TimePicker.tsx

@@ -78,8 +78,6 @@ export interface TimePickerProps
   isOpen?: boolean;
   /** Handler invoked each time the open state of time picker updates */
   setIsOpen?: (isOpen?: boolean) => void;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the time picker */
   zIndex?: number;
 }
@@ -120,7 +118,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     maxTime: '',
     isOpen: false,
     setIsOpen: () => {},
-    removeFindDomNode: false,
     zIndex: 9999
   };
 
@@ -460,8 +457,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       minTime,
       maxTime,
       includeSeconds,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -535,7 +530,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                   trigger={textInput}
                   popper={menuContainer}
                   isVisible={isTimeOptionsOpen}
-                  removeFindDomNode={removeFindDomNode}
                   zIndex={zIndex}
                 />
               </div>

package/src/components/TimePicker/__tests__/TimePicker.test.tsx

@@ -14,7 +14,7 @@ describe('TimePicker', () => {
     const consoleError = jest.spyOn(console, 'error');
     const { asFragment } = render(
       <React.StrictMode>
-        <TimePicker removeFindDomNode value={'00:00'} validateTime={validateTime} aria-label="time picker" />
+        <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
       </React.StrictMode>
     );
     expect(consoleError).not.toHaveBeenCalled();

package/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,7 +57,6 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
-      visiblity,
       alignment,
       clearAllFilters,
       showClearFiltersButton,
@@ -73,21 +64,13 @@ 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 (
       <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
             )}