@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/time-picker/migrate-to-10.x.md

@@ -0,0 +1,63 @@
+### HTML
+
+Some markup changes and icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Also design change around the select box involves changing the list of CSS
+classes applied to the markup. Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/date-picker/code)
+site. React and other framework variants should reflect the change
+automatically.
+
+**Things to note**:
+
+- Time picker label `bx--label` is no longer a child of `bx—time-picker`, it's
+  now a sibling of it
+- `bx—form-requirement` is no longer a child of `bx--time-picker__input`, it's
+  now a sibling of `bx--time-picker` / child of `bx—form-item`
+- New icons are being used for selects
+
+**New structure**:
+
+```bash
+bx--form-item
+├── bx--label
+├── bx--time-picker
+│   ├── bx--time-picker__input
+│   │   └── bx--time-picker__input-field (additional classes changed)
+│   ├── bx--time-picker__select (additional classes changed)
+│   │   ├── bx--label bx--visually-hidden
+│   │   ├── bx--select-input
+│   │   └── svg* (new icon)
+│   └── bx--time-picker__select (additional classes changed)
+│       ├── bx--label bx--visually-hidden
+│       ├── bx--select-input
+│       └── svg* (new icon)
+└── bx--form-requirement (invalid only)
+```
+
+**Old structure**:
+
+```bash
+bx--form-item
+└── bx--time-picker
+    ├── bx--time-picker__input
+    │   ├── bx--label
+    │   ├── bx--time-picker__input-field
+    │   └── bx--form-requirement
+    ├── bx--time-picker__select
+    │   ├── bx--label bx--visually-hidden
+    │   ├── bx--select-input
+    │   └── svg* (old icon)
+    └── bx--time-picker__select
+        ├── bx--label bx--visually-hidden
+        ├── bx--select-input
+        └── svg* (old icon)
+```
+
+### SCSS
+
+The `data-invalid` attribute has been placed on the time picker wrapper div
+
+| v9  | v10                             | Note           |
+| --- | ------------------------------- | -------------- |
+| -   | `bx--time-picker[data-invalid]` | :eyes: Changed |

package/styles/vendor/carbon-components/src/components/time-picker/time-picker--light.hbs

@@ -0,0 +1,125 @@
+<!--
+  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="{{prefix}}--form-item">
+  <div class="{{prefix}}--time-picker{{#if light}} {{prefix}}--time-picker--light{{/if}}">
+    <div class="{{prefix}}--time-picker__input">
+      <label for="time-picker-5" class="{{prefix}}--label">Select a time</label>
+      <input id="time-picker-5" type="text"
+        class="{{prefix}}--text-input{{#if light}} {{prefix}}--text-input--light{{/if}} {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-9" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-9" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-10" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-10" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <div class="{{prefix}}--time-picker{{#if light}} {{prefix}}--time-picker--light{{/if}}" data-invalid>
+    <div class="{{prefix}}--time-picker__input">
+      <label for="time-picker-6" class="{{prefix}}--label">Select a time</label>
+      <input id="time-picker-6" type="text"
+        class="{{prefix}}--text-input{{#if light}} {{prefix}}--text-input--light{{/if}} {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-11" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-11" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-12" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-12" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+  </div>
+  <div class="{{prefix}}--form-requirement">
+    Invalid time.
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <div class="{{prefix}}--time-picker{{#if light}} {{prefix}}--time-picker--light{{/if}}">
+    <div class="{{prefix}}--time-picker__input">
+      <label for="time-picker-7" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
+      <input id="time-picker-7" type="text"
+        class="{{prefix}}--text-input{{#if light}} {{prefix}}--text-input--light{{/if}} {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" disabled />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-13" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-13" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-14" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-14" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <div class="{{prefix}}--time-picker{{#if light}} {{prefix}}--time-picker--light{{/if}}" data-invalid>
+    <div class="{{prefix}}--time-picker__input">
+      <label for="time-picker-8" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
+      <input id="time-picker-8" type="text"
+        class="{{prefix}}--text-input{{#if light}} {{prefix}}--text-input--light{{/if}} {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" disabled />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-15" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-15" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select{{#if light}} {{prefix}}--select--light{{/if}}">
+      <label for="select-id-16" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-16" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+  </div>
+  <div class="{{prefix}}--form-requirement">
+    Invalid time.
+  </div>
+</div>

package/styles/vendor/carbon-components/src/components/time-picker/time-picker.hbs

@@ -0,0 +1,121 @@
+<!--
+  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="{{prefix}}--form-item">
+  <label for="time-picker-1" class="{{prefix}}--label">Select a time</label>
+  <div class="{{prefix}}--time-picker">
+    <div class="{{prefix}}--time-picker__input">
+      <input id="time-picker-1" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-1" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-1" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-2" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-2" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <label for="time-picker-2" class="{{prefix}}--label">Select a time</label>
+  <div class="{{prefix}}--time-picker" data-invalid>
+    <div class="{{prefix}}--time-picker__input">
+      <input id="time-picker-2" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-3" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-3" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-4" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-4" class="{{prefix}}--select-input">
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+  </div>
+  <div class="{{prefix}}--form-requirement">
+    Invalid time.
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <label for="time-picker-3" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
+  <div class="{{prefix}}--time-picker">
+    <div class="{{prefix}}--time-picker__input">
+      <input id="time-picker-3" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" disabled />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-5" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-5" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-6" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-6" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+  </div>
+</div>
+<div class="{{prefix}}--form-item">
+  <label for="time-picker-4" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
+  <div class="{{prefix}}--time-picker" data-invalid>
+    <div class="{{prefix}}--time-picker__input">
+      <input id="time-picker-4" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
+        pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" disabled />
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-7" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
+      <select id="select-id-7" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="AM">AM</option>
+        <option class="{{prefix}}--select-option" value="PM">PM</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+    <div class="{{prefix}}--time-picker__select {{prefix}}--select">
+      <label for="select-id-8" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
+        zone</label>
+      <select id="select-id-8" class="{{prefix}}--select-input" disabled>
+        <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
+        <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
+        <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
+    </div>
+  </div>
+  <div class="{{prefix}}--form-requirement">
+    Invalid time.
+  </div>
+</div>

package/styles/vendor/carbon-components/src/components/toggle/README.md

@@ -0,0 +1,21 @@
+### SCSS
+
+#### Modifiers
+
+Use these modifiers with `.bx--toggle` class.
+
+| Selector                   | Description                               |
+| -------------------------- | ----------------------------------------- |
+| `.bx--toggle-input--small` | Selector for applying small toggle styles |
+
+### FAQ
+
+#### Best practice
+
+`.bx--toggle-input__label` must always have a value for the `aria-label`
+attribute. This makes it visible to screen readers.
+
+The `.bx--toggle__text--off` and `.bx--toggle__text--on` elements are completely
+optional. If they are present, they can be hidden from screen readers with
+`aria-hidden="true"` since the `checked` state of the checkbox will indicate
+this information already.