---
# System prepended metadata

title: v3 Component Sync (4/5/22)
tags: [' component library', v3]

---

---
tags: v3, component library
---

# v3 Component Sync (4/5/22)

## Shared Goals and Process

- Went through some of the goals outlined by Jord and Helle
- Creating designs in codespace and the importance of alignment so that we have *composable UI* and organizing our code in this way we have gains across the board

## Workflow and Process

- Establish the pipeline -- work on 1 component at a time
    - Pass design -> dev -> joint review
- Focus on the global styles (typography, spacing, color) first so that we can leverage this throughout
- How do we want to handle variants?
- Pulling designs from design system -- what would bottom up design processes look like?
- Checkpoint system:
    - Design and dev go through a checklist
    - Design and dev audit the UI in Storybook once ready and make adjustments to ensure up to spec
- Lots of technical process work in Figma -- do we want to include another layer as a guide that shows the variants and component states in a concise way?

### Big Questions

- Do we design layouts *first* or do we build from the component blocks upward?
- Over time the design system would be what we all pull from

## Initial Team Feedback

- How can we make our time together as useful as possible?

### Design Team Feedback and Thoughts

- Once components are ready can focus on UX instead of constantly recreating components
- Speeds up workflows by integrating components that already exist
- Getting pseudoclasses for things and using these as names for variants
    - Helps streamline the naming conventions that we can align on
- Looking toward Material Design for inspiration about why/how we use UI as devs
    - Establish usage patterns and then include this in our docs
    - Example: When would we want to use certain button sizes?

### Dev Team Feedback and Thoughts

- Act of naming things helps move us toward systems thinking for how we're approaching the component library
- Need for compound UI for things like the input table
- We need the globals and colors and the component designs to be up to spec and then we move forward one component at a time with the review process

## How Do We Move Forward?

- Similar process for creating cards for design (including the states and variants that need to be represented)
- Create a chart/checklist so that we'd be able to align along these lines for speccing
    - How would Avi prefer to break up some of the work so that we can prioritize it?
- "Create Pattern Library" -> move to more meaningful Milestone chunks
    - So far, Adrienne and Ven have been making the components as they work on Summoner and Avi has been taking what's been designed and then building it out
    - Currently caught up, so how do we want to organize the work moving forward
    - Things in the Figma with (IP) are what's been started but some of the others don't have specific designs yet
    - Getting design sign off -> ready to be specced for devs -> implemented -> reviewed

## General Next Steps

- Documentation system: Storybook MDX or custom docs site?
    - Start with Storybook and then go from there and build out a custom site if we need
- Now that InputWrapper is largely done Jord can move on to the other atoms 
- Emphasize colors and typography cards and create Milestones
- What semantic/meaningful names do we want to have for our colors?
- How do we want to move forward with the Summoner UI? Do we want to replace these as we update the component library?
    - How do we go in the other direction and start building from the atomic level?
- Begin using the lifecycle for Invisible Suburbs and identify some components to move forward with and test out our workflow process
- Who is responsible for moving cards from Backlog into Design?

## Specific TODOs

- [ ] Create Milestones and split out cards for the component library and pattern library
- [ ] Create Card for Creating Global Styles Object for Color and scaffolding with the values (100 - 900)
- [x] Move the current component cards into Backlog and move each one through our design workflow
- [ ] Deploy Rage version of Storybook to GitHub Pages or Chromatic
- [ ] Deploy Sage version of Storybook to GitHub Pages or Chromatic
- [ ] Add cards for everything at the global level as a starting point
    - [ ] Colors
    - [ ] Typography
    - [ ] Spacing
- [ ] Add cards for common atoms/molecules that aren't already represented
- [x] Add Design Review lane back into the Kanban board