@carbon/styles 0.16.0-rc.0 → 0.16.2

package/scss/components/__tests__/progress-bar-test.js

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

package/scss/components/__tests__/progress-indicator-test.js

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

package/scss/components/__tests__/radio-button-test.js

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

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

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

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

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

package/scss/components/__tests__/skeleton-test.js

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

package/scss/components/__tests__/slider-test.js

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

package/scss/components/__tests__/structured-list-test.js

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

package/scss/components/__tests__/tabs-test.js

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

package/scss/components/__tests__/tag-test.js

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

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

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

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

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

package/scss/components/__tests__/tile-test.js

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

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

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

package/scss/components/__tests__/toggle-test.js

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

package/scss/components/__tests__/tooltip-test.js

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

package/scss/components/__tests__/treeview-test.js

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

package/scss/components/__tests__/ui-shell-test.js

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

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

@@ -100,17 +100,30 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
     color: $link-secondary;
   }
 
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
     text-align: left;
     vertical-align: middle;
   }
 
+  .#{$prefix}--data-table th[align='right'],
+  .#{$prefix}--data-table td[align='right'] {
+    text-align: right;
+  }
+
+  .#{$prefix}--data-table th[align='center'],
+  .#{$prefix}--data-table td[align='center'] {
+    text-align: center;
+  }
+
   .#{$prefix}--data-table th {
     padding-right: $spacing-05;
     padding-left: $spacing-05;
@@ -238,7 +251,8 @@
     }
   }
 
-  .#{$prefix}--data-table--selected .#{$prefix}--link {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--link:not(.#{$prefix}--link--disabled) {
     color: $link-secondary;
   }
 
@@ -403,10 +417,6 @@
     padding-top: $spacing-05;
   }
 
-  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
-  }
-
   //----------------------------------------------------------------------------
   // Radio
   //----------------------------------------------------------------------------
@@ -725,6 +735,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------

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

@@ -26,9 +26,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -375,17 +374,14 @@
   //-------------------------------------------------
   .#{$prefix}--batch-actions {
     position: absolute;
-    top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
-    padding-right: $spacing-06;
-    padding-left: $spacing-06;
+    justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    overflow-x: auto;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -399,6 +395,7 @@
   }
 
   .#{$prefix}--batch-actions--active {
+    overflow: auto hidden;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
@@ -406,15 +403,14 @@
 
   //btns container
   .#{$prefix}--action-list {
-    position: absolute;
-    right: 0;
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
     padding: $button-padding-ghost;
     color: $text-on-color;
+    white-space: nowrap;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
@@ -479,22 +475,24 @@
     transition: opacity $transition-base $standard-easing;
   }
 
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
-  }
-
   // items selected text
   .#{$prefix}--batch-summary {
-    position: absolute;
+    position: sticky;
+    z-index: 100000;
     left: 0;
     display: flex;
+    min-height: 3rem;
     align-items: center;
-    margin-left: $spacing-05;
+    padding: 0 $spacing-05;
+    background-color: $background-brand;
+
     color: $text-on-color;
   }
 
+  .#{$prefix}--batch-summary__scroll {
+    box-shadow: 0.5px 0 0.2px $link-primary-hover;
+  }
+
   .#{$prefix}--batch-summary__para {
     @include type-style('body-compact-01');
   }

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

@@ -45,6 +45,7 @@
     color: $text-primary;
     font: inherit;
     line-height: 1;
+    text-align: left;
     transition: background-color $duration-fast-01 motion(entrance, productive),
       outline $duration-fast-01 motion(entrance, productive);
   }

package/scss/components/date-picker/_flatpickr.scss

@@ -321,7 +321,7 @@
     border-bottom: 0;
 
     &::after {
-      border-bottom: rem(4px) solid $border-subtle;
+      border-bottom: rem(4px) solid $icon-primary;
     }
   }
 
@@ -329,7 +329,7 @@
     top: rem(11px);
 
     &::after {
-      border-top: rem(4px) solid $border-subtle;
+      border-top: rem(4px) solid $icon-primary;
     }
   }