refactor(styles,react): update layer styles to work in inline themes (#10226)

joshblack · tay1orjones · kodiakhq[bot] · web-flow · commit 83f414f2c918 · 2021-12-07T23:17:37.000Z
* refactor(styles,react): update layer styles to work in inline themes

* test(styles): update layer-set test to layer

* test(carbon-react): update snapshot

* test(styles): update styles snapshot and imports

* test(react): add layer import to Popover e2e test

* fix(layer): move layer context to appropriate folder

* test(carbon-react): update snapshots

* docs(carbon-react): update layer import path in story

* fix(react): update theme context export and fix stories

Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js
@@ -8,19 +8,10 @@
 import './styles.scss';
 
 import { configureActions } from '@storybook/addon-actions';
-import * as FeatureFlags from '@carbon/feature-flags';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
-import { settings } from 'carbon-components';
-
-FeatureFlags.merge({
-  'enable-css-custom-properties': true,
-  'enable-css-grid': true,
-  'enable-v11-release': true,
-});
-
-settings.prefix = 'cds';
+import { unstable_ThemeContext as ThemeContext } from '../src';
 
 export const globalTypes = {
   locale: {
@@ -153,6 +144,10 @@ export const decorators = [
       document.documentElement.lang = locale;
     }, [locale]);
 
-    return <Story {...context} />;
+    return (
+      <ThemeContext.Provider value={{ theme }}>
+        <Story {...context} />
+      </ThemeContext.Provider>
+    );
   },
 ];
diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
@@ -25,4 +25,5 @@
 
 body {
   background: styles.$background;
+  color: styles.$text-primary;
 }
diff --git a/packages/carbon-react/__tests__/index-test.js b/packages/carbon-react/__tests__/index-test.js
@@ -213,6 +213,7 @@ Array [
   "unstable_PageSelector",
   "unstable_Pagination",
   "unstable_ProgressBar",
+  "unstable_ThemeContext",
   "unstable_TreeNode",
   "unstable_TreeView",
   "unstable_useContextMenu",
diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -93,9 +93,12 @@
   "sideEffects": [
     "es/index.js",
     "lib/index.js",
+    "src/index.js",
     "es/feature-flags.js",
     "lib/feature-flags.js",
+    "src/feature-flags.js",
     "es/prefix.js",
-    "lib/prefix.js"
+    "lib/prefix.js",
+    "src/prefix.js"
   ]
 }
