Merge branch 'master' into 2202-listbox-menu-options-should-overflow-…

…with-ellipses

demo/scss/demo.scss

@@ -1,4 +1,26 @@
-// Used for sidebar in dev environment
+// Manual theme tests for development environment
+// 1) v9 and v10 - customize individual variables
+// $interactive-01: pink;
+// $brand-01: pink;
+
+// 2) new in v10 - customize many variables via alternate theme
+// @import '../../src/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';
+// $carbon--theme: $carbon--theme--g90;
+
+// 3a) possible in v10 - customize individual variables of an alternate theme
+// @import '../../src/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';
+// $carbon--theme: $carbon--theme--g90;
+// $interactive-01: pink;
+
+// 3b) possible in v10 - customize individual variables of an alternate theme
+// @import '../../src/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';
+// $carbon--theme: map-merge(
+//   $carbon--theme--g90,
+//   (
+//     interactive-01: pink,
+//   )
+// );
+
 @import '../../src/globals/scss/styles';
 
 $deprecations--entry: true;

package.json

@@ -47,8 +47,9 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "@carbon/elements": "^0.0.1-beta.2",
-    "@carbon/icons-handlebars": "^0.0.1-beta.2",
+    "@carbon/elements": "^0.0.1-beta.5",
+    "@carbon/icons-handlebars": "^0.0.1-beta.5",
+    "@carbon/test-utils": "^0.0.1-beta.5",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
     "@frctl/fractal": "^1.1.0",

src/globals/scss/__tests__/themes-test.js

@@ -7,7 +7,7 @@
  * @jest-environment node
  */
 
