Page Comparison

...

Level of effort

Initial prototype – 1 - 2 weeks

• Add the two CSS-in-JS libraries to Paragon

• Create a ParagonProvider component for injecting a theme

• Create theme.js and an edx.org theme that match our bootstrap theme variables

• Attempt the conversion of 3 - 6 components to CSS-in-JS and remove their SCSS dependencies.

UPDATE:

...

Proposed decisions

• We will adopt a CSS in JS technology and incrementally replace our dependency on Bootstrap 4 in Paragon components (leaving css utils available)
• We will develop plan to leverage this technology incrementally (and with only one breaking change) and in a reversible way. We will also outline the expected end-state of the adoption.
• We will adopt styled-components and styled-system as our CSS-in-JS and theming implementations.

...

Updates after prototype

After prototyping out several different solutions this PR is the desired path forward https://github.com/edx/paragon/pull/702 and brand updates https://github.com/edx/brand-openedx/pull/5 https://github.com/edx/brand-edx.org/pull/34 .

Between the leading css-in-js implementations:

...

•  Adam Butterworth (Deactivated) Will create step by step plan for what we do from here. Adam is out for 2 weeks starting 5/3. Ben Warzeski (Deactivated) will develop or execute on the plan further if needed.
•  Ben Warzeski (Deactivated) With this PR above Adam only transitioned one component in order to keep the PR comprehensible. Would you work on transitioning 2 - 5 more? Some are more difficult that others (Button I worked through, and was mildly happy with the result, but it forces us to make a lot of decisions on how we handle variants and colors in the theme so I didn’t want to start there)

https://github.com/edx/paragon/pull/702

https://github.com/edx/brand-edx.org/pull/34

https://github.com/edx/brand-openedx/pull/5

•  Ben Warzeski (Deactivated) With this PR above Adam only transitioned one component in order to keep the PR comprehensible. Would you work on transitioning 2 - 5 more? Some are more difficult that others (Button I worked through, and was mildly happy with the result, but it forces us to make a lot of decisions on how we handle variants and colors in the theme so I didn’t want to start there)

https://github.com/edx/paragon/pull/712

https://github.com/edx/brand-edx.org/pull/35

https://github.com/edx/brand-openedx/pull/6

•  David Joy (Deactivated) Decide if it’s acceptable to merge these PRs. We will meet 18 May 2021.

•  We need to decide how the work of transitioning components to CSS-in-JS gets done. Should this be done by a contractor, internally, or swarm internally.

...

Initial adoption by MFEs – 2 - 4 weeks

David Joy (Deactivated) What do you think?

...

Incremental conversion of components to CSS-in-JS – Estimate TBD after prototype.

SWAG right now 26 engineer weeks (10 complete per week x 2). Paragon currently exports a total of 129 components. Also see component usages on the doc site.

...

• Bootstrap CSS utilities stay in our codebase forever.

  • Paragon continues to offer them as an export. New MFEs do not include the Paragon SASS.

  • Some engineers continue to use Bootstrap CSS utilities because they are used to them or they support a particular need.

• Some deprecated components are never converted to CSS-in-JS.

  • They remain in the code base for over a year

  • We have avoided pushing teams off of deprecated components, in the past, we could continue this approach.

Adam B’s Belief – I believe adopting CSS in JS will significantly improve the frontend developer experience both in MFEs and in edx-platform. Components in our React applications will be more modular, and engineers more free to create unique visual exceptions to code without worrying how they will impact the system as a whole.

Proposed decisions

...

• • continue this approach.

Adam B’s Belief – I believe adopting CSS in JS will significantly improve the frontend developer experience both in MFEs and in edx-platform. Components in our React applications will be more modular, and engineers more free to create unique visual exceptions to code without worrying how they will impact the system as a whole.

...