--- 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