chore(docs): Add demo for version selector card#644
chore(docs): Add demo for version selector card#644rebeccaalpert merged 1 commit intopatternfly:mainpatternfly/chatbot:mainfrom rebeccaalpert:options-cardrebeccaalpert/virtual-assistant:options-cardCopy head branch name to clipboard
Conversation
|
Preview: https://chatbot-pr-chatbot-644.surge.sh A11y report: https://chatbot-pr-chatbot-644-a11y.surge.sh |
394fa85 to
e39d92c
Compare
srambach
left a comment
There was a problem hiding this comment.
If you already have the utility classes imported, or you want to do it that way, I suggested a couple that could replace redefining the custom properties. But if not, how you have it is fine.
...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
|
Thanks @srambach - added utility classes! |
kaylachumley
left a comment
There was a problem hiding this comment.
Hey! this is looking really good! just a few comments /changes. Couldn't find the right spot to leave the change request so ill attach some screenshots with notes. lmk if you have questions
changes:
- lets use a compact label instead of the default size label
- lets use an 8px spacer between the text and label. use this token
pf-t--global--spacer--gap--text-to-element--default - lets use 16px padding between the primary and link button at the bottom of the card. using this
pf-t--global--spacer--md
|
All set @kaylachumley! I'm skipping using pf-t--global--spacer--gap--text-to-element--default explicitly because it'll get confusing to read the code (using PF layout components with their own spacing tokens), but I adjusted what we were telling it to do to get what you want. |
ec147ba to
3f83010
Compare
|
Rebased after merging other card. |
3f83010 to
02bd162
Compare
02bd162 to
39a55a2
Compare
|
Rebased again after @wise-king-sullyman's merged; moved other examples to use Bot, cleaned up imports a bit, and moved code block down a little. |
|
🎉 This PR is included in version 6.4.0-prerelease.12 🎉 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.
Figma: https://www.figma.com/design/SMwsdq7hW9MuTXrCUmMzJh/Spec--Version-Selector-Card?m=auto&t=jtOQxhPMXabq1wmC-6
Demo: https://chatbot-pr-chatbot-644.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. Left label blue as-is intentionally to avoid token overrides there.
Will bug CSS friends for review as well - want to see which of them has time.