@carbon/styles 0.16.0-rc.0 → 0.16.0

package/docs/sass.md

@@ -122,28 +122,45 @@ to `false`:
 
 ## Grid
 
-| Import                             | Filepath          |
-| :--------------------------------- | :---------------- |
-| `@use '@carbon/styles/scss/grid';` | `scss/_grid.scss` |
+| Import                                     | Filepath                  |
+| :----------------------------------------- | :------------------------ |
+| `@use '@carbon/styles/scss/grid';`         | `scss/grid/_index.scss`   |
+| `@use '@carbon/styles/scss/grid/flexbox';` | `scss/grid/_flexbox.scss` |
 
 ### Using the grid
 
 This package `@forward`s the styles defined in the
 [`@carbon/grid`](https://github.com/carbon-design-system/carbon/tree/main/packages/grid)
-package. The full source for Carbon grid styles can be found there alongside
-more comprehensive documentation on package contents, configuration, and usage.
+package. For full documentation, visit the
+[Sass Documentation](../../grid/docs/sass.md) for the package.
 
 To use the grid via `@carbon/styles`, it must be brought in directly or the grid
 specific style sheet must be imported:
 
 ```scss
-/* All the grid styles are included through this central entrypoint */
+// All the grid styles are included through this central entrypoint
 @use '@carbon/styles';
 
-/* Alternatively, the grid styles can be brought in on their own */
+// Alternatively, the grid styles can be brought in on their own
 @use '@carbon/styles/scss/grid';
 ```
 
+By default, the emitted grid will be a CSS Grid based implementation. If you
+prefer to use flexbox version, you can configure the package by writing the
+following:
+
+```scss
+@use '@carbon/styles' with (
+  $use-flexbox-grid: true,
+);
+```
+
+Or you can import the flexbox grid directly:
+
+```scss
+@use '@carbon/styles/scss/grid/flexbox';
+```
+
 ### Classes provided
 
 In either case, you will then have access to the grid classes and mixins
@@ -172,22 +189,6 @@ prefix:
 </div>
 ```
 
-### Grid Mixins
-
-In the event that you'd like to configure your own classes for portions of the
-grid, there are a few mixins that can be used.
-
-- `css-grid()` provides the base grid definition
-- `subgrid()` provides the subgrid definition
-- `carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios)` generates the
-  CSS classname utilities for the aspect ratios
-
-```scss
-.custom-grid-class {
-  @include css-grid();
-}
-```
-
 ## Motion
 
 The motion package provides helper functions, mixins, and duration tokens to add

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.16.0-rc.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,16 +22,16 @@
   "dependencies": {
     "@carbon/colors": "^10.37.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.42.0",
+    "@carbon/grid": "^10.43.0",
     "@carbon/layout": "^10.37.0",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0",
+    "@carbon/themes": "^10.53.0",
+    "@carbon/type": "^10.43.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "4cb0cf93101e8a4a6a67a950518793e006ed8a07"
+  "gitHead": "05b57e9181903cb87173d48a0635691a2e942e30"
 }

package/scss/_config.scss

@@ -54,3 +54,8 @@ $prefix: 'cds' !default;
 /// @access public
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
+
+/// Specify if the default grid type should be the flexbox grid
+/// @type Boolean
+/// @group config
+$use-flexbox-grid: false !default;

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;
     }
   }
 

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/{_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();
+}