Merge branch 'master' into bring-mac-tests-back

README.md

@@ -181,6 +181,8 @@ const App = () => (
 render(<App />, document.getElementById('root'));
 ```
 
+Note: Using the React wrapper requires an additional dependency, [`prop-types`](https://www.npmjs.com/package/prop-types).
+
 ### Vue
 
 [![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-custom-elements/tree/master/examples/codesandbox/vue)

examples/codesandbox/form/redux-form/package.json

@@ -11,6 +11,7 @@
     "lit-element": "~2.2.0",
     "lit-html": "^1.2.0",
     "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-redux": "^6.0.0",

examples/codesandbox/react/package.json

@@ -11,6 +11,7 @@
     "lit-element": "~2.2.0",
     "lit-html": "^1.2.0",
     "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
     "react": "^16.0.0",
     "react-dom": "^16.12.0"
   },

src/components/button/button-story.ts

@@ -34,7 +34,7 @@ const sizes = {
 };
 
 export const defaultStory = ({ parameters }) => {
-  const { autofocus, disabled, download, href, hreflang, kind, ping, rel, size, target, type, onClick } =
+  const { autofocus, disabled, download, href, hreflang, kind, linkRole, ping, rel, size, target, type, onClick } =
     parameters?.props?.['bx-btn'] ?? {};
   return html`
     <bx-btn
@@ -44,6 +44,7 @@ export const defaultStory = ({ parameters }) => {
       href="${ifNonNull(href)}"
       hreflang="${ifNonNull(hreflang)}"
       kind="${ifNonNull(kind)}"
+      link-role="${ifNonNull(linkRole)}"
       ping="${ifNonNull(ping)}"
       rel="${ifNonNull(rel)}"
       size="${ifNonNull(size)}"

src/components/button/button.ts

@@ -125,6 +125,12 @@ class BXButton extends FocusMixin(LitElement) {
   @property({ reflect: true })
   kind = BUTTON_KIND.PRIMARY;
 
+  /**
+   * The a11y role for `<a>`.
+   */
+  @property({ attribute: 'link-role' })
+  linkRole = 'button';
+
   /**
    * URLs to ping, if this button is rendered as `<a>`.
    */
@@ -166,6 +172,7 @@ class BXButton extends FocusMixin(LitElement) {
       download,
       href,
       hreflang,
+      linkRole,
       kind,
       ping,
       rel,
@@ -195,7 +202,7 @@ class BXButton extends FocusMixin(LitElement) {
         : html`
             <a
               id="button"
-              role="button"
+              role="${ifNonNull(linkRole)}"
               class="${classes}"
               download="${ifNonNull(download)}"
               href="${ifNonNull(href)}"

src/components/date-picker/date-picker-input.ts

@@ -68,6 +68,12 @@ export enum DATE_PICKER_INPUT_SIZE_HORIZONTAL {
  */
 @customElement(`${prefix}-date-picker-input`)
 class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
+  /**
+   * The calendar icon.
+   */
+  @query(`.${prefix}--date-picker__icon`)
+  private _iconNode!: SVGElement;
+
   /**
    * The `<slot>` for the validity message.
    */
@@ -82,6 +88,16 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
     return validityMessage || (slotValidityMessage && slotValidityMessage.assignedNodes.length > 0);
   }
 
+  /**
+   * Handles `click` event on the calendar icon.
+   * @param event The event.
+   */
+  private _handleClickWrapper(event: MouseEvent) {
+    if (event.target === this._iconNode) {
+      this.input.focus();
+    }
+  }
+
   /**
    * Handles `slotchange` event on `<slot name="validity-message">`.
    */
@@ -245,6 +261,7 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
       size,
       type = constructor.defaultType,
       value,
+      _handleClickWrapper: handleClickWrapper,
       _handleInput: handleInput,
     } = this;
     const labelClasses = classMap({
@@ -260,7 +277,7 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
       <label for="input" class="${labelClasses}">
         <slot name="label-text">${labelText}</slot>
       </label>
-      <div class="${prefix}--date-picker-input__wrapper">
+      <div class="${prefix}--date-picker-input__wrapper" @click="${handleClickWrapper}">
         <input
           id="input"
           type="${type}"

src/components/link/link-story.ts

@@ -16,9 +16,20 @@ import './link';
 import storyDocs from './link-story.mdx';
 
 export const defaultStory = ({ parameters }) => {
-  const { disabled, href, onClick } = parameters?.props?.['bx-link'] ?? {};
+  const { disabled, download, href, hreflang, linkRole, ping, rel, target, type, onClick } = parameters?.props?.['bx-link'] ?? {};
   return html`
-    <bx-link ?disabled="${disabled}" href="${ifNonNull(href)}" @click="${onClick}">
+    <bx-link
+      ?disabled="${disabled}"
+      download="${ifNonNull(download)}"
+      href="${ifNonNull(href)}"
+      hreflang="${ifNonNull(hreflang)}"
+      link-role="${ifNonNull(linkRole)}"
+      ping="${ifNonNull(ping)}"
+      rel="${ifNonNull(rel)}"
+      target="${ifNonNull(target)}"
+      type="${ifNonNull(type)}"
+      @click="${onClick}"
+    >
       Link
     </bx-link>
   `;

src/components/link/link.ts

@@ -57,6 +57,12 @@ class BXLink extends FocusMixin(LitElement) {
   @property()
   hreflang!: string;
 
+  /**
+   * The a11y role for `<a>`.
+   */
+  @property({ attribute: 'link-role' })
+  linkRole!: string;
+
   /**
    * URLs to ping.
    */
@@ -86,15 +92,15 @@ class BXLink extends FocusMixin(LitElement) {
   }
 
   render() {
-    const { disabled, download, href, hreflang, ping, rel, target, type, _classes: classes } = this;
+    const { disabled, download, href, hreflang, linkRole, ping, rel, target, type, _classes: classes } = this;
     return disabled
       ? html`
-          <p id="button" class="${classes}"><slot></slot></p>
+          <p id="link" class="${classes}"><slot></slot></p>
         `
       : html`
           <a
-            id="button"
-            role="button"
+            id="link"
+            role="${ifNonNull(linkRole)}"
             class="${classes}"
             download="${ifNonNull(download)}"
             href="${ifNonNull(href)}"

src/components/tile/clickable-tile.ts

@@ -39,6 +39,12 @@ class BXClickableTile extends BXLink {
   @property({ attribute: 'color-scheme', reflect: true })
   colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
 
+  /**
+   * The a11y role for `<a>`.
+   */
+  @property({ attribute: 'link-role' })
+  linkRole = 'button';
+
   static styles = styles;
 }
 

src/directives-angular/combo-box.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * 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 { Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, SelectControlValueAccessor } from '@angular/forms';
+import settings from 'carbon-components/es/globals/js/settings';
+
+const prefix = settings.prefix; // eslint-disable-line prefer-destructuring
+
+const host = {
+  '(blur)': 'onTouched()',
+};
+
+// NOTE: Referring `BXComboBox.eventChange` seems to cause ng-packagr to package up `src/components/combo-box/combo-box.ts` code,
+// Which is not desirable
+host[`(${prefix}-combo-box-selected)`] = 'onChange($event.detail.item.value)';
+
+@Directive({
+  selector: `${prefix}-combo-box[formControlName],${prefix}-combo-box[formControl],${prefix}-combo-box[ngModel]`,
+  host,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BXComboBoxDirective), // eslint-disable-line no-use-before-define
+      multi: true,
+    },
+  ],
+})
+export class BXComboBoxDirective extends SelectControlValueAccessor {} // eslint-disable-line import/prefer-default-export

src/directives-angular/dropdown.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * 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 { Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, SelectControlValueAccessor } from '@angular/forms';
+import settings from 'carbon-components/es/globals/js/settings';
+
+const prefix = settings.prefix; // eslint-disable-line prefer-destructuring
+
+const host = {
+  '(blur)': 'onTouched()',
+};
+
+// NOTE: Referring `BXDropdown.eventChange` seems to cause ng-packagr to package up `src/components/dropdown/dropdown.ts` code,
+// Which is not desirable
+host[`(${prefix}-dropdown-selected)`] = 'onChange($event.detail.item.value)';
+
+@Directive({
+  selector: `${prefix}-dropdown[formControlName],${prefix}-dropdown[formControl],${prefix}-dropdown[ngModel]`,
+  host,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BXDropdownDirective), // eslint-disable-line no-use-before-define
+      multi: true,
+    },
+  ],
+})
+export class BXDropdownDirective extends SelectControlValueAccessor {} // eslint-disable-line import/prefer-default-export