diff --git a/packages/carbon-react/src/components/Icons/Icons.stories.js b/packages/carbon-react/src/components/Icons/Icons.stories.js
@@ -16,17 +16,17 @@ export default {
 export const Default = () => {
   return (
     <>
-      <section>
+      <section className="demo-icon-example">
         <h2>16 pixel (default)</h2>
         <Bee />
       </section>
 
-      <section>
+      <section className="demo-icon-example">
         <h2>20 pixel</h2>
         <Bicycle size={20} />
       </section>
 
-      <section>
+      <section className="demo-icon-example">
         <h2>32 pixel</h2>
         <ChevronUp size={32} />
       </section>
diff --git a/packages/carbon-react/src/components/Icons/Icons.stories.scss b/packages/carbon-react/src/components/Icons/Icons.stories.scss
@@ -1,4 +1,11 @@
-section {
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+.demo-icon-example {
   display: flex;
   width: 10rem;
   justify-content: space-between;
diff --git a/packages/carbon-react/src/index.js b/packages/carbon-react/src/index.js
@@ -204,6 +204,7 @@ export {
   unstable_ProgressBar,
   unstable_Section as Section,
   unstable_Stack as Stack,
+  unstable_ThemeContext,
   unstable_Theme as Theme,
   unstable_Tooltip as Tooltip,
   unstable_TreeNode,
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9223,6 +9223,11 @@ Map {
     },
   },
   "unstable_usePrefix" => Object {},
+  "unstable_ThemeContext" => Object {
+    "$$typeof": Symbol(react.context),
+    "Consumer": "React.Consumer",
+    "Provider": "React.Provider",
+  },
   "unstable_Theme" => Object {
     "propTypes": Object {
       "as": Object {
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -221,6 +221,7 @@ Array [
   "unstable_TabPanel",
   "unstable_TabPanels",
   "unstable_Theme",
+  "unstable_ThemeContext",
   "unstable_Tooltip",
   "unstable_TreeNode",
   "unstable_TreeView",
diff --git a/packages/react/src/components/Layer/LayerContext.js b/packages/react/src/components/Layer/LayerContext.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export const LayerContext = React.createContext(1);
diff --git a/packages/react/src/components/Layer/index.js b/packages/react/src/components/Layer/index.js
@@ -9,19 +9,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { LayerContext } from './LayerContext';
+
+const levels = ['one', 'two', 'three'];
+const MAX_LEVEL = levels.length - 1;
 
 export function Layer({
   as: BaseComponent = 'div',
   className: customClassName,
   children,
   ...rest
 }) {
+  const level = React.useContext(LayerContext);
   const prefix = usePrefix();
-  const className = cx(`${prefix}--layer`, customClassName);
+  const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
+
   return (
-    <BaseComponent {...rest} className={className}>
-      {children}
-    </BaseComponent>
+    // The level should be between 0 and MAX_LEVEL
+    <LayerContext.Provider value={Math.max(0, Math.min(level + 1, MAX_LEVEL))}>
+      <BaseComponent {...rest} className={className}>
+        {children}
+      </BaseComponent>
+    </LayerContext.Provider>
   );
 }
 
diff --git a/packages/react/src/components/Popover/__tests__/Popover-test.e2e.js b/packages/react/src/components/Popover/__tests__/Popover-test.e2e.js
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import '@carbon/styles/scss/_layer.scss';
 import '@carbon/styles/scss/components/popover/_index.scss';
 import '../next/story.scss';
 
diff --git a/packages/react/src/components/Theme/index.js b/packages/react/src/components/Theme/index.js
@@ -9,8 +9,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { LayerContext } from '../Layer/LayerContext';
 
-const ThemeContext = React.createContext({
+export const ThemeContext = React.createContext({
   theme: 'white',
 });
 
@@ -30,6 +31,7 @@ export function Theme({
     [`${prefix}--g10`]: theme === 'g10',
     [`${prefix}--g90`]: theme === 'g90',
     [`${prefix}--g100`]: theme === 'g100',
+    [`${prefix}--layer-one`]: true,
   });
   const value = React.useMemo(() => {
     return {
@@ -39,9 +41,11 @@ export function Theme({
 
   return (
     <ThemeContext.Provider value={value}>
-      <BaseComponent {...rest} className={className}>
-        {children}
-      </BaseComponent>
+      <LayerContext.Provider value={1}>
+        <BaseComponent {...rest} className={className}>
+          {children}
+        </BaseComponent>
+      </LayerContext.Provider>
     </ThemeContext.Provider>
   );
 }
diff --git a/packages/react/src/components/Theme/next/Theme-story.scss b/packages/react/src/components/Theme/next/Theme-story.scss
@@ -7,10 +7,25 @@
 
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/zone';
 
 .theme-section {
   padding: 1rem;
   background: theme.$background;
   color: theme.$text-primary;
 }
+
+.theme-layer-example {
+  padding: 1rem;
+  background: theme.$background;
+  color: theme.$text-primary;
+}
+
+.theme-layer-header {
+  margin-bottom: 1rem;
+}
+
+.theme-with-layer {
+  padding: 1rem;
+  background: theme.$layer;
+  color: theme.$text-primary;
+}
diff --git a/packages/react/src/components/Theme/next/Theme.stories.js b/packages/react/src/components/Theme/next/Theme.stories.js
@@ -8,6 +8,7 @@
 import './Theme-story.scss';
 import React from 'react';
 import { Theme, useTheme } from '../../Theme';
+import { Layer } from '../../Layer';
 import mdx from './Theme.mdx';
 
 export default {
@@ -83,6 +84,39 @@ export const UseTheme = () => {
 
 UseTheme.storyName = 'useTheme';
 
+export const WithLayer = () => {
+  function Layers() {
+    const { theme } = useTheme();
+    return (
+      <article className="theme-layer-example">
+        <header className="theme-layer-header">{theme} theme</header>
+        <div className="theme-with-layer">Layer one</div>
+        <Layer>
+          <div className="theme-with-layer">Layer two</div>
+          <Layer>
+            <div className="theme-with-layer">Layer three</div>
+          </Layer>
+        </Layer>
+      </article>
+    );
+  }
+
+  return (
+    <>
+      <Layers />
+      <Theme theme="g10">
+        <Layers />
+        <Theme theme="g90">
+          <Layers />
+          <Theme theme="g100">
+            <Layers />
+          </Theme>
+        </Theme>
+      </Theme>
+    </>
+  );
+};
+
 const PlaygroundStory = (args) => {
   return (
     <Theme {...args}>
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -250,6 +250,7 @@ export {
 } from './components/Tabs';
 export { usePrefix as unstable_usePrefix } from './internal/usePrefix';
 export {
+  ThemeContext as unstable_ThemeContext,
   Theme as unstable_Theme,
   useTheme as unstable_useTheme,
 } from './components/Theme';
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -11,6 +11,7 @@ Array [
   "scss/config",
   "scss/feature-flags",
   "scss/grid",
+  "scss/layer",
   "scss/motion",
   "scss/reset",
   "scss/spacing",
@@ -26,7 +27,6 @@ Array [
   "scss/utilities/focus-outline",
   "scss/utilities/high-contrast-mode",
   "scss/utilities/keyframes",
-  "scss/utilities/layer-set",
   "scss/utilities/placeholder-colors",
   "scss/utilities/rotate",
   "scss/utilities/skeleton",
diff --git a/packages/styles/__tests__/styles-test.js b/packages/styles/__tests__/styles-test.js
@@ -23,6 +23,7 @@ const filepaths = [
   'scss/config',
   'scss/feature-flags',
   'scss/grid',
+  'scss/layer',
   'scss/motion',
   'scss/reset',
   'scss/spacing',
@@ -38,7 +39,6 @@ const filepaths = [
   'scss/utilities/focus-outline',
   'scss/utilities/high-contrast-mode',
   'scss/utilities/keyframes',
-  'scss/utilities/layer-set',
   'scss/utilities/placeholder-colors',
   'scss/utilities/rotate',
   'scss/utilities/skeleton',
diff --git a/packages/styles/index.scss b/packages/styles/index.scss
@@ -15,4 +15,6 @@
 
 @use 'scss/reset';
 @forward 'scss/fonts';
+@forward 'scss/layer';
+@forward 'scss/zone';
 @use 'scss/components';
diff --git a/packages/styles/scss/__tests__/layer-test.js b/packages/styles/scss/__tests__/layer-test.js
@@ -14,13 +14,13 @@ const css = require('css');
 
 const { render } = SassRenderer.create(__dirname);
 
-describe('scss/utilities/layer-set', () => {
+describe('scss/layer', () => {
   it('should map layer set values to scoped $prefix--layer selectors', async () => {
     const { result } = await render(`
-      @use '../../config' with (
+      @use '../config' with (
         $prefix: 'cds',
       );
-      @use '../layer-set' with (
+      @use '../layer' with (
         $layer-sets: (
           field: (
             rgba(0, 0, 0, 0.3),
@@ -51,10 +51,14 @@ describe('scss/utilities/layer-set', () => {
       });
     }
 
-    const layer1 = findSelector(stylesheet, ':root');
-    const layer2 = findSelector(stylesheet, '.cds--layer');
-    const layer3 = findSelector(stylesheet, '.cds--layer .cds--layer');
+    const root = findSelector(stylesheet, ':root');
+    const layer1 = findSelector(stylesheet, '.cds--layer-one');
+    const layer2 = findSelector(stylesheet, '.cds--layer-two');
+    const layer3 = findSelector(stylesheet, '.cds--layer-three');
 
+    expect(findDeclaration(root, '--cds-field').value).toBe(
+      'rgba(0, 0, 0, 0.3)'
+    );
     expect(findDeclaration(layer1, '--cds-field').value).toBe(
       'rgba(0, 0, 0, 0.3)'
     );
diff --git a/packages/styles/scss/_layer.scss b/packages/styles/scss/_layer.scss
diff --git a/packages/styles/scss/_theme.scss b/packages/styles/scss/_theme.scss
diff --git a/packages/styles/scss/_zone.scss b/packages/styles/scss/_zone.scss
diff --git a/packages/styles/scss/utilities/_layer-set.scss b/packages/styles/scss/utilities/_layer-set.scss

Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,5 @@`
`25`	`25`
`26`	`26`	`body {`
`27`	`27`	`background: styles.$background;`
	`28`	`+ color: styles.$text-primary;`
`28`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,9 +93,12 @@`
`93`	`93`	`"sideEffects": [`
`94`	`94`	`"es/index.js",`
`95`	`95`	`"lib/index.js",`
	`96`	`+ "src/index.js",`
`96`	`97`	`"es/feature-flags.js",`
`97`	`98`	`"lib/feature-flags.js",`
	`99`	`+ "src/feature-flags.js",`
`98`	`100`	`"es/prefix.js",`
`99`		`- "lib/prefix.js"`
	`101`	`+ "lib/prefix.js",`
	`102`	`+ "src/prefix.js"`
`100`	`103`	`]`
`101`	`104`	`}`