@carbon/styles 1.5.0-rc.0 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.5.0-rc.0",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,21 +32,22 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.3.0-rc.0",
-    "@carbon/feature-flags": "^0.8.0-rc.0",
-    "@carbon/grid": "^11.3.0-rc.0",
-    "@carbon/layout": "^11.3.0-rc.0",
-    "@carbon/motion": "^11.2.0-rc.0",
-    "@carbon/themes": "^11.4.0-rc.0",
-    "@carbon/type": "^11.4.0-rc.0",
+    "@carbon/colors": "^11.3.0",
+    "@carbon/feature-flags": "^0.8.0",
+    "@carbon/grid": "^11.3.0",
+    "@carbon/layout": "^11.3.0",
+    "@carbon/motion": "^11.2.0",
+    "@carbon/themes": "^11.4.0",
+    "@carbon/type": "^11.4.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.25.0-rc.0",
+    "@carbon/test-utils": "^10.25.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.0.0",
     "css": "^3.0.0",
     "cssnano": "^5.1.9",
+    "lodash.isequal": "^4.5.0",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
     "rimraf": "^3.0.2",
@@ -55,7 +56,8 @@
   "sideEffects": [
     "index.scss",
     "scss/**/*.scss",
-    "scss/**/*.css"
+    "scss/**/*.css",
+    "css/**/*.css"
   ],
-  "gitHead": "a44075aa04612c5ddaf73953ca7ce14d1882a02c"
+  "gitHead": "07aff903e75a56d215c3582c214505379448e38e"
 }

package/scss/__tests__/zone-test.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2018, 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.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
+const isEqual = require('lodash.isequal');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('zone', () => {
+  it('should set a component token value to the theme of a zone', async () => {
+    const { get, result } = await render(`
+      @use '../themes';
+      @use '../components/button/tokens';
+      @use '../zone';
+
+      $_: get('themes', (
+        white: themes.$white,
+        g10: themes.$g10,
+        g90: themes.$g90,
+        g100: themes.$g100,
+      ));
+      $_: get('tokens', tokens.$button-tokens);
+    `);
+
+    const themes = Array.from(Object.entries(get('themes').value));
+    const tokensByTheme = new Map(
+      themes.map(([theme]) => {
+        return [theme, new Map()];
+      })
+    );
+
+    // Group each of the button tokens into their values by theme
+    const buttonTokens = get('tokens');
+    for (const [token, { values }] of Object.entries(buttonTokens.value)) {
+      for (const { theme, value } of values) {
+        const match = themes.find(([_id, themeMap]) => {
+          return isEqual(themeMap, theme);
+        });
+
+        tokensByTheme.get(match[0]).set(token, value);
+      }
+    }
+
+    // When including the `_zone.scss` file, we generate a stylesheet with four
+    // classes, one per theme.
+    const { stylesheet } = css.parse(result.css.toString());
+
+    for (const rule of stylesheet.rules) {
+      // For each selector, we check that every button token that we have
+      // defined for this theme is emitted in CSS with the expected value
+      const [_prefix, theme] = rule.selectors[0].split('--');
+      const tokens = tokensByTheme.get(theme);
+      const includesComponentTokens = Array.from(tokens.entries()).every(
+        ([token, value]) => {
+          return rule.declarations.find((declaration) => {
+            return (
+              declaration.property.includes(token) &&
+              declaration.value === value
+            );
+          });
+        }
+      );
+
+      expect(includesComponentTokens).toBe(true);
+    }
+  });
+});

package/scss/_zone.scss

@@ -78,9 +78,9 @@ $-components: (
           $theme-values: map.get($value, values);
 
           @each $theme-value in $theme-values {
-            $theme: map.get($theme-value, theme);
             $value: map.get($theme-value, value);
-            @if theme.matches($theme, theme.$theme) and
+
+            @if theme.matches(map.get($theme-value, theme), $theme) and
               meta.type-of($value) ==
               color
             {

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -70,6 +70,7 @@
     > .#{$prefix}--table-header-label {
     padding-right: $spacing-05;
     padding-left: $spacing-05;
+    line-height: 1;
   }
 
   // -------------------------------------

package/scss/components/modal/_modal.scss

@@ -142,8 +142,9 @@
   // text/p gets 20% right padding
   .#{$prefix}--modal-content p,
   .#{$prefix}--modal-content__regular-content {
-    padding-right: 20%;
     @include type-style('body-01');
+    // padding should take into account the left and right padding of modal container
+    padding-right: calc(20% - $spacing-07);
   }
 
   //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\

package/scss/components/notification/_actionable-notification.scss

@@ -227,6 +227,7 @@
     @include type-style('body-compact-01');
 
     display: flex;
+    flex-wrap: wrap;
     word-break: break-word;
   }
 

package/scss/components/tabs/_tabs.scss

@@ -455,6 +455,12 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     }
   }
 
+  .#{$prefix}--tab-content--interactive {
+    &:focus {
+      outline: none;
+    }
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------