-const { renderSass } = require('../../../../tools/jest/scss');
+const { createSassRenderer, convert } = require('@carbon/test-utils/scss');
 
 const classic = [
   'brand-01',
@@ -112,14 +112,97 @@ const classic = [
   'skeleton',
 ];
 
+const render = createSassRenderer(__dirname);
+
 describe('_theme.scss', () => {
+  it('should allow custom overrides of tokens', async () => {
+    const testColor = '#000000';
+    const { calls } = await render(`
+$brand-01: ${testColor} !global;
+
+@import '../theme';
+
+$c: test($brand-01);
+`);
+
+    expect(convert(calls[0][0])).toEqual(testColor);
+  });
+
+  it('should allow custom overrides of tokens in v10', async () => {
+    const testColor = '#000000';
+    const { calls } = await render(`
+$feature-flags: (components-x: true);
+$interactive-01: ${testColor} !global;
+
+@import '../theme';
+
+$c: test($interactive-01);
+`);
+
+    expect(convert(calls[0][0])).toEqual(testColor);
+  });
+
+  it('should allow custom theme overrides', async () => {
+    const testColor = '#000000';
+    const { calls } = await render(`
+$feature-flags: (components-x: true);
+$carbon--theme: (
+  interactive-01: ${testColor},
+) !global;
+
+@import '../theme';
+
+$c: test(map-get($carbon--theme, interactive-01));
+`);
+
+    expect(convert(calls[0][0])).toBe(testColor);
+  });
+
+  it('should allow inline theming', async () => {
+    const testColor = '#000000';
+    const inlineColor = '#ffffff';
+    const { calls } = await render(`
+$feature-flags: (components-x: true);
+$carbon--theme: (
+  interactive-01: ${testColor},
+) !global;
+$carbon--inline--theme: (
+  interactive-01: ${inlineColor},
+);
+
+@import '../theme';
+
+$c: test(map-get($carbon--theme, interactive-01));
+
+@mixin my-selector {
+  $c: test($interactive-01);
+  .my-selector {
+    color: $interactive-01;
+  }
+}
+
+@include my-selector();
+
+@include carbon--theme($carbon--inline--theme) {
+  @include my-selector();
+}
+
+@include my-selector();
+`);
+
+    expect(convert(calls[0][0])).toBe(testColor);
+    expect(convert(calls[1][0])).toBe(testColor);
+    expect(convert(calls[2][0])).toBe(inlineColor);
+    expect(convert(calls[3][0])).toBe(testColor);
+  });
+
   it.each(classic)('$%s should be exported', async name => {
-    const { calls } = await renderSass(`
-@import './src/globals/scss/theme';
+    const { calls } = await render(`
+@import '../theme';
 
 $c: test(global-variable-exists(${name}));
 `);
     // Check that global-variable-exists returned true
-    expect(calls[0][0].getValue()).toBe(true);
+    expect(convert(calls[0][0])).toBe(true);
   });
 });

src/globals/scss/_theme-tokens.scss

@@ -10,30 +10,53 @@
 @import 'functions';
 @import 'colors';
 @import 'spacing';
-@import './vendor/@carbon/elements/scss/themes/mixins';
+
+/// @access private
+$carbon--theme--v9: (
+  brand-01: $color__blue-51,
+  brand-02: $color__blue-40,
+  brand-03: $color__teal-20,
+  inverse-01: $color__white,
+  inverse-02: #272d33,
+  ui-01: $color__white,
+  ui-02: #f4f7fb,
+  ui-03: $color__gray-1,
+  ui-04: #8897a2,
+  ui-05: $color__navy-gray-6,
+  text-01: $color__blue-90,
+  text-02: $color__navy-gray-6,
+  text-03: #cdd1d4,
+  field-01: #f4f7fb,
+  field-02: $color__white,
+  support-01: #e0182d,
+  support-02: $color__green-40,
+  support-03: $color__yellow-30,
+  support-04: $color__blue-30,
+  nav-01: $color__navy-gray-1,
+  nav-02: $color__blue-90,
+  nav-03: $color__purple-30,
+  nav-04: $color__purple-60,
+  nav-05: $color__teal-40,
+  nav-06: $color__teal-50,
+  nav-07: $color__blue-30,
+  nav-08: $color__blue-51,
+  hover-primary: darken($color__blue-51, 10%),
+  hover-primary-text: darken($color__blue-51, 15%),
+  hover-danger: darken(#e0182d, 10%),
+  hover-secondary: $color__blue-51,
+  hover-row: rgba($color__blue-40, 0.1),
+);
+
+@if not feature-flag-enabled('components-x') {
+  /// @access public
+  $carbon--theme: $carbon--theme--v9 !global;
+}
+
+@import './vendor/@carbon/elements/scss/themes/themes';
 
 @mixin theme() {
-  // Color Theme Variables
-  /// @access public
-  $brand-01: $color__blue-51 !default !global;
-  $brand-02: $color__blue-40 !default !global;
-  $brand-03: $color__teal-20 !default !global;
-  $inverse-01: $color__white !default !global;
-  $inverse-02: #272d33 !default !global;
-  $ui-01: $color__white !default !global;
-  $ui-02: #f4f7fb !default !global;
-  $ui-03: $color__gray-1 !default !global;
-  $ui-04: #8897a2 !default !global;
-  $ui-05: $color__navy-gray-6 !default !global;
-  $text-01: $color__blue-90 !default !global;
-  $text-02: $color__navy-gray-6 !default !global;
-  $text-03: #cdd1d4 !default !global;
-  $field-01: #f4f7fb !default !global;
-  $field-02: $color__white !default !global;
-  $support-01: #e0182d !default !global;
-  $support-02: $color__green-40 !default !global;
-  $support-03: $color__yellow-30 !default !global;
-  $support-04: $color__blue-30 !default !global;
+  // Nav
+  /// @access public
   $nav-01: $color__navy-gray-1 !default !global;
   $nav-02: $color__blue-90 !default !global;
   $nav-03: $color__purple-30 !default !global;
@@ -43,12 +66,6 @@
   $nav-07: $color__blue-30 !default !global;
   $nav-08: $color__blue-51 !default !global;
 
-  $hover-primary: darken($brand-01, 10%) !default !global;
-  $hover-primary-text: darken($brand-01, 15%) !default !global;
-  $hover-danger: darken($support-01, 10%) !default !global;
-  $hover-secondary: $brand-01 !default !global;
-  $hover-row: rgba($brand-02, 0.1) !default !global;
-
   // Global
   /// @access public
   $input-border: 1px solid transparent !default !global;
@@ -126,10 +143,6 @@
 
 // Light Experimental Theme
 @mixin theme--experimental() {
-  // Can include various themes here from `@carbon/themes`, including: white,
-  // g10, g90, and g100
-  @include carbon--theme-white();
-
   /// @access public
   $edited: true !default !global;
   $use-layer: true !default !global;

src/globals/scss/vendor/@carbon/colors/scss/colors.scss

@@ -1,10 +1,3 @@
-//
-// 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.
-//
-
 // Code generated by @carbon/colors. DO NOT EDIT.
 
 @import './mixins';

src/globals/scss/vendor/@carbon/elements/scss/elements.scss

@@ -1,3 +1,10 @@
+//
+// 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.
+//
+
 // The files below are generated using the `yarn build` stage for this
 // package
 @import './import-once/import-once';

src/globals/scss/vendor/@carbon/elements/scss/index.scss

@@ -1,3 +1,10 @@
+//
+// 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.
+//
+
 @import '@carbon/import-once/scss/import-once';
 @import '@carbon/colors/scss/colors';
 @import '@carbon/themes/scss/themes';

src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss

@@ -43,9 +43,9 @@ $carbon--grid-breakpoints: (
 
 /// Get the value of the next breakpoint, or null for the last breakpoint.
 /// @param {String} $name - the name of the brekapoint
-/// @param {Map} $breakpoints - a map of breakpoints where the key is the name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// of the breakpoint and the value is the values for the breakpoint
-/// @param {List} $breakpoint-names - a list of names from the $breakpoints map
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - a list of names from the $breakpoints map
 /// @returns {String}
 @function carbon--breakpoint-next($name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -69,7 +69,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// returns the largest breakpoint name
-/// @param {string} $breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
 @function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) {
   $total-breakpoints: length($breakpoints);
@@ -85,13 +85,17 @@ $carbon--grid-breakpoints: (
 }
 
 /// Generate a media query up to the width of the given breakpoint name
-/// @param {string} $name
+/// @param {string | number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
 @mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-
-  @if map-has-key($breakpoints, $name) {
+  @if type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map-has-key($breakpoints, $name) {
+    $breakpoint: map-get($breakpoints, $name);
+    $width: map-get($breakpoint, width);
     @if carbon--is-smallest-breakpoint($name, $breakpoints) {
       @content;
     } @else {
@@ -105,12 +109,17 @@ $carbon--grid-breakpoints: (
 }
 
 /// Generate a media query for the maximum width of the given styles
-/// @param {string} $name
+/// @param {string | number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
 @mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-  @if map-has-key($breakpoints, $name) {
+  @if type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map-has-key($breakpoints, $name) {
+    $breakpoint: map-get($breakpoints, $name);
+    $width: map-get($breakpoint, width);
     @if carbon--is-smallest-breakpoint($name, $breakpoints) {
       @content;
     } @else {
@@ -125,15 +134,19 @@ $carbon--grid-breakpoints: (
 
 /// Generate a media query for the range between the lower and upper
 /// breakpoints.
-/// @param {string} $lower
-/// @param {string} $upper
+/// @param {string | number} $lower
+/// @param {string | number} $upper
 /// @content
 @mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) {
-  $min: map-get($breakpoints, $lower);
-  $max: map-get($breakpoints, $upper);
+  $is-number-lower: type-of($lower) == 'number';
+  $is-number-upper: type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
 
   @if $min and $max {
-    @media (min-width: map-get($min, width)) and (max-width: map-get($map, width)) {
+    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }
   } @else if $min != null and $max == null {
@@ -150,7 +163,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// generate media query for the largest breakpoint
-/// @param {string} $breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
 @mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
   @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
@@ -159,7 +172,8 @@ $carbon--grid-breakpoints: (
 }
 
 /// Generate a media query for a given breakpoint
-/// @param {string} $breakpoint
+/// @param {string | number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
 @mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
   @include carbon--breakpoint-up($name, $breakpoints) {