Static List Component Design

[joshwooding]

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

• [x] Density (HD, MD, LD, TD)
• [x] 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

[origami-z]

Modify dates, shifting order with other components

[origami-z]

Need to rescope to file item, pattern will come later

[mark-tate]

Goal: M(5)

• Kickoff
• Design of File Item completed by EOS

[yunjungyeh]

Asmita & @ivan-calderon scheduled kick-off on 26 Wed

[bhoppers2008]

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.

[origami-z]

Good to consider from community question - preview image selected before upload

[mark-tate]

Goal: create a Static List component that can be used for File Upload use-cases

[mark-tate]

Goal: Design complete by EOS

[mark-tate]

Goal: Design review and complete spec including new Static List, instead of a more File Upload pattern a11y review required

[mark-tate]

Goal: Ready for Dev by EOS

[origami-z]

Aug 12 - design review later today

[origami-z]

Reopen - design discussion still on going

[yunjungyeh]

Wed 21 Aug - branch in Figma Salt Next merged