chore(docs): Add demo for canvas

[rebeccaalpert]

Fixes #899

See https://chatbot-pr-chatbot-901.surge.sh/patterns/canvas for demo.

[patternfly-build]

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

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

[kaylachumley]

Thanks for working on this! This is looking really good. A few notes/adjustments per our discussion from yesterday.

• Make the "generated by AI" label clickable with a popover that's initiated upon click. Here is a screenshot of the text that needs to be in the popover:

• I spoke to nicole about where this demo could live for better visibility and we agreed that it would fit nicely under our Patterns section in the left nav. Can you change the section field in the meta data so this lives under patterns?

• Add in a redo and undo action(icon button) in the code editor toolbar

• Add in a export icon button in the code editor toolbar

• Add in a save icon button in the code editor toolbar

• Add an "x" icon button into the left chatbot header

• Add in the original history drawer icon button in the chatbot header

• Add the "Always review AI-generated content prior to use." footnote below the message bar

[rebeccaalpert]

I'm pushing a commit because it's easier for me to look at here, but I am still working on scoping the styles a little better with the drawerception thing. We are currently a little screwed up. I will work on it some more on Monday.

Also likely want to control focus, but that's complicated by none of the drawer things allowing ref forwarding. May be worth waiting to do that until we can add that in.

[thatblindgeye]

Some structure/verbiage tweaks below, curious of @kaylachumley thoughts. Essentially was thinking of 1) making the introductory content less specific to only 1 example on the page, since who knows if we'll ever add more, 2) having a specific section for the intended structure, and 3) having a "demos" section like wwe typically would.

Some additional comments/questions:

• Is there a reason we aren't creating a wrapper component like CanvasDrawer or anything, and instead telling users the classes that need to be used? If we only want to export class names, I think we should include each class name that is needed in a list and provide a short description of its purpose. This could even just be a markdown table that Core uses for its class listing in docs.
• For the demo, focus should return to the "Message actions" button upon selecting an option. Right noww focus goes back to the top of the page.
• Same as above but when clicking the Canvas label to close it, focus gets lost until you press Tab. Focus could go back to the MessageBar input at that point, similar to wwhat Gemini does.
• Having the message stating "The canvas mode text editor is ready..." already rendered in the demo might be okay, but I feel like we should also have something communicating that Canvas mode has been enabled when manually clicking the action from the actions menu.
• For the Canvas label:
  • The clsoe button aria-label could instead be "Exit canvas mode"
  • The clickable label itself could maybe benefit from "aria-expanded" of true or false, since the Canvas drawer can be "hidden' rather than completely closed
  • When clicking the label to reopen the Canvas drawer, focus should go into the drawer
• For the Canvas drawer, I'm wondering if the "X" icon + the "Close canvas" is appropriate. With the way the demo is setup, clicking the "X" in the Label is the only way to actually close the canvas; the "X" int he drawer more hides or collapses it. I guess the question is, should Canvas be a binary "enabled"/"disabled" state, or should it be a somewhat quais-tri state like it is in the demo: enabled, disabled, enabled but hidden/not active?

[kaylachumley]

LGTM!

[github-actions]

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

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