Merge branch 'master' into accordion-alignment

carbon-design-system · Jun 8, 2020 · c198009 · c198009
2 parents 2e6e720 + 407bf76
commit c198009
Show file tree

Hide file tree

Showing 14 changed files with 591 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-custom-elements",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -183,7 +183,7 @@ export default class BXInput extends ValidityMixin(FormMixin(LitElement)) {
   /**
    * The value of the input.
    */
-  @property()
+  @property({ reflect: true })
   value = '';
 
   createRenderRoot() {

diff --git a/src/components/number-input/number-input-story.ts b/src/components/number-input/number-input-story.ts
@@ -18,7 +18,7 @@ import createProps from './stories/helpers';
 import storyDocs from './number-input-story.mdx';
 
 export const defaultStory = ({ parameters }) => {
-  const { colorScheme, disabled, value, placeholder, invalid, mobile, min, max, size, step, onInput } =
+  const { colorScheme, disabled, value, placeholder, invalid, mobile, min, max, size, step, onInput, name } =
     parameters?.props?.['bx-number-input'] ?? {};
   return html`
     <bx-number-input
@@ -27,6 +27,7 @@ export const defaultStory = ({ parameters }) => {
       value="${ifNonNull(value)}"
       placeholder="${ifNonNull(placeholder)}"
       ?invalid="${invalid}"
+      name="${name}"
       ?mobile="${mobile}"
       min="${ifNonNull(min)}"
       max="${ifNonNull(max)}"

diff --git a/src/components/number-input/number-input.ts b/src/components/number-input/number-input.ts
@@ -45,20 +45,6 @@ export default class BXNumberInput extends BXInput {
   @query('input')
   protected _input!: HTMLInputElement;
 
-  /**
-   * Handles incrementing the value in the input
-   */
-  protected _handleIncrement() {
-    this._input.stepUp();
-  }
-
-  /**
-   * Handles decrementing the value in the input
-   */
-  protected _handleDecrement() {
-    this._input.stepDown();
-  }
-
   _testValidity() {
     if (this._input?.valueAsNumber > Number(this.max)) {
       return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;
@@ -86,6 +72,8 @@ export default class BXNumberInput extends BXInput {
 
   protected _step = '1';
 
+  protected _value = '';
+
   /**
    * The color scheme.
    */
@@ -134,6 +122,31 @@ export default class BXNumberInput extends BXInput {
     this.requestUpdate('step', oldValue);
   }
 
+  /**
+   * The value of the input.
+   */
+  @property({ reflect: true })
+  get value() {
+    // once we have the input we can directly query for the value
+    if (this._input) {
+      return this._input.value;
+    }
+    // but before then _value will work fine
+    return this._value;
+  }
+
+  set value(value) {
+    const oldValue = this._value;
+    this._value = value;
+    // make sure that lit-element updates the right properties
+    this.requestUpdate('value', oldValue);
+    // we set the value directly on the input (when available)
+    // so that programatic manipulation updates the UI correctly
+    if (this._input) {
+      this._input.value = value;
+    }
+  }
+
   /**
    * Set to `true` to enable the mobile variant of the number input
    */
@@ -174,6 +187,20 @@ export default class BXNumberInput extends BXInput {
   @property({ attribute: 'validity-message-min' })
   validityMessageMin = '';
 
+  /**
+   * Handles incrementing the value in the input
+   */
+  stepUp() {
+    this._input.stepUp();
+  }
+
+  /**
+   * Handles decrementing the value in the input
+   */
+  stepDown() {
+    this._input.stepDown();
+  }
+
   createRenderRoot() {
     return this.attachShadow({ mode: 'open', delegatesFocus: true });
   }
@@ -215,7 +242,7 @@ export default class BXNumberInput extends BXInput {
         aria-atomic="true"
         type="button"
         ?disabled=${this.disabled}
-        @click=${this._handleIncrement}
+        @click=${this.stepUp}
       >
         ${CaretUp16()}
       </button>
@@ -228,7 +255,7 @@ export default class BXNumberInput extends BXInput {
         aria-atomic="true"
         type="button"
         ?disabled=${this.disabled}
-        @click=${this._handleDecrement}
+        @click=${this.stepDown}
       >
         ${CaretDown16()}
       </button>
@@ -247,7 +274,7 @@ export default class BXNumberInput extends BXInput {
         ?readonly="${this.readonly}"
         ?required="${this.required}"
         type="number"
-        .value="${this.value}"
+        .value="${this._value}"
         @input="${handleInput}"
         min="${ifNonEmpty(this.min)}"
         max="${ifNonEmpty(this.max)}"

diff --git a/src/components/tag/filter-tag.ts b/src/components/tag/filter-tag.ts
@@ -36,8 +36,23 @@ export default class BXFilterTag extends HostListenerMixin(FocusMixin(LitElement
   @HostListener('shadowRoot:click')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleClick = (event: MouseEvent) => {
-    if (this.disabled && event.composedPath().indexOf(this._buttonNode!) >= 0) {
-      event.stopPropagation();
+    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {
+      if (this.disabled) {
+        event.stopPropagation();
+      } else if (this.open) {
+        const init = {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: {
+            triggeredBy: event.target,
+          },
+        };
+        if (this.dispatchEvent(new CustomEvent((this.constructor as typeof BXFilterTag).eventBeforeClose, init))) {
+          this.open = false;
+          this.dispatchEvent(new CustomEvent((this.constructor as typeof BXFilterTag).eventClose, init));
+        }
+      }
     }
   };
 
@@ -53,20 +68,42 @@ export default class BXFilterTag extends HostListenerMixin(FocusMixin(LitElement
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * `true` if the tag should be open.
+   */
+  @property({ type: Boolean, reflect: true })
+  open = true;
+
   /**
    * Specify the type of the <Tag>
    */
   @property({ reflect: true })
   type = TAG_TYPE.RED;
 
   render() {
+    const { disabled } = this;
     return html`
       <slot></slot>
-      <button>
+      <button class="${prefix}--tag__close-icon" ?disabled=${disabled}>
         ${Close16({ 'aria-label': this.title })}
       </button>
     `;
   }
 
+  /**
+   * The name of the custom event fired before this tag is being closed upon a user gesture.
+   * Cancellation of this event stops the user-initiated action of closing this tag.
+   */
+  static get eventBeforeClose() {
+    return `${prefix}-filter-tag-beingclosed`;
+  }
+
+  /**
+   * The name of the custom event fired after this tag is closed upon a user gesture.
+   */
+  static get eventClose() {
+    return `${prefix}-filter-tag-closed`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
diff --git a/src/components/tag/tag-story-angular.ts b/src/components/tag/tag-story-angular.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.
@@ -25,15 +25,27 @@ defaultStory.story = baseDefaultStory.story;
 export const filter = ({ parameters }) => ({
   template: `
     <bx-filter-tag
+      [open]="open"
       [type]="type"
       [title]="title"
       [disabled]="disabled"
       (click)="onClick($event)"
+      (bx-filter-tag-beingclosed)="handleBeforeClose($event)"
+      (bx-filter-tag-closed)="handleClose($event)"
     >
       This is not a tag
     </bx-filter-tag>
   `,
-  props: parameters?.props?.['bx-filter-tag'],
+  props: (({ disableClose, onBeforeClose, onClose, ...rest }) => ({
+    ...rest,
+    handleBeforeClose: (event: CustomEvent) => {
+      onBeforeClose(event);
+      if (disableClose) {
+        event.preventDefault();
+      }
+    },
+    handleClose: onClose,
+  }))(parameters?.props?.['bx-filter-tag']),
 });
 
 filter.story = baseFilter.story;

diff --git a/src/components/tag/tag-story-react.tsx b/src/components/tag/tag-story-react.tsx
@@ -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.
@@ -30,9 +30,22 @@ export const defaultStory = ({ parameters }) => {
 defaultStory.story = baseDefaultStory.story;
 
 export const filter = ({ parameters }) => {
-  const { type, title, disabled, onClick } = parameters?.props?.['bx-filter-tag'];
+  const { open, type, title, disabled, disableClose, onClick, onBeforeClose, onClose } = parameters?.props?.['bx-filter-tag'];
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
   return (
-    <BXFilterTag type={type} title={title} disabled={disabled} click={onClick}>
+    <BXFilterTag
+      open={open}
+      type={type}
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      onBeforeClose={handleBeforeClose}
+      onClose={onClose}>
       This is not a tag
     </BXFilterTag>
   );

diff --git a/src/components/tag/tag-story-vue.ts b/src/components/tag/tag-story-vue.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.
@@ -26,15 +26,29 @@ defaultStory.story = baseDefaultStory.story;
 export const filter = ({ parameters }) => ({
   template: `
     <bx-filter-tag
+      :open="open"
       :type="type"
       :title="title"
       :disabled="disabled"
       @click="onClick"
+      @bx-filter-tag-beingclosed="handleBeforeClose"
+      @bx-filter-tag-closed="handleClose"
     >
       This is not a tag
     </bx-filter-tag>
   `,
-  ...createVueBindingsFromProps(parameters?.props?.['bx-filter-tag']),
+  ...createVueBindingsFromProps(
+    (({ disableClose, onBeforeClose, onClose, ...rest }) => ({
+      ...rest,
+      handleBeforeClose: (event: CustomEvent) => {
+        onBeforeClose(event);
+        if (disableClose) {
+          event.preventDefault();
+        }
+      },
+      handleClose: onClose,
+    }))(parameters?.props?.['bx-filter-tag'])
+  ),
 });
 
 filter.story = baseFilter.story;
diff --git a/src/components/tag/tag-story.ts b/src/components/tag/tag-story.ts
@@ -16,6 +16,8 @@ import { TAG_TYPE } from './tag';
 import './filter-tag';
 import storyDocs from './tag-story.mdx';
 
+const noop = () => {};
+
 export const defaultStory = ({ parameters }) => {
   const { type, title, disabled } = parameters?.props?.['bx-tag'] ?? {};
   return html`
@@ -49,9 +51,24 @@ defaultStory.story = {
 };
 
 export const filter = ({ parameters }) => {
-  const { type, title, disabled, onClick } = parameters?.props?.['bx-filter-tag'] ?? {};
+  const { open, type, title, disabled, disableClose, onClick, onBeforeClose = noop, onClose = noop } =
+    parameters?.props?.['bx-filter-tag'] ?? {};
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
   return html`
-    <bx-filter-tag type=${ifNonNull(type)} title=${ifNonNull(title)} ?disabled=${disabled} @click=${onClick} filter>
+    <bx-filter-tag
+      ?open="${open}"
+      type=${ifNonNull(type)}
+      title=${ifNonNull(title)}
+      ?disabled=${disabled}
+      @click=${onClick}
+      @bx-filter-tag-beingclosed="${handleBeforeClose}"
+      @bx-filter-tag-closed="${onClose}"
+    >
       This is not a tag
     </bx-filter-tag>
   `;
@@ -62,7 +79,14 @@ filter.story = {
     knobs: {
       'bx-filter-tag': () => ({
         ...defaultStory.story.parameters.knobs['bx-tag'](),
+        open: boolean('Open (open)', true),
+        disableClose: boolean(
+          'Disable user-initiated close action (Call event.preventDefault() in bx-filter-tag-beingclosed event)',
+          false
+        ),
         onClick: action('click'),
+        onBeforeClose: action('bx-filter-tag-beingclosed'),
+        onClose: action('bx-filter-tag-closed'),
       }),
     },
   },