[CSS-in-JS] Global style reset with emotion (#5122)

* global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * Pulling our reset from global styles * SVG `hacks` directly in reset file * Fixed reset import * euiprovider; reset styles * use euiprovider with emotion/cache in docs * Decision clean up * Fixing a few things for legacy dark mode based on not having a provider * Revert "Fixing a few things for legacy dark mode based on not having a provider" This reverts commit 127f12e. * Actually keeping `colorMode` even if `theme = null` * Fixing merge * Moved reset sass folder to `legacy` * fix wiki * euiprovider docs * fix provider docs * remove commented import Co-authored-by: cchaos <caroline.horn@elastic.co>
elastic · Oct 6, 2021 · 3b60df7 · 3b60df7
1 parent f00cacc
commit 3b60df7
Show file tree

Hide file tree

Showing 36 changed files with 743 additions and 350 deletions.
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.0.0",
+    "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/jest": "^11.1.0",
     "@emotion/react": "^11.1.1",

diff --git a/src-docs/src/components/guide_page/index.js b/src-docs/src/components/guide_page/index.js
@@ -1,3 +1,5 @@
 export { GuidePage } from './guide_page';
 
 export { GuidePageChrome } from './guide_page_chrome';
+
+export { GuidePageHeader } from './guide_page_header';
diff --git a/src-docs/src/components/index.js b/src-docs/src/components/index.js
@@ -7,7 +7,7 @@ export {
 
 export { GuideMarkdownFormat } from './guide_markdown_format';
 
-export { GuidePage, GuidePageChrome } from './guide_page';
+export { GuidePage, GuidePageChrome, GuidePageHeader } from './guide_page';
 
 export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container';
 

diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx
@@ -2,12 +2,11 @@ import React from 'react';
 import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
-import { EuiThemeProvider } from '../../../../src/services';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
 const defaultState = {
-  theme: THEME_NAMES[0],
+  theme: THEME_NAMES[2],
   changeTheme: (themeValue: EUI_THEME['value']) => {
     applyTheme(themeValue);
   },
@@ -49,12 +48,7 @@ export class ThemeProvider extends React.Component<object, State> {
           changeTheme: this.changeTheme,
         }}
       >
-        <EuiThemeProvider
-          theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
-          colorMode={theme.includes('light') ? 'light' : 'dark'}
-        >
-          {children}
-        </EuiThemeProvider>
+        {children}
       </ThemeContext.Provider>
     );
   }

diff --git a/src-docs/src/index.html b/src-docs/src/index.html
@@ -14,6 +14,7 @@
     <meta property="og:image" content="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7">
     <meta property="og:url" content="hhttps://elastic.github.io/eui">
     <meta name="twitter:card" content="summary_large_image">
+    <style id="emotion-global-insert"></style>
   </head>
   <body class="guideBody">
     <div id="guide"></div>

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -170,6 +170,8 @@ import { PortalExample } from './views/portal/portal_example';
 
 import { ProgressExample } from './views/progress/progress_example';
 
+import { ProviderExample } from './views/provider/provider_example';
+
 import { RangeControlExample } from './views/range/range_example';
 
 import { TreeViewExample } from './views/tree_view/tree_view_example';
