@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/number-input/migrate-to-10.x.md

@@ -0,0 +1,55 @@
+### HTML
+
+Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
+are now used for the increase button, decrease button and validation error. Also
+some internal changes involves changing the markup structure a bit. Please see
+the new structure below and reference the
+[number input page](https://next.carbondesignsystem.com/components/number-input/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the changes automatically.
+
+**Things to note**:
+
+- Input and number controls are now inside a wrapper, so it is no longer a
+  sibling of the label. The wrapper is now a sibling of the label.
+- Helper text markup has now moved to be immediately below the label.
+- Invalid variation now includes an invalid icon.
+- Button icons have new paths and svg attributes.
+
+**New Structure**:
+
+```bash
+bx--form-item
+└── bx--number (optional: bx--number--nolabel, bx--number--helpertext)
+    ├── bx--label (optional)
+    ├── bx--form__helper-text (optional)
+    ├── bx--number__input-wrapper
+    │   ├── input
+    │   ├──svg bx--number__invalid (invalid use only)
+    │   └── bx--number__controls
+    │       ├── bx--number__control-btn up-icon
+    │       │   └──svg
+    │       └── bx--number__control-btn down-icon
+    │           └──svg
+    └── form requirement (invalid use only)
+```
+
+**Old Structure**:
+
+```bash
+bx--form-item
+└── bx--number (optional: bx--number--nolabel, bx--number--helpertext)
+    ├── bx--label (optional)
+    ├── input
+    ├── bx--number__controls
+    │   ├── bx--number__control-btn up-icon
+    │   │   └──svg
+    │   └── bx--number__control-btn down-icon
+    │       └──svg
+    ├── form requirement (invalid use only)
+    └── bx--form__helper-text (optional)
+```
+
+### SCSS
+
+No new selectors.

package/styles/vendor/carbon-components/src/components/number-input/migrate-to-7.x.md

@@ -0,0 +1,43 @@
+### HTML
+
+Number Input and other form components now use common form HTML and CSS. See
+Form README for details.
+
+In general, it will be easiest to simply copy and paste the new HTML to replace
+older Number Inputs.
+
+### SCSS
+
+The `_number-input.scss` file is now located at
+`src/components/number-input/_number-input.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
+
+**New**:
+
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/number-input/number-input';
+```
+
+**Old**:
+
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/number-input/number-input';
+```
+
+| Old Class                 | New Class  | Note      |
+| ------------------------- | ---------- | --------- |
+| bx--number                | bx--number | Unchanged |
+| bx--number\_\_arrow       |            | Removed   |
+| bx--number\_\_icon        |            | Removed   |
+| bx--number\_\_arrow--up   | up-icon    | Changed   |
+| bx--number\_\_arrow--down | down-icon  | Changed   |
+| bx--number\_\_input       |            | Removed   |
+
+### JavaScript
+
+The `handleClick` method is now a private method, so it has been renamed to
+`_handleClick`. The `options` property now only contains a `selectorInit`
+key/value pair. The `ie` property in `options` has been removed. In general, the
+`NumberInput` class does not check for Internet Explorer browsers and relies on
+increasing and decreasing the Number input `value` attribute directly. Changing
+the `value` attribute is compatible with all browsers.

package/styles/vendor/carbon-components/src/components/number-input/number-input.hbs

@@ -0,0 +1,263 @@
+<!--
+  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.
+-->
+
+{{#unless mobile}}
+<div class="{{prefix}}--form-item">
+  <div data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+  ">
+    <label for="number-input0" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--number__input-wrapper">
+      <input id="number-input0" type="number" min="0" max="100" value="1">
+      <div class="{{prefix}}--number__controls">
+        <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretUpGlyph' }}
+        </button>
+        <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretDownGlyph' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+  ">
+    <label for="number-input1" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--number__input-wrapper">
+      <input id="number-input1" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
+      {{ carbon-icon 'WarningFilled16' class=(add prefix '--number__invalid')}}
+      <div class="{{prefix}}--number__controls">
+        <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretUpGlyph' }}
+        </button>
+        <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretDownGlyph' }}
+        </button>
+      </div>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light{{/if}}
+    {{prefix}}--number--nolabel
+  ">
+    <div class="{{prefix}}--number__input-wrapper">
+      <input id="number-input2" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
+      {{ carbon-icon 'WarningFilled16' class=(add prefix '--number__invalid')}}
+      <div class="{{prefix}}--number__controls">
+        <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretUpGlyph' }}
+        </button>
+        <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretDownGlyph' }}
+        </button>
+      </div>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+    {{prefix}}--number--helpertext
+  ">
+    <label for="number-input3" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
+    <div class="{{prefix}}--number__input-wrapper">
+      <input id="number-input3" type="number" min="0" max="100" value="1">
+      <div class="{{prefix}}--number__controls">
+        <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretUpGlyph' }}
+        </button>
+        <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretDownGlyph' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+    {{prefix}}--number--helpertext
+  ">
+    <label for="number-input4" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
+    <div class="{{prefix}}--number__input-wrapper">
+      <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
+      {{ carbon-icon 'WarningFilled16' class=(add prefix '--number__invalid')}}
+      <div class="{{prefix}}--number__controls">
+        <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretUpGlyph' }}
+        </button>
+        <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+          aria-live="polite" aria-atomic="true">
+          {{ carbon-icon 'CaretDownGlyph' }}
+        </button>
+      </div>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+{{else}}
+<div class="{{prefix}}--form-item">
+  <div data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+    {{#if mobile}} {{prefix}}--number--mobile {{/if}}
+    ">
+    <label for="mobile-number-input0" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--number__input-wrapper">
+      <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretDownGlyph' }}
+      </button>
+      <input id="mobile-number-input0" type="number" pattern="\d*" min="0" max="100" value="1">
+      <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretUpGlyph' }}
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+    {{#if mobile}} {{prefix}}--number--mobile {{/if}}
+  ">
+    <label for="mobile-number-input1" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--number__input-wrapper">
+      <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretDownGlyph' }}
+      </button>
+      <input id="mobile-number-input1" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
+        aria-atomic="true">
+      <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretUpGlyph' }}
+      </button>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+      {{prefix}}--number
+      {{#if light}} {{prefix}}--number--light {{/if}}
+      {{#if mobile}} {{prefix}}--number--mobile {{/if}}
+      {{prefix}}--number--nolabel
+    ">
+    <div class="{{prefix}}--number__input-wrapper">
+      <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretDownGlyph' }}
+      </button>
+      <input id="mobile-number-input2" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
+        aria-atomic="true">
+      <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretUpGlyph' }}
+      </button>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light{{/if}}
+    {{#if mobile}} {{prefix}}--number--mobile {{/if}}
+    {{prefix}}--number--helpertext
+  ">
+    <label for="mobile-number-input3" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
+    <div class="{{prefix}}--number__input-wrapper">
+      <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretDownGlyph' }}
+      </button>
+      <input id="mobile-number-input3" type="number" pattern="\d*" min="0" max="100" value="1">
+      <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretUpGlyph' }}
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="{{prefix}}--form-item">
+  <div data-invalid data-numberinput class="
+    {{prefix}}--number
+    {{#if light}} {{prefix}}--number--light {{/if}}
+    {{#if mobile}} {{prefix}}--number--mobile {{/if}}
+    {{prefix}}--number--helpertext
+  ">
+    <label for="mobile-number-input4" class="{{prefix}}--label">Number input label</label>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
+    <div class="{{prefix}}--number__input-wrapper">
+      <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretDownGlyph' }}
+      </button>
+      <input id="mobile-number-input4" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
+        aria-atomic="true">
+      <button aria-label="increase number input" class="{{prefix}}--number__control-btn up-icon" type="button"
+        aria-live="polite" aria-atomic="true">
+        {{ carbon-icon 'CaretUpGlyph' }}
+      </button>
+    </div>
+    <div class="{{prefix}}--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+{{/unless}}

package/styles/vendor/carbon-components/src/components/number-input/number-input.js

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ */
+
+import settings from '../../globals/js/settings';
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import on from '../../globals/js/misc/on';
+
+class NumberInput extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
+  /**
+   * Number input UI.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a number input UI.
+   */
+  constructor(element, options) {
+    super(element, options);
+    // Broken DOM tree is seen with up/down arrows <svg> in IE, which breaks event delegation.
+    // <svg> does not have `Element.classList` in IE11
+    this.manage(
+      on(this.element.querySelector('.up-icon'), 'click', event => {
+        this._handleClick(event);
+      })
+    );
+    this.manage(
+      on(this.element.querySelector('.down-icon'), 'click', event => {
+        this._handleClick(event);
+      })
+    );
+  }
+
+  /**
+   * Increase/decrease number by clicking on up/down icons.
+   * @param {Event} event The event triggering this method.
+   */
+  _handleClick(event) {
+    const numberInput = this.element.querySelector(this.options.selectorInput);
+    const target = event.currentTarget.getAttribute('class').split(' ');
+
+    if (target.indexOf('up-icon') >= 0) {
+      ++numberInput.value;
+    } else if (target.indexOf('down-icon') >= 0) {
+      --numberInput.value;
+    }
+
+    // Programmatic change in value (including `stepUp()`/`stepDown()`) won't fire change event
+    numberInput.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+  }
+
+  /**
+   * The map associating DOM element and number input UI instance.
+   * @member NumberInput.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor,
+   * {@linkcode NumberInput.create .create()}, or {@linkcode NumberInput.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode NumberInput.init .init()} works.
+   * @member NumberInput.options
+   * @type {object}
+   * @property {string} selectorInit The CSS selector to find number input UIs.
+   * @property {string} [selectorInput] The CSS selector to find the `<input>` element.
+   */
+  static get options() {
+    const { prefix } = settings;
+    return {
+      selectorInit: '[data-numberinput]',
+      selectorInput: `.${prefix}--number input`,
+    };
+  }
+}
+
+export default NumberInput;

package/styles/vendor/carbon-components/src/components/overflow-menu/README.md

@@ -0,0 +1,122 @@
+### SCSS
+
+#### Modifiers
+
+Use these modifiers with .bx--overflow-menu-options class.
+
+| Selector                           | Description                                 |
+| ---------------------------------- | ------------------------------------------- |
+| `.bx--overflow-menu--flip`         | Reverse the direction of the overflow menu. |
+| `.bx--overflow-menu-options--open` | Displays the overflow menu options.         |
+
+### JavaScript
+
+#### Getting component class reference
+
+##### ES2015
+
+```javascript
+import { OverflowMenu } from 'carbon-components';
+```
+
+##### With pre-build bundle (`carbon-components.min.js`)
+
+```javascript
+var OverflowMenu = CarbonComponents.OverflowMenu;
+```
+
+#### Instantiating
+
+```javascript
+// `#my-overflow-menu` is an element with `[data-overflow-menu]` attribute
+OverflowMenu.create(document.getElementById('my-overflow-menu'));
+```
+
+#### Public Methods
+
+| Name                   | Params            | Description                                                        |
+| ---------------------- | ----------------- | ------------------------------------------------------------------ |
+| `shouldStateBeChanged` | `state`: `String` | Return true if the given state is different from the current state |
+| `release`              |                   | Deletes the instance and removes document event listeners          |
+
+#### Options
+
+| Option                   | Default Selector             | Description                                                                       |
+| ------------------------ | ---------------------------- | --------------------------------------------------------------------------------- |
+| `selectorInit`           | `[data-overflow-menu]`       | The CSS selector to find menu                                                     |
+| `selectorPlacementScope` | `body`                       | The CSS selector to find the element you wish the append the menu contents to     |
+| `selectorOptionMenu`     | `.bx--overflow-menu-options` | The CSS selector to find the contents of the menu                                 |
+| `objMenuOffset`          | `{ top: 3, left: 61 }`       | An object containing the top and left offset values in px                         |
+| `objMenuOffsetFlip`      | `{ top: 3, left: -61 }`      | An object containing the top and left offset values in px for the "flipped" state |
+
+##### Example - Changing menu position by 8 pixels vertically
+
+```javascript
+// `#my-overflow-menu` is an element with `[data-overflow-menu]` attribute
+OverflowMenu.create(document.getElementById('my-overflow-menu'), {
+  objMenuOffset(menuBody, direction) {
+    const { objMenuOffset: offset } = OverflowMenu.options;
+    const { top, left } =
+      typeof offset !== 'function' ? offset : offset(menuBody, direction);
+    return {
+      top: top + 8,
+      left,
+    };
+  },
+});
+```
+
+#### Events
+
+| Event Name                  | Description                                         |
+| --------------------------- | --------------------------------------------------- |
+| 'floating-menu-beingshown'  | The custom event fired before the menu gets open.   |
+| 'floating-menu-shown'       | The custom event fired after the menu gets open.    |
+| 'floating-menu-beinghidden' | The custom event fired before the menu gets closed. |
+| 'floating-menu-hidden'      | The custom event fired after the menu gets closed.  |
+
+##### Example - Preventing menu from being closed in a certain condition
+
+```javascript
+document.addEventListener('floating-menu-beinghidden', function(evt) {
+  if (myApplication.shouldMenuKeptOpen(evt.target)) {
+    evt.preventDefault();
+  }
+});
+```
+
+##### Example - Notifying events of all overflow menus being closed to an analytics library
+
+```javascript
+document.addEventListener('floating-menu-hidden', function(evt) {
+  myAnalyticsLibrary.send({
+    action: 'Overflow menu closed',
+    id: evt.target.id,
+  });
+});
+```
+
+### HTML
+
+By default, the menu body (`ul.bx--overflow-menu-options`) goes right under
+`<body>`. To ensure the proper accessibility experience, add
+`data-floating-menu-container` to one of the DOM ancestors of the root element
+(`div[data-overflow-menu]`). For example, if you have HTML structure like below,
+the menu body will go under the second `<div>`:
+
+```html
+<body>
+  <div>
+    <div data-floating-menu-container>
+      <div>
+        <div data-overflow-menu class="bx--overflow-menu" ...>
+          ...
+          <ul class="bx--overflow-menu-options" ...>
+            ...
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```