@carbon/styles 1.19.0-rc.0 → 1.20.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.19.0-rc.0",
+  "version": "1.20.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.10.0-rc.0",
-    "@carbon/feature-flags": "^0.11.0-rc.0",
-    "@carbon/grid": "^11.9.0-rc.0",
-    "@carbon/layout": "^11.9.0-rc.0",
-    "@carbon/motion": "^11.7.0-rc.0",
-    "@carbon/themes": "^11.14.0-rc.0",
-    "@carbon/type": "^11.13.0-rc.0",
+    "@carbon/colors": "^11.11.0",
+    "@carbon/feature-flags": "^0.11.0",
+    "@carbon/grid": "^11.10.0",
+    "@carbon/layout": "^11.10.0",
+    "@carbon/motion": "^11.8.0",
+    "@carbon/themes": "^11.15.0",
+    "@carbon/type": "^11.14.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "a9d6ab5cc79665453f218fd5821c65c399337c15"
+  "gitHead": "b115fef8c7d19ed31ed3aeeb2b7f95f8be0738b6"
 }

package/scss/__tests__/theme-test.js

@@ -87,6 +87,9 @@ describe('@carbon/styles/scss/theme', () => {
         "border-strong-01",
         "border-strong-02",
         "border-strong-03",
+        "border-tile-01",
+        "border-tile-02",
+        "border-tile-03",
         "border-inverse",
         "border-interactive",
         "border-disabled",
@@ -145,6 +148,7 @@ describe('@carbon/styles/scss/theme', () => {
         "border-subtle",
         "border-subtle-selected",
         "border-strong",
+        "border-tile",
       ]
     `);
   });

package/scss/_feature-flags.scss

@@ -11,6 +11,7 @@
     'enable-use-controlled-state-with-value': true,
     'enable-css-grid': true,
     'enable-v11-release': true,
+    'enable-experimental-tile-contrast': false,
   )
   !default
 );

package/scss/components/__tests__/fluid-combo-box-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-combo-box', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-combo-box';
+
+      $_: get('mixin', meta.mixin-exists('fluid-combo-box', 'fluid-combo-box'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-date-picker-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-date-picker', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-date-picker';
+
+      $_: get('mixin', meta.mixin-exists('fluid-date-picker', 'fluid-date-picker'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-dropdown-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-dropdown', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-dropdown';
+
+      $_: get('mixin', meta.mixin-exists('fluid-dropdown', 'fluid-dropdown'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-list-box-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-list-box', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-list-box';
+
+      $_: get('mixin', meta.mixin-exists('fluid-list-box', 'fluid-list-box'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-multiselect-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-multiselect', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-multiselect';
+
+      $_: get('mixin', meta.mixin-exists('fluid-multiselect', 'fluid-multiselect'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-number-input-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-number-input', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-number-input';
+
+      $_: get('mixin', meta.mixin-exists('fluid-number-input', 'fluid-number-input'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-search-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-search', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-search';
+
+      $_: get('mixin', meta.mixin-exists('fluid-search', 'fluid-search'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-select-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-select', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-select';
+
+      $_: get('mixin', meta.mixin-exists('fluid-select', 'fluid-select'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-text-area-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-text-area', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-text-area';
+
+      $_: get('mixin', meta.mixin-exists('fluid-text-area', 'fluid-text-area'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-text-input-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-text-input', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-text-input';
+
+      $_: get('mixin', meta.mixin-exists('fluid-text-input', 'fluid-text-input'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/fluid-time-picker-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/fluid-time-picker', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../fluid-time-picker';
+
+      $_: get('mixin', meta.mixin-exists('fluid-time-picker', 'fluid-time-picker'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/_index.scss

@@ -28,6 +28,8 @@
 @use 'fluid-dropdown';
 @use 'fluid-list-box';
 @use 'fluid-multiselect';
+@use 'fluid-number-input';
+@use 'fluid-search';
 @use 'fluid-select';
 @use 'fluid-text-area';
 @use 'fluid-text-input';

package/scss/components/contained-list/_contained-list.scss

@@ -127,14 +127,20 @@
 
   .#{$prefix}--contained-list-item:not(:last-of-type)::before {
     position: absolute;
-    right: $spacing-05;
+    right: 0;
     bottom: 0;
-    left: $spacing-05;
+    left: 0;
     height: 1px;
     background-color: $border-subtle;
     content: '';
   }
 
+  .#{$prefix}--contained-list--inset-rulers
+    .#{$prefix}--contained-list-item:not(:last-of-type)::before {
+    right: $spacing-05;
+    left: $spacing-05;
+  }
+
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content:not(:disabled):hover {
     background-color: $layer-hover;

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

@@ -29,6 +29,11 @@
     border-bottom: none;
   }
 
+  // hidden sort description
+  .#{$prefix}--table-sort__description {
+    display: none;
+  }
+
   // -------------------------------------
   // Th > Button
   // -------------------------------------

package/scss/components/file-uploader/_file-uploader.scss

@@ -119,6 +119,10 @@
     color: $text-disabled;
   }
 
+  .#{$prefix}--file-container--drop {
+    width: 100%;
+  }
+
   // For backwards compatibility
   .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
     margin-top: $spacing-06;

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -36,11 +36,30 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--date-picker--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -36,11 +36,30 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field {
     padding-top: rem(33px);
     padding-bottom: rem(13px);

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -6,7 +6,7 @@
 //
 
 //-----------------------------
-// Fluid ComboBox
+// Fluid Multiselect
 //-----------------------------
 @use '../../config' as *;
 @use '../../motion' as *;