@carbon/styles 1.17.0-rc.1 → 1.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,12 +32,12 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.7.1-rc.0",
+    "@carbon/colors": "^11.8.0",
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/grid": "^11.7.0",
     "@carbon/layout": "^11.7.0",
     "@carbon/motion": "^11.5.0",
-    "@carbon/themes": "^11.11.1-rc.0",
+    "@carbon/themes": "^11.12.0",
     "@carbon/type": "^11.11.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "01475a0713de3b5243b747ffe7036f652ae5c22f"
+  "gitHead": "06fdbdbc9cade1f6c352024175d348f9bd107b14"
 }

package/scss/components/_index.scss

@@ -24,6 +24,7 @@
 @use 'dropdown';
 @use 'file-uploader';
 @use 'fluid-combo-box';
+@use 'fluid-date-picker';
 @use 'fluid-dropdown';
 @use 'fluid-list-box';
 @use 'fluid-multiselect';

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

@@ -329,26 +329,6 @@
     transition: background-color $duration-fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table
-    .#{$prefix}--table-column-checkbox
-    .#{$prefix}--checkbox:focus
-    + .#{$prefix}--checkbox-label::before {
-    //make checkbox focus larger to match expansion btn focus
-    outline-offset: rem(6px);
-  }
-
-  .#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-checkbox
-    .#{$prefix}--checkbox:focus
-    + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--data-table--xs
-    .#{$prefix}--table-column-checkbox
-    .#{$prefix}--checkbox:focus
-    + .#{$prefix}--checkbox-label::before {
-    //make checkbox match expansion button focus size
-    outline-offset: rem(2px);
-  }
-
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table thead th.#{$prefix}--table-expand,

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

@@ -46,6 +46,10 @@
     justify-content: space-between;
   }
 
+  .#{$prefix}--date-picker-container .#{$prefix}--label {
+    display: flex;
+  }
+
   .#{$prefix}--date-picker-input__wrapper {
     position: relative;
     display: flex;

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

@@ -0,0 +1,341 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Fluid Date Picker
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../date-picker';
+
+@mixin fluid-date-picker {
+  .#{$prefix}--date-picker--fluid {
+    display: inline-flex;
+    background: $field;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    .#{$prefix}--date-picker__input {
+    min-width: rem(144px);
+    min-height: rem(64px);
+    padding: rem(32px) $spacing-05 rem(13px);
+    border-bottom: none;
+    background: transparent;
+  }
+
+  // Simple
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker__icon {
+    display: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid):not(.#{$prefix}--date-picker__input--warn),
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--warn {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  // Single, Range
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__icon {
+    top: rem(43px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker__input {
+    width: 100%;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--single {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid),
+  .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  // Range
+  .#{$prefix}--date-picker--fluid:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container:not(.#{$prefix}--date-picker--fluid--invalid) {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container {
+    width: 100%;
+    min-width: rem(144px);
+    min-height: rem(63px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child {
+    margin-right: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left: 1px solid $border-strong;
+  }
+
+  // Invalid
+  // Entire input
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
+  // Just one input invalid
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input--invalid {
+    outline: none;
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container:last-child.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input--invalid,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    + .#{$prefix}--date-picker-container
+    .#{$prefix}--date-picker__input {
+    border-left: none;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--single
+    .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker-container {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn
+    + .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left: 1px solid transparent;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:first-child::after,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--range
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+    position: absolute;
+    top: rem(8px);
+    right: 0;
+    display: block;
+    width: 1px;
+    height: calc(100% - 1rem);
+    background: $border-strong;
+    content: '';
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+    left: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__divider {
+    width: calc(100% - 2rem);
+    border-style: solid;
+    border-color: $border-subtle;
+    border-bottom: none;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__icon--invalid,
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__icon--warn {
+    top: rem(80px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__icon--invalid,
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker--simple
+    .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker__icon--warn {
+    display: block;
+  }
+
+  // Set focus when single input is invalid
+  .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker__input:focus {
+    @include focus-outline('outline');
+  }
+
+  // Entire Datepicker invalid state
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin-top: 0;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    ~ .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn {
+    position: relative;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker--range
+    + .#{$prefix}--date-picker__icon,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker--range
+    + .#{$prefix}--date-picker__icon {
+    top: rem(80px);
+  }
+
+  // Skeleton
+  .#{$prefix}--date-picker--fluid__skeleton {
+    height: rem(64px);
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--container {
+    position: relative;
+    width: 100%;
+    height: rem(64px);
+    padding: rem(13px) rem(40px) rem(13px) $spacing-05;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton {
+    height: 1rem;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label {
+    margin-bottom: rem(4px);
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input {
+    width: 80%;
+    height: rem(18px);
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--container
+    .#{$prefix}--date-picker__icon {
+    top: auto;
+    bottom: rem(2px);
+  }
+
+  // Range skeleton
+  .#{$prefix}--date-picker--fluid__skeleton--range {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container {
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container:first-of-type {
+    border-right: 1px solid $skeleton-element;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--text-input {
+    width: 100%;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container
+    .#{$prefix}--date-picker__icon {
+    bottom: rem(5px);
+  }
+}

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@forward 'fluid-date-picker';
+@use 'fluid-date-picker';
+
+@include fluid-date-picker.fluid-date-picker;

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -64,7 +64,7 @@
   // invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
-    border-bottom: none;
+    border-bottom: 1px solid transparent;
   }
 
   .#{$prefix}--text-area__divider,

package/scss/components/form/_form.scss

@@ -20,6 +20,17 @@
 $input-label-weight: 400 !default;
 
 @mixin form {
+  // Override Chrome autocomplete styles
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus {
+    box-shadow: 0 0 0 1000px $field inset;
+    -webkit-text-fill-color: $text-primary;
+  }
+
   .#{$prefix}--fieldset {
     @include reset;
   }

package/scss/components/multiselect/_multiselect.scss

@@ -105,4 +105,42 @@
     .#{$prefix}--list-box__menu {
     visibility: hidden;
   }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon
+    svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag__close-icon:hover {
+    background-color: transparent;
+    color: $text-primary;
+    cursor: default;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter {
+    box-shadow: 0 0 0 1px $background-inverse;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter
+    svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
 }

package/scss/components/text-area/_text-area.scss

@@ -25,7 +25,6 @@
     @include type-style('body-01');
     @include focus-outline('reset');
 
-    width: 100%;
     min-width: 10rem;
     height: 100%;
     min-height: rem(40px);
@@ -108,6 +107,7 @@
   .#{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;
 
+    width: 100%;
     height: rem(100px);
 
     &::placeholder {