feat(list-box): add styles for generic ListBox (#481)

* feat(list-box): add styles for generic ListBox * docs: update list-box README and styles * chore: update component header in style definition
carbon-design-system · Jan 8, 2018 · e7c54db · e7c54db
1 parent 1c4cc0c
commit e7c54db
Show file tree

Hide file tree

Showing 6 changed files with 499 additions and 85 deletions.
diff --git a/src/components/list-box/README.md b/src/components/list-box/README.md
@@ -0,0 +1,22 @@
+# `list-box`
+
+> A generic UI component used to build selection menus like Dropdowns, Comboboxes, and more.
+
+### SCSS
+
+#### Classes
+
+| Name  | Description |
+|:------|:-------------|
+| `.bx--list-box` | The containing element for a `list-box` |
+| `.bx--list-box--inline` | The `inline` variant of a `list-box` |
+| `.bx--list-box--disabled` | The `disabled` state of a `list-box` control |
+| `.bx--list-box__field` | A descendant of a `list-box` responsible for showing label information, selections, and current input |
+| `.bx--list-box__label` | A descendant of a `list-box` field responsible for displaying the label of the control |
+| `.bx--list-box__menu-icon` | A descendant of a `list-box` field responsible for displaying the open status of the menu of options for the control |
+| `.bx--list-box__menu-icon--open` | A modifier of `.bx--list-box__menu-icon` that updates the orientation of the icon for when the menu of options for the control is visible |
+| `.bx--list-box__selection` | A descendant of a `list-box` field responsbile for showing a selection has been made, in addition to providing a way to clear the current selection for the control |
+| `.bx--list-box__selection--multi` | A modifier of `.bx--list-box__selection` when the control is able to have multiple selections |
+| `.bx--list-box__menu` | A descendant of a `list-box` that provides a list of options that the user can select for the control |
+| `.bx--list-box__menu-item` | A descendant of a `list-box__menu` that is a selectable option|
+| `.bx--list-box__menu-item--highlighted` | A modifier for `list-box__menu-item` that indicates the item is being interacted with by a user |
diff --git a/src/components/list-box/_list-box.scss b/src/components/list-box/_list-box.scss
@@ -0,0 +1,237 @@
+//-----------------------------
+// List Box
+//-----------------------------
+
+@import '../../globals/scss/colors';
+@import '../../globals/scss/css--helpers';
+@import '../../globals/scss/layout';
+@import '../../globals/scss/import-once';
+@import '../../globals/scss/vars';
+
+$list-box-width: 100%;
+$list-box-height: rem(40px);
+$list-box-inline-height: rem(32px);
+$list-box-menu-width: rem(300px);
+
+@include exports('list-box') {
+  // The overall container element for a `list-box`. Has two variants,
+  // `disabled` and `inline`.
+  .bx--list-box {
+    position: relative;
+    width: $list-box-width;
+    height: $list-box-height;
+    background-color: rgba($field-01, 0.1);
+  }
+
+  // Disabled state for a `list-box`
+  .bx--list-box--disabled {
+    opacity: 0.5;
+  }
+
+  .bx--list-box--disabled,
+  .bx--list-box--disabled .bx--list-box__field,
+  .bx--list-box--disabled .bx--list-box__menu-icon {
+    cursor: not-allowed;
+  }
+
+  // Inline variant for a `list-box`
+  .bx--list-box--inline {
+    background-color: inherit;
+    width: auto;
+    height: $list-box-inline-height;
+  }
+
+  .bx--list-box--inline .bx--list-box__label {
+    color: $brand-01;
+  }
+
+  .bx--list-box--inline .bx--list-box__field {
+    padding: 0 0 0 rem(10px);
+  }
+
+  .bx--list-box--inline .bx--list-box__menu-icon {
+    position: static;
+    padding: 0 rem(10px) 0 rem(12px);
+  }
+
+  .bx--list-box--inline > .bx--list-box__menu {
+    top: $list-box-inline-height;
+    width: $list-box-menu-width;
+  }
+
+  .bx--list-box--inline > .bx--list-box__field[aria-expanded='true'] ~ .bx--list-box__menu {
+    outline: 1px solid $brand-01;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .bx--list-box--inline > .bx--list-box__field[aria-expanded='true'] {
+    outline: none;
+  }
+
+  // The field we use for input, showing selection, etc.
+  .bx--list-box__field {
+    @include button-reset;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 1rem;
+    cursor: pointer;
+  }
+
+  .bx--list-box__field:focus,
+  .bx--list-box__field[aria-expanded='true'] {
+    outline: 1px solid $brand-01;
+  }
+
+  .bx--list-box__field[disabled] {
+    outline: none;
+  }
+
+  .bx--list-box__field[aria-expanded='true'] ~ .bx--list-box__menu {
+    box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01, 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  // Label for a `list-box__field`
+  .bx--list-box__label {
+    @include typescale('zeta');
+
+    color: $text-01;
+    font-weight: 600;
+    user-select: none;
+  }
+
+  // Menu status inside of a `list-box__field`
+  .bx--list-box__menu-icon {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    padding: 0 1rem;
+    transition: transform 200ms $bx--standard-easing;
+    cursor: pointer;
+  }
+
+  .bx--list-box__menu-icon > svg {
+    fill: $brand-01;
+    height: 100%;
+  }
+
+  .bx--list-box__menu-icon--open {
+    transform: rotate(180deg);
+  }
+
+  // Selection indicator for a `list-box__field`
+  .bx--list-box__selection {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: rem(26px);
+    bottom: 0;
+    height: rem(40px);
+    padding: 0 1rem;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 200ms $bx--standard-easing;
+  }
+
+  .bx--list-box__selection > svg {
+    fill: $ui-05;
+    height: 100%;
+  }
+
+  .bx--list-box__selection:focus {
+    outline: 1px solid $brand-01;
+  }
+
+  // Modifier for a selection to show that multiple selections have been made
+  .bx--list-box__selection--multi {
+    @include typescale('omega');
+
+    position: static;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background-color: $brand-01;
+    height: rem(18px);
+    color: white;
+    line-height: 0;
+    padding: rem(5px);
+    margin-right: rem(10px);
+    border-radius: rem(13px);
+  }
+
+  .bx--list-box__selection--multi > svg {
+    fill: white;
+    width: 0.5rem;
+    height: 0.5rem;
+    margin-left: rem(5px);
+  }
+
+  .bx--list-box__selection--multi:focus,
+  .bx--list-box__selection--multi:hover {
+    background-color: $brand-02;
+    outline: none;
+  }
+
+  // Descendant of a `list-box` that displays a list of options to select
+  .bx--list-box__menu {
+    @include box-shadow();
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: $list-box-height;
+    width: $list-box-width;
+    background-color: $ui-01;
+    max-height: rem(120px);
+    overflow-y: auto;
+    z-index: z('dropdown');
+  }
+
+  // Descendant of a `list-box__menu` that represents a selection for a control
+  .bx--list-box__menu-item {
+    @include typescale('zeta');
+
+    display: flex;
+    align-items: center;
+    height: rem(40px);
+    padding: 0 1rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .bx--list-box__menu-item:hover,
+  .bx--list-box__menu-item--highlighted {
+    background-color: rgba($field-01, 0.1);
+    color: $text-01;
+  }
+
+  // Tweaks for descendants
+
+  // In multi-select scenarios, we need to target checkbox inputs
+  .bx--list-box__menu-item > .bx--form-item.bx--checkbox-wrapper {
+    margin: 0;
+  }
+
+  // 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.
+  .bx--list-box input[role='combobox'] {
+    background-color: inherit;
+    font-weight: 600;
+    outline-offset: 0;
+  }
+
+  .bx--list-box input[role='combobox']::placeholder {
+    font-weight: 400;
+  }
+
+  .bx--list-box--disabled input[role='combobox'] {
+    opacity: 1;
+  }
+}
diff --git a/src/components/list-box/list-box--dropdown--inline.html b/src/components/list-box/list-box--dropdown--inline.html
@@ -0,0 +1,29 @@
+<div class="bx--list-box bx--list-box--inline">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
+    <span class="bx--list-box__label">Label</span>
+    <div class="bx--list-box__menu-icon">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+        <title>Open menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+</div>
+<div style="margin-bottom: 2rem;"></div>
+<div class="bx--list-box bx--dropdown-v2 bx--list-box--inline">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
+    <span class="bx--list-box__label">Label</span>
+    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+        <title>Close menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+  <div class="bx--list-box__menu">
+    <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
+  </div>
+</div>
diff --git a/src/components/list-box/list-box--dropdown.html b/src/components/list-box/list-box--dropdown.html
@@ -0,0 +1,28 @@
+<div class="bx--list-box">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
+    <span class="bx--list-box__label">Label</span>
+    <div class="bx--list-box__menu-icon">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+        <title>Open menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+</div>
+<div style="margin-bottom: 2rem;"></div>
+<div class="bx--list-box">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"><span class="bx--list-box__label">Label</span>
+    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+        <title>Close menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+  <div class="bx--list-box__menu">
+    <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
+  </div>
+</div>
diff --git a/src/globals/scss/styles.scss b/src/globals/scss/styles.scss
@@ -60,6 +60,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/number-input/number-input';
 @import '../../components/form/form';
 @import '../../components/link/link';
+@import '../../components/list-box/list-box';
 @import '../../components/list/list';
 @import '../../components/data-table/data-table';
 @import '../../components/data-table-v2/data-table-v2';