Add Attachments and Footer Actions Slots#2924
Conversation
…nimble into users/vgleason/footer-action
|
I have not updated the example apps yet because there doesn't appear to be a nimble chip wrapper in react or blazor yet. |
| .footer-actions ::slotted(${toggleButtonTag}), | ||
| .footer-actions ::slotted(${anchorButtonTag}), | ||
| .footer-actions ::slotted(${menuButtonTag}) { | ||
| height: ${controlSlimHeight}; |
There was a problem hiding this comment.
Do we have guidance from UX about what other control types should look like when in the attachments slot? To me it looks kind of weird to have slim buttons but not a slim select.
Though if we do want a slim select we'll probably want to add chromatic tests to make sure it looks ok, so that could happen in a separate PR.
There was a problem hiding this comment.
The chip also looks pretty bulky to me personally. If UX agrees and wants to slim it down, we can follow the approach in #2896
There was a problem hiding this comment.
Yes, we are going to go with that approach since the normal chips look pretty bulky.
For now, attachments slots would only have chips + a button
Only known thing we need in the footer-action button + select.
I would assume that list is complete, but I made a change to just apply that height to all slotted items.
|
|
||
| .attachments.has-content { | ||
| display: flex; | ||
| flex-wrap: wrap; |
There was a problem hiding this comment.
Do we have guidance from UX on overflow behavior? Wrapping looks fine to me for now, though for other controls like tab and breadcrumb and stepper we've also made them scrollable and added arrow buttons to do the scrolling. This can be a follow up conversation, just want to make sure we're thinking about it.
But if we're happy with the current behavior, let's add a matrix test state that adds many slotted items so that we get test coverage for that configuration.
There was a problem hiding this comment.
UX guidance will be to limit the height of the attachments section to three rows. Anything that overflows should be bumped into a little overflow menu (opened with a button + three dots icon). Also will be applying the slim control height per the suggestions in that other PR.
Open to suggestions on how to implement that in the component. First thought was maybe a bool in the API that we could set to true on overflow so clients can know when to bump additional attachments into that overflow menu?
There was a problem hiding this comment.
Per our conversation: for initial version, we will leave it up to clients to implement overflow behavior.
2 participants
Pull Request
🤨 Rationale
Adding footer actions and attachments slots in accordance with the spec.
👩💻 Implementation
Added new sections for attachments and footer-actions and adjusted styling and spacing to accommodate the new sections.
🧪 Testing
Added tests
✅ Checklist