From 980c63addbad03ea1a9ba4ba403294e2df350c66 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 23 Apr 2026 08:49:58 -0400 Subject: [PATCH 1/7] feat(ToggleGroup): added full width variant --- packages/react-core/package.json | 2 +- .../src/components/Compass/CompassPanel.tsx | 51 +++++++++++ .../Compass/__tests__/CompassPanel.test.tsx | 86 ++++++++++++++++++ .../__snapshots__/CompassPanel.test.tsx.snap | 25 ++++++ .../components/ToggleGroup/ToggleGroup.tsx | 10 ++- .../__tests__/ToggleGroup.test.tsx | 23 +++++ .../ToggleGroup/examples/ToggleGroup.md | 16 +++- .../ToggleGroup/examples/ToggleGroupFill.tsx | 89 +++++++++++++++++++ packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 18 ++-- 13 files changed, 312 insertions(+), 16 deletions(-) create mode 100644 packages/react-core/src/components/Compass/CompassPanel.tsx create mode 100644 packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx create mode 100644 packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx 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/Compass/CompassPanel.tsx b/packages/react-core/src/components/Compass/CompassPanel.tsx new file mode 100644 index 00000000000..97a9b815990 --- /dev/null +++ b/packages/react-core/src/components/Compass/CompassPanel.tsx @@ -0,0 +1,51 @@ +// import styles from '@patternfly/react-styles/css/components/Compass/compass'; +import { css } from '@patternfly/react-styles'; + +export interface CompassPanelProps extends React.HTMLProps { + /** Content of the panel. */ + children: React.ReactNode; + /** Additional classes added to the panel. */ + className?: string; + /** Indicates the panel should have a pill border radius */ + isPill?: boolean; + /** Indicates the panel should expand to fill the available height */ + isFullHeight?: boolean; + /** Indicates the panel should scroll its overflow */ + isScrollable?: boolean; + /** Indicates the panel should have no border */ + hasNoBorder?: boolean; + /** Indicates the panel should have no padding */ + hasNoPadding?: boolean; + /** Indicates the panel should have a "thinking" animation */ + isThinking?: boolean; +} + +export const CompassPanel: React.FunctionComponent = ({ + children, + className, + // isPill, + // hasNoBorder, + // hasNoPadding, + isThinking, + // isFullHeight, + // isScrollable, + ...props +}: CompassPanelProps) => ( +
+ {children} +
+); + +CompassPanel.displayName = 'CompassPanel'; diff --git a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx new file mode 100644 index 00000000000..f122dc008dc --- /dev/null +++ b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx @@ -0,0 +1,86 @@ +import { render, screen } from '@testing-library/react'; +import { CompassPanel } from '../CompassPanel'; +import styles from '@patternfly/react-styles/css/components/Compass/compass'; + +test.skip('Renders with children', () => { + render(Test content); + expect(screen.getByText('Test content')).toBeVisible(); +}); + +test.skip('Renders with custom class name when className prop is provided', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('custom-class'); +}); + +test.skip(`Renders with default ${styles.compassPanel} class`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.compassPanel); +}); + +test.skip(`Renders with ${styles.modifiers.pill} when isPill is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill); +}); + +test.skip(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder); +}); + +test.skip(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding); +}); + +test.skip('Renders with pf-v6-m-thinking when isThinking is true', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking'); +}); + +test.skip(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight); +}); + +test.skip(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable); +}); + +test.skip('Renders with multiple modifier classes when multiple props are true', () => { + render( + + Test + + ); + const panelElement = screen.getByText('Test'); + expect(panelElement).toHaveClass(styles.modifiers.pill); + expect(panelElement).toHaveClass(styles.modifiers.noBorder); + expect(panelElement).toHaveClass(styles.modifiers.noPadding); + expect(panelElement).toHaveClass('pf-v6-m-thinking'); + expect(panelElement).toHaveClass(styles.modifiers.fullHeight); + expect(panelElement).toHaveClass(styles.modifiers.scrollable); +}); + +test.skip('Renders with additional props spread to the component', () => { + render(Test); + expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); +}); + +test.skip('Matches the snapshot with all modifiers', () => { + const { asFragment } = render( + +
Panel with all modifiers
+ + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test.skip('Matches the snapshot with no modifiers', () => { + const { asFragment } = render( + +
Basic panel
+ + ); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap new file mode 100644 index 00000000000..56189988db7 --- /dev/null +++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches the snapshot with all modifiers 1`] = ` + +
+
+ Panel with all modifiers +
+
+ +`; + +exports[`Matches the snapshot with no modifiers 1`] = ` + +
+
+ Basic panel +
+
+ +`; 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..d596c677a5e 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`. + +```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..5e3b34565e2 --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx @@ -0,0 +1,89 @@ +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) => { + const id = event.currentTarget.id; + setIsSelectedBasic(id); + }; + + const handleItemClickMulti = (event, isSelected: boolean) => { + const id = event.currentTarget.id; + setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected })); + }; + + const handleItemClickDisabled = (event) => { + 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..ef513695407 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5070,10 +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 +"@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 +5178,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 +5199,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 +5239,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 +5326,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 +5368,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 From b0f5f89f42f9487e1ef7b7c9ab7f7de5b66e2c90 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 23 Apr 2026 09:38:07 -0400 Subject: [PATCH 2/7] Updated types in example --- .../src/components/ToggleGroup/examples/ToggleGroup.md | 2 +- .../components/ToggleGroup/examples/ToggleGroupFill.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index d596c677a5e..072ca82cc59 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md @@ -67,7 +67,7 @@ To apply compact styling to a ``, use `isCompact`. ``` -### Full width toggle group +### Full-width toggle group To make toggle group items fill the available horizontal space, use `isFill`. diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx index 5e3b34565e2..a02895edfad 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupFill.tsx @@ -10,17 +10,20 @@ export const ToggleGroupFill: React.FunctionComponent = () => { }); const [isSelectedDisabled, setIsSelectedDisabled] = useState('toggle-group-fill-disabled-1'); - const handleItemClickBasic = (event) => { + const handleItemClickBasic = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; setIsSelectedBasic(id); }; - const handleItemClickMulti = (event, isSelected: boolean) => { + const handleItemClickMulti = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + isSelected: boolean + ) => { const id = event.currentTarget.id; setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected })); }; - const handleItemClickDisabled = (event) => { + const handleItemClickDisabled = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; setIsSelectedDisabled(id); }; From 410a6272d1cb15811fe906cbbf15786115032f90 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 23 Apr 2026 10:26:15 -0400 Subject: [PATCH 3/7] Updated example description --- .../src/components/ToggleGroup/examples/ToggleGroup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index 072ca82cc59..fbdbdc5ced2 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md @@ -69,7 +69,7 @@ To apply compact styling to a ``, use `isCompact`. ### Full-width toggle group -To make toggle group items fill the available horizontal space, use `isFill`. +To make toggle group items fill the available horizontal space, use `isFill` on a ``. ```ts file="./ToggleGroupFill.tsx" From 85326985ebe5d9ef7bc9dbb07fe4c642cd26aa57 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 23 Apr 2026 10:38:40 -0400 Subject: [PATCH 4/7] Mentioned variants in example desc --- .../src/components/ToggleGroup/examples/ToggleGroup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index fbdbdc5ced2..843a5741174 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md @@ -69,7 +69,7 @@ To apply compact styling to a ``, use `isCompact`. ### Full-width toggle group -To make toggle group items fill the available horizontal space, use `isFill` on a ``. +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" From daf32f5d454f3cef52f77705d45f8c1f26fb0c80 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 23 Apr 2026 10:43:41 -0400 Subject: [PATCH 5/7] Hyphenated words --- .../src/components/ToggleGroup/examples/ToggleGroup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index 843a5741174..fdb70c987f0 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md @@ -69,7 +69,7 @@ To apply compact styling to a ``, use `isCompact`. ### 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. +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" From 7826f0c2ac7575b63d96b66c0db46807b70048c3 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 24 Apr 2026 10:52:50 -0400 Subject: [PATCH 6/7] Rebased + redeleted --- .../src/components/Compass/CompassPanel.tsx | 51 ----------- .../Compass/__tests__/CompassPanel.test.tsx | 86 ------------------- .../__snapshots__/CompassPanel.test.tsx.snap | 25 ------ 3 files changed, 162 deletions(-) delete mode 100644 packages/react-core/src/components/Compass/CompassPanel.tsx delete mode 100644 packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx delete mode 100644 packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap diff --git a/packages/react-core/src/components/Compass/CompassPanel.tsx b/packages/react-core/src/components/Compass/CompassPanel.tsx deleted file mode 100644 index 97a9b815990..00000000000 --- a/packages/react-core/src/components/Compass/CompassPanel.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// import styles from '@patternfly/react-styles/css/components/Compass/compass'; -import { css } from '@patternfly/react-styles'; - -export interface CompassPanelProps extends React.HTMLProps { - /** Content of the panel. */ - children: React.ReactNode; - /** Additional classes added to the panel. */ - className?: string; - /** Indicates the panel should have a pill border radius */ - isPill?: boolean; - /** Indicates the panel should expand to fill the available height */ - isFullHeight?: boolean; - /** Indicates the panel should scroll its overflow */ - isScrollable?: boolean; - /** Indicates the panel should have no border */ - hasNoBorder?: boolean; - /** Indicates the panel should have no padding */ - hasNoPadding?: boolean; - /** Indicates the panel should have a "thinking" animation */ - isThinking?: boolean; -} - -export const CompassPanel: React.FunctionComponent = ({ - children, - className, - // isPill, - // hasNoBorder, - // hasNoPadding, - isThinking, - // isFullHeight, - // isScrollable, - ...props -}: CompassPanelProps) => ( -
- {children} -
-); - -CompassPanel.displayName = 'CompassPanel'; diff --git a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx deleted file mode 100644 index f122dc008dc..00000000000 --- a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import { CompassPanel } from '../CompassPanel'; -import styles from '@patternfly/react-styles/css/components/Compass/compass'; - -test.skip('Renders with children', () => { - render(Test content); - expect(screen.getByText('Test content')).toBeVisible(); -}); - -test.skip('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test.skip(`Renders with default ${styles.compassPanel} class`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.compassPanel); -}); - -test.skip(`Renders with ${styles.modifiers.pill} when isPill is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill); -}); - -test.skip(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder); -}); - -test.skip(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding); -}); - -test.skip('Renders with pf-v6-m-thinking when isThinking is true', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking'); -}); - -test.skip(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight); -}); - -test.skip(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable); -}); - -test.skip('Renders with multiple modifier classes when multiple props are true', () => { - render( - - Test - - ); - const panelElement = screen.getByText('Test'); - expect(panelElement).toHaveClass(styles.modifiers.pill); - expect(panelElement).toHaveClass(styles.modifiers.noBorder); - expect(panelElement).toHaveClass(styles.modifiers.noPadding); - expect(panelElement).toHaveClass('pf-v6-m-thinking'); - expect(panelElement).toHaveClass(styles.modifiers.fullHeight); - expect(panelElement).toHaveClass(styles.modifiers.scrollable); -}); - -test.skip('Renders with additional props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test.skip('Matches the snapshot with all modifiers', () => { - const { asFragment } = render( - -
Panel with all modifiers
- - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test.skip('Matches the snapshot with no modifiers', () => { - const { asFragment } = render( - -
Basic panel
- - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap deleted file mode 100644 index 56189988db7..00000000000 --- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Matches the snapshot with all modifiers 1`] = ` - -
-
- Panel with all modifiers -
-
- -`; - -exports[`Matches the snapshot with no modifiers 1`] = ` - -
-
- Basic panel -
-
- -`; From 6ec09da40f97b7104d2b5059c0815de1b51b29e0 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 24 Apr 2026 10:56:52 -0400 Subject: [PATCH 7/7] Yarn lock --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index ef513695407..c2e30c68348 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5077,13 +5077,6 @@ __metadata: 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 - languageName: node - linkType: hard - "@patternfly/react-charts@workspace:^, @patternfly/react-charts@workspace:packages/react-charts": version: 0.0.0-use.local resolution: "@patternfly/react-charts@workspace:packages/react-charts"