chore(docs): Add demo for live progress summary card#642
chore(docs): Add demo for live progress summary card#642rebeccaalpert merged 7 commits intopatternfly:mainpatternfly/chatbot:mainfrom rebeccaalpert:installer-cardrebeccaalpert/virtual-assistant:installer-cardCopy head branch name to clipboard
Conversation
Adding demo for card as custom component. It is not something we ship, but providing proof we can enable complex card behavior as an injected component.
|
Preview: https://chatbot-pr-chatbot-642.surge.sh A11y report: https://chatbot-pr-chatbot-642-a11y.surge.sh |
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
nicolethoen
left a comment
There was a problem hiding this comment.
Functionally it works.
I recommend getting some CSS review just to be sure about the necessity of the overrides.
I am also interested if it'd be possible for these progress bars or codeblocks to update live as progress is made. I'd imagine not? unless the consumer is passing in a function to determine what's rendered and able to keep calling it over time?
Likely not something we need to address today, but interesting to think about.
|
I'll polish this a little bit tomorrow @nicolethoen but it should be possible: Screen.Recording.2025-08-05.at.5.18.23.PM.movI can add this to the demo so they know 100%. |
becae01 to
baba2aa
Compare
Assisted-by: Cursor
baba2aa to
52a4515
Compare
thatblindgeye
left a comment
There was a problem hiding this comment.
lgtm
Just in regards to the progress updating in the example, we may just want to make sure it won't have a ton of announcements automatically via AT - maybe a button to toggle the progress updates if that's the case?
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
Also moved some vars up
|
Thanks @srambach - all set. I updated the simulated example to not announce the progress time since it was constant, but it seems to me like the other updates are less annoying. |
edonehoo
left a comment
There was a problem hiding this comment.
left one minor suggestion if you want, but otherwise this seems good
...patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
Outdated
Show resolved
Hide resolved
…mples/Messages/UserMessageWithExtraContent.tsx Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
kaylachumley
left a comment
There was a problem hiding this comment.
Hey! just a few spacing comments!
-
Can we change the code block border radius to be var(--pf-t--global--border--radius--small) instead of the medium variable?
-
Can we add 16px padding between the accordion header and the code block content area?
- Is it possible for the progress bar and the progress bar description to span the entire width of the container?
| </CardBody> | ||
| </CardExpandableContent> | ||
| <CardFooter> | ||
| <Button isBlock variant="secondary" icon={<ArrowRightIcon />} iconPosition="end"> |
There was a problem hiding this comment.
can we use the tertiary button variant here? thanks! i think the class is 'pf-m-tertiary'
I don't think so without a lot of work - the way it's set up, it's like [box 1 -------------][box 2], where box 1 is set up to take up as much space as it can. I addressed the other things @kaylachumley! |
|
🎉 This PR is included in version 6.4.0-prerelease.11 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Adding demo for card as custom component. It is not something we ship, but providing proof we can enable complex card behavior as an injected component. Demo includes simulation of possible installation behavior. Assisted-by: Cursor Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Adding demo for card as custom component. It is not something we ship, but providing proof we can enable complex card behavior as an injected component.
Figma: https://www.figma.com/design/2nEieXSdotB9EB6Qa8juWw/Spec--Live-Progress-Summary-Card?m=auto&t=jtOQxhPMXabq1wmC-6
Demo: https://chatbot-pr-chatbot-642.surge.sh/patternfly-ai/chatbot/messages#custom-message-content
Mark's design is a divergence from PF defaults - did some overrides here to get us closer to the design, but can back things out or move styles around - just let me know.