Decision for Cohort 1 Products - 11/21/21

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a079b6c0-73dc-49e3-a9b8-62d8a9d66569/decision-making.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a079b6c0-73dc-49e3-a9b8-62d8a9d66569/decision-making.png" width="40px" /> Design + Eng teams have agreed to try out MUI in WellMoney and the rails-react-starter. The consensus was that our most important criteria included 1) a large range of ready-made, accessible components with plenty of online support available and 2) a negligible learning curve; MUI checked every box. Components from Ant Design may still be pulled in individually if a particular use case is compelling enough. However, as some products we develop may be mobile, we may need to look at the separate Ant Design Mobile library.

Tailwind CSS is still of technical interest to the team, but is too piecemeal in its offerings and infinitely customizable to meet the straightforward needs of the team at this time. It introduces too much variability to control for right now, given that we are a newer team just getting our bearings in this unique studio context.

</aside>

Background

Design System & Component Libraries

• @Sonali Zaveri performed light research on design systems before the engineering team joined and leaned toward Ant Design based on availability of complex components and theming capabilities.
• Previous discussions with Engineering and Design discussed that Material UI may be too opinionated stylistically and over-tailored to Android device UIs.
• Bootstrap has come up as a safe choice that most of the team is familiar with, but @Lael Birch and @Talia Rhodes have worked with it extensively building out edX's Paragon React library and there are concerns about accessibility there.
• @Rachael Serur has worked exhaustively with Ant Design previously at MobileSmith Health for all frontends at the company. While it does provide complex components out-of-the-box, custom styling requires heavy overriding and promotes substandard coding practices (e.g., pulling in Ant's styles, targeting their Ant-specific class names, and overriding complex CSS styling + JS behavior rather than rolling our own functionality modularly). The best option available for high levels of styling customization is to also use Less CSS, which is a negligible compromise but will have long-lasting ramifications across all projects.

Requirements

Design

• Nice-to-have:
  • Figma libraries/resources available for designers
  • Grid control
• Must-haves:
  • Good color palette control and generation abilities
  • Good font control

Engineering

• Must-haves:
  • Grid control
  • Mobile-friendly (esp. something like datepickers, dropdowns, steppers)
  • High accessibility ratings across all components
  • Active open-source community, frequent updates, and responsive team
  • Very light styling for fast styling control, allowing for greater visual customization with less effort
  • Compatible with most modern frontend tooling, e.g., Sass, webpack, CSS modules, Typescript, no barriers against JS-in-CSS in case any projects head in that direction in the future
• Component-level version control
• Flexible, highly modular components
• Reasonably semantic

Component Needs

• Toggle for full list of needed components