@patternfly/react-core 4.244.1 → 4.245.0

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -2,7 +2,15 @@
 id: Overflow menu
 section: components
 cssPrefix: pf-c-overflow-menu
-propComponents: ['OverflowMenu', 'OverflowMenuContent', 'OverflowMenuControl', 'OverflowMenuDropdownItem', 'OverflowMenuGroup', 'OverflowMenuItem']
+propComponents:
+  [
+    'OverflowMenu',
+    'OverflowMenuContent',
+    'OverflowMenuControl',
+    'OverflowMenuDropdownItem',
+    'OverflowMenuGroup',
+    'OverflowMenuItem',
+  ]
 ---
 
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -10,10 +18,19 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 ## Examples
+
 ### Simple (responsive)
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle } from '@patternfly/react-core';
 
 class SimpleOverflowMenu extends React.Component {
@@ -37,12 +54,22 @@ class SimpleOverflowMenu extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>Item 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>Item 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>Item 3</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>Item 4</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>Item 5</OverflowMenuDropdownItem>
-    ]
+      <OverflowMenuDropdownItem key="item1" isShared>
+        Item 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item2" isShared>
+        Item 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item3" isShared>
+        Item 3
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item4" isShared>
+        Item 4
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item5" isShared>
+        Item 5
+      </OverflowMenuDropdownItem>
+    ];
     return (
       <OverflowMenu breakpoint="lg">
         <OverflowMenuContent>
@@ -66,15 +93,23 @@ class SimpleOverflowMenu extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
 ### Group types
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -101,15 +136,33 @@ class OverflowMenuGroupTypes extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>Item 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>Item 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>Item 3</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="primary" isShared>Primary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="secondary" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>Tertiary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action1" isShared>Action 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action2" isShared>Action 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action3" isShared>Action 3</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item1" isShared>
+        Item 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item2" isShared>
+        Item 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item3" isShared>
+        Item 3
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="primary" isShared>
+        Primary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="secondary" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="tertiary" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action1" isShared>
+        Action 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action2" isShared>
+        Action 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action3" isShared>
+        Action 3
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -160,16 +213,23 @@ class OverflowMenuGroupTypes extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
-
 ### Multiple groups
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -196,13 +256,25 @@ class OverflowMenuAdditionalOptions extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="1" isShared>Primary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="2" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="3" isShared>Tertiary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="4" isShared>Action 4</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="5" isShared>Action 5</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="6" isShared>Action 6</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="1" isShared>
+        Primary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="2" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="3" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="4" isShared>
+        Action 4
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="5" isShared>
+        Action 5
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="6" isShared>
+        Action 6
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -248,16 +320,23 @@ class OverflowMenuAdditionalOptions extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
-
 ### Persistent
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 
 class OverflowMenuPersist extends React.Component {
@@ -281,8 +360,12 @@ class OverflowMenuPersist extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="secondary" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>Tertiary</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="secondary" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="tertiary" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem key="action">Action 4</OverflowMenuDropdownItem>
     ];
     return (
@@ -312,7 +395,16 @@ class OverflowMenuPersist extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
+
+### Breakpoint on container
+
+By passing in the `breakpointReference` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.
+
+You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.
+
+```ts file="./OverflowMenuBreakpointOnContainer.tsx"
+```

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  Dropdown,
+  KebabToggle,
+  Slider
+} from '@patternfly/react-core';
+
+export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [containerWidth, setContainerWidth] = React.useState(100);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onChange = (value: number) => {
+    setContainerWidth(value);
+  };
+
+  const containerStyles = {
+    width: `${containerWidth}%`,
+    padding: '1rem',
+    borderWidth: '2px',
+    borderStyle: 'dashed'
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <>
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <div>
+          <span id="overflowMenu-hasBreakpointOnContainer-slider-label">Current container width</span>: {containerWidth}
+          %
+        </div>
+        <Slider
+          value={containerWidth}
+          onChange={onChange}
+          max={100}
+          min={20}
+          step={20}
+          showTicks
+          showBoundaries={false}
+          aria-labelledby="overflowMenu-hasBreakpointOnContainer-slider-label"
+        />
+      </div>
+      <div ref={containerRef} id="breakpoint-reference-container" style={containerStyles}>
+        <OverflowMenu breakpointReference={containerRef} breakpoint="sm">
+          <OverflowMenuContent>
+            <OverflowMenuItem>Item 1</OverflowMenuItem>
+            <OverflowMenuItem>Item 2</OverflowMenuItem>
+            <OverflowMenuGroup>
+              <OverflowMenuItem>Item 3</OverflowMenuItem>
+              <OverflowMenuItem>Item 4</OverflowMenuItem>
+              <OverflowMenuItem>Item 5</OverflowMenuItem>
+            </OverflowMenuGroup>
+          </OverflowMenuContent>
+          <OverflowMenuControl>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              isFlipEnabled
+              menuAppendTo="parent"
+            />
+          </OverflowMenuControl>
+        </OverflowMenu>
+      </div>
+    </>
+  );
+};

package/src/components/Pagination/Pagination.tsx

