@carbon/styles 1.18.0-rc.0 → 1.19.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.18.0-rc.0",
+  "version": "1.19.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.9.0-rc.0",
-    "@carbon/feature-flags": "^0.10.0-rc.0",
-    "@carbon/grid": "^11.8.0-rc.0",
-    "@carbon/layout": "^11.8.0-rc.0",
-    "@carbon/motion": "^11.6.0-rc.0",
-    "@carbon/themes": "^11.13.0-rc.0",
-    "@carbon/type": "^11.12.0-rc.0",
+    "@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",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "50cfaf729cfe80fecb6f7371ef13b53b25514145"
+  "gitHead": "a9d6ab5cc79665453f218fd5821c65c399337c15"
 }

package/scss/components/_index.scss

@@ -31,6 +31,7 @@
 @use 'fluid-select';
 @use 'fluid-text-area';
 @use 'fluid-text-input';
+@use 'fluid-time-picker';
 @use 'form';
 @use 'inline-loading';
 @use 'link';

package/scss/components/combo-box/_combo-box.scss

@@ -42,4 +42,20 @@
     .#{$prefix}--list-box__field {
     padding: 0;
   }
+
+  // readonly
+  .#{$prefix}--combo-box--readonly,
+  .#{$prefix}--combo-box--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
+    cursor: default;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon svg,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
+  }
 }

package/scss/components/dropdown/_dropdown.scss

@@ -473,4 +473,19 @@
   .#{$prefix}--list-box__menu-item__selected-icon {
     @include high-contrast-mode('icon-fill');
   }
+
+  // readonly
+  .#{$prefix}--dropdown--readonly,
+  .#{$prefix}--dropdown--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__field,
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
+
+  .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__menu-icon svg {
+    fill: $icon-disabled;
+  }
 }

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

@@ -288,12 +288,15 @@
   .#{$prefix}--date-picker--fluid__skeleton--container {
     position: relative;
     width: 100%;
-    height: rem(64px);
-    padding: rem(13px) rem(40px) rem(13px) $spacing-05;
+    height: 100%;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton {
-    height: 1rem;
+    position: absolute;
+    top: $spacing-05;
+    left: $spacing-05;
+    width: 25%;
+    height: rem(8px);
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label {
@@ -301,14 +304,18 @@
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input {
-    width: 80%;
-    height: rem(18px);
+    position: absolute;
+    top: rem(36px);
+    left: $spacing-05;
+    width: 50%;
+    height: rem(8px);
+    padding: 0;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--container
     .#{$prefix}--date-picker__icon {
     top: auto;
-    bottom: rem(2px);
+    bottom: $spacing-03;
   }
 
   // Range skeleton
@@ -329,13 +336,9 @@
     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);
+    bottom: $spacing-03;
   }
 }

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

@@ -226,10 +226,10 @@
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__field {
     position: absolute;
-    bottom: rem(13px);
+    top: rem(36px);
     left: $spacing-05;
     width: 50%;
-    height: $spacing-05;
+    height: rem(8px);
     padding: 0;
   }
 
@@ -237,10 +237,10 @@
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__label {
     position: absolute;
-    top: rem(13px);
+    top: $spacing-05;
     left: $spacing-05;
     width: 25%;
-    height: $spacing-05;
+    height: rem(8px);
   }
 
   .#{$prefix}--list-box__wrapper--fluid

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

@@ -38,13 +38,13 @@
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input {
     min-height: rem(64px);
-    padding: rem(32px) $spacing-05 rem(13px);
+    padding: rem(32px) rem(32px) rem(13px) $spacing-05;
     outline: none;
+    text-overflow: ellipsis;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select__arrow {
-    top: auto;
-    bottom: 1rem;
+    top: $spacing-07;
     height: 1rem;
   }
 
@@ -54,10 +54,10 @@
   }
 
   // Invalid + Warn states
-  .#{$prefix}--select--fluid .#{$prefix}--select--invalid {
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--invalid
+    .#{$prefix}--select-input__wrapper {
     @include focus-outline('invalid');
-
-    outline-offset: 0;
   }
 
   .#{$prefix}--select--fluid
@@ -79,6 +79,7 @@
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
     .#{$prefix}--select-input {
+    padding-right: rem(32px);
     border-bottom: 1px solid transparent;
   }
 
@@ -86,6 +87,10 @@
     border-bottom: 1px solid $border-strong;
   }
 
+  .#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper {
+    flex-direction: column;
+  }
+
   .#{$prefix}--select--fluid
     .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input:not(:focus),
@@ -95,6 +100,23 @@
     outline: none;
   }
 
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
   .#{$prefix}--select--fluid .#{$prefix}--form-requirement {
     padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
     margin: 0;
@@ -122,10 +144,10 @@
   }
 
   // Focus styles
-  .#{$prefix}--select--fluid .#{$prefix}--select--fluid--focus {
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--fluid--focus
+    .#{$prefix}--select-input__wrapper {
     @include focus-outline('outline');
-
-    outline-offset: 0;
   }
 
   .#{$prefix}--select--fluid

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

@@ -154,21 +154,25 @@
   // Skeleton
   .#{$prefix}--text-input--fluid__skeleton {
     position: relative;
-    height: 100%;
-    padding: $spacing-05;
+    height: rem(64px);
     border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
   }
 
   .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton {
-    height: 0.5rem;
+    position: absolute;
+    top: $spacing-05;
+    left: $spacing-05;
+    width: 25%;
+    height: rem(8px);
   }
 
   .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label {
-    margin-bottom: $spacing-04;
-  }
-
-  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--text-input {
-    width: 80%;
+    position: absolute;
+    top: rem(36px);
+    left: $spacing-05;
+    width: 50%;
+    height: rem(8px);
+    padding: 0;
   }
 }

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

