feat: add experimental contextual layout token system (#13287)

* chore: rename Layout folder into LayoutDirection * feat: build contextual layout poc * docs: add layoutSize and layoutDensity controls to storybook * chore(contained-list): migrate to contextual layout tokens * chore(content-switcher): migrate to contextual layout tokens * feat(contextual-layout-tokens): add support for redefinition * chore(tag): migrate to contextual layout tokens * feat(contextual-layout-tokens): support multiple properties per group * docs(styles): add contextual layout tokens * chore(button): migrate to contextual layout tokens * docs(contextual-layout-tokens): add reference * chore(icon-button): migrate to contextual layout tokens * fix(code-snippet): adjust style overrides for icon button * docs(contextual-layout-tokens): add sass helper outputs * fix(contained-list): adjust padding-block based on line-height * fix(code-snippet): adjust copy-button overrides * fix(file-uploader): emit layout size * docs(contextual-layout-tokens): add docs to Layout story * fix(code-snippet): pass correct size * docs(contained-list): fix stories * fix(icon-button): make default lg ref #13423 * fix(readme): resolve conflict * chore: align v12 deprecation comments * chore: revert local .all-contributors updates * docs(contextual-layout-tokens): fix comment position * chore: rename storybook layout controls * chore: only show layout controls in dev storybook * fix(button): move icon up 1px * fix(accordion): fix arrow icon position * fix(icon-button): fix icon position * fix(icon-button): fix icon position * fix(overflow-menu): fix icon position * fix(ui-shell): fix header action icon position * fix(code-snippet): fix icon position in button * fix(pagination): fix icon position in button * refactor(contextual-layout-tokens): alternative poc * refactor(contextual-layout-token): implement LayoutConstraint system * refactor(contextual-layout-tokens): re-implement redefine-tokens mixin * docs(contextual-layout-tokens): update docs to reflect refactor * fix(conextual-layout-tokens): remove outdated workarounds * fix(contained-list): make persistent search work with size variants * fix(content-switcher): fix icon-only styles * chore: update datatable snapshot * docs(layout): add information about LayoutConstraint * fix(copy-button): wrap in LayoutConstraint * chore: run prettier * fix: revert unrelated sort change in package.json * chore: update toc of style/docs/sass.md * docs(contextual-layout-tokens): fix css reference * docs(contextual-layout-tokens): fix copy-paste mistake --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 2, 2023 · a1a5282 · a1a5282
1 parent ad1031b
commit a1a5282
Show file tree

Hide file tree

Showing 49 changed files with 1,182 additions and 256 deletions.
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -12,9 +12,49 @@ import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
 import { GlobalTheme } from '../src/components/Theme';
+import { Layout } from '../src/components/Layout';
 
 import theme from './theme';
 
+const devTools = {
+  layoutSize: {
+    name: 'unstable__Layout size',
+    description: "Set the layout context's size",
+    defaultValue: false,
+    toolbar: {
+      showName: true,
+      items: [
+        {
+          value: false,
+          title: 'None',
+        },
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        '2xl',
+      ],
+    },
+  },
+  layoutDensity: {
+    name: 'unstable__Layout density',
+    description: "Set the layout context's density",
+    defaultValue: false,
+    toolbar: {
+      showName: true,
+      items: [
+        {
+          value: false,
+          title: 'None',
+        },
+        'condensed',
+        'normal',
+      ],
+    },
+  },
+};
+
 export const globalTypes = {
   locale: {
     name: 'Locale',
@@ -45,6 +85,7 @@ export const globalTypes = {
       items: ['white', 'g10', 'g90', 'g100'],
     },
   },
+  ...(process.env.NODE_ENV === 'development' ? devTools : {}),
 };
 
 export const parameters = {
@@ -204,7 +245,7 @@ export const parameters = {
 
 export const decorators = [
   (Story, context) => {
-    const { locale, theme } = context.globals;
+    const { layoutDensity, layoutSize, locale, theme } = context.globals;
 
     React.useEffect(() => {
       document.documentElement.setAttribute('data-carbon-theme', theme);
@@ -216,7 +257,9 @@ export const decorators = [
 
     return (
       <GlobalTheme theme={theme}>
-        <Story {...context} />
+        <Layout size={layoutSize || null} density={layoutDensity || null}>
+          <Story {...context} />
+        </Layout>
       </GlobalTheme>
     );
   },

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9263,6 +9263,56 @@ Map {
       },
     },
   },
+  "unstable_Layout" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "as": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "elementType",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "density": Object {
+        "args": Array [
+          Array [
+            "condensed",
+            "normal",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable_LayoutDirection" => Object {
     "propTypes": Object {
       "as": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -225,6 +225,7 @@ describe('Carbon Components React', () => {
         "types",
         "unstable_ComboButton",
         "unstable_FeatureFlags",
+        "unstable_Layout",
         "unstable_LayoutDirection",
         "unstable_Menu",
         "unstable_MenuButton",

diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
@@ -16,13 +16,15 @@ function Accordion({
   className: customClassName,
   disabled = false,
   isFlush = false,
-  size = 'md',
+  size,
   ...rest
 }) {
   const prefix = usePrefix();
+
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
-    [`${prefix}--accordion--${size}`]: size,
+    [`${prefix}--accordion--${size}`]: size, // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start',
   });
   return (

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -3,7 +3,7 @@
 exports[`Accordion should render 1`] = `
 <DocumentFragment>
   <ul
-    class="cds--accordion extra-class cds--accordion--end cds--accordion--md"
+    class="cds--accordion extra-class cds--accordion--end"
   >
     <li
       class="cds--accordion__item child"

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -33,7 +33,7 @@ const Button = React.forwardRef(function Button(
     onMouseEnter,
     onMouseLeave,
     renderIcon: ButtonImageElement,
-    size = 'lg',
+    size,
     tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
@@ -55,10 +55,11 @@ const Button = React.forwardRef(function Button(
 
   const buttonClasses = classNames(className, {
     [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    [`${prefix}--btn--xl`]: size === 'xl',
-    [`${prefix}--btn--2xl`]: size === '2xl',
+    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive, // TODO: V12 - Remove this class
+    [`${prefix}--btn--md`]: size === 'md' && !isExpressive, // TODO: V12 - Remove this class
+    [`${prefix}--btn--xl`]: size === 'xl', // TODO: V12 - Remove this class
+    [`${prefix}--btn--2xl`]: size === '2xl', // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -255,6 +255,7 @@ function CodeSnippet({
       )}
       {!hideCopyButton && (
         <CopyButton
+          size={type === 'multi' ? 'sm' : 'md'}
           disabled={disabled}
           onClick={handleCopyClick}
           feedback={feedback}

diff --git a/packages/react/src/components/ContainedList/ContainedList.js b/packages/react/src/components/ContainedList/ContainedList.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { LayoutConstraint } from '../Layout';
 import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 
@@ -56,16 +57,19 @@ function ContainedList({
   isInset,
   kind = variants[0],
   label,
-  size = 'lg',
+  size,
 }) {
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
 
   const classes = classNames(
     `${prefix}--contained-list`,
-    { [`${prefix}--contained-list--inset-rulers`]: isInset },
+    {
+      [`${prefix}--contained-list--inset-rulers`]: isInset,
+      [`${prefix}--contained-list--${size}`]: size, // TODO: V12 - Remove this class
+      [`${prefix}--layout--size-${size}`]: size,
+    },
     `${prefix}--contained-list--${kind}`,
-    `${prefix}--contained-list--${size}`,
     className
   );
 
@@ -83,7 +87,11 @@ function ContainedList({
         <div id={labelId} className={`${prefix}--contained-list__label`}>
           {label}
         </div>
-        <div className={`${prefix}--contained-list__action`}>{action}</div>
+        <LayoutConstraint
+          size={{ min: 'sm', max: 'xl' }}
+          className={`${prefix}--contained-list__action`}>
+          {action}
+        </LayoutConstraint>
       </div>
       {children && (
         <ul aria-labelledby={labelId}>

diff --git a/packages/react/src/components/ContainedList/ContainedListItem/ContainedListItem.js b/packages/react/src/components/ContainedList/ContainedListItem/ContainedListItem.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { LayoutConstraint } from '../../Layout';
 import { usePrefix } from '../../../internal/usePrefix';
 
 function ContainedListItem({
@@ -55,7 +56,11 @@ function ContainedListItem({
         </div>
       )}
       {action && (
-        <div className={`${prefix}--contained-list-item__action`}>{action}</div>
+        <LayoutConstraint
+          size={{ min: 'sm', max: 'lg' }}
+          className={`${prefix}--contained-list-item__action`}>
+          {action}
+        </LayoutConstraint>
       )}
     </li>
   );

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import deprecate from '../../prop-types/deprecate';
+import { LayoutConstraint } from '../Layout';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
 import { PrefixContext } from '../../internal/usePrefix';
@@ -146,12 +147,17 @@ export default class ContentSwitcher extends React.Component {
 
     const classes = classNames(`${prefix}--content-switcher`, className, {
       [`${prefix}--content-switcher--light`]: light,
-      [`${prefix}--content-switcher--${size}`]: size,
+      [`${prefix}--content-switcher--${size}`]: size, // TODO: V12 - Remove this class
+      [`${prefix}--layout--size-${size}`]: size,
       [`${prefix}--content-switcher--icon-only`]: isIconOnly,
     });
 
     return (
-      <div {...other} className={classes} role="tablist">
+      <LayoutConstraint
+        size={{ default: 'md', min: 'sm', max: 'lg' }}
+        {...other}
+        className={classes}
+        role="tablist">
         {React.Children.map(children, (child, index) =>
           React.cloneElement(child, {
             index,
@@ -165,7 +171,7 @@ export default class ContentSwitcher extends React.Component {
             size,
           })
         )}
-      </div>
+      </LayoutConstraint>
     );
   }
 }
diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js
@@ -10,17 +10,20 @@ import React from 'react';
 import classnames from 'classnames';
 import { Copy as CopyIcon } from '@carbon/icons-react';
 import Copy from '../Copy';
+import { LayoutConstraint } from '../Layout';
 import { usePrefix } from '../../internal/usePrefix';
 
 export default function CopyButton({ iconDescription, className, ...other }) {
   const prefix = usePrefix();
   return (
-    <Copy
-      className={classnames(className, `${prefix}--copy-btn`)}
-      aria-label={iconDescription}
-      {...other}>
-      <CopyIcon className={`${prefix}--snippet__icon`} />
-    </Copy>
+    <LayoutConstraint size={{ default: 'md', max: 'lg' }}>
+      <Copy
+        className={classnames(className, `${prefix}--copy-btn`)}
+        aria-label={iconDescription}
+        {...other}>
+        <CopyIcon className={`${prefix}--snippet__icon`} />
+      </Copy>
+    </LayoutConstraint>
   );
 }
 

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -550,7 +550,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               aria-expanded="false"
               aria-haspopup="true"
               aria-labelledby="tooltip-73"
-              class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--btn--primary"
+              class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
               title="Settings"
               type="button"
             >
@@ -592,7 +592,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
           </span>
         </span>
         <button
-          class="cds--btn cds--btn--sm cds--btn--primary"
+          class="cds--btn cds--btn--sm cds--layout--size-sm cds--btn--primary"
           type="button"
         >
           Add new
@@ -952,7 +952,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               aria-expanded="false"
               aria-haspopup="true"
               aria-labelledby="tooltip-18"
-              class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--btn--primary"
+              class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
               title="Settings"
               type="button"
             >
@@ -994,7 +994,7 @@ exports[`DataTable renders as expected - Component API should render and match s
           </span>
         </span>
         <button
-          class="cds--btn cds--btn--sm cds--btn--primary"
+          class="cds--btn cds--btn--sm cds--layout--size-sm cds--btn--primary"
           type="button"
         >
           Add new

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -12,7 +12,7 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="tooltip-2"
-        class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--btn--primary"
+        class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
         title="Add"
         type="button"
       >

diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.js
@@ -43,6 +43,7 @@ function FileUploaderButton({
     // V11: remove field, small
     [`${prefix}--btn--md`]: size === 'field' || size === 'md',
     [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
+    [`${prefix}--layout--size-${size}`]: size,
   });
 
   // Adjust label text state based on changes to the labelText prop

diff --git a/packages/react/src/components/IconButton/index.js b/packages/react/src/components/IconButton/index.js
@@ -25,7 +25,7 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
     label,
     leaveDelayMs,
     wrapperClasses,
-    size = 'md',
+    size,
     ...rest
   } = props;
   const prefix = usePrefix();