From ea9ade8f1262fbbb61315dc192858a29cb63f066 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 6 Nov 2025 11:21:35 -0500 Subject: [PATCH 1/5] add callouts for new props, add beta flags to some examples --- .../src/components/Compass/examples/Compass.md | 11 +++++++++++ .../src/components/DataList/examples/DataList.md | 3 ++- .../src/components/Table/examples/Table.md | 7 +++++-- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 60433d031ad..24a6a548cb2 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -33,6 +33,17 @@ The background image of the `Compass` and `CompassHero` may be customized by usi ### Demo +When building a compass layout, there several useful variants and props exposed on other Patternfly components: + +- `isPlain` on both [DataList](/components/data-list#plain) and [Table](/components/table#table-plain) +- `isVertical` on [ActionList](/components/action-list#vertical-action-list) +- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation) +- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle) +- `isPill` on [Drawer](/components/drawer#pill) +- `subtitle` on [CardTitle](/components/card#card-with-subtitle) +- `isThinking` or `pf-v6-m-thinking` on CompassPanel and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles) +- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles) + ```ts isFullscreen file="CompassDemo.tsx" ``` diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md index d449b39f607..fe8b4d204db 100644 --- a/packages/react-core/src/components/DataList/examples/DataList.md +++ b/packages/react-core/src/components/DataList/examples/DataList.md @@ -39,9 +39,10 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat ```ts file="./DataListCompact.tsx" ``` + ### Plain -```ts file="./DataListPlain.tsx" +```ts file="./DataListPlain.tsx" isBeta ``` diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index 3e12221ae7b..3dcfb07c329 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -78,10 +78,13 @@ Some general notes: ```ts file="TableBasic.tsx" ``` -### Table Plain -``` file="TablePlain.tsx" + +### Plain + +```ts file="TablePlain.tsx" isBeta ``` + ### Custom row wrapper, header tooltips & popovers - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space From 5f663df834cccb4a0497f9584c2c3e373578f9dc Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 6 Nov 2025 11:30:21 -0500 Subject: [PATCH 2/5] feat(Compass): add more docs to call out new props --- .../src/components/Compass/examples/Compass.md | 16 ++++++++-------- .../src/components/DataList/examples/DataList.md | 2 +- .../src/components/Table/examples/Table.md | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 24a6a548cb2..fc1a6d80b81 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -35,14 +35,14 @@ The background image of the `Compass` and `CompassHero` may be customized by usi When building a compass layout, there several useful variants and props exposed on other Patternfly components: -- `isPlain` on both [DataList](/components/data-list#plain) and [Table](/components/table#table-plain) -- `isVertical` on [ActionList](/components/action-list#vertical-action-list) -- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation) -- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle) -- `isPill` on [Drawer](/components/drawer#pill) -- `subtitle` on [CardTitle](/components/card#card-with-subtitle) -- `isThinking` or `pf-v6-m-thinking` on CompassPanel and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles) -- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles) +- `isPlain` on both [DataList](/components/data-list#plain) and [Table](/components/table#table-plain). This flag will set a transparent background for these components, allow the glass effect in a wrapping `CompassPanel` to appear as the background. +- `isVertical` on [ActionList](/components/action-list#vertical-action-list). This flag sets the orientation on `ActionList` to support vertical icon lists for the sidebars. +- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation. +- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape. +- `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look. +- `subtitle` on [CardTitle](/components/card#card-with-subtitle). This prop allows a smaller text description to be set in a `Card`'s title easily. +- `isThinking` or `pf-v6-m-thinking` on CompassPanel and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pusling color animation around the component. +- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. ```ts isFullscreen file="CompassDemo.tsx" diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md index fe8b4d204db..5bf74749b4f 100644 --- a/packages/react-core/src/components/DataList/examples/DataList.md +++ b/packages/react-core/src/components/DataList/examples/DataList.md @@ -42,7 +42,7 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat ### Plain -```ts file="./DataListPlain.tsx" isBeta +```ts file="./DataListPlain.tsx" ``` diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index 3dcfb07c329..26229a6c796 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -81,7 +81,7 @@ Some general notes: ### Plain -```ts file="TablePlain.tsx" isBeta +```ts file="TablePlain.tsx" ``` From 57f0125aeeb263e130f51af733479e6c40bf731e Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 6 Nov 2025 11:30:58 -0500 Subject: [PATCH 3/5] update docs --- packages/react-core/src/components/Compass/examples/Compass.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index fc1a6d80b81..1e419d2af6d 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -41,7 +41,7 @@ When building a compass layout, there several useful variants and props exposed - `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape. - `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look. - `subtitle` on [CardTitle](/components/card#card-with-subtitle). This prop allows a smaller text description to be set in a `Card`'s title easily. -- `isThinking` or `pf-v6-m-thinking` on CompassPanel and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pusling color animation around the component. +- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pusling color animation around the component. - `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. ```ts isFullscreen file="CompassDemo.tsx" From 082601731674357c045e3e184e14c04a6c0edb2d Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 6 Nov 2025 11:33:51 -0500 Subject: [PATCH 4/5] update wording --- packages/react-core/src/components/Compass/examples/Compass.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 1e419d2af6d..d8b6f7a9bf5 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -33,7 +33,7 @@ The background image of the `Compass` and `CompassHero` may be customized by usi ### Demo -When building a compass layout, there several useful variants and props exposed on other Patternfly components: +To facilitate building a compass layout, there several useful variants and props exposed on other Patternfly components that may be useful: - `isPlain` on both [DataList](/components/data-list#plain) and [Table](/components/table#table-plain). This flag will set a transparent background for these components, allow the glass effect in a wrapping `CompassPanel` to appear as the background. - `isVertical` on [ActionList](/components/action-list#vertical-action-list). This flag sets the orientation on `ActionList` to support vertical icon lists for the sidebars. From d7eece68eda2f9c8b9ec0b9c920f0d26a031fbf0 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 6 Nov 2025 11:41:23 -0500 Subject: [PATCH 5/5] move new props callouts to org demos --- .../src/components/Compass/examples/Compass.md | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index d8b6f7a9bf5..60433d031ad 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -33,17 +33,6 @@ The background image of the `Compass` and `CompassHero` may be customized by usi ### Demo -To facilitate building a compass layout, there several useful variants and props exposed on other Patternfly components that may be useful: - -- `isPlain` on both [DataList](/components/data-list#plain) and [Table](/components/table#table-plain). This flag will set a transparent background for these components, allow the glass effect in a wrapping `CompassPanel` to appear as the background. -- `isVertical` on [ActionList](/components/action-list#vertical-action-list). This flag sets the orientation on `ActionList` to support vertical icon lists for the sidebars. -- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation. -- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape. -- `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look. -- `subtitle` on [CardTitle](/components/card#card-with-subtitle). This prop allows a smaller text description to be set in a `Card`'s title easily. -- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pusling color animation around the component. -- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. - ```ts isFullscreen file="CompassDemo.tsx" ```