Eui: [Meta] CSS-in-JS + theming rollout plan

[chandlerprall]

This is intended to reduce the number of breaking change releases to only 1, document the expected upgrade process both within EUI and by consuming applications, and be transparent about our timeline.

Feature branch

https://github.com/elastic/eui/tree/feature/css-in-js | #4511

PRs

• [x] [CSS-in-JS] Context and foundation #4440
• [x] [CSS-in-JS] Support extensions via overrides prop #4547
• [ ] [CSS-in-JS] Convert EuiMark #4575

Open issues/questions

• [x] Support EuiIcon coloring/theming

Upgrade process

EUI

• TBD (how to convert components)

Consuming apps

• TBD (babel, etc)
• Vanilla JS support (Kibana plugins; basic, immutable theme variables)
• SSR support (verify + link to emotion's docs)
• Update Gatsby and Next starters

Rollout

In rough order of completion

• [ ] Coordinate with Kibana ops team with implementing babel changes
• [ ] EUI breaking/major release with peerDep on @emotion/react (soon) from this point forward using only the generated CSS is not supported, EUI must be used through React
• [ ] Convert components, including removing component-specific SCSS (over the remainder of the year)
• [ ] Deprecate using EUI's SCSS mixins/variables
• [ ] Deprecate using EUI's classnames
• [ ] Remove class names (after a lengthy deprecation period)

[hetanthakkar1]

@chandlerprall, I want to work on this feature, Could you please tell me how should i proceed

[chandlerprall]

@hetanthakkar1 this doesn't have discrete, well-defined tasks at the moment. When the core functionality has landed, we will create a new [Meta] issue similar to #1557 in order to track the SCSS->Emotion conversion progress. At that point we'll be able to take contributions in this area; for now, we are still exploring internally and laying the ground work for that process.

[hetanthakkar1]

okay @chandlerprall thank you

[cchaos]

@hetanthakkar1 , We've got a great list of good-first-issues that you may want to start with.

[hetanthakkar1]

@cchaos yeah! thank you. I will check them out

[thompsongl]

Support EuiIcon coloring/theming

Support for theming EuiIcon will require continued use of class names (or other DOM selectors), but can still be done in with Emotion. Targeting paths not accessible from the component file itself (e.g., fillSecondary, fillNegative) will be done in much the same manner as in Sass; something like:

const iconStyles = css`

  [base styles]

  &.euiIcon--app {
    fill: ${theme.colors.euiTextColor};

    // This provides the default secondary color
    .euiIcon__fillSecondary {
      fill: ${makeGraphicContrastColor(theme.colors.euiColorSecondary)};
    }
  }
`

There is likely to be a different pattern for adding stateful classes/logic for things like .euiIcon--app, but the gist remains.

[j-m]

Just to confirm, we'll still be able to easily override things, right?

I have 200 lines of CSS that override EUI, for instance, for #2184 I added

.euiButton {
  transform: none;
}

[thompsongl]

Just to confirm, we'll still be able to easily override things, right?

Yes. Class names will be available for the foreseeable future. They will eventually be deprecated, but some other method will be recommended.