Add docked navigation demos by gabipodolnikova · Pull Request #913 · patternfly/chatbot

gabipodolnikova · 2026-09-21T13:40:15Z

Summary

Add a Canvas demo with docked navigation.
Add a fullscreen ChatBot demo with docked navigation and chat history.
The Canvas demo lives under the Canvas pattern page.
The fullscreen ChatBot demo lives under the ChatBot extension pages.

Jira

https://redhat.atlassian.net/browse/PF-4634

patternfly-build · 2026-09-21T13:43:03Z

Preview: https://chatbot-pr-chatbot-913.surge.sh

A11y report: https://chatbot-pr-chatbot-913-a11y.surge.sh

kaylachumley · 2026-09-21T14:19:35Z

Hey! Is this the right area for the demo? https://chatbot-pr-chatbot-913.surge.sh/extensions/chatbot/overview/demo#fullscreen-chatbot-with-docked-navigation

Im not seeing a docked nav rail? Im also not seeing a canvas demo with a docked nav either.

Note on the icon question you sent on slack: technically both the hamburger bars and the bars with an arrow are correct. If you check out this demo you can see that we added a micro animation that changes the icon on hover to show the user the direction in which the nav or drawer opens. in this case, our history drawer would open on click next to the docked nav rail. The animation is newer since you came back!

rebeccaalpert · 2026-09-22T13:54:53Z

@kaylachumley I think it's https://chatbot-pr-chatbot-913.surge.sh/patterns/canvas/demo/with-docked-navigation/ and https://chatbot-pr-chatbot-913.surge.sh/extensions/chatbot/overview/demo/fullscreen-chatbot-with-docked-navigation/.

kaylachumley · 2026-09-22T17:42:37Z

Looking good! Are we able to add the hamburger menu micro animation? I know you mentioned that having some custom css.. also can we please add a tooltip to the pencil icon in the docked nav on hover? the tooltip to say "New chat". Thank you!!

kaylachumley

Looks good! per our discussion about the settings icon and making that functional, can we replicate how the settings open like this prototype? - Thanks gabi!

https://www.figma.com/proto/MSr6kVEOuAxmPOkjg7x8PO/branch/KHVQOlQEMu8J9PA0r2eSul/PatternFly-6--Patterns---Extensions?node-id=13730-55381&viewport=-8865%2C4947%2C0.5&t=4he38sfS4S6gcvTG-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=13559%3A39630&page-id=

rebeccaalpert

Overall this is looking good to me! Thank you. We're missing some functionality from the other Canvas demo - can you take a look to get parity? I think @kaylachumley will want consistency there. We may also want a border around the avatar in the docked nav due to the background color.

Docked nav avatar	ChatBot avatar

Close button should have tooltip/label:

Popover on label:

Launch canvas from menu/hide Canvas label when closed:

CodeEditor content is different:

I see that Page is required for Hamburger navigations - I think your workaround works. I mentioned this to @mcoker so he is aware.

Logic is different for sending a message between the two Canvas demos as well (original mocks an AI call for Bot response; new demo doesn't).

mcoker · 2026-09-23T19:59:20Z

+  .pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: path("M5,1 L9,1");
+    --pf-v6-c-button--hamburger-icon--arrow--path: path("M3,7 L1,5 L3,3");
+    --pf-v6-c-button--hamburger-icon--bottom--path: path("M9,9 L5,9");
+    --pf-v6-c-button--hover__icon--ScaleX: -1;
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  }
+
+  .pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
+  }


This is totally cool. But there are a couple of other ways you could do it.

Use the button component vars here for these values. These will be a little more resistant to breaking changes than using the manual values. Also this will make the arrows work properly in RTL - right now the arrows don't change for RTL. You could use @patternfly/react-tokens instead of hardcoding the vars, but it doesn't look like you're importing that so I don't think it's worth the hassle.

Suggested change

.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {

--pf-v6-c-button--hamburger-icon--top--path: path("M5,1 L9,1");

--pf-v6-c-button--hamburger-icon--arrow--path: path("M3,7 L1,5 L3,3");

--pf-v6-c-button--hamburger-icon--bottom--path: path("M9,9 L5,9");

--pf-v6-c-button--hover__icon--ScaleX: -1;

--pf-v6-c-button__icon--TransitionDelay: 0s;

--pf-v6-c-button--hover__icon--TransitionDelay: 0s;

}

.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {

--pf-v6-c-button--hover__icon--ScaleX: 1;

}

.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {

--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);

--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);

--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);

--pf-v6-c-button__icon--TransitionDelay: 0s;

--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);

}

.pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {

--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);

}

Add an event listener for hover/focus/aria-expanded and apply hamburgerVariant="expand" and hamburgerVariant="collapse" as needed. That would be ideal as far as always staying in sync with core, but I realize that might be a little heavy handed for something CSS can do easily.

mcoker

Checked out the canvas demo and the fullscreen demo and both lgtm!

thatblindgeye

