feat(ToggleGroup): added full width variant

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.72",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"

packages/react-core/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}

packages/react-core/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">

packages/react-core/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"
+
 ```

packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupFill: React.FunctionComponent = () => {
+  const [isSelectedBasic, setIsSelectedBasic] = useState('toggle-group-fill-1');
+  const [isSelectedMulti, setIsSelectedMulti] = useState({
+    'toggle-group-fill-multi-1': false,
+    'toggle-group-fill-multi-2': false,
+    'toggle-group-fill-multi-3': false
+  });
+  const [isSelectedDisabled, setIsSelectedDisabled] = useState('toggle-group-fill-disabled-1');
+
+  const handleItemClickBasic = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedBasic(id);
+  };
+
+  const handleItemClickMulti = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    isSelected: boolean
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+
+  const handleItemClickDisabled = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedDisabled(id);
+  };
+
+  return (
+    <>
+      <ToggleGroup isFill aria-label="Full width toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-1"
+          isSelected={isSelectedBasic === 'toggle-group-fill-1'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-2"
+          isSelected={isSelectedBasic === 'toggle-group-fill-2'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-3"
+          isSelected={isSelectedBasic === 'toggle-group-fill-3'}
+          onChange={handleItemClickBasic}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width multi-select toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-multi-1"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-1']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-multi-2"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-2']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-multi-3"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-3']}
+          onChange={handleItemClickMulti}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width toggle group with disabled item">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-disabled-1"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-1'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-disabled-2"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-2'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem text="Option 3" isDisabled />
+      </ToggleGroup>
+    </>
+  );
+};

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.72",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -35,7 +35,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.71",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "@rhds/icons": "^2.1.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.72",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.72",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "fs-extra": "^11.3.3"
   }
 }

yarn.lock

@@ -5070,17 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.71":
-  version: 6.5.0-prerelease.71
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.71"
-  checksum: 10c0/08ab7878527666704ae99f5250e1a0446959143f744d4f0f9508aeb7e2a143dd088b8dc6bb4b0ca6679e9923d5c7cd8068d176070bce7b0c7992c48a865864d9
-  languageName: node
-  linkType: hard
-
-"@patternfly/patternfly@npm:6.5.0-prerelease.72":
-  version: 6.5.0-prerelease.72
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.72"
-  checksum: 10c0/b8d92a11b287d06efad3f410eb356ad60cbbdac3fbcb1e58a99c792253f81e7fcf154f57b0e5a40fbb9d7361364dab02925ecf21db2877e643a23101b8b0745a
+"@patternfly/patternfly@npm:6.5.0-prerelease.75":
+  version: 6.5.0-prerelease.75
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.75"
+  checksum: 10c0/b2188c3befaff75716150370ccfffda4770a67615c3837af293559d8434aa965a3b5882eb1eaba9347a0871f44786555b0cd4824e8e4f34398184344a3aeb975
   languageName: node
   linkType: hard
 
@@ -5178,7 +5171,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.72"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.75"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -5199,7 +5192,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.36.8"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.72"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.75"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -5239,7 +5232,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.71"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.75"
     "@rhds/icons": "npm:^2.1.0"
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
@@ -5326,7 +5319,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.72"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.75"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
@@ -5368,7 +5361,7 @@ __metadata:
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.4"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.72"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.75"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft