@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/src/components/list-box/_list-box.scss

@@ -13,9 +13,9 @@
 @import '../../globals/scss/css--helpers';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/layout';
-@import '../../globals/scss/layer';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';
+@import '../tag/mixins';
 
 /// @type Number
 /// @access private
@@ -46,8 +46,8 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-template: auto auto / auto auto;
     grid-gap: rem(4px);
+    grid-template: auto auto / auto auto;
 
     .#{$prefix}--label {
       @include type-style('body-short-01');
@@ -70,15 +70,16 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box {
     @include reset;
+
     position: relative;
     width: $list-box-width;
     height: rem(40px);
     max-height: rem(40px);
-    background-color: $field-01;
     border: none;
     border-bottom: 1px solid $ui-04;
-    cursor: pointer;
+    background-color: $field-01;
     color: $text-01;
+    cursor: pointer;
     transition: all $duration--fast-01 motion(standard, productive);
 
     &:hover {
@@ -86,6 +87,18 @@ $list-box-menu-width: rem(300px);
     }
   }
 
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl,
+  .#{$prefix}--list-box--lg {
+    height: rem(48px);
+    max-height: rem(48px);
+  }
+
+  .#{$prefix}--list-box--sm {
+    height: rem(32px);
+    max-height: rem(32px);
+  }
+
   .#{$prefix}--list-box--expanded {
     border-bottom-color: $ui-03;
   }
@@ -99,24 +112,33 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box .#{$prefix}--text-input {
+    min-width: 0;
     height: 100%;
   }
 
   // invalid states
   .#{$prefix}--list-box__invalid-icon {
     position: absolute;
-    top: $carbon--spacing-04;
+    top: 50%;
     right: $carbon--spacing-08;
     fill: $support-01;
+    transform: translateY(-50%);
   }
 
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
-    top: $carbon--spacing-03;
+  .#{$prefix}--list-box__invalid-icon--warning {
+    fill: $support-03;
   }
 
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
-    border-bottom: 0;
+  .#{$prefix}--list-box__invalid-icon--warning path[fill] {
+    fill: $carbon__black-100;
+    opacity: 1;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(8);
+    border-bottom: 0;
   }
 
   .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
@@ -127,10 +149,22 @@ $list-box-menu-width: rem(300px);
   // Light variation for 'list-box'
   .#{$prefix}--list-box--light {
     background-color: $field-02;
+
+    &:hover {
+      background-color: $hover-light-ui;
+    }
+  }
+
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
+    background: $field-02;
+  }
+
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $decorative-01;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
   }
 
   // Disabled state for `list-box`
@@ -145,7 +179,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box--disabled,
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
     outline: none;
   }
 
@@ -155,7 +189,8 @@ $list-box-menu-width: rem(300px);
     color: $disabled-02;
   }
 
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg {
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
     fill: $disabled-02;
   }
 
@@ -190,8 +225,8 @@ $list-box-menu-width: rem(300px);
 
   // Inline variant for a `list-box`
   .#{$prefix}--list-box.#{$prefix}--list-box--inline {
-    background-color: $ui-background;
     border-width: 0;
+    background-color: transparent;
 
     &:hover {
       background-color: $hover-ui;
@@ -207,15 +242,12 @@ $list-box-menu-width: rem(300px);
     border-width: 0;
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover,
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover {
-    background-color: $field-02;
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover {
+    background-color: transparent;
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline,
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline
-    .#{$prefix}--list-box__field {
-    height: rem(32px);
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover {
+    background-color: $field-02;
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
@@ -237,20 +269,35 @@ $list-box-menu-width: rem(300px);
     color: $text-01;
   }
 
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+    height: 100%;
+  }
+
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field {
+    max-width: rem(480px);
+  }
+
+  .#{$prefix}--dropdown--inline .bx--list-box__menu {
+    min-width: rem(288px);
+    max-width: rem(480px);
+  }
+
   // The field we use for input, showing selection, etc.
   .#{$prefix}--list-box__field {
     @include button-reset;
+
     position: relative;
     display: inline-flex;
+    overflow: hidden;
+    // Account for the border in `.bx--list-box`
+    height: calc(100% + 1px);
     align-items: center;
-    vertical-align: top;
-    height: rem(40px);
     padding: 0 $carbon--spacing-09 0 $carbon--spacing-05;
     cursor: pointer;
     outline: none;
-    white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
   }
 
   .#{$prefix}--list-box__field:focus {
