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

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,11 +64,11 @@ exports[`TextInput invalid text input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
           />
         </svg>
       </span>
@@ -85,7 +85,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 +104,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 +123,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 +141,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,11 +159,11 @@ exports[`TextInput validated text input error 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
           />
         </svg>
       </span>

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
+import { ValidatedOptions } from '../../helpers/constants';
 
 export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the text input group */
@@ -11,8 +12,11 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   isDisabled?: boolean;
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
-  /** Status variant of the text input group. */
-  validated?: 'success' | 'warning' | 'error';
+  /** Value to indicate if the text input group is modified to show that validation state.
+   * If set to success, warning, or error, the group will show that state.
+   * If set to default, no validation styling is applied (use to clear a prior validation state).
+   */
+  validated?: 'success' | 'warning' | 'error' | 'default' | ValidatedOptions;
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -32,6 +36,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
 }: TextInputGroupProps) => {
   const ref = useRef(null);
   const textInputGroupRef = innerRef || ref;
+  const hasValidatedModifier = ['success', 'error', 'warning'].includes(validated);
 
   return (
     <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
@@ -41,7 +46,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
-          validated && styles.modifiers[validated],
+          hasValidatedModifier && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
         )}
         {...props}

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
 import { TextInputGroupIcon } from './TextInputGroupIcon';
-import { statusIcons, ValidatedOptions } from '../../helpers';
+import { statusIcons } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -86,7 +86,19 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   const { isDisabled, validated } = useContext(TextInputGroupContext);
   const ref = useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
-  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
+  const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+  const StatusIcon = (() => {
+    if (!hasStatusIcon) {
+      return undefined;
+    }
+    if (validated === 'error') {
+      return statusIcons.danger;
+    }
+    if (validated === 'success') {
+      return statusIcons.success;
+    }
+    return statusIcons.warning;
+  })();
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -126,7 +138,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(ariaControls && { 'aria-controls': ariaControls })}
           {...inputProps}
         />
-        {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
+        {hasStatusIcon && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>
     </div>
   );

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

@@ -72,6 +72,16 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
+  it('does not apply validation modifiers when validated="default"', () => {
+    render(<TextInputGroup validated="default">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).not.toHaveClass(styles.modifiers.success);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.warning);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.error);
+  });
+
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
     const TestComponent: React.FunctionComponent = () => {
       const context = useContext(TextInputGroupContext);

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -251,6 +251,16 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
   });
 
+  it('does not render a status icon when validated is default', () => {
+    render(
+      <TextInputGroupContext.Provider value={{ validated: 'default' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.queryByRole('textbox').nextElementSibling).toBeNull();
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -7,7 +7,7 @@ propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilitie
 
 import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Examples
 

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -8,7 +8,7 @@ import {
   Button
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -73,7 +73,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
               variant="plain"
               onClick={clearChipsAndInput}
               aria-label="Clear button and input"
-              icon={<TimesIcon />}
+              icon={<RhMicronsCloseIcon />}
             />
           )}
         </TextInputGroupUtilities>

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -28,7 +28,12 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
       {showUtilities && (
         <TextInputGroupUtilities>
           {showClearButton && (
-            <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
+            <Button
+              variant="plain"
+              onClick={clearInput}
+              aria-label="Clear button and input"
+              icon={<RhMicronsCloseIcon />}
+            />
           )}
         </TextInputGroupUtilities>
       )}

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -9,7 +9,7 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
   const [successValue, setSuccessValue] = useState('Success validation');
@@ -53,7 +53,12 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
           {showUtilities && (
             <TextInputGroupUtilities>
               {showClearButton && (
-                <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
+                <Button
+                  variant="plain"
+                  onClick={clearInput}
+                  aria-label="Clear button and input"
+                  icon={<RhMicronsCloseIcon />}
+                />
               )}
             </TextInputGroupUtilities>
           )}

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/ToggleGroup.tsx

@@ -10,6 +10,8 @@ export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Modifies the toggle group to include compact styling. */
   isCompact?: boolean;
+  /** Modifies the toggle group items to fill the available space. */
+  isFill?: boolean;
   /** Disable all toggle group items under this component. */
   areAllGroupsDisabled?: boolean;
   /** Accessible label for the toggle group */
@@ -20,6 +22,7 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   className,
   children,
   isCompact = false,
+  isFill = false,
   areAllGroupsDisabled = false,
   'aria-label': ariaLabel,
   ...props
@@ -32,7 +35,12 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
 
   return (
     <div
-      className={css(styles.toggleGroup, isCompact && styles.modifiers.compact, className)}
+      className={css(
+        styles.toggleGroup,
+        isCompact && styles.modifiers.compact,
+        isFill && styles.modifiers.fill,
+        className
+      )}
       role="group"
       aria-label={ariaLabel}
       {...props}

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { ToggleGroup } from '../ToggleGroup';
 import { ToggleGroupItem } from '../ToggleGroupItem';
+import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 
 const props = {
   onChange: jest.fn(),
@@ -59,6 +60,28 @@ describe('ToggleGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`does not apply ${styles.modifiers.fill} modifier class by default`, () => {
+    render(
+      <ToggleGroup aria-label="Default toggle group">
+        <ToggleGroupItem text="Test" />
+        <ToggleGroupItem text="Test" />
+      </ToggleGroup>
+    );
+    const toggleGroup = screen.getByRole('group');
+    expect(toggleGroup).not.toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`applies ${styles.modifiers.fill} modifier class when isFill is true`, () => {
+    render(
+      <ToggleGroup isFill aria-label="Fill toggle group">
+        <ToggleGroupItem text="Test" />
+        <ToggleGroupItem text="Test" />
+      </ToggleGroup>
+    );
+    const toggleGroup = screen.getByRole('group');
+    expect(toggleGroup).toHaveClass(styles.modifiers.fill);
+  });
+
   test('should render non-ToggleGroupItem children', () => {
     const { asFragment } = render(
       <ToggleGroup isCompact aria-label="non-element children">

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-v6-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
+
 import './toggleGroup.css';
 
 import { useRef, useState } from 'react';
@@ -21,6 +22,7 @@ A single select toggle group allows users to toggle between multiple items.
 To indicate whether a `<ToggleGroupItem>` is selected or not, use the `isSelected` property.
 
 ```ts file="./ToggleGroupDefaultSingle.tsx"
+
 ```
 
 ### Multi select toggle group
@@ -30,6 +32,7 @@ A multi select toggle group allows users to select multiple items at once.
 When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.
 
 ```ts file="./ToggleGroupDefaultMultiple.tsx"
+
 ```
 
 ### With icons
@@ -39,6 +42,7 @@ You can use a recognizable icon as a toggle item label.
 To do this, pass an imported icon to the `icon` property of a `<ToggleGroupItem>`.
 
 ```ts file="./ToggleGroupIcon.tsx"
+
 ```
 
 ### With text and icons
@@ -50,13 +54,23 @@ To do this, pass a descriptive label to the `text` property of a `<ToggleGroupIt
 When passing both `text` and `icon` properties to a `<ToggleGroupItem>`, you can also pass in `iconPosition` to determine whether the icon is rendered at the start or end of the item.
 
 ```ts file="./ToggleGroupTextIcon.tsx"
+
 ```
 
 ### Compact toggle group
 
-When space in a UI is limited, you can use a compact toggle group. 
+When space in a UI is limited, you can use a compact toggle group.
 
 To apply compact styling to a `<ToggleGroup>`, use `isCompact`.
 
 ```ts file="./ToggleGroupCompact.tsx"
+
+```
+
+### Full-width toggle group
+
+To make toggle group items fill the available horizontal space, use `isFill` on a `<ToggleGroup>`. The following example shows full-width toggle groups for a single-select, multi-select, and single-select with disabled item.
+
+```ts file="./ToggleGroupFill.tsx"
+
 ```

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">