@patternfly/react-core 6.5.0-prerelease.60 → 6.5.0-prerelease.61

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.59","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.59","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.59","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.60",
+  "version": "6.5.0-prerelease.61",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.25",
-    "@patternfly/react-styles": "^6.5.0-prerelease.19",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.18",
+    "@patternfly/react-icons": "^6.5.0-prerelease.26",
+    "@patternfly/react-styles": "^6.5.0-prerelease.20",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.19",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "30db3d99f05b39b6478ed7ed48baeb29bfb895cd"
+  "gitHead": "69b6225ca40cfbb583516375a59b95c9590a2592"
 }

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/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>
+    </>
+  );
+};