data-sources-app components → design system

[josh-chamberlain]

Context

We have some components stacking up in our app. Let's abstract these into reusable components in the design system, ideally using Tailwind!

Requirements

This is a refactor, so things should work the same but details of appearance may change.

Docs

If any best practices can be derived here for future front end developers, we should make changes to our internal docs or CONTRIBUTING.md or something. We can discuss this.

Open questions

consider: should new css go in global.css or a use a component-level custom CSS file?

• for broadly used, lightly styled components, like containers, use global-styles.css
• for broadly used, uniquely styled components, like buttons, scope styles to the component.
• for uniquely used, uniquely styled things like a map, scope styles to the component.
• Export Vue.js component library, or simply create the component styles here and reference the classes in the vue files elsewhere?

[joshuagraber]

Hey, @josh-chamberlain @kalenluciano @mbodeantor For discussion here:

Open questions consider: should new css go in global.css or a use a component-level custom CSS file?

I think scoping component styles is a good idea. They can always be overridden later in whatever app where the components are used. Does anybody have another opinion about it?

I edited the description above:

for broadly used, lightly styled components, like containers, use global-styles.css. for broadly used, uniquely styled components, like buttons, scope styles to the component. for uniquely used, uniquely styled things like a map, scope styles to the component.

How granular do we want to get with building components? In my opinion, it's good to build components for the interactive elements (buttons, forms, inputs), to ensure accessibility is baked-in. Otherwise, containers, list items, icons, and other lightly styled, globally used components can be defined in component stylesheets that are compiled into the global styles. (We may want to re-evaluate if styles get too bloated, but that's not a problem yet.)

Export Vue.js component library, or simply create the component styles here and reference the classes in the vue files elsewhere?

Export the component library, I think. This will allow components to be used as-is by multiple different applications, where any updates to the component library can be regression tested and rolled out every time the version increments. Does anybody have concerns about that approach?