When closing the "+" attach menu in the MessageBar via Escape key when a menu option has focus (like the "Alerts" item), focus gets lost/send back to the top of the page. The "+" menu toggle should get focus back.
Similar to above, when selecting an option from that attach menu or the "Model" menu, focus should return to the toggle rather than getting lost/sent to the top of the page.
The Label in the canvas panel doesnt get triggered via keyboard Space or Enter.
The Canvas close button on the right panel doesnt have its tooltip triggered via focus, only hover.
When closing the Canvas via the close button in the right panel or via the Label in the MEssageBar, focus gets lost and should return similar to the other Canvas demos (they move focus to the MessageBar input upon closing canvas)
The close button in the Settings pane doesnt have a tooltip on hover or focus. Additionally, when clicking that button, focus should return to the "Settings" cog icon button.

From what I can tell the only thing that also applies to the "with code editor" Canvas demo that was previously merged in is the Canvas panel close button doesn't have its tooltip triggered on focus.

thatblindgeye · 2026-09-29T13:59:40Z

+    { id: 'theme', label: 'Theme', field: dropdownField('theme', theme, ['System', 'Light', 'Dark'], setTheme) },
+    {
+      id: 'language',
+      label: 'Language',
+      field: dropdownField('language', language, ['Auto-detect', 'English'], setLanguage)
+    },
+    { id: 'voice', label: 'Voice', field: dropdownField('voice', voice, ['Bot', 'User'], setVoice) },


For these 3 menu toggles, the accessible name should end up as "[current selection], [label]". So the Theme menu toggle should have a name of "System, Theme" if "System" is the currently selected option.

Also not sure if we should be using another <label> element for visible text to the left of all these controls. The Switch one is a little odd since the Switch can have its own visible label, but we're opting to not use that in favor of rendering a separate label that still gets tied to it. It's hard to tell with the normal buttons since I dont think there's any onClick handler on them in the demo, but I'd also worry about clicking text that's outside the button triggering the button action (especially for a "Delete all" button).

Could we instead just make the visible text plain text, and if we need to use that text to label a control, use aria-labelledby on the control? The Switch could really just be the only one to do this, since the MenuToggles could use aria-label to create the previously mentioned accessible name, and the buttons dont need any other label since they have visible text.

Hmm so, this is taken from what was already in the repo - Settings.tsx also CompactSettings.tsx. So I can change it, but I'll change those files too. And yes there are no onClick actions now.

Well...I have not changed anything in Settings and I removed what was reused from it in the demos. I ended up making the row descriptions plain text in these demos so clicking text next to an action button—especially “Delete all”—doesn’t activate it. I kept the shared SettingsForm behavior unchanged so this demo-specific choice doesn’t alter label behavior in there.

github-actions · 2026-09-30T17:31:07Z

🎉 This PR is included in version 6.9.0-prerelease.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

gabipodolnikova added 3 commits September 21, 2026 15:21

feat(docs): add fullscreen docked nav demo

f34e871

style(docs): format fullscreen docked nav demo

a8be46c

test(History): fix drawer escape assertion

66d45ac

feat(Chatbot): add Canvas docked navigation demo

35fbf35

rebeccaalpert requested review from kaylachumley, rebeccaalpert and thatblindgeye September 22, 2026 13:56

feat(docs): align docked nav demos

cebd9d0

gabipodolnikova changed the title ~~WIP: Add docked navigation demos~~ Add docked navigation demos Sep 23, 2026

kaylachumley requested changes Sep 23, 2026

View reviewed changes

rebeccaalpert reviewed Sep 23, 2026

View reviewed changes

Comment thread packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.md

mcoker reviewed Sep 23, 2026

View reviewed changes

gabipodolnikova added 4 commits September 24, 2026 11:43

feat(docs): add docked nav settings

02a55b1

fix(docs): address docked nav review feedback

5d5eaeb

Merge upstream/main into feat/fullscreen-docked-nav-demo

b980a21

fix(docs): restore Canvas export icon import

3be4240

gabipodolnikova requested review from kaylachumley, mcoker and rebeccaalpert September 25, 2026 07:50

mcoker approved these changes Sep 25, 2026

View reviewed changes

kaylachumley approved these changes Sep 28, 2026

View reviewed changes

thatblindgeye requested changes Sep 29, 2026

View reviewed changes

fix(docs): address docked nav review feedback

813c9fa

gabipodolnikova requested a review from thatblindgeye September 30, 2026 09:37

thatblindgeye approved these changes Sep 30, 2026

View reviewed changes

rebeccaalpert merged commit 5948d8f into patternfly:main Sep 30, 2026
6 checks passed

rebeccaalpert linked an issue Sep 30, 2026 that may be closed by this pull request

[Chatbot] - Demo with Docked nav support in fullscreen and canvas mode #906

Closed

2 of 6 tasks

github-actions Bot added the released on @prerelease label Sep 30, 2026

Conversation

gabipodolnikova commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

patternfly-build commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kaylachumley commented Sep 21, 2026

Uh oh!

rebeccaalpert commented Sep 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kaylachumley commented Sep 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kaylachumley left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rebeccaalpert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thatblindgeye Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

gabipodolnikova Sep 30, 2026

Choose a reason for hiding this comment

Uh oh!

gabipodolnikova Sep 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Sep 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

gabipodolnikova commented Sep 21, 2026 •

edited

Loading

patternfly-build commented Sep 21, 2026 •

edited

Loading

rebeccaalpert commented Sep 22, 2026 •

edited

Loading

kaylachumley commented Sep 22, 2026 •

edited

Loading

kaylachumley left a comment •

edited

Loading

rebeccaalpert left a comment •

edited

Loading

thatblindgeye left a comment •

edited

Loading