@@ -159,6 +159,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   variant?: 'top' | 'bottom' | PaginationVariant;
   /** Id to ideintify widget on page. */
   widgetId?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {

package/src/components/Radio/Radio.tsx

@@ -35,6 +35,10 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {

package/src/components/Select/Select.tsx

@@ -184,6 +184,10 @@ export interface SelectProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface SelectState {

package/src/components/Switch/Switch.tsx

@@ -34,6 +34,10 @@ export interface SwitchProps
   'aria-label'?: string;
   /** Flag to reverse the layout of toggle and label (toggle on right). */
   isReversed?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {

package/src/components/Tabs/Tab.tsx

@@ -39,6 +39,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   closeButtonAriaLabel?: string;
   /** @beta Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
+  /** Value to set the data-ouia-component-id for the tab button.*/
+  ouiaId?: number | string;
 }
 
 const TabBase: React.FunctionComponent<TabProps> = ({

package/src/components/Tabs/TabContent.tsx

@@ -21,6 +21,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   id: string;
   /** title of controlling Tab if used outside Tabs component */
   'aria-label'?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const variantStyle = {

package/src/components/Tabs/Tabs.tsx

@@ -106,6 +106,10 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   onToggle?: (isExpanded: boolean) => void;
   /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const variantStyle = {

package/src/components/Text/Text.tsx

@@ -26,6 +26,10 @@ export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   className?: string;
   /** Flag to indicate the link has visited styles applied if the browser determines the link has been visited */
   isVisitedLink?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Text: React.FunctionComponent<TextProps> = ({

package/src/components/TextInput/TextInput.tsx

@@ -77,6 +77,10 @@ export interface TextInputProps
   customIconUrl?: string;
   /** Dimensions for the custom icon set as the text input's background-size */
   customIconDimensions?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface TextInputState {

package/src/components/Title/Title.tsx

@@ -32,6 +32,10 @@ export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 's
   className?: string;
   /** The heading level to use */
   headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Title: React.FunctionComponent<TitleProps> = ({

package/src/components/Toolbar/Toolbar.tsx

@@ -46,6 +46,10 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   };
   /** Text to display in the total number of applied filters ToolbarFilter */
   numberOfFiltersText?: (numberOfFilters: number) => string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface ToolbarState {

package/src/demos/examples/DashboardHeader.js

@@ -6,6 +6,7 @@ import {
   Brand,
   Button,
   ButtonVariant,
+  Divider,
   Dropdown,
   DropdownGroup,
   DropdownToggle,
@@ -91,17 +92,35 @@ export default class DashboardHeader extends React.Component {
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isAppLauncherOpen } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, isAppLauncherOpen } = this.state;
     const { notificationBadge } = this.props;
 
     const kebabDropdownItems = [
-      <DropdownItem key="kebab-1">
+      <DropdownItem key="settings">
         <CogIcon /> Settings
       </DropdownItem>,
-      <DropdownItem key="kebab-2">
+      <DropdownItem key="help">
         <HelpIcon /> Help
       </DropdownItem>
     ];
+
+    const fullKebabItems = [
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>,
+      <Divider key="divider" />,
+      <DropdownItem key="settings">
+        <CogIcon /> Settings
+      </DropdownItem>,
+      <DropdownItem key="help">
+        <HelpIcon /> Help
+      </DropdownItem>
+    ];
+
     const userDropdownItems = [
       <DropdownGroup key="group 2">
         <DropdownItem key="group 2 profile">My profile</DropdownItem>
@@ -142,7 +161,7 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             )}
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-              <ToolbarItem visibility={{ default: 'hidden', sm: 'hidden', lg: 'visible' }}>
+              <ToolbarItem>
                 <ApplicationLauncher
                   onSelect={this.onAppLauncherSelect}
                   onToggle={this.onAppLauncherToggle}
@@ -157,7 +176,7 @@ export default class DashboardHeader extends React.Component {
                 <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
-            <ToolbarItem visibility={{ lg: 'hidden' }}>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
               <Dropdown
                 isPlain
                 position="right"
@@ -167,8 +186,18 @@ export default class DashboardHeader extends React.Component {
                 dropdownItems={kebabDropdownItems}
               />
             </ToolbarItem>
+            <ToolbarItem visibility={{ md: 'hidden' }}>
+              <Dropdown
+                isPlain
+                position="right"
+                onSelect={this.onFullKebabSelect}
+                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
+                isOpen={isFullKebabDropdownOpen}
+                dropdownItems={fullKebabItems}
+              />
+            </ToolbarItem>
           </ToolbarGroup>
-          <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
             <Dropdown
               isFullHeight
               onSelect={this.onDropdownSelect}

package/src/helpers/OUIA/OUIA.md

@@ -71,6 +71,7 @@ import { Button } from '@patternfly/react-core';
 * [FormSelect](/components/form-select)
 * [Menu](/components/menu)
 * [Modal](/components/modal)
+* [ModalBoxCloseButton](/components/modal)
 * [ModalContent](/components/modal)
 * [Nav](/components/navigation)
 * [NavExpandable](/components/navigation)
@@ -80,7 +81,6 @@ import { Button } from '@patternfly/react-core';
 * [Radio](/components/radio)
 * [Select](/components/select)
 * [Switch](/components/switch)
-* [TabButton](/components/tabs)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
 * [Text](/components/text)