src/directives-angular/index.ts

@@ -1,20 +1,42 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019
+ * Copyright IBM Corp. 2019, 2020
  *
  * 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 { NgModule } from '@angular/core';
 import { BXCheckboxDirective } from './checkbox';
+import { BXComboBoxDirective } from './combo-box';
+import { BXDropdownDirective } from './dropdown';
 import { BXInputDirective } from './input';
+import { BXMultiSelectDirective } from './multi-select';
+import { BXNumberInputDirective } from './number-input';
 import { BXSliderDirective } from './slider';
 import { BXToggleDirective } from './toggle';
 
 @NgModule({
-  declarations: [BXCheckboxDirective, BXInputDirective, BXSliderDirective, BXToggleDirective],
-  exports: [BXCheckboxDirective, BXInputDirective, BXSliderDirective, BXToggleDirective],
+  declarations: [
+    BXCheckboxDirective,
+    BXComboBoxDirective,
+    BXDropdownDirective,
+    BXInputDirective,
+    BXMultiSelectDirective,
+    BXNumberInputDirective,
+    BXSliderDirective,
+    BXToggleDirective,
+  ],
+  exports: [
+    BXCheckboxDirective,
+    BXComboBoxDirective,
+    BXDropdownDirective,
+    BXInputDirective,
+    BXMultiSelectDirective,
+    BXNumberInputDirective,
+    BXSliderDirective,
+    BXToggleDirective,
+  ],
 })
 export class BXFormAccessorsModule {} // eslint-disable-line import/prefer-default-export