@@ -476,6 +478,7 @@ const navigation = [
       OverlayMaskExample,
       PortalExample,
       PrettyDurationExample,
+      ProviderExample,
       ResizeObserverExample,
       ResponsiveExample,
       TextDiffExample,

diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
@@ -1,18 +1,21 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
-import { GuidePageChrome, ThemeContext } from '../components';
+import createCache from '@emotion/cache';
+import { GuidePageChrome, ThemeContext, GuidePageHeader } from '../components';
 import { translateUsingPseudoLocale } from '../services';
 
 import {
   EuiErrorBoundary,
   EuiPage,
   EuiContext,
   EuiPageBody,
+  EuiProvider,
 } from '../../../src/components';
 
+import { EUI_THEMES } from '../../../src/themes';
+
 import { keys } from '../../../src/services';
-import { GuidePageHeader } from '../components/guide_page/guide_page_header';
 
 import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
 import favicon32Prod from '../images/favicon/prod/favicon-32x32.png';
@@ -21,6 +24,11 @@ import favicon16Dev from '../images/favicon/dev/favicon-16x16.png';
 import favicon32Dev from '../images/favicon/dev/favicon-32x32.png';
 import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';
 
+const emotionCache = createCache({
+  key: 'eui-docs',
+  container: document.querySelector('#emotion-global-insert'),
+});
+
 export class AppView extends Component {
   componentDidUpdate(prevProps) {
     if (prevProps.currentRoute.path !== this.props.currentRoute.path) {
@@ -36,7 +44,7 @@ export class AppView extends Component {
     document.removeEventListener('keydown', this.onKeydown);
   }
 
-  renderContent() {
+  render() {
     const { children, currentRoute, toggleLocale, locale, routes } = this.props;
     const { navigation } = routes;
 
@@ -53,63 +61,63 @@ export class AppView extends Component {
     const isLocalDev = window.location.host.includes('803');
 
     return (
-      <>
-        <Helmet>
-          <title>{`${this.props.currentRoute.name} - Elastic UI Framework`}</title>
-          <link
-            rel="icon"
-            type="image/png"
-            href={isLocalDev ? favicon16Dev : favicon16Prod}
-            sizes="16x16"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            href={isLocalDev ? favicon32Dev : favicon32Prod}
-            sizes="32x32"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            href={isLocalDev ? favicon96Dev : favicon96Prod}
-            sizes="96x96"
-          />
-        </Helmet>
-        <GuidePageHeader
-          onToggleLocale={toggleLocale}
-          selectedLocale={locale}
-        />
-        <EuiPage paddingSize="none">
-          <EuiErrorBoundary>
-            <GuidePageChrome
-              currentRoute={currentRoute}
-              navigation={navigation}
-              onToggleLocale={toggleLocale}
-              selectedLocale={locale}
-            />
-          </EuiErrorBoundary>
-
-          <EuiPageBody panelled>
+      <ThemeContext.Consumer>
+        {({ theme }) => (
+          <EuiProvider
+            cache={emotionCache}
+            theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
+            colorMode={theme.includes('light') ? 'light' : 'dark'}
+          >
+            <Helmet>
+              <title>{`${this.props.currentRoute.name} - Elastic UI Framework`}</title>
+              <link
+                rel="icon"
+                type="image/png"
+                href={isLocalDev ? favicon16Dev : favicon16Prod}
+                sizes="16x16"
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                href={isLocalDev ? favicon32Dev : favicon32Prod}
+                sizes="32x32"
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                href={isLocalDev ? favicon96Dev : favicon96Prod}
+                sizes="96x96"
+              />
+            </Helmet>
             <EuiContext i18n={i18n}>
-              <ThemeContext.Consumer>
-                {(context) => {
-                  return React.cloneElement(children, {
-                    selectedTheme: context.theme,
+              <GuidePageHeader
+                onToggleLocale={toggleLocale}
+                selectedLocale={locale}
+              />
+              <EuiPage paddingSize="none">
+                <EuiErrorBoundary>
+                  <GuidePageChrome
+                    currentRoute={currentRoute}
+                    navigation={navigation}
+                    onToggleLocale={toggleLocale}
+                    selectedLocale={locale}
+                  />
+                </EuiErrorBoundary>
+
+                <EuiPageBody panelled>
+                  {React.cloneElement(children, {
+                    selectedTheme: theme,
                     title: currentRoute.name,
-                  });
-                }}
-              </ThemeContext.Consumer>
+                  })}
+                </EuiPageBody>
+              </EuiPage>
             </EuiContext>
-          </EuiPageBody>
-        </EuiPage>
-      </>
+          </EuiProvider>
+        )}
+      </ThemeContext.Consumer>
     );
   }
 
-  render() {
-    return this.renderContent();
-  }
-
   onKeydown = (event) => {
     if (event.target !== document.body) {
       return;

diff --git a/src-docs/src/views/guidelines/getting_started.md b/src-docs/src/views/guidelines/getting_started.md
@@ -88,6 +88,20 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 
 You can consume EUI in standalone projects, such as plugins and prototypes.
 
+### Using the global provider
+
+For EUI to work correctly, set up `EuiProvider` at the root of your application.
+
+```js
+import { EuiProvider } from '@elastic/eui'
+
+const App = ({ Component }) => (
+  <EuiProvider>
+    <Component />
+  </EuiProvider>
+);
+```
+
 ### Importing compiled CSS
 
 Most of the time, you just need the compiled CSS, which provides the styling for the React components.
@@ -96,40 +110,27 @@ Most of the time, you just need the compiled CSS, which provides the styling for
 import '@elastic/eui/dist/eui_theme_light.css';
 ```
 
-Other compiled themes include:
+For the dark theme, you can import
+
 ```js
 import '@elastic/eui/dist/eui_theme_dark.css';
 ```
-```js
-import '@elastic/eui/dist/eui_theme_amsterdam_light.css';
-```
-```js
-import '@elastic/eui/dist/eui_theme_amsterdam_dark.css';
-```
-
 ### Using our Sass variables on top of compiled CSS
 
 If you want to build **on top** of the EUI theme by accessing the Sass variables, functions, and mixins, you'll need to import the Sass globals in addition to the compiled CSS mentioned above. This will require `style`, `css`, `postcss`, and `sass` loaders.
 
 First import the correct colors file, followed by the globals file.
 
 ```scss
-@import '@elastic/eui/src/themes/eui/eui_colors_light.scss';
-@import '@elastic/eui/src/themes/eui/eui_globals.scss';
+@import '@elastic/eui/src/themes/amsterdam/_colors_light.scss';
+@import '@elastic/eui/src/themes/amsterdam/_globals.scss';
 ```
 
 For the dark theme, swap the first import for the dark colors file.
 
 ```scss
-@import '@elastic/eui/src/themes/eui/eui_colors_dark.scss';
-@import '@elastic/eui/src/themes/eui/eui_globals.scss';
-```
-
-If you want to use the new, but in progress Amsterdam theme, you can import it similarly.
-
-```scss
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals.scss';
+@import '@elastic/eui/src/themes/amsterdam/_colors_dark.scss';
+@import '@elastic/eui/src/themes/amsterdam/_globals.scss';
 ```
 
 ### Using Sass to customize EUI
@@ -144,21 +145,13 @@ Here is an example setup.
 // mytheme.scss
 $euiColorPrimary: #7B61FF;
 
-@import '@elastic/eui/src/themes/eui/eui_colors_light.scss';
-@import '@elastic/eui/src/themes/eui/eui_globals.scss';
+@import '@elastic/eui/src/themes/amsterdam/theme_light.scss';
 ```
 
 ### Fonts
 
 By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence.
 
-```scss
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
-```
-
-The Amsterdam theme uses the latest version of Inter that can be grabbed from Google Fonts as well.
-
 ```scss
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 ```