@@ -0,0 +1,235 @@
+//
+// 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 Time Picker
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../fluid-text-input';
+@use '../fluid-select';
+
+@mixin fluid-time-picker {
+  .#{$prefix}--time-picker--fluid {
+    background: $field;
+  }
+
+  .#{$prefix}--time-picker--fluid .#{$prefix}--time-picker--fluid__wrapper {
+    display: flex;
+  }
+
+  .#{$prefix}--time-picker--fluid__wrapper > *:nth-child(1),
+  .#{$prefix}--time-picker--fluid__wrapper > *:nth-child(2) {
+    flex-basis: 25%;
+  }
+
+  .#{$prefix}--time-picker--equal-width
+    .#{$prefix}--time-picker--fluid__wrapper
+    > * {
+    flex-basis: 50%;
+  }
+
+  // Simulated borders
+  .#{$prefix}--time-picker--fluid__wrapper
+    > *:nth-child(2):not(:last-child)
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid__wrapper
+    > *:last-child
+    .#{$prefix}--select-input__wrapper::before {
+    position: absolute;
+    display: block;
+    width: 1px;
+    height: calc(100% - 1px);
+    background-color: $border-strong;
+    content: '';
+    opacity: 1;
+    transition: opacity $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--time-picker--fluid__wrapper
+    .#{$prefix}--select-input__wrapper::after {
+    right: 0;
+  }
+
+  .#{$prefix}--time-picker--fluid__wrapper
+    .#{$prefix}--select-input__wrapper::before {
+    left: 0;
+  }
+
+  .#{$prefix}--time-picker--fluid:not(.#{$prefix}--time-picker--fluid--disabled)
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:nth-child(2):not(:last-child):hover
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid:not(.#{$prefix}--time-picker--fluid--disabled)
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:nth-child(2):hover:not(:last-child)
+    ~ *
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid:not(.#{$prefix}--time-picker--fluid--disabled)
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:last-child:hover
+    .#{$prefix}--select-input__wrapper::before {
+    opacity: 0;
+  }
+
+  .#{$prefix}--time-picker--fluid--disabled
+    .#{$prefix}--time-picker--fluid__wrapper
+    .#{$prefix}--select--disabled
+    .#{$prefix}--select-input__wrapper::before {
+    background: $border-disabled;
+  }
+
+  // Invalid + Warn states
+  .#{$prefix}--time-picker--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+    background: $field;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid {
+    @include focus-outline('invalid');
+
+    position: relative;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input,
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input-wrapper,
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input,
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select {
+    background: transparent;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input {
+    padding-top: rem(30px);
+    border-top: 2px solid transparent;
+  }
+
+  .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input {
+    border-right: 2px solid transparent;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid
+    .#{$prefix}--select-input:hover:not([disabled]) {
+    background: $field-hover;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input:hover {
+    border-top: 2px solid $support-error;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid
+    .#{$prefix}--select--fluid:last-of-type
+    .#{$prefix}--select-input:hover {
+    border-right: 2px solid $support-error;
+  }
+
+  .#{$prefix}--time-picker--fluid--warning {
+    position: relative;
+  }
+
+  .#{$prefix}--time-picker__icon {
+    display: none;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon,
+  .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon {
+    position: absolute;
+    top: rem(72px);
+    right: $spacing-05;
+    display: block;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon {
+    fill: $support-error;
+  }
+
+  .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--time-picker--fluid--warning
+    .#{$prefix}--time-picker__icon
+    path:first-of-type {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--form-requirement,
+  .#{$prefix}--time-picker--fluid--warning .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:nth-child(2):not(:last-child)
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid--invalid
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:last-child
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid--warning
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:nth-child(2):not(:last-child)
+    .#{$prefix}--select-input__wrapper::before,
+  .#{$prefix}--time-picker--fluid--warning
+    .#{$prefix}--time-picker--fluid__wrapper
+    > *:last-child
+    .#{$prefix}--select-input__wrapper::before {
+    top: 8px;
+    height: calc(100% - 1rem);
+  }
+
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input,
+  .#{$prefix}--time-picker--fluid--warning .#{$prefix}--text-input,
+  .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input,
+  .#{$prefix}--time-picker--fluid--warning .#{$prefix}--select-input {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--invalid
+    .#{$prefix}--time-picker__divider,
+  .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--warning
+    .#{$prefix}--time-picker__divider {
+    width: calc(100% - 2rem);
+    border-style: solid;
+    border-color: $border-subtle;
+    border-bottom: none;
+    margin: 0 1rem;
+  }
+
+  // Skeleton styles
+  .#{$prefix}--time-picker--fluid--skeleton {
+    display: flex;
+    width: 100%;
+    height: rem(64px);
+  }
+
+  .#{$prefix}--time-picker--fluid--skeleton > * {
+    width: auto;
+    height: 100%;
+  }
+
+  .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(1),
+  .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(2) {
+    width: 25%;
+  }
+
+  .#{$prefix}--time-picker--fluid--skeleton > *:last-child,
+  .#{$prefix}--time-picker--fluid--skeleton.#{$prefix}--time-picker--equal-width
+    > *:first-child {
+    width: 50%;
+  }
+}

package/scss/components/fluid-time-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-time-picker';
+@use 'fluid-time-picker';
+
+@include fluid-time-picker.fluid-time-picker;

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

@@ -98,6 +98,13 @@
     color: $text-disabled;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+  .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    background: transparent;
+  }
+
   // V11: Possibly deprecate
   .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
     background-color: $field-02;

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

@@ -203,6 +203,17 @@
     }
   }
 
+  .#{$prefix}--text-input__counter-alert {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------