@patternfly/react-core 4.232.0 → 4.232.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.0",
+  "version": "4.232.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.0",
-    "@patternfly/react-styles": "^4.82.0",
-    "@patternfly/react-tokens": "^4.84.0",
+    "@patternfly/react-icons": "^4.83.3",
+    "@patternfly/react-styles": "^4.82.3",
+    "@patternfly/react-tokens": "^4.84.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6faf7d797507f4ac5e1453f4755695a33c33a9ab"
+  "gitHead": "b795fb56a4d187599e9dd7f9715f11138715caa9"
 }

package/src/components/Select/Select.tsx

@@ -558,7 +558,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
   };
 
   extendTypeaheadChildren(typeaheadCurrIndex: number, favoritesGroup?: React.ReactNode[]) {
-    const { isGrouped, onFavorite } = this.props;
+    const { isGrouped, onFavorite, createText } = this.props;
     const typeaheadChildren = favoritesGroup
       ? favoritesGroup.concat(this.state.typeaheadFilteredChildren)
       : this.state.typeaheadFilteredChildren;
@@ -586,8 +586,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                       activeElement &&
                       (activeElement.id === (child as React.ReactElement).props.id ||
                         (this.props.isCreatable &&
-                          typeaheadActiveChild.innerText ===
-                            `{createText} "${(group as React.ReactElement).props.value}"`))
+                          typeaheadActiveChild.textContent ===
+                            `${createText} "${(group as React.ReactElement).props.value}"`))
                   })
             )
           });
@@ -600,10 +600,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 : React.cloneElement(child as React.ReactElement, {
                     isFocused:
                       typeaheadActiveChild &&
-                      (typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
+                      (typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
                         (this.props.isCreatable &&
-                          typeaheadActiveChild.innerText ===
-                            `{createText} "${(child as React.ReactElement).props.value}"`))
+                          typeaheadActiveChild.textContent ===
+                            `${createText} "${(child as React.ReactElement).props.value}"`))
                   })
             )
           });
@@ -612,8 +612,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           return React.cloneElement(group as React.ReactElement, {
             isFocused:
               typeaheadActiveChild &&
-              (typeaheadActiveChild.innerText === group.props.value.toString() ||
-                (this.props.isCreatable && typeaheadActiveChild.innerText === `{createText} "${group.props.value}"`))
+              (typeaheadActiveChild.textContent === group.props.value.toString() ||
+                (this.props.isCreatable && typeaheadActiveChild.textContent === `${createText} "${group.props.value}"`))
           });
         }
       });
@@ -624,9 +624,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ? child
         : React.cloneElement(child as React.ReactElement, {
             isFocused: typeaheadActiveChild
-              ? typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
+              ? typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
                 (this.props.isCreatable &&
-                  typeaheadActiveChild.innerText === `{createText} "${(child as React.ReactElement).props.value}"`)
+                  typeaheadActiveChild.textContent === `${createText} "${(child as React.ReactElement).props.value}"`)
               : index === typeaheadCurrIndex // fallback for view more + typeahead use cases, when the new expanded list is loaded and refCollection hasn't be updated yet
           });
     });
@@ -665,11 +665,11 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       : this.refCollection[nextIndex][0];
 
     let typeaheadInputValue = '';
-    if (isCreatable && optionTextElm.innerText.includes(createText)) {
+    if (isCreatable && optionTextElm.textContent.includes(createText)) {
       typeaheadInputValue = this.state.creatableValue;
     } else if (optionTextElm && !isLoad) {
       // !isLoad prevents the view more button text from appearing the typeahead input
-      typeaheadInputValue = optionTextElm.innerText;
+      typeaheadInputValue = optionTextElm.textContent;
     }
     this.setState(prevState => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
@@ -725,15 +725,15 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             if (!typeaheadActiveChild.classList.contains('pf-m-load')) {
               const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
               const typeaheadActiveChildText = hasDescriptionElm
-                ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
-                : typeaheadActiveChild.innerText;
+                ? (typeaheadActiveChild.firstChild as HTMLElement).textContent
+                : typeaheadActiveChild.textContent;
               this.setState({
                 typeaheadInputValue: typeaheadActiveChildText
               });
             }
           } else if (this.refCollection[0] && this.refCollection[0][0]) {
             this.setState({
-              typeaheadInputValue: this.refCollection[0][0].innerText
+              typeaheadInputValue: this.refCollection[0][0].textContent
             });
           }
           if (typeaheadActiveChild) {
@@ -1267,7 +1267,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           className
         )}
         {...(width && { style: { width } })}
