@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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

@@ -8,7 +8,7 @@ exports[`TextInput default read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="default read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r9:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -27,7 +27,7 @@ exports[`TextInput disabled text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="disabled text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       disabled=""
@@ -46,7 +46,7 @@ exports[`TextInput invalid text input 1`] = `
     <input
       aria-invalid="true"
       aria-label="invalid text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -64,12 +64,24 @@ exports[`TextInput invalid text input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M14.75 16V9a1.25 1.25 0 0 1 2.5 0v7a1.25 1.25 0 0 1-2.5 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Zm-13 4.261a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 16 20.261Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -85,7 +97,7 @@ exports[`TextInput plain read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="plain read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rb:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -104,7 +116,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
     <input
       aria-invalid="false"
       aria-label="read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -123,7 +135,7 @@ exports[`TextInput simple text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="simple text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -141,7 +153,7 @@ exports[`TextInput validated text input error 1`] = `
     <input
       aria-invalid="true"
       aria-label="validated text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rj:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -159,12 +171,24 @@ exports[`TextInput validated text input error 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M14.75 16V9a1.25 1.25 0 0 1 2.5 0v7a1.25 1.25 0 0 1-2.5 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Zm-13 4.261a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 16 20.261Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/TimePicker/TimePicker.tsx

@@ -2,7 +2,6 @@ import { Component, createRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
-import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { InputGroup, InputGroupItem } from '../InputGroup';
@@ -22,9 +21,12 @@ import {
 import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
+import { GenerateId } from '../../helpers';
 
-export interface TimePickerProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
+export interface TimePickerProps extends Omit<
+  React.HTMLProps<HTMLDivElement>,
+  'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
+> {
   /** Additional classes added to the time picker. */
   className?: string;
   /** Accessible label for the time picker */
@@ -477,92 +479,99 @@ class TimePicker extends Component<TimePickerProps, TimePickerState> {
     const style = { [cssDatePickerFormControlWidth.name]: width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
-    const randomId = id || getUniqueId('time-picker');
-
-    const getParentElement = () => {
-      if (this.baseComponentRef && this.baseComponentRef.current) {
-        return this.baseComponentRef.current.parentElement;
-      }
-      return null;
-    };
-
-    const menuContainer = (
-      <Menu ref={this.menuRef} isScrollable>
-        <MenuContent maxMenuHeight="200px">
-          <MenuList aria-label={ariaLabel}>
-            {options.map((option, index) => (
-              <MenuItem onClick={this.onSelect} key={option} id={`${randomId}-option-${index}`}>
-                {option}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </MenuContent>
-      </Menu>
-    );
-
-    const textInput = (
-      <TextInput
-        aria-haspopup="menu"
-        id={`${randomId}-input`}
-        aria-label={ariaLabel}
-        validated={isInvalid ? 'error' : 'default'}
-        placeholder={placeholder}
-        value={timeState || ''}
-        type="text"
-        customIcon={<OutlinedClockIcon />}
-        onClick={this.onInputClick}
-        onChange={this.onInputChange}
-        autoComplete="off"
-        isDisabled={isDisabled}
-        isExpanded={isTimeOptionsOpen}
-        ref={this.inputRef}
-        {...inputProps}
-      />
-    );
-
-    let calculatedAppendTo;
-    switch (menuAppendTo) {
-      case 'inline':
-        calculatedAppendTo = () => this.toggleRef.current;
-        break;
-      case 'parent':
-        calculatedAppendTo = getParentElement;
-        break;
-      default:
-        calculatedAppendTo = menuAppendTo as HTMLElement;
-    }
 
     return (
-      <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
-        <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
-          <InputGroup>
-            <InputGroupItem>
-              <div id={randomId}>
-                <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                  <Popper
-                    appendTo={calculatedAppendTo}
-                    trigger={textInput}
-                    triggerRef={this.toggleRef}
-                    popper={menuContainer}
-                    popperRef={this.menuRef}
-                    isVisible={isTimeOptionsOpen}
-                    zIndex={zIndex}
-                  />
-                </div>
+      <GenerateId prefix="time-picker-">
+        {(generatedId) => {
+          const randomId = id || generatedId;
+
+          const getParentElement = () => {
+            if (this.baseComponentRef && this.baseComponentRef.current) {
+              return this.baseComponentRef.current.parentElement;
+            }
+            return null;
+          };
+
+          const menuContainer = (
+            <Menu ref={this.menuRef} isScrollable>
+              <MenuContent maxMenuHeight="200px">
+                <MenuList aria-label={ariaLabel}>
+                  {options.map((option, index) => (
+                    <MenuItem onClick={this.onSelect} key={option} id={`${randomId}-option-${index}`}>
+                      {option}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </MenuContent>
+            </Menu>
+          );
+
+          const textInput = (
+            <TextInput
+              aria-haspopup="menu"
+              id={`${randomId}-input`}
+              aria-label={ariaLabel}
+              validated={isInvalid ? 'error' : 'default'}
+              placeholder={placeholder}
+              value={timeState || ''}
+              type="text"
+              customIcon={<OutlinedClockIcon />}
+              onClick={this.onInputClick}
+              onChange={this.onInputChange}
+              autoComplete="off"
+              isDisabled={isDisabled}
+              isExpanded={isTimeOptionsOpen}
+              ref={this.inputRef}
+              {...inputProps}
+            />
+          );
+
+          let calculatedAppendTo;
+          switch (menuAppendTo) {
+            case 'inline':
+              calculatedAppendTo = () => this.toggleRef.current;
+              break;
+            case 'parent':
+              calculatedAppendTo = getParentElement;
+              break;
+            default:
+              calculatedAppendTo = menuAppendTo as HTMLElement;
+          }
+
+          return (
+            <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
+              <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
+                <InputGroup>
+                  <InputGroupItem>
+                    <div id={randomId}>
+                      <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
+                        <Popper
+                          appendTo={calculatedAppendTo}
+                          trigger={textInput}
+                          triggerRef={this.toggleRef}
+                          popper={menuContainer}
+                          popperRef={this.menuRef}
+                          isVisible={isTimeOptionsOpen}
+                          zIndex={zIndex}
+                        />
+                      </div>
+                    </div>
+                  </InputGroupItem>
+                </InputGroup>
+                {isInvalid && (
+                  <div className={css(datePickerStyles.datePickerHelperText)}>
+                    <HelperText>
+                      <HelperTextItem variant="error">
+                        {!isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage}
+                      </HelperTextItem>
+                    </HelperText>
+                  </div>
+                )}
               </div>
-            </InputGroupItem>
-          </InputGroup>
-          {isInvalid && (
-            <div className={css(datePickerStyles.datePickerHelperText)}>
-              <HelperText>
-                <HelperTextItem variant="error">
-                  {!isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage}
-                </HelperTextItem>
-              </HelperText>
             </div>
-          )}
-        </div>
-      </div>
+          );
+        }}
+      </GenerateId>
     );
   }
 }

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -5,7 +5,8 @@ export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
   const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(id);
+    // Allow toggling off if clicking the already selected item
+    setIsSelected(isSelected === id ? '' : id);
   };
   return (
     <ToggleGroup aria-label="Default with single selectable">

package/src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,11 @@
 import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarColorVariant {
@@ -40,6 +40,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isStatic?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar has a vertical orientation */
+  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -69,7 +71,6 @@ export interface ToolbarState {
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
-  ouiaStateId: string;
 }
 
 interface FilterInfo {
@@ -84,8 +85,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
-    windowWidth: canUseDOM ? window.innerWidth : 1200,
-    ouiaStateId: getDefaultOUIAId(Toolbar.displayName)
+    windowWidth: 1200
   };
 
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
@@ -106,6 +106,9 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   componentDidMount() {
+    if (canUseDOM) {
+      this.setState({ windowWidth: window.innerWidth });
+    }
     if (this.isToggleManaged() && canUseDOM) {
       window.addEventListener('resize', this.closeExpandableContent);
     }
@@ -129,7 +132,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   getNumberOfFilters = () =>
     Object.values(this.state.filterInfo).reduce((acc: any, cur: any) => acc + cur, 0) as number;
 
-  renderToolbar = (randomId: string) => {
+  renderToolbar = (randomId: string, generatedOuiaId?: string) => {
     const {
       hasNoPadding,
       clearAllFilters,
@@ -143,6 +146,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       isStatic,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +171,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,
@@ -174,7 +179,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               className
             )}
             id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
             {...props}
           >
             <ToolbarContext.Provider
@@ -211,10 +216,10 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   render() {
-    return this.props.id ? (
-      this.renderToolbar(this.props.id)
-    ) : (
-      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
+    return (
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType="Toolbar">
+        {(generatedId, generatedOuiaId) => this.renderToolbar(this.props.id || generatedId, generatedOuiaId)}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,7 +1,6 @@
 import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { canUseDOM } from '../../helpers/util';
 
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -32,7 +31,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps, { viewportWidth: number }> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -40,6 +39,23 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
   };
 
+  state = {
+    viewportWidth: 1200
+  };
+
+  handleResize = () => {
+    this.setState({ viewportWidth: window.innerWidth });
+  };
+
+  componentDidMount() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   render() {
     const {
       className,
@@ -62,9 +78,8 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     let collapseListedFilters = false;
     if (collapseListedFiltersBreakpoint === 'all') {
       collapseListedFilters = true;
-    } else if (canUseDOM) {
-      collapseListedFilters =
-        (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
+    } else if (collapseListedFiltersBreakpoint) {
+      collapseListedFilters = this.state.viewportWidth < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -6,7 +6,7 @@ import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
-import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
@@ -157,7 +157,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
-    const viewportSize = canUseDOM ? window.innerWidth : 1200;
+    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
     return viewportSize < lgBreakpointValue;
   };

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

@@ -54,7 +54,7 @@ describe('Toolbar', () => {
         </ToolbarContent>
       </Toolbar>
     );
-    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+    expect(screen.getByTestId('toolbar')).not.toHaveClass(styles.modifiers.noPadding);
   });
 
   it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
@@ -205,4 +205,37 @@ describe('Toolbar', () => {
       });
     });
   });
+
+  it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
+    render(
+      <Toolbar data-testid="Toolbar-test-is-not-vertical">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
+  });
+
+  it('Renders with class ${styles.modifiers.vertical} when isVertical is true', () => {
+    const items = (
+      <Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
+  });
 });