@carbon/charts 0.27.0 → 0.29.1

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

@@ -0,0 +1,568 @@
+//
+// Copyright IBM Corp. 2016, 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.
+//
+
+//-----------------------------
+// List Box
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@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';
+
+/// @type Number
+/// @access private
+/// @group list-box
+$list-box-width: 100%;
+
+/// @type Number
+/// @access private
+/// @group list-box
+$list-box-height: rem(40px);
+
+/// @type Number
+/// @access private
+/// @group list-box
+$list-box-inline-height: $list-box-height;
+
+/// @type Number
+/// @access private
+/// @group list-box
+$list-box-menu-width: rem(300px);
+
+/// List box styles
+/// @access private
+/// @group list-box
+@mixin listbox {
+  // The overall container element for a `list-box`. Has two variants,
+  // `disabled` and `inline`.
+  .#{$prefix}--list-box__wrapper--inline {
+    display: inline-grid;
+    align-items: center;
+    grid-template: auto auto / auto auto;
+    grid-gap: rem(4px);
+
+    .#{$prefix}--label {
+      @include type-style('body-short-01');
+    }
+
+    .#{$prefix}--label,
+    .#{$prefix}--form__helper-text,
+    .#{$prefix}--form-requirement {
+      margin: 0;
+    }
+
+    .#{$prefix}--form__helper-text {
+      max-width: none;
+    }
+
+    .#{$prefix}--form-requirement {
+      grid-column: 2;
+    }
+  }
+
+  .#{$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;
+    color: $text-01;
+    transition: all $duration--fast-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $hover-ui;
+    }
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-bottom-color: $ui-03;
+  }
+
+  .#{$prefix}--list-box--expanded:hover {
+    background-color: $field-01;
+  }
+
+  .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--list-box .#{$prefix}--text-input {
+    height: 100%;
+  }
+
+  // invalid states
+  .#{$prefix}--list-box__invalid-icon {
+    position: absolute;
+    top: $carbon--spacing-04;
+    right: $carbon--spacing-08;
+    fill: $support-01;
+  }
+
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
+    top: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+    border-bottom: 0;
+    padding-right: carbon--mini-units(8);
+  }
+
+  .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-right: carbon--mini-units(7);
+  }
+
+  // Light variation for 'list-box'
+  .#{$prefix}--list-box--light {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
+    border-bottom-width: 0;
+  }
+
+  // Disabled state for `list-box`
+  .#{$prefix}--list-box--disabled:hover {
+    background-color: $field-01;
+  }
+
+  .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
+    background-color: $field-02;
+  }
+
+  .#{$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;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label,
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__label {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--list-box--disabled,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item--highlighted {
+    color: $disabled-02;
+    text-decoration: none;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover {
+    cursor: not-allowed;
+  }
+
+  // disabled && invalid
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field {
+    padding-right: $carbon--spacing-09;
+  }
+
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-right: carbon--mini-units(4);
+  }
+
+  // Inline variant for a `list-box`
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
+    background-color: $ui-background;
+    border-width: 0;
+
+    &:hover {
+      background-color: $hover-ui;
+    }
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded {
+    border-bottom-width: 0;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded
+    .#{$prefix}--list-box__field[aria-expanded='true'] {
+    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.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    height: rem(32px);
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding: 0 carbon--mini-units(4) 0 $carbon--spacing-03;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-icon {
+    right: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__invalid-icon {
+    right: $carbon--spacing-07;
+  }
+
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
+    color: $text-01;
+  }
+
+  // The field we use for input, showing selection, etc.
+  .#{$prefix}--list-box__field {
+    @include button-reset;
+    position: relative;
+    display: inline-flex;
+    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;
+  }
+
+  .#{$prefix}--list-box__field:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--list-box__field[disabled] {
+    outline: none;
+    color: $disabled-02;
+  }
+
+  // populated input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input[value] {
+    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}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value]
+    + .#{$prefix}--list-box__invalid-icon {
+    right: rem(66px); // to account for clear input button outline
+  }
+
+  // empty input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+    padding-right: $carbon--spacing-09;
+  }
+
+  // invalid && empty input field
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value=''] {
+    padding-right: carbon--mini-units(9);
+  }
+
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value='']
+    + .#{$prefix}--list-box__invalid-icon {
+    right: rem(40px); // to account for clear input button outline
+  }
+
+  // Label for a `list-box__field`
+  .#{$prefix}--list-box__label {
+    @include type-style('body-short-01');
+    color: $text-01;
+    user-select: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  // Menu status inside of a `list-box__field`
+  .#{$prefix}--list-box__menu-icon {
+    position: absolute;
+    right: $carbon--spacing-05;
+    height: 100%;
+    transition: transform $duration--fast-01 motion(standard, productive);
+    cursor: pointer;
+  }
+
+  .#{$prefix}--list-box__menu-icon > svg {
+    fill: $icon-01;
+    height: 100%;
+  }
+
+  .#{$prefix}--list-box__menu-icon--open {
+    transform: rotate(180deg);
+  }
+
+  // Selection indicator for a `list-box__field`
+  .#{$prefix}--list-box__selection {
+    position: absolute;
+    right: rem(33px); // to preserve .5rem space between icons according to spec
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: rem(30px);
+    width: rem(30px);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color $duration--fast-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--list-box__selection > svg {
+    fill: $icon-02;
+  }
+
+  .#{$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;
+    display: flex;
+    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
+    margin-right: rem(10px);
+    border-radius: rem(12px);
+  }
+
+  .#{$prefix}--list-box__selection--multi > svg {
+    fill: $inverse-01;
+    margin-left: rem(4px);
+    width: rem(20px);
+    height: rem(20px);
+    padding: rem(2px);
+  }
+
+  .#{$prefix}--list-box__selection--multi > svg:hover {
+    border-radius: 50%;
+    background-color: $hover-secondary;
+    fill: $icon-03;
+  }
+
+  .#{$prefix}--list-box__selection--multi:focus,
+  .#{$prefix}--list-box__selection--multi:hover {
+    outline: none;
+  }
+
+  // Descendant of a `list-box` that displays a list of options to select
+  .#{$prefix}--list-box__menu {
+    @include box-shadow();
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: $list-box-width;
+    background-color: $ui-01;
+    max-height: rem(140px);
+    overflow-y: auto;
+    z-index: z('dropdown');
+  }
+
+  // Descendant of a `list-box__menu` that represents a selection for a control
+  .#{$prefix}--list-box__menu-item {
+    @include type-style('body-short-01');
+    height: rem(40px);
+    color: $text-02;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    transition: background $duration--fast-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $hover-ui;
+    }
+
+    &:active {
+      background-color: $selected-ui;
+    }
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $ui-03;
+  }
+
+  .#{$prefix}--list-box__menu-item:first-of-type
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item:hover
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-01;
+  }
+
+  .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $ui-03;
+  }
+
+  .#{$prefix}--list-box__menu-item__option {
+    @include focus-outline('reset');
+    display: block;
+    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;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    border-top-color: $ui-03;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: border-color $duration--fast-01 motion(standard, productive),
+      color $duration--fast-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+      margin: 0;
+      padding: rem(11px) rem(16px);
+      border-color: transparent;
+    }
+
+    &:hover {
+      color: $text-01;
+      border-color: transparent;
+    }
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__option {
+    margin: 0 $carbon--spacing-03;
+
+    &:focus {
+      margin: 0;
+      padding-left: $carbon--spacing-03;
+      padding-right: $carbon--spacing-03;
+    }
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted {
+    background-color: $hover-ui;
+    color: $text-01;
+    border-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item--highlighted
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-01;
+  }
+
+  .#{$prefix}--list-box__menu-item--active {
+    color: $text-01;
+    border-bottom-color: $selected-ui;
+
+    &:hover {
+      background-color: $selected-ui;
+    }
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-01;
+  }
+
+  .#{$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;
+  }
+
+  // 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
+  // correctly.
+  .#{$prefix}--list-box input[role='combobox'] {
+    background-color: inherit;
+    min-width: 0;
+  }
+}
+
+@include exports('list-box') {
+  @include listbox;
+}

