diff --git a/packages/react-core/package.json b/packages/react-core/package.json index f5709f26fb1..107518b9fd3 100644 --- a/packages/react-core/package.json +++ b/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" diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx index fb60482d201..8ee9815a72e 100644 --- a/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx +++ b/packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx @@ -10,6 +10,8 @@ export interface ToggleGroupProps extends React.HTMLProps { 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 = ({ className, children, isCompact = false, + isFill = false, areAllGroupsDisabled = false, 'aria-label': ariaLabel, ...props @@ -32,7 +35,12 @@ export const ToggleGroup: React.FunctionComponent = ({ return (
{ expect(asFragment()).toMatchSnapshot(); }); + test(`does not apply ${styles.modifiers.fill} modifier class by default`, () => { + render( + + + + + ); + const toggleGroup = screen.getByRole('group'); + expect(toggleGroup).not.toHaveClass(styles.modifiers.fill); + }); + + test(`applies ${styles.modifiers.fill} modifier class when isFill is true`, () => { + render( + + + + + ); + const toggleGroup = screen.getByRole('group'); + expect(toggleGroup).toHaveClass(styles.modifiers.fill); + }); + test('should render non-ToggleGroupItem children', () => { const { asFragment } = render( diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index 591240dcf9b..fdb70c987f0 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/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 `` 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 ``. ```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 ``, 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 ``, use `isCompact`. ```ts file="./ToggleGroupCompact.tsx" + +``` + +### Full-width toggle group + +To make toggle group items fill the available horizontal space, use `isFill` on a ``. The following example shows full-width toggle groups for a single-select, multi-select, and single-select with disabled item. + +```ts file="./ToggleGroupFill.tsx" + ``` diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx new file mode 100644 index 00000000000..a02895edfad --- /dev/null +++ b/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 | React.KeyboardEvent | MouseEvent) => { + const id = event.currentTarget.id; + setIsSelectedBasic(id); + }; + + const handleItemClickMulti = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + isSelected: boolean + ) => { + const id = event.currentTarget.id; + setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected })); + }; + + const handleItemClickDisabled = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { + const id = event.currentTarget.id; + setIsSelectedDisabled(id); + }; + + return ( + <> + + + + + +
+ + + + + +
+ + + + + + + ); +}; diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 15f1cfe8db9..563024ee883 100644 --- a/packages/react-docs/package.json +++ b/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:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 0c1b3776c46..6e8c82f2582 100644 --- a/packages/react-icons/package.json +++ b/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" diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index f017724de13..48bfa3d7377 100644 --- a/packages/react-styles/package.json +++ b/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" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index c0f3f46dfc5..62b9ca77392 100644 --- a/packages/react-tokens/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 202af09e172..c2e30c68348 100644 --- a/yarn.lock +++ b/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