@@ -258,140 +305,184 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__field[disabled] {
-    outline: none;
     color: $disabled-02;
+    outline: none;
   }
 
   // populated input field
-  .#{$prefix}--list-box__field .#{$prefix}--text-input[value] {
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
     padding-right: carbon--mini-units(9);
   }
 
   // invalid && populated input field
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
-    .#{$prefix}--text-input[value] {
-    padding-right: rem(98px); // to account for clear input button outline
+    .#{$prefix}--text-input,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input {
+    // to account for clear input button outline
+    padding-right: rem(98px);
   }
 
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
-    .#{$prefix}--text-input[value]
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
-    right: rem(66px); // to account for clear input button outline
+    // to account for clear input button outline
+    right: rem(66px);
   }
 
   // empty input field
-  .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+  .#{$prefix}--list-box__field .#{$prefix}--text-input--empty {
     padding-right: $carbon--spacing-09;
   }
 
   // invalid && empty input field
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
-    .#{$prefix}--text-input[value=''] {
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty {
     padding-right: carbon--mini-units(9);
   }
 
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
-    .#{$prefix}--text-input[value='']
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty
     + .#{$prefix}--list-box__invalid-icon {
-    right: rem(40px); // to account for clear input button outline
+    // to account for clear input button outline
+    right: rem(40px);
   }
 
   // Label for a `list-box__field`
   .#{$prefix}--list-box__label {
     @include type-style('body-short-01');
+
+    overflow: hidden;
     color: $text-01;
-    user-select: none;
     text-overflow: ellipsis;
-    overflow: hidden;
+    user-select: none;
     white-space: nowrap;
   }
 
   // Menu status inside of a `list-box__field`
   .#{$prefix}--list-box__menu-icon {
+    @include button-reset($width: false);
+
     position: absolute;
     right: $carbon--spacing-05;
-    height: 100%;
-    transition: transform $duration--fast-01 motion(standard, productive);
+    display: flex;
+    width: rem(24px);
+    height: rem(24px);
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
+    outline: none;
+    transition: transform $duration--fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--list-box__menu-icon > svg {
     fill: $icon-01;
-    height: 100%;
   }
 
   .#{$prefix}--list-box__menu-icon--open {
+    width: rem(24px);
+    justify-content: center;
     transform: rotate(180deg);
   }
 
   // Selection indicator for a `list-box__field`
   .#{$prefix}--list-box__selection {
+    @include button-reset($width: false);
+
     position: absolute;
-    right: rem(33px); // to preserve .5rem space between icons according to spec
+    top: 50%;
+    /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
+    right: rem(36px);
     display: flex;
-    justify-content: center;
+    width: rem(24px);
+    height: rem(24px);
     align-items: center;
-    height: rem(30px);
-    width: rem(30px);
+    justify-content: center;
     cursor: pointer;
-    user-select: none;
+    transform: translateY(-50%);
     transition: background-color $duration--fast-01 motion(standard, productive);
+    user-select: none;
 
     &:focus {
       @include focus-outline('outline');
+
+      &:hover {
+        @include focus-outline('outline');
+      }
     }
   }
 
   .#{$prefix}--list-box__selection > svg {
-    fill: $icon-02;
+    fill: $icon-01;
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:focus {
     outline: none;
   }
 
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
-    fill: $disabled-02;
-  }
-
   // Modifier for a selection to show that multiple selections have been made
   .#{$prefix}--list-box__selection--multi {
     @include type-style('label-01');
