fix(contextual-layout-tokens): support individual component style imp…

…orts (#13984) * fix(contextual-layout-tokens): emit layout tokens if utilities are used * fix: add contained-list styles to build files * fix(contained-list): improve isolated rendering * fix(button): add fallback to type token used in layout calc * chore: update build files snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 13, 2023 · 3136d8e · 3136d8e
1 parent 62b60a5
commit 3136d8e
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 30 deletions.
diff --git a/packages/carbon-components-react/scss/components/contained-list/_contained-list.scss b/packages/carbon-components-react/scss/components/contained-list/_contained-list.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list/contained-list';
diff --git a/packages/carbon-components-react/scss/components/contained-list/_index.scss b/packages/carbon-components-react/scss/components/contained-list/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list';
diff --git a/packages/carbon-components/scss/components/contained-list/_contained-list.scss b/packages/carbon-components/scss/components/contained-list/_contained-list.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list/contained-list';
diff --git a/packages/carbon-components/scss/components/contained-list/_index.scss b/packages/carbon-components/scss/components/contained-list/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list';
diff --git a/packages/react/scss/components/contained-list/_contained-list.scss b/packages/react/scss/components/contained-list/_contained-list.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list/contained-list';
diff --git a/packages/react/scss/components/contained-list/_index.scss b/packages/react/scss/components/contained-list/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/contained-list';
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -157,6 +157,16 @@ Array [
     "importPath": "@carbon/styles/scss/components/combo-box",
     "relativePath": "scss/components/combo-box",
   },
+  Object {
+    "filepath": "scss/components/contained-list/_contained-list.scss",
+    "importPath": "@carbon/styles/scss/components/contained-list/contained-list",
+    "relativePath": "scss/components/contained-list/contained-list",
+  },
+  Object {
+    "filepath": "scss/components/contained-list/_index.scss",
+    "importPath": "@carbon/styles/scss/components/contained-list",
+    "relativePath": "scss/components/contained-list",
+  },
   Object {
     "filepath": "scss/components/content-switcher/_content-switcher.scss",
     "importPath": "@carbon/styles/scss/components/content-switcher/content-switcher",

diff --git a/packages/styles/files.js b/packages/styles/files.js
@@ -50,6 +50,8 @@ const files = [
   'scss/components/code-snippet/_index.scss',
   'scss/components/combo-box/_combo-box.scss',
   'scss/components/combo-box/_index.scss',
+  'scss/components/contained-list/_contained-list.scss',
+  'scss/components/contained-list/_index.scss',
   'scss/components/content-switcher/_content-switcher.scss',
   'scss/components/content-switcher/_index.scss',
   'scss/components/copy-button/_copy-button.scss',

diff --git a/packages/styles/scss/_layout.scss b/packages/styles/scss/_layout.scss
@@ -11,10 +11,29 @@
 @use './config' as *;
 @use './utilities/custom-property';
 @use './utilities/convert' as *;
-@use './utilities/layout' as *;
+@use './spacing' as *;
+
+$layout-tokens: (
+  size: (
+    height: (
+      xs: rem(24px),
+      sm: rem(32px),
+      md: rem(40px),
+      lg: rem(48px),
+      xl: rem(64px),
+      2xl: rem(80px),
+    ),
+  ),
+  density: (
+    padding-inline: (
+      condensed: $spacing-03,
+      normal: $spacing-05,
+    ),
+  ),
+);
 
 :root {
-  @each $group, $properties in $tokens {
+  @each $group, $properties in $layout-tokens {
     @each $property, $steps in $properties {
       @each $step, $value in $steps {
         @include custom-property.declaration(
@@ -39,7 +58,7 @@
   }
 }
 
-@each $group, $properties in $tokens {
+@each $group, $properties in $layout-tokens {
   @each $property, $steps in $properties {
     @each $step, $value in $steps {
       .#{$prefix}--layout--#{$group}-#{$step} {

diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss
@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 @use 'vars' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -21,10 +23,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   // https://caniuse.com/mdn-css_types_length_lh
-  --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height) * 1em);
+  --temp-1lh: (
+    #{custom-property.get-var(
+        'body-compact-01-line-height',
+        map.get($body-compact-01, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
-    (var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)}
+    (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
+      #{rem(1px)}
   );
 
   @include component-reset.reset;

diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:list';
+@use 'sass:map';
 
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -15,6 +15,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/layout';
 
 /// Contained List styles
@@ -26,6 +27,11 @@
     @include layout.use('density', $default: 'normal');
   }
 
+  .#{$prefix}--contained-list > ul {
+    padding: 0;
+    margin: 0;
+  }
+
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
@@ -126,12 +132,17 @@
 
   .#{$prefix}--contained-list-item {
     position: relative;
+    list-style: none;
   }
 
   .#{$prefix}--contained-list-item:not(:first-of-type) {
     margin-top: -1px;
   }
 
+  .#{$prefix}--contained-list-item__content {
+    box-sizing: border-box;
+  }
+
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     @include button-reset.reset;
@@ -145,7 +156,12 @@
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     // https://caniuse.com/mdn-css_types_length_lh
-    --temp-1lh: (var(--#{$prefix}-body-01-line-height) * 1em);
+    --temp-1lh: (
+      #{custom-property.get-var(
+          'body-01-line-height',
+          map.get($body-01, line-height)
+        )} * 1em
+    );
 
     @include type-style('body-01');
 

diff --git a/packages/styles/scss/utilities/_layout.scss b/packages/styles/scss/utilities/_layout.scss
@@ -8,28 +8,8 @@
 @use 'sass:map';
 
 @use '../config';
-@use '../spacing' as *;
+@use '../layout' as *;
 @use './custom-property';
-@use './convert' as *;
-
-$tokens: (
-  size: (
-    height: (
-      xs: rem(24px),
-      sm: rem(32px),
-      md: rem(40px),
-      lg: rem(48px),
-      xl: rem(64px),
-      2xl: rem(80px),
-    ),
-  ),
-  density: (
-    padding-inline: (
-      condensed: $spacing-03,
-      normal: $spacing-05,
-    ),
-  ),
-);
 
 /// Enables the use of contextual layout tokens within a component. This mixin should be
 /// included on the outermost selector of the component.
@@ -41,7 +21,7 @@ $tokens: (
 /// @group utilities
 /// @access public
 @mixin use($group, $default, $min: null, $max: null) {
-  $properties: map.get($tokens, $group);
+  $properties: map.get($layout-tokens, $group);
 
   @each $property, $steps in $properties {
     $minValue: custom-property.get-var('layout-#{$group}-#{$property}-min');
@@ -106,7 +86,7 @@ $tokens: (
 }
 
 /// Internal base function for retrieving a property from a layout group.
-/// @param {String} $group - The group name as defined in the $tokens
+/// @param {String} $group - The group name as defined in the $layout-tokens
 /// @param {String} $property - The property name
 /// @example @include -group('size', $property)
 /// @group utilities