search

hackoregon / civic

The frontend monorepo for the CIVIC platform.
http://civicplatform.org
MIT License
60 stars 26 forks source link

Update styling in the component library and Storybook to use emotion 10 #435

Closed bradfordjanice closed 5 years ago

bradfordjanice commented 5 years ago

Currently styles are written in multiple ways in the component library, Storybook.

For example: civic/packages/component-library/assets/global.styles.css is CSS.

For consistency, update styles in the component library and Storybook to use css-in-js emotion v.10. Check to make sure all changes to build dependencies are complete before working on this.

DingoEatingFuzz commented 5 years ago

This ticket could use a break down of all the offending components. That way contributors can chip away at the list one by one with smaller PRs.

bradfordjanice commented 5 years ago

Incremental Migration to Emotion 10

Upgrading to Emotion 10 is described on the Emotion website; you will find code examples and more details here: https://emotion.sh/docs/migrating-to-emotion-10

The upgrades to emotion 10 are split into two parts.

  1. Automatically: The first part can be done automatically by using eslint-plugin-emotion at https://emotion.sh/docs/eslint-plugin-emotion#emotion-10-codemods. This will make the following changes: a. Change all react-emotion imports so that styled is imported from @emotion/styled and all the emotion exports are split into a second import. b. Add a css call to the css prop when a template literal is used. c. Add a jsx import and set jsx pragma

  2. Manually (after step 1 is complete): These changes can be made incrementally, by component or story, over time. a. Add compat cache with provider. b. Change css usage to css prop.

    Update these components in the directory component-library/src: BaseMap Button ChartContainer ChartTitle CivicCardStack CivicSandboxDashboard CivicSandboxMap CivicStoryCard Collapsable DataTable Dropdown Footer HeatMap Hero HexOverlay IconMap LandingPage Logo MapOverlay MapTooltip Media Navigation PackageSelectorBox PageLayout PathMap PDF Placeholder PullQuote RechartsPie Sandbox Sankey ScatterPlotMap ScrollToTop SimpleLegend Slider StoryCard Tag VictoryTheme Note: Research the following components to see whether they need to be updated: ?AreaChart ?BarChart ?BoundaryMap ?Chart ?ChartData ?GradientBox ?HorizontalBarChart ?Icon ?LeafletMap ?LineChart ?PieChart ?Scatterplot ?ScreenGridMap ?StackedAreaChart

    Update all the style guideline stories in the directory component-library/stories/styleGuideStories In addition, update these stories in the directory component-library/stories: Button CivicSandboxDashboard DropdownMenu LineChart PackageSelectorBox PageLayout Sandbox Scatterplot Slider StackedAreaChart storyStyles

jaronheard commented 5 years ago

Merged into #556