From 93020a1441194484804d0e725bf6d5cc446902b8 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 2 Dec 2025 13:26:09 -0500 Subject: [PATCH 1/3] docs(compass): Content review and edits. --- .../components/Compass/examples/Compass.md | 30 ++++++++----------- .../react-core/src/demos/Compass/Compass.md | 27 +++++++++++++++++ .../Compass/examples/CompassDemo.tsx | 0 3 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 packages/react-core/src/demos/Compass/Compass.md rename packages/react-core/src/{components => demos}/Compass/examples/CompassDemo.tsx (100%) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index b24170a3eea..3c6751daff7 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -28,15 +28,15 @@ import './compass.css'; ### Basic -In a basic compass layout, content can be passed to the following props to populate areas of the page: +In a basic compass layout, content can be passed to the following props to populate different areas of the page: -- `header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile. -- `sidebarStart`: content rendered in the left side or start side of the page -- `main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components. -- `sidebarEnd`: content rendered in the right side or end side of the page -- `footer`: content rendered in the bottom of the page +- `header`: Content rendered at the top of the page, typically including a `` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile. +- `sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side). +- `main`: Content rendered in the center of the page, typically including a `` or ``, along with a `` filled with 1 or more `` components. +- `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side). +- `footer`: Content rendered at the bottom of the page. -The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props. +To customize the background image of the `` and `` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `` component by using the `gradientLight` and `gradientDark` props. ```ts file="CompassBasic.tsx" @@ -44,32 +44,26 @@ The background image of the `Compass` and `CompassHero` may be customized by usi ### With alternate footer -When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page. +When `footer` is used, its content will fill the width of the screen. By default, when content inside the footer grows, the height and placement of the start and end sidebars will adjust to allow for the change. To modify this behavior and render footer content without interfering with the sidebars, instead place a `` inside the `main` section. This will render content at the bottom of the page between the 2 sidebars, rather than across the entire bottom of the page. ```ts file="CompassMainFooterDemo.tsx" ``` -### Demo - -```ts isFullscreen file="CompassDemo.tsx" - -``` - ## Composable structure -When building a more custom implementation using Compass components, there are some intended or expected structures that must be present. +When building a more custom implementation with compass components, there are some intended or expected structures that must remain present. ### CompassMainHeader structure -When using the `children` property in the `` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow. +When using the `children` property in the `` component, there are specific structural patterns that you should follow, as shown this general code structure. ```noLive - {Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components} + {Your custom content goes here, which can include the and/or sub-components} -``` +``` \ No newline at end of file diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md new file mode 100644 index 00000000000..16ba72b1624 --- /dev/null +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -0,0 +1,27 @@ +--- +id: Compass +section: AI +subsection: Generative UIs +--- + +import { useRef, useState } from 'react'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon'; +import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; +import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; + +## Demos + +### Compass layout + +This demo showcases an implementation of the following Compass features: + +- Middle navigation in the `header`, featuring top-level primary tabs and a secondary container for sub-tabs. +- Vertical sidebars utilizing `` groups with buttons that use the `isCircle` prop. +- A custom gradient background in the ``, visible in dark mode. +- Background images that automatically adapt to both light and dark modes. +- A `footer` section containing the ``, that could be used for AI text input. + +```ts isFullscreen file="./examples/CompassDemo.tsx" + +``` \ No newline at end of file diff --git a/packages/react-core/src/components/Compass/examples/CompassDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx similarity index 100% rename from packages/react-core/src/components/Compass/examples/CompassDemo.tsx rename to packages/react-core/src/demos/Compass/examples/CompassDemo.tsx From fa457a095434c6c655eb0cb65017bd6450f266fa Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 2 Dec 2025 14:14:36 -0500 Subject: [PATCH 2/3] Capitalizes Compass for consistency --- packages/react-core/src/components/Compass/Compass.tsx | 6 +++--- .../react-core/src/components/Compass/CompassContent.tsx | 2 +- .../src/components/Compass/CompassMainHeader.tsx | 8 ++++---- .../src/components/Compass/CompassMainHeaderContent.tsx | 4 ++-- .../src/components/Compass/CompassMainHeaderTitle.tsx | 4 ++-- .../src/components/Compass/CompassMainHeaderToolbar.tsx | 4 ++-- .../react-core/src/components/Compass/examples/Compass.md | 4 ++-- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx index 4594a4a19e5..01ca2ca0141 100644 --- a/packages/react-core/src/components/Compass/Compass.tsx +++ b/packages/react-core/src/components/Compass/Compass.tsx @@ -6,7 +6,7 @@ import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_com import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark'; export interface CompassProps extends React.HTMLProps { - /** Additional classes added to the compass. */ + /** Additional classes added to the Compass. */ className?: string; /** Content placed at the top of the layout */ header?: React.ReactNode; @@ -30,9 +30,9 @@ export interface CompassProps extends React.HTMLProps { drawerContent?: React.ReactNode; /** Additional props passed to the drawer */ drawerProps?: DrawerProps; - /** Light theme background image path of the compass */ + /** Light theme background image path of the Compass */ backgroundSrcLight?: string; - /** Dark theme background image path of the compass */ + /** Dark theme background image path of the Compass */ backgroundSrcDark?: string; } diff --git a/packages/react-core/src/components/Compass/CompassContent.tsx b/packages/react-core/src/components/Compass/CompassContent.tsx index e91c8668348..1a68057105e 100644 --- a/packages/react-core/src/components/Compass/CompassContent.tsx +++ b/packages/react-core/src/components/Compass/CompassContent.tsx @@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; export interface CompassContentProps extends React.HTMLProps { - /** Content of the main compass area. Typically one or more CompassPanel components. */ + /** Content of the main Compass area. Typically one or more CompassPanel components. */ children: React.ReactNode; /** Additional classes added to the CompassContent */ className?: string; diff --git a/packages/react-core/src/components/Compass/CompassMainHeader.tsx b/packages/react-core/src/components/Compass/CompassMainHeader.tsx index 05407f7c93f..9e52c8e172a 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeader.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeader.tsx @@ -5,8 +5,8 @@ import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar'; import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; -/** The wrapper component for header content in the main compass area. When building out a custom implementation, - * you should ensure any content within the main header is rendered inside a compass panel and main header content wrappers. +/** The wrapper component for header content in the main Compass area. When building out a custom implementation, + * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers. */ export interface CompassMainHeaderProps extends Omit, 'title'> { @@ -18,8 +18,8 @@ export interface CompassMainHeaderProps extends Omit; } diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx index e8d5d49b682..590ecd25427 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx @@ -1,8 +1,8 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; -/** A wrapper component to be passed as custom content for the compass main header. This should also be wrapped - * in a compass panel component. +/** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped + * in a Compass panel component. */ export interface CompassMainHeaderContentProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx index d1fd6aab006..5fd5bc269ac 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx @@ -1,8 +1,8 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; -/** A wrapper component for custom title content to be passed into a compass main header. This should also be wrapped - * by a compass main header content component. +/** A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped + * by a Compass main header content component. */ export interface CompassMainHeaderTitleProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx index ef7f852a844..b09529cfc00 100644 --- a/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx +++ b/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx @@ -1,8 +1,8 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass'; import { css } from '@patternfly/react-styles'; -/** A wrapper component for custom toolbar content to be passed into a compass main header. This should also be wrapped - * by a compass main header content component. +/** A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped + * by a Compass main header content component. */ export interface CompassMainHeaderToolbarProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 3c6751daff7..03949b71750 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -28,7 +28,7 @@ import './compass.css'; ### Basic -In a basic compass layout, content can be passed to the following props to populate different areas of the page: +In a basic Compass layout, content can be passed to the following props to populate different areas of the page: - `header`: Content rendered at the top of the page, typically including a `` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile. - `sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side). @@ -52,7 +52,7 @@ When `footer` is used, its content will fill the width of the screen. By default ## Composable structure -When building a more custom implementation with compass components, there are some intended or expected structures that must remain present. +When building a more custom implementation with Compass components, there are some intended or expected structures that must remain present. ### CompassMainHeader structure From 91f53fa4c5c4186053c0e7b1396c0581fba3deb1 Mon Sep 17 00:00:00 2001 From: Nicole Thoen Date: Thu, 11 Dec 2025 08:21:54 -0500 Subject: [PATCH 3/3] Add CompassMainFooter to props tables --- .../react-core/src/components/Compass/examples/Compass.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 03949b71750..97ddf0933c9 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -12,7 +12,8 @@ propComponents: 'CompassHero', 'CompassMainHeader', 'CompassPanel', - 'CompassMessageBar' + 'CompassMessageBar', + 'CompassMainFooter' ] --- @@ -66,4 +67,4 @@ When using the `children` property in the `` component, there -``` \ No newline at end of file +```