+
     position: static;
+    top: auto;
     display: flex;
+    width: auto;
+    height: rem(24px);
     align-items: center;
     justify-content: space-between;
-    padding: 0;
-    background-color: $inverse-02;
-    height: rem(24px);
-    width: auto;
-    color: $inverse-01;
-    line-height: 0;
     padding: rem(8px);
-    padding-right: rem(2px); // Align with hover circle of X button
+    // Align with hover circle of X button
+    padding-right: rem(2px);
     margin-right: rem(10px);
+    background-color: $inverse-02;
     border-radius: rem(12px);
+    color: $inverse-01;
+    line-height: 0;
+    transform: none;
   }
 
   .#{$prefix}--list-box__selection--multi > svg {
-    fill: $inverse-01;
-    margin-left: rem(4px);
     width: rem(20px);
     height: rem(20px);
     padding: rem(2px);
+    margin-left: rem(4px);
+    fill: $inverse-01;
+
+    &:hover {
+      background-color: $hover-secondary;
+      border-radius: 50%;
+    }
   }
 
-  .#{$prefix}--list-box__selection--multi > svg:hover {
-    border-radius: 50%;
-    background-color: $hover-secondary;
-    fill: $icon-03;
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
+    @include tag-theme($disabled-02, $disabled-01);
+
+    > svg {
+      fill: $disabled-01;
+
+      &:hover {
+        background-color: initial;
+      }
+    }
   }
 
-  .#{$prefix}--list-box__selection--multi:focus,
   .#{$prefix}--list-box__selection--multi:hover {
     outline: none;
   }
@@ -399,25 +490,58 @@ $list-box-menu-width: rem(300px);
   // Descendant of a `list-box` that displays a list of options to select
   .#{$prefix}--list-box__menu {
     @include box-shadow();
+
     position: absolute;
-    left: 0;
+    z-index: z('dropdown');
     right: 0;
+    left: 0;
     width: $list-box-width;
     background-color: $ui-01;
-    max-height: rem(140px);
     overflow-y: auto;
-    z-index: z('dropdown');
+    transition: max-height $duration--fast-02 motion(standard, productive);
+
+    &:focus {
+      // remove default browser focus in firefox
+      @include focus-outline('border');
+    }
+  }
+
+  .#{$prefix}--list-box
+    .#{$prefix}--list-box__field[aria-expanded='false']
+    + .#{$prefix}--list-box__menu {
+    max-height: 0;
+  }
+
+  .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
+    // 40px item height * 5.5 items shown
+    max-height: rem(220px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu {
+    // 48px item height * 5.5 items shown
+    max-height: rem(264px);
+  }
+
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu {
+    // 32px item height * 5.5 items shown
+    max-height: rem(176px);
   }
 
   // Descendant of a `list-box__menu` that represents a selection for a control
   .#{$prefix}--list-box__menu-item {
     @include type-style('body-short-01');
+
+    position: relative;
     height: rem(40px);
     color: $text-02;
     cursor: pointer;
-    user-select: none;
-    position: relative;
     transition: background $duration--fast-01 motion(standard, productive);
+    user-select: none;
 
     &:hover {
       background-color: $hover-ui;
@@ -428,10 +552,28 @@ $list-box-menu-width: rem(300px);
     }
   }
 
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
+    background-color: $hover-light-ui;
+  }
+
+  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
+    height: rem(32px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
+  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
+    height: rem(48px);
+  }
+
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
     background-color: transparent;
   }
 
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
+    background-color: $selected-light-ui;
+  }
+
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item__option:hover {
     border-top-color: $ui-03;
@@ -462,36 +604,53 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item__option {
     @include focus-outline('reset');
+
     display: block;
+    overflow: hidden;
     height: rem(40px);
-    color: $text-02;
-    text-decoration: none;
-    font-weight: normal;
-    line-height: rem(16px);
     padding: rem(11px) 0;
-    margin: 0 $carbon--spacing-05;
+    padding-right: $carbon--spacing-06;
     border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
     border-top-color: $ui-03;
+    border-bottom: 1px solid transparent;
+    margin: 0 $carbon--spacing-05;
+    color: $text-02;
+    font-weight: normal;
+    line-height: 1rem;
+    text-decoration: none;
     text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     transition: border-color $duration--fast-01 motion(standard, productive),
       color $duration--fast-01 motion(standard, productive);
+    white-space: nowrap;
 
     &:focus {
       @include focus-outline('outline');
-      margin: 0;
+
       padding: rem(11px) rem(16px);
       border-color: transparent;
+      margin: 0;
     }
 
     &:hover {
-      color: $text-01;
       border-color: transparent;
+      color: $text-01;
     }
   }
 
+  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
+    height: rem(32px);
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
+    height: rem(48px);
+    padding-top: rem(15px);
+    padding-bottom: rem(15px);
+  }
+
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item:hover
     .#{$prefix}--list-box__menu-item__option,