package/styles/vendor/carbon-components/src/components/list-box/list-box.hbs

@@ -0,0 +1,127 @@
+<!--
+  Copyright IBM Corp. 2016, 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.
+-->
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">List box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
+        aria-expanded="false" aria-haspopup="true">
+        <span class="{{@root.prefix}}--list-box__label">List box options</span>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">List box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
+      data-invalid>
+      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
+      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
+        aria-expanded="false" aria-haspopup="true">
+        <span class="{{@root.prefix}}--list-box__label">List box options</span>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
+      here
+    </div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
+      data-invalid>
+      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
+        aria-expanded="false" aria-haspopup="true">
+        <span class="{{@root.prefix}}--list-box__label">List box options</span>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
+      here
+    </div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
+        aria-expanded="false" aria-haspopup="true">
+        <span class="{{@root.prefix}}--list-box__label">List box options</span>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">List box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
+      here
+    </div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
+        aria-expanded="true" aria-haspopup="true">
+        <span class="{{@root.prefix}}--list-box__label">List box options</span>
+        <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
+          {{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
+        </div>
+      </div>
+      <ul class="{{@root.prefix}}--list-box__menu" role="combobox">
+        {{#each items}}
+        <li
+          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
+          id="{{id}}">
+          <div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
+            {{label}}
+          </div>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+</div>