Skip to content

Add docked navigation demos #913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gabipodolnikova wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Add docked navigation demos #913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f34e871
feat(docs): add fullscreen docked nav demo
gabipodolnikova Sep 21, 2026
a8be46c
style(docs): format fullscreen docked nav demo
gabipodolnikova Sep 21, 2026
66d45ac
test(History): fix drawer escape assertion
gabipodolnikova Sep 21, 2026
35fbf35
feat(Chatbot): add Canvas docked navigation demo
gabipodolnikova Sep 21, 2026
cebd9d0
feat(docs): align docked nav demos
gabipodolnikova Sep 23, 2026
02a55b1
feat(docs): add docked nav settings
gabipodolnikova Sep 24, 2026
5d5eaeb
fix(docs): address docked nav review feedback
gabipodolnikova Sep 24, 2026
b980a21
Merge upstream/main into feat/fullscreen-docked-nav-demo
gabipodolnikova Sep 25, 2026
3be4240
fix(docs): restore Canvas export icon import
gabipodolnikova Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 34 additions & 11 deletions ...ages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ source: demo

import { useState, useRef, useCallback, useEffect, FunctionComponent, ReactNode } from 'react';
import {
Avatar,
Brand,
Divider,
Drawer,
Expand All @@ -21,6 +22,9 @@ Flex,
FlexItem,
Label,
MenuToggle,
Nav,
NavItem,
NavList,
Popover,
Select,
SelectList,
Expand All @@ -43,16 +47,26 @@ ChatbotHeaderMain,
ChatbotHeaderMenu,
ChatbotHeaderTitle
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
import RhUiTaskFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-fill-icon';
import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
import RhUiBackupIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-backup-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
Comment thread
rebeccaalpert marked this conversation as resolved.
import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
import RhUiSaveIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-save-icon';
import RhUiRedoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon';
import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
import RhUiServerUploadFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-upload-fill-icon';
import RhUiAiInfoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-info-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import RhUiExportIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-export-icon';
import { useDropzone } from 'react-dropzone';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
Expand Down Expand Up @@ -86,17 +100,18 @@ The general recommended structure is as follows:

## Class names

| Class name | Purpose |
| --- | --- |
| `pf-chatbot__canvas` | Container for the fullscreen canvas layout and its background. |
| `pf-chatbot__canvas-drawer` | Styles the drawer that contains the canvas panel. |
| `pf-chatbot__canvas-section` | Styles the section used within the drawer for focus. |
| `pf-chatbot__canvas-body` | Ensures the drawer content body fills the available height. |
| `pf-chatbot__canvas-column` | Arranges the canvas header, content, and footer vertically. |
| `pf-chatbot__canvas-panel` | Styles the canvas drawer panel and removes the default panel spacing. |
| `pf-chatbot__canvas-panel-body` | Provides the canvas panel content area and its spacing. |
| `pf-chatbot__canvas-head` | Styles and positions the canvas panel header and close action. |
| `pf-chatbot__canvas-editor` | Makes the code editor fill the available canvas space. |
| Class name | Purpose |
| ------------------------------- | --------------------------------------------------------------------- |
| `pf-chatbot__canvas` | Container for the fullscreen canvas layout and its background. |
| `pf-chatbot__canvas-drawer` | Styles the drawer that contains the canvas panel. |
| `pf-chatbot__canvas-section` | Styles the section used within the drawer for focus. |
| `pf-chatbot__canvas-body` | Ensures the drawer content body fills the available height. |
| `pf-chatbot__canvas-column` | Arranges the canvas header, content, and footer vertically. |
| `pf-chatbot__canvas-panel` | Styles the canvas drawer panel and removes the default panel spacing. |
| `pf-chatbot__canvas-panel-body` | Provides the canvas panel content area and its spacing. |
| `pf-chatbot__canvas-head` | Styles and positions the canvas panel header and close action. |
| `pf-chatbot__canvas-editor` | Makes the code editor fill the available canvas space. |
| `pf-chatbot__canvas-docked-nav` | Optional vertical navigation rail for a canvas layout. |

## Demos

Expand All @@ -107,3 +122,11 @@ This demo shows canvas mode being used to render a PatternFly [code editor](/com
```js file="./Canvas.tsx" isFullscreen

```

### With docked navigation

This demo shows canvas mode with an optional docked navigation rail. The rail can toggle chat history and start a new chat without closing the canvas.

```js file="./CanvasWithDockedNav.tsx" isFullscreen

```
20 changes: 10 additions & 10 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,16 @@ import ChatbotHeader, {
ChatbotHeaderMenu,
ChatbotHeaderTitle
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import RhUiAiInfoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-info-icon';
import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
import RhUiTaskFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-fill-icon';
import RhUiSaveIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-save-icon';
import RhUiRedoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon';
import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
import RhUiServerUploadFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-upload-fill-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
import { RhUiAiInfoIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-info-icon';
import { RhUiImageFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
import { RhUiAddIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
import { RhUiTaskFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-fill-icon';
import { RhUiSaveIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-save-icon';
import { RhUiRedoIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon';
import { RhUiUndoIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
import { RhUiServerUploadFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-upload-fill-icon';
import { RhUiNotificationFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import { RhUiCalendarFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
import { useDropzone } from 'react-dropzone';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
Expand Down
Loading
Loading