salt-ds
salt-ds copied to clipboard
jpmorganchase
Static List Component
Description:
We need to create a Figma design for a static list component that includes interactable elements within each list item. This component will be used for scenarios such as a list of files or a list of items in a checkout basket. The design should support theming to ensure it can be easily adapted to different visual styles.
Tasks:
Define Component Structure:
Outline the basic structure and layout of the list. Ensure the design is flexible and can accommodate various types of content. Design Interactable Elements:
Consider Including common interactable elements such as: Edit and delete buttons Checkboxes for selection Dropdown menus for actions Ensure these elements are intuitive and user-friendly. Support Theming:
Create a base theme for the list component. Define design tokens (colors, typography, spacing, etc.) that can be easily modified for each theme. Provide examples of the list component in each theme
- [ ] Density (HD, MD, LD, TD)
- [ ] Mode (Light, Dark)
Create Figma Components:
Develop reusable Figma components for the list and its interactable elements. Ensure components are well-organized and named consistently. Prototype Interactions:
Add interactive prototypes to demonstrate how the interactable elements function. Include hover, active, and focus states for all interactable elements. Documentation:
Document the design specifications and guidelines for the list component.
Include instructions on how to apply different themes. Provide usage examples and best practices. Deliverables: A Figma file containing the designed static list component with interactable elements. Themed versions of the list component. Interactive prototypes demonstrating element functionality. Comprehensive documentation within the Figma file.
### Dependencies
- [ ] #2873
Notes
Salt and Pepper to collaborate on single solution for file upload pattern using Salt File Upload component, and create Salt Pattern docs.
Should support:
- Upload from file browser
- Drag & Drop upload
- Validation
Agreed to create 'Static List' (or similar) component that can be used as the basis for File Upload, Comments, Cart patterns. Next steps, @ivan-calderon and Asmita to audit patterns and consolidate set of requirements for component.
Good to consider from community question - preview image selected before upload
Goal: create a Static List component that can be used for File Upload use-cases
Goal: Design review and complete spec including new Static List, instead of a more File Upload pattern a11y review required