src/directives-angular/input.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019
+ * Copyright IBM Corp. 2019, 2020
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,7 +14,10 @@ import settings from 'carbon-components/es/globals/js/settings';
 const prefix = settings.prefix; // eslint-disable-line prefer-destructuring
 
 @Directive({
-  selector: `${prefix}-input[formControlName],${prefix}-input[formControl],${prefix}-input[ngModel]`,
+  selector: [
+    `${prefix}-input[formControlName],${prefix}-input[formControl],${prefix}-input[ngModel]`,
+    `${prefix}-textarea[formControlName],${prefix}-textarea[formControl],${prefix}-textarea[ngModel]`,
+  ].join(','),
   host: {
     '(input)': '_handleInput($event.target.value)',
     '(blur)': 'onTouched()',

src/directives-angular/multi-select.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * 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 { Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, SelectMultipleControlValueAccessor } from '@angular/forms';
+import settings from 'carbon-components/es/globals/js/settings';
+
+const prefix = settings.prefix; // eslint-disable-line prefer-destructuring
+
+const host = {
+  '(blur)': 'onTouched()',
+};
+
+// NOTE: Referring `BXMultiSelect.eventChange` seems to cause
+// ng-packagr to package up `src/components/multi-select/multi-select.ts` code, Which is not desirable
+host[`(${prefix}-multi-select-selected)`] = 'onChange($event.detail.item.value)';
+
+@Directive({
+  selector: `${prefix}-multi-select[formControlName],${prefix}-multi-select[formControl],${prefix}-multi-select[ngModel]`,
+  host,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => BXMultiSelectDirective), // eslint-disable-line no-use-before-define
+      multi: true,
+    },
+  ],
+})
+// eslint-disable-next-line import/prefer-default-export
+export class BXMultiSelectDirective extends SelectMultipleControlValueAccessor {
+  /**
+   * Registers `onChange` handler.
+   * @param fn The event listener.
+   */
+  registerOnChange(fn: (selected: string[]) => void) {
+    // NOTE: Referring `BXMultiSelect` seems to cause ng-packagr to package up `src/components/multi-select/multi-select.ts` code,
+    this.onChange = function handleOnChange(selectedValue) {
+      const { value: oldValue } = this;
+      const oldValues = !oldValue ? [] : oldValue.split(',');
+      const values =
+        oldValues.indexOf(selectedValue) < 0
+          ? oldValues.concat(selectedValue)
+          : oldValues.filter(oldItemValue => oldItemValue !== selectedValue);
+      const value = values.join(',');
+      this.value = value;
+      fn(value);
+    };
+  }
+}