-        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         {isOpen && menuContainer}
@@ -1288,7 +1287,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ref={this.parentRef}
         {...getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...(width && { style: { width } })}
-        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         <SelectToggle
@@ -1308,6 +1306,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           variant={variant}
           aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
           aria-label={toggleAriaLabel}
+          {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
           handleTypeaheadKeys={this.handleTypeaheadKeys}
           moveFocusToLastMenuItem={this.moveFocusToLastMenuItem}
           isDisabled={isDisabled}

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

@@ -516,3 +516,23 @@ describe('select with placeholder', () => {
     expect(screen.getByRole('button', { name: 'Options menu' })).not.toHaveClass('pf-m-placeholder');
   });
 });
+
+test('applies focus styling to the create option when reached via keyboard navigation', () => {
+  render(
+    <Select
+      variant={SelectVariant.typeahead}
+      onToggle={() => {}}
+      isOpen
+      isCreatable
+    >
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  userEvent.type(input, 'a{arrowdown}');
+
+  const createOption = screen.getByRole('option', { name: 'Create "a"' });
+
+  expect(createOption.parentElement).toHaveClass('pf-m-focus');
+});

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

@@ -0,0 +1,403 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { OverflowTab } from '../OverflowTab';
+import { TabsContext } from '../TabsContext';
+
+jest.mock('../../../helpers', () => ({
+  Popper: ({ trigger, popper, isVisible, popperMatchesTriggerWidth, appendTo }) => (
+    <div data-testid="popper-mock">
+      <div data-testid="trigger">{trigger}</div>
+      <div data-testid="popper">{isVisible && popper}</div>
+      <p>Popper matches trigger width: {`${popperMatchesTriggerWidth}`}</p>
+      <p>Append to class name: {appendTo && `${appendTo.className}`}</p>
+    </div>
+  )
+}));
+
+jest.mock('../../Menu', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return {
+    Menu: forwardRef((props: { children; onSelect }, ref) => (
+      <div data-testid="menu-mock" ref={ref}>
+        {props.children}
+        <button onClick={() => props.onSelect('mouseEvent', 1, 'fakeRef')}>Select</button>
+      </div>
+    )),
+    MenuContent: ({ children }) => <div data-testid="menu-content-mock">{children}</div>,
+    MenuList: ({ children }) => <ul data-testid="menu-list-mock">{children}</ul>,
+    MenuItem: ({ children, itemId, isSelected }) => (
+      <>
+        <li id={`${itemId}-menu-item-mock`}>
+          {children}
+          <p>Selected: {`${isSelected}`}</p>
+        </li>
+      </>
+    )
+  };
+});
+
+const tabsContextDefaultProps = {
+  variant: 'default' as 'default',
+  mountOnEnter: false,
+  unmountOnExit: false,
+  localActiveKey: '',
+  uniqueId: '',
+  handleTabClick: () => null,
+  handleTabClose: undefined
+};
+
+test('Renders', () => {
+  render(
+    <div data-testid="overflow-tab-container">
+      <OverflowTab />
+    </div>
+  );
+
+  expect(screen.getByTestId('overflow-tab-container').firstChild).toBeVisible();
+});
+
+test('Renders with the passed aria label', () => {
+  render(<OverflowTab aria-label="Overflow tab label test" />);
+
+  expect(screen.getByRole('presentation')).toHaveAccessibleName('Overflow tab label test');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <OverflowTab aria-labelledby="labelling-id" />
+      <p id="labelling-id">Label</p>
+    </>
+  );
+
+  expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
+  expect(screen.getByRole('presentation')).toHaveClass('pf-c-tabs__item');
+});
+
+test('Renders with class pf-c-tabs__link on the tab element', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveClass('pf-c-tabs__link');
+});
+
+test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-c-tabs__link-toggle-icon');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<OverflowTab className="test-class" />);
+
+  expect(screen.getByRole('presentation')).toHaveClass('test-class');
+});
+
+test('Renders without pf-m-expanded on the tab element by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with pf-m-expanded on the tab element once clicked', () => {
+  render(<OverflowTab />);
+
+  const overflowTab = screen.getByRole('tab');
+
+  userEvent.click(overflowTab);
+
+  expect(overflowTab).toHaveClass('pf-m-expanded');
+});
+
+test('Renders without pf-m-current on the presentation element by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('presentation')).not.toHaveClass('pf-m-current');
+});
+
+test('Renders without pf-m-current when the overflowingTabs does not include the tab indicated by localActiveKey via a context', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab overflowingTabs={[{ title: 'tabTitle', eventKey: 1 }]} />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('presentation')).not.toHaveClass('pf-m-current');
+});
+
+test("Renders with pf-m-current when TabContext's localActiveKey matches an overflowingTabs' eventKey", () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab overflowingTabs={[{ title: 'Tab one', eventKey: 1 }]} />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('presentation')).toHaveClass('pf-m-current');
+});
+
+test('Does not render tabs passed via overflowingTabs when not expanded', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  expect(screen.queryByText('Tab one')).not.toBeInTheDocument();
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Renders tabs passed via overflowingTabs when expanded', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  expect(screen.getByText('Tab one')).toBeVisible();
+  expect(screen.getByText('Tab two')).toBeVisible();
+});
+
+test('Closes the overflowing tabs menu when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
+  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Closes the overflowing tabs menu when the user clicks outside of the menu', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  userEvent.click(document.body);
+
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Calls the onTabClick callback provided via context when a tab is clicked', () => {
+  const mockHandleTabClick = jest.fn();
+
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, handleTabClick: mockHandleTabClick }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
+  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+  expect(mockHandleTabClick).toHaveBeenCalledTimes(1);
+  expect(mockHandleTabClick).toHaveBeenCalledWith('mouseEvent', 1, 'fakeRef');
+});
+
+test('Does not show the overflowing tab count by default', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  expect(screen.queryByRole('tab', { name: 'More (2)' })).not.toBeInTheDocument();
+});
+
+test('Shows the overflowing tab count when showTabCount is true', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+      showTabCount
+    />
+  );
+
+  expect(screen.getByRole('tab', { name: 'More (2)' })).toBeVisible();
+});
+
+test('Uses "More" as the default overflow tab title', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveTextContent('More');
+});
+
+test('Uses the selected tab title as the overflow tab title rather than the default title when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Tab one');
+});
+
+test('Uses custom overflow tab title text provided via defaultTitleText', () => {
+  render(<OverflowTab defaultTitleText="Test" />);
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Test');
+});
+
+test('Uses the selected tab title as the overflow tab title rather than the defaultTitleText when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+        defaultTitleText="Test"
+      />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Tab one');
+});
+
+test('Does not have an aria label on the tab by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).not.toHaveAttribute('aria-label');
+});
+
+test('Renders with the toggleAriaLabel as an aria label on the tab', () => {
+  render(<OverflowTab toggleAriaLabel="Test aria label" />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-label', 'Test aria label');
+});
+
+test('Renders the tab with aria-haspopup=menu', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-haspopup', 'menu');
+});
+
+test('Renders the tab with aria-expanded set to false by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the tab with aria-expanded set to true when the menu is opened', () => {
+  render(<OverflowTab />);
+
+  const overflowTab = screen.getByRole('tab');
+
+  userEvent.click(overflowTab);
+
+  expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Passes Popper popperMatchesTriggerWidth set to false', () => {
+  render(<OverflowTab />);
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
+});
+
+test('Passes Popper an appendTo value of the presentation element', () => {
+  render(<OverflowTab />);
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
+});
+
+test('Does not render an overflowing tab as a selected menu item by default', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.queryByText('Selected: true')).not.toBeInTheDocument();
+});
+
+test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Selected: true')).toBeVisible();
+});
+
+test('Matches snapshot when expanded', () => {
+  const { asFragment } = render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot when expanded 1`] = `
+<DocumentFragment>
+  <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"
+        >
+          <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"
+    >
+      <div
+        data-testid="menu-mock"
+      >
+        <div
+          data-testid="menu-content-mock"
+        >
+          <ul
+            data-testid="menu-list-mock"
+          >
+            <li
+              id="1-menu-item-mock"
+            >
+              Tab one
+              <p>
+                Selected: true
+              </p>
+            </li>
+            <li
+              id="2-menu-item-mock"
+            >
+              Tab two
+              <p>
+                Selected: false
+              </p>
+            </li>
+          </ul>
+        </div>
+        <button>
+          Select
+        </button>
+      </div>
+    </div>
+    <p>
+      Popper matches trigger width: false
+    </p>
+    <p>
+      Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current
+    </p>
+  </div>
+</DocumentFragment>
+`;