@patternfly/react-core 6.3.0-prerelease.8 → 6.3.0

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

@@ -47,7 +47,8 @@ jest.mock('../TreeViewListItem', () => ({
     onCollapse,
     parentItem,
     title,
-    useMemo
+    useMemo,
+    hasAnimations
   }) => (
     <div data-testid="TreeViewListItem-mock">
       <p>{`TreeViewListItem action: ${action}`}</p>
@@ -69,6 +70,7 @@ jest.mock('../TreeViewListItem', () => ({
       <p>{`TreeViewListItem parentItem: ${parentItem?.name}`}</p>
       <p>{`TreeViewListItem title: ${title}`}</p>
       <p>{`TreeViewListItem useMemo: ${useMemo}`}</p>
+      <p>{`TreeViewListItem hasAnimations: ${hasAnimations}`}</p>
       <button onClick={compareItems}>compareItems clicker</button>
       <button onClick={onCheck}>onCheck clicker</button>
       <button onClick={onSelect}>onSelect clicker</button>
@@ -286,6 +288,11 @@ test('Passes useMemo to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem useMemo: true')).toBeVisible();
 });
+test('Passes hasAnimations to TreeViewListItem', () => {
+  render(<TreeView data={[basicData]} hasAnimations={true} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 

package/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { TreeViewList } from '../TreeViewList';
+import { TreeViewListItem } from '../TreeViewListItem';
+import { TreeView } from '../TreeView';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 
 test(`Renders with class ${styles.treeView}__list by default`, () => {
@@ -84,6 +86,43 @@ test(`Does not render toolbar content when toolbar prop is not passed`, () => {
   expect(screen.queryByRole('separator')).not.toBeInTheDocument();
 });
 
+test('Renders with inert attribute by default when TreeView is passed hasAnimations', () => {
+  const options = [
+    {
+      name: 'Parent 1',
+      id: 'parent-1',
+      children: [
+        {
+          name: 'Child 1',
+          id: 'child-1'
+        }
+      ]
+    }
+  ];
+  render(<TreeView hasAnimations data={options} />);
+
+  expect(screen.getByRole('group')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with inert attribute when expanded and TreeView is passed hasAnimations', () => {
+  const options = [
+    {
+      name: 'Parent 1',
+      id: 'parent-1',
+      defaultExpanded: true,
+      children: [
+        {
+          name: 'Child 1',
+          id: 'child-1'
+        }
+      ]
+    }
+  ];
+  render(<TreeView hasAnimations data={options} />);
+
+  expect(screen.getByRole('group')).not.toHaveAttribute('inert');
+});
+
 test('Matches snapshot by default', () => {
   const { asFragment } = render(<TreeViewList>Content</TreeViewList>);
 

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -28,7 +28,7 @@ test(`Does not render children by default`, () => {
 test(`Renders children if defaultExpanded is true`, () => {
   render(
     <TreeViewListItem defaultExpanded={true} {...requiredProps}>
-      Content
+      <div>Content</div>
     </TreeViewListItem>
   );
 
@@ -38,7 +38,7 @@ test(`Renders children if defaultExpanded is true`, () => {
 test(`Renders children if isExpanded is true`, () => {
   render(
     <TreeViewListItem isExpanded={true} {...requiredProps}>
-      Content
+      <div>Content</div>
     </TreeViewListItem>
   );
 
@@ -47,7 +47,11 @@ test(`Renders children if isExpanded is true`, () => {
 
 test(`Renders children when toggle is clicked`, async () => {
   const user = userEvent.setup();
-  render(<TreeViewListItem {...requiredProps}>Content</TreeViewListItem>);
+  render(
+    <TreeViewListItem {...requiredProps}>
+      <div>Content</div>
+    </TreeViewListItem>
+  );
 
   await user.click(screen.getByRole('button', { name: requiredProps.name }));
 
@@ -264,6 +268,16 @@ test('Renders badge with customBadgeContent when hasBadge and children are passe
   expect(screen.getByText(requiredProps.name).nextElementSibling).toHaveTextContent('Custom badge');
 });
 
+test('Renders badge with customBadgeContent being number 0 when hasBadge and children are passed', () => {
+  render(
+    <TreeViewListItem hasBadge customBadgeContent={0} {...requiredProps}>
+      <TreeView data={[{ name: 'Parent name 1' }, { name: 'Parent name 2' }]} />
+    </TreeViewListItem>
+  );
+
+  expect(screen.getByText(requiredProps.name).nextElementSibling).toHaveTextContent('0');
+});
+
 test('Renders badge with customBadgeContent when hasBadge is passed and children are not passed', () => {
   render(<TreeViewListItem hasBadge customBadgeContent="Custom badge" {...requiredProps} />);
 

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -104,6 +104,9 @@ exports[`Matches snapshot 1`] = `
             <p>
               TreeViewListItem useMemo: undefined
             </p>
+            <p>
+              TreeViewListItem hasAnimations: undefined
+            </p>
             <button>
               compareItems clicker
             </button>

package/src/components/TreeView/examples/TreeViewCompact.tsx

@@ -54,5 +54,5 @@ export const TreeViewCompact: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView aria-label="Tree View compact example" data={options} variant="compact" />;
+  return <TreeView hasAnimations aria-label="Tree View compact example" data={options} variant="compact" />;
 };

package/src/components/TreeView/examples/TreeViewCompactNoBackground.tsx

@@ -54,5 +54,12 @@ export const TreeViewCompactNoBackground: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView aria-label="Tree View compact no background example" data={options} variant="compactNoBackground" />;
+  return (
+    <TreeView
+      hasAnimations
+      aria-label="Tree View compact no background example"
+      data={options}
+      variant="compactNoBackground"
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewGuides.tsx

@@ -60,5 +60,5 @@ export const GuidesTreeView: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example8-App5' }]
     }
   ];
-  return <TreeView aria-label="Tree View guides example" data={options} hasGuides={true} />;
+  return <TreeView hasAnimations aria-label="Tree View guides example" data={options} hasGuides={true} />;
 };

package/src/components/TreeView/examples/TreeViewMultiselectable.tsx

@@ -76,6 +76,7 @@ export const TreeViewMultiselectable: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View multiselectable example"
       isMultiSelectable
       data={options}

package/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -73,6 +73,7 @@ export const TreeViewSelectableNodes: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View separate selection and expansion example"
       hasSelectableNodes
       data={options}

package/src/components/TreeView/examples/TreeViewSingleSelectable.tsx

@@ -82,6 +82,7 @@ export const TreeViewSingleSelectable: React.FunctionComponent = () => {
         {!allExpanded && 'Expand all'}
       </Button>
       <TreeView
+        hasAnimations
         aria-label="Tree View single selectable example"
         data={options}
         activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -129,6 +129,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with actions example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithBadges.tsx

@@ -77,6 +77,7 @@ export const TreeViewBadges: React.FunctionComponent = () => {
 
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with badges example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx

@@ -194,5 +194,13 @@ export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
     }
   };
   const mapped = options.map((item) => mapTree(item));
-  return <TreeView aria-label="Tree View with checkboxes example" data={mapped} onCheck={onCheck} hasCheckboxes />;
+  return (
+    <TreeView
+      hasAnimations
+      aria-label="Tree View with checkboxes example"
+      data={mapped}
+      onCheck={onCheck}
+      hasCheckboxes
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx

@@ -84,6 +84,7 @@ export const TreeViewCustomBadges: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with custom badges example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

@@ -55,6 +55,7 @@ export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with unique icon per item example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -73,6 +73,7 @@ export const TreeViewWithIcons: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with icons example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithMemoization.tsx

@@ -51,6 +51,7 @@ export const TreeViewWithMemoization: React.FunctionComponent = () => {
   }
   const tree = (
     <TreeView
+      hasAnimations
       aria-label="Tree View with memoization example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -118,6 +118,7 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
 
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with search example"
       data={filteredItems}
       activeItems={activeItems}

package/src/components/Truncate/Truncate.tsx

@@ -1,7 +1,8 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
-import { Tooltip, TooltipPosition } from '../Tooltip';
+import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
+import { getReferenceElement } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum TruncatePosition {
@@ -17,11 +18,15 @@ const truncateStyles = {
 
 const minWidthCharacters: number = 12;
 
-export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
+export interface TruncateProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLAnchorElement>, 'ref'> {
   /** Class to add to outer span */
   className?: string;
   /** Text to truncate */
   content: string;
+  /** An HREF to turn the truncate wrapper into an anchor element. For more custom control, use the
+   * tooltipProps with a triggerRef property passed in.
+   */
+  href?: string;
   /** The number of characters displayed in the second half of a middle truncation. This will be overridden by
    * the maxCharsDisplayed prop.
    */
@@ -52,24 +57,24 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @hide The element whose parent to reference when calculating whether truncation should occur. This must be an ancestor
-   * of the ClipboardCopy, and must have a valid width value. For internal use only, do not use as it is not part of the public API
-   * and is subject to change.
-   */
-  refToGetParent?: React.RefObject<any>;
+  /** Additional props to pass to the tooltip. */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
 const sliceTrailingContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
 
-export const Truncate: React.FunctionComponent<TruncateProps> = ({
+const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   className,
+  href,
   position = 'end',
   tooltipPosition = 'top',
+  tooltipProps,
   trailingNumChars = 7,
   maxCharsDisplayed,
   omissionContent = '\u2026',
   content,
-  refToGetParent,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -78,7 +83,8 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
-  const subParentRef = useRef<HTMLDivElement>(null);
+  const defaultSubParentRef = useRef<any>(null);
+  const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
   const observer = useRef(null);
 
   if (maxCharsDisplayed <= 0) {
@@ -108,11 +114,14 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     if (textRef && textRef.current && !textElement) {
       setTextElement(textRef.current);
     }
+  }, [textRef, textElement]);
 
-    if ((refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement)) && !parentElement) {
-      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement);
+  useEffect(() => {
+    const refElement = getReferenceElement(subParentRef);
+    if (refElement?.parentElement && !parentElement) {
+      setParentElement(refElement.parentElement);
     }
-  }, [textRef, subParentRef, textElement, parentElement]);
+  }, [subParentRef, parentElement]);
 
   useEffect(() => {
     if (textElement && parentElement && !observer.current && !shouldRenderByMaxChars) {
@@ -222,25 +231,37 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     );
   };
 
+  const TruncateWrapper = href ? 'a' : 'span';
   const truncateBody = (
-    <span
-      ref={subParentRef}
+    <TruncateWrapper
+      ref={!tooltipProps?.triggerRef ? (subParentRef as React.MutableRefObject<any>) : null}
+      href={href}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
-      {...(isTruncated && { tabIndex: 0 })}
+      {...(isTruncated && !href && !tooltipProps?.triggerRef && { tabIndex: 0 })}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
-    </span>
+    </TruncateWrapper>
   );
 
   return (
     <>
       {isTruncated && (
-        <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content} triggerRef={subParentRef} />
+        <Tooltip
+          hidden={!isTruncated}
+          position={tooltipPosition}
+          content={content}
+          triggerRef={subParentRef}
+          {...tooltipProps}
+        />
       )}
       {truncateBody}
     </>
   );
 };
 
+export const Truncate = forwardRef((props: TruncateProps, ref: React.Ref<HTMLAnchorElement | HTMLSpanElement>) => (
+  <TruncateBase innerRef={ref} {...props} />
+));
+
 Truncate.displayName = 'Truncate';

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

@@ -19,6 +19,24 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn()
 }));
 
+test('Renders with span wrapper by default', () => {
+  render(<Truncate content={''} data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id').tagName).toBe('SPAN');
+});
+
+test('Renders with anchor wrapper when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#" />);
+
+  expect(screen.getByRole('link')).toHaveTextContent('Link content');
+});
+
+test('Passes href to anchor when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#home" />);
+
+  expect(screen.getByRole('link')).toHaveAttribute('href', '#home');
+});
+
 test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
@@ -145,6 +163,12 @@ test('renders tooltip content', () => {
   expect(input).toBeVisible();
 });
 
+test('Renders with additional tooltip props spread', () => {
+  render(<Truncate content={''} tooltipProps={{ distance: 32 }} />);
+
+  expect(screen.getByTestId('Tooltip-mock')).toHaveAttribute('distance', '32');
+});
+
 test('renders with inherited element props spread to the component', () => {
   render(<Truncate content={'Test'} data-testid="test-id" aria-label="labelling-id" />);
 

package/src/components/Truncate/examples/Truncate.md

@@ -52,3 +52,11 @@ Truncating based on a maximum amount of characters will truncate the content at
 ```ts file="./TruncateMaxChars.tsx"
 
 ```
+
+### With links
+
+To truncate link text, you can pass the `href` property in.
+
+```ts file="./TruncateLinks.tsx"
+
+```

package/src/components/Truncate/examples/TruncateLinks.tsx

@@ -0,0 +1,22 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateLinks: React.FunctionComponent = () => {
+  const content = 'A very lengthy anchor text content to trigger truncation';
+  return (
+    <>
+      <div>With default width-observing truncation:</div>
+      <div className="truncate-example-resize">
+        <Truncate href="#" content={content} />
+        <Truncate position="start" href="#" content={content} />
+        <Truncate position="middle" href="#" content={content} />
+      </div>
+      <br />
+      <div>With max characters truncation:</div>
+      <Truncate maxCharsDisplayed={15} href="#" content={content} />
+      <br />
+      <Truncate maxCharsDisplayed={15} position="start" href="#" content={content} />
+      <br />
+      <Truncate maxCharsDisplayed={15} position="middle" href="#" content={content} />
+    </>
+  );
+};

package/src/demos/CardDemos.md

@@ -14,7 +14,7 @@ import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_colo
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
-import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';

package/src/demos/DashboardHeader.tsx

@@ -23,7 +23,6 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '../components';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -132,9 +131,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>{patternflyLogo}</MastheadLogo>
@@ -159,7 +156,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
               )}
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                  <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -49,7 +49,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
@@ -193,7 +192,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
             >
               <ToolbarItem>
-                <Button aria-label="Settings actions" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -257,9 +256,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -48,7 +48,6 @@ import {
   ToolbarContent
 } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -243,7 +242,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
             >
               <ToolbarItem>
-                <Button aria-label="Settings actions" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -307,9 +306,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

package/src/demos/RTL/RTL.md

@@ -18,6 +18,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
 
 import './examples/PaginatedTable.css';