@@ -504,16 +663,16 @@ $list-box-menu-width: rem(300px);
     margin: 0 $carbon--spacing-03;
 
     &:focus {
-      margin: 0;
-      padding-left: $carbon--spacing-03;
       padding-right: $carbon--spacing-03;
+      padding-left: $carbon--spacing-03;
+      margin: 0;
     }
   }
 
   .#{$prefix}--list-box__menu-item--highlighted {
+    border-color: transparent;
     background-color: $hover-ui;
     color: $text-01;
-    border-color: transparent;
   }
 
   .#{$prefix}--list-box__menu-item--highlighted
@@ -530,12 +689,20 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item--active {
-    color: $text-01;
     border-bottom-color: $selected-ui;
+    background-color: $selected-ui;
+    color: $text-01;
+  }
 
-    &:hover {
-      background-color: $selected-ui;
-    }
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
+    border-bottom-color: $selected-light-ui;
+    background-color: $selected-light-ui;
+  }
+
+  .#{$prefix}--list-box__menu-item--active:hover,
+  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+    border-bottom-color: $hover-selected-ui;
+    background-color: $hover-selected-ui;
   }
 
   .#{$prefix}--list-box__menu-item--active
@@ -543,23 +710,101 @@ $list-box-menu-width: rem(300px);
     color: $text-01;
   }
 
+  // Hide top border if previous list item is selected
+  .#{$prefix}--list-box__menu-item--active
+    + .#{$prefix}--list-box__menu-item
+    > .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    position: absolute;
+    top: 50%;
+    right: rem(16px);
+    display: none;
+    fill: $icon-01;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    right: rem(8px);
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    display: block;
+  }
+
   .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
     width: 100%;
   }
 
   .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
-    white-space: nowrap;
-    text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Dropdown top orientation modifiers
+  .#{$prefix}--list-box--up .#{$prefix}--list-box__menu {
+    bottom: 2.5rem;
+  }
+
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up
+    .#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu {
+    bottom: 2rem;
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up
+    .#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu {
+    bottom: 3rem;
   }
 
   // Tweaks for descendants
   // When handling input, we need to target nodes that specifically opt-in to
-  // the `combobox` role in order to make sure the text input is styled
+  // the type text in order to make sure the text input is styled
   // correctly.
-  .#{$prefix}--list-box input[role='combobox'] {
-    background-color: inherit;
+  // TODO: remove [role='combobox'] in v11
+  .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--list-box input[type='text'] {
     min-width: 0;
+    background-color: inherit;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__menu,
+  .#{$prefix}--multi-select .#{$prefix}--tag--filter {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--multi-select .#{$prefix}--tag__close-icon:focus,
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option {
+    @include high-contrast-mode('focus');
+  }
+
+  .#{$prefix}--list-box__menu-icon > svg,
+  .#{$prefix}--list-box__selection > svg,
+  .#{$prefix}--list-box__selection--multi > svg {
+    @include high-contrast-mode('icon-fill');
   }
 }