Component Sync: April 5, 2022

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

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?

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?

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

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

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?

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