@carbon/styles 0.16.0-rc.0 → 0.16.2

package/scss/components/radio-button/_radio-button.scss

@@ -123,7 +123,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
-    color: $button-disabled;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
@@ -133,10 +133,11 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    border-color: $border-disabled;
+    // Disabled radio button, checkbox fix #10913
+    border-color: $icon-disabled;
 
     &::before {
-      background-color: $button-disabled;
+      background-color: $text-disabled;
     }
   }
 

package/scss/components/select/_select.scss

@@ -62,7 +62,7 @@
     transition: outline $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     // Hide default select arrow in IE10+
@@ -89,7 +89,7 @@
 
     &:disabled,
     &:hover:disabled {
-      border-bottom-color: $border-disabled;
+      border-bottom-color: transparent;
       background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
@@ -101,8 +101,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--select-input--xl,
   .#{$prefix}--select-input--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -115,7 +113,7 @@
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
   .#{$prefix}--select--warning .#{$prefix}--select-input {
-    padding-right: carbon--mini-units(9);
+    padding-right: $spacing-10;
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
@@ -123,15 +121,15 @@
   }
 
   .#{$prefix}--select--light .#{$prefix}--select-input {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     &:disabled,
     &:hover:disabled {
-      background-color: $field-02;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -178,7 +176,7 @@
   optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
-    background-color: $background-hover;
+    background-color: $layer-hover;
     color: $text-primary;
 
     &:disabled {

package/scss/components/tabs/_tabs.scss

@@ -65,6 +65,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
+    .#{$prefix}--tabs__nav {
+      display: flex;
+    }
+
     //-----------------------------
     // Overflow Nav Buttons
     //-----------------------------

package/scss/fonts/__tests__/fonts-test.js

@@ -0,0 +1,142 @@
+/**
+ * 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 { render } = SassRenderer.create(__dirname);
+
+const fonts = [
+  'mono',
+  'sans-arabic',
+  'sans-devanagari',
+  'sans-hebrew',
+  'sans-thai-looped',
+  'sans-thai',
+  'sans',
+  'serif',
+];
+const weights = [
+  'thin',
+  'extralight',
+  'light',
+  'regular',
+  'text',
+  'medium',
+  'semibold',
+  'bold',
+];
+
+describe('@carbon/styles/scss/fonts', () => {
+  it('should emit default fonts, weights, and styles', async () => {
+    const { result } = await render(`@use '../' as fonts;`);
+    const { stylesheet } = css.parse(result.css.toString());
+    const atRules = stylesheet.rules.filter((rule) => {
+      return rule.type === 'font-face';
+    });
+    const emitted = new Map();
+
+    for (const rule of atRules) {
+      const fontFamily = rule.declarations
+        .find((declaration) => {
+          return declaration.property === 'font-family';
+        })
+        .value.replace(/['"]/g, '');
+
+      if (!emitted.has(fontFamily)) {
+        emitted.set(fontFamily, {
+          weights: new Set(),
+          styles: new Set(),
+        });
+      }
+
+      const entry = emitted.get(fontFamily);
+
+      for (const declaration of rule.declarations) {
+        if (declaration.property === 'font-weight') {
+          entry.weights.add(declaration.value);
+        }
+
+        if (declaration.property === 'font-style') {
+          entry.styles.add(declaration.value);
+        }
+      }
+    }
+
+    expect(emitted.has('IBM Plex Mono')).toBe(true);
+    const mono = emitted.get('IBM Plex Mono');
+    expect(mono.weights).toEqual(new Set(['300', '400', '600']));
+    expect(mono.styles).toEqual(new Set(['normal', 'italic']));
+
+    expect(emitted.has('IBM Plex Sans')).toBe(true);
+    expect(emitted.get('IBM Plex Sans').weights).toEqual(
+      new Set(['300', '400', '600'])
+    );
+    expect(emitted.get('IBM Plex Sans').styles).toEqual(
+      new Set(['normal', 'italic'])
+    );
+
+    expect(emitted.has('IBM Plex Serif')).toBe(true);
+    expect(emitted.get('IBM Plex Serif').weights).toEqual(
+      new Set(['300', '400', '600'])
+    );
+    expect(emitted.get('IBM Plex Serif').styles).toEqual(
+      new Set(['normal', 'italic'])
+    );
+  });
+
+  it('should emit no @font-face blocks if $css--font-face is false', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $css--font-face: false,
+      );
+      @use '../' as fonts;
+    `);
+    expect(result.css.toString()).toBe('');
+  });
+
+  it('should not emit fonts set to false', async () => {
+    const { result } = await render(`
+      @use '../' as fonts with (
+        $fonts: (
+          IBM-Plex-Mono: false,
+          IBM-Plex-Sans: false,
+          IBM-Plex-Serif: false,
+        ),
+      );
+    `);
+    expect(result.css.toString()).toBe('');
+  });
+
+  describe.each(fonts)('scss/fonts/_%s.scss', (font) => {
+    it('should export all font weights as mixins', async () => {
+      const weightMixins = weights.map((weight) => {
+        return `$_: get('${weight}', meta.mixin-exists('${weight}', '${font}'));`;
+      });
+
+      const { unwrap } = await render(`
+        @use 'sass:meta';
+        @use '../${font}';
+
+        ${weightMixins.join('\n')}
+        $_: get('all', meta.mixin-exists('all', '${font}'));
+        $_: get('default', meta.mixin-exists('default', '${font}'));
+      `);
+
+      for (const weight of weights) {
+        expect(unwrap(weight)).toBe(true);
+      }
+
+      expect(unwrap('all')).toBe(true);
+      expect(unwrap('default')).toBe(true);
+    });
+  });
+});

package/scss/{_grid.scss → grid/_config.scss}

@@ -5,18 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'config';
-
+@use '../config';
 @forward '@carbon/grid'
   show css-grid,
-       subgrid,
        flex-grid,
        $grid-gutter,
        $grid-gutter-condensed,
        $grid-breakpoints
   with (
-    $prefix: config.$prefix,
-    $flex-grid-columns: config.$flex-grid-columns,
+    $prefix: config.$prefix !default,
+    $flex-grid-columns: config.$flex-grid-columns !default
   );
-
-@use '@carbon/grid';

package/scss/grid/_flexbox.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@forward 'config';
+@use '@carbon/grid';
+
+@include grid.flex-grid();

package/scss/grid/_index.scss

@@ -0,0 +1,16 @@
+//
+// 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.
+//
+
+@forward 'config';
+@use '@carbon/grid';
+@use '../config';
+
+@if config.$use-flexbox-grid == true {
+  @include grid.flex-grid();
+} @else {
+  @include grid.css-grid();
+}

package/scss/{_type.scss → type/_index.scss}

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'config';
+@use '../config';
 @forward '@carbon/type' show
   // Mixins
   reset,

package/scss/type/_reset.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@forward '@carbon/type/scss/modules/reset';

package/scss/utilities/__tests__/custom-property-test.js

@@ -0,0 +1,50 @@
+/**
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/utilities/custom-property', () => {
+  it('should support getting the property name from a value', async () => {
+    const { unwrap } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      $_: get('name', custom-property.get-name('test'));
+    `);
+    expect(unwrap('name')).toBe('--cds-test');
+  });
+
+  it('should support emitting a declaration for a CSS Custom Property', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      .test {
+        @include custom-property.declaration(test, #000000);
+      }
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const selector = stylesheet.rules.find((rule) => {
+      return rule.selectors.includes('.test');
+    });
+    const [declaration] = selector.declarations;
+
+    expect(declaration.property).toBe('--cds-test');
+    expect(declaration.value).toBe('#000000');
+  });
+});