ibm-products
ibm-products copied to clipboard
carbon-design-system
Add and select pattern
Add and select pattern
Brief description
The goal is to have a coded component that has all the functionality outlined in C&CS Add & Select pattern.
Let's determine if we can leverage WKC‘s current implementation, add missing functionality and do tweaks if something is not aligned with the latest guidelines.
WKC covers the base functionality: – Multi-select non-hierarchical – Single select non-hierarchical + hierarchical – Empty states – Sidepanel with selection – Additional content in sidepanel by click on row – Modifiers and bulk edits
What is missing in current WKC code:
Styling issues: – CTA Button placement – Change grey tag to outline tag
Functionality: – Multi-select hierarchical and navigating the hierarchy: -> Add a single item from hierarchy -> Add a parent item with all associated children -> Add only specific children of a parent item -> Navigate only one level deep in a wide tearsheet – filtering and sorting
Micro-interactions: – Missing motion design for 3 areas: hierarchical browsing, selecting items and showing the additional information in a panel See specs/examples here: https://ibm.ent.box.com/folder/144306963510
Details
Approved add and select pattern Guidelines: Link to Design Link to code WKC
Links to other materials
Sketchfiles Invision prototype Motion prototypes
Design Maintainer(s)
- Owner/main maintainer(s): Marion Brülls
- Second/backup maintainer(s: Oliver Kauselmann, Michael Friess
Contact WKC development: Joanna Janusz, Jakub Rachwalik
Tasks
Before starting work on this epic, please review and complete the following.
- [ ] Initial review of design/existing code
Working in Carbon for IBM Products package
- [ ] Have you reviewed our contribution guidelines?
- [ ] Have you noted our code guidelines?
- [ ] Did you use the CLI to scaffold your new component?
@davidmenendez I added you to the prototype and just in case here is also a public shared link:https://ibm.invisionapp.com/share/TGO0ZD96JED