Revert "feat(fw-select-options, fw-select, fw-tag): added 'disabled' …

…state to fw-select options" This reverts commit 044304d.
freshworks · May 6, 2020 · 2974bb3 · 2974bb3
1 parent 9be3178
commit 2974bb3
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 112 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -228,10 +228,6 @@ export namespace Components {
         "value": any;
     }
     interface FwSelectOption {
-        /**
-          * Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.
-         */
-        "disabled": boolean;
         /**
           * States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.
          */
@@ -245,7 +241,7 @@ export namespace Components {
          */
         "optionText": string;
         /**
-          * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
+          * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to true.
          */
         "selected": boolean;
         /**
@@ -276,10 +272,6 @@ export namespace Components {
     interface FwTabs {
     }
     interface FwTag {
-        /**
-          * Sets the state of the tag to disabled. The close button is disabled. If the attribute’s value is undefined, the value is set to false.
-         */
-        "disabled": false;
         /**
           * Display text in the tag component.
          */
@@ -798,10 +790,6 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface FwSelectOption {
-        /**
-          * Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.
-         */
-        "disabled"?: boolean;
         /**
           * States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.
          */
@@ -819,7 +807,7 @@ declare namespace LocalJSX {
          */
         "optionText"?: string;
         /**
-          * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
+          * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to true.
          */
         "selected"?: boolean;
         /**
@@ -850,10 +838,6 @@ declare namespace LocalJSX {
     interface FwTabs {
     }
     interface FwTag {
-        /**
-          * Sets the state of the tag to disabled. The close button is disabled. If the attribute’s value is undefined, the value is set to false.
-         */
-        "disabled"?: false;
         /**
           * Triggered when the tag is deselected.
          */

diff --git a/src/components/select-option/readme.md b/src/components/select-option/readme.md
@@ -14,14 +14,13 @@ fw-select-option provides child elements for fw-select, to populate the Select c
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                                                                                                                              | Type      | Default     |
-| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `disabled`    | `disabled`     | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.                              | `boolean` | `false`     |
-| `html`        | `html`         | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.                                                                                | `boolean` | `false`     |
-| `htmlContent` | `html-content` | HTML content that is displayed as the option.                                                                                                                                            | `string`  | `undefined` |
-| `optionText`  | `option-text`  | Alternate text displayed on the interface, in place of the actual HTML content.                                                                                                          | `string`  | `undefined` |
-| `selected`    | `selected`     | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false`     |
-| `value`       | `value`        | Value corresponding to the option, that is saved  when the form data is saved.                                                                                                           | `string`  | `undefined` |
+| Property      | Attribute      | Description                                                                                                                                                                             | Type      | Default     |
+| ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `html`        | `html`         | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.                                                                               | `boolean` | `false`     |
+| `htmlContent` | `html-content` | HTML content that is displayed as the option.                                                                                                                                           | `string`  | `undefined` |
+| `optionText`  | `option-text`  | Alternate text displayed on the interface, in place of the actual HTML content.                                                                                                         | `string`  | `undefined` |
+| `selected`    | `selected`     | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to true. | `boolean` | `false`     |
+| `value`       | `value`        | Value corresponding to the option, that is saved  when the form data is saved.                                                                                                          | `string`  | `undefined` |
 
 
 ## Events

diff --git a/src/components/select-option/select-option.scss b/src/components/select-option/select-option.scss
@@ -3,10 +3,8 @@
 :host {
   --primary-color: var(--color-elephant-900);
   --selected-color: var(--color-azure-800);
-  --disabled-color: var(--color-smoke-300);
   --bg-color: var(--color-azure-50);
   --bg-color-hover: var(--color-smoke-50);
-  --bg-color-disabled: var(--color-smoke-25);
 }
 
 .select-option {
@@ -33,13 +31,6 @@
     background-color: var(--bg-color-hover);
   }
 
-  &.disabled {
-    color: var(--disabled-color);
-    position: relative;
-    cursor: not-allowed;
-    background-color: var(--bg-color-disabled);
-  }
-
   &::after {
     display: block;
     font-style: normal;

diff --git a/src/components/select-option/select-option.stories.mdx b/src/components/select-option/select-option.stories.mdx
@@ -22,20 +22,11 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 <Story name='Selected'>{() => '<fw-select-option selected="true">Sample Option</fw-select-option>'}</Story>
 </Preview>
 
-### Disabled State
-<Preview>
-<Story name='Disabled'>{() => `
-    <fw-select-option disabled>I am the chosen one</fw-select-option>
-    `}</Story>
-</Preview>
-
 ### Multiple Options
 <Preview>
 <Story name='MultipleOptions'>{() => `
     <fw-select-option selected="true">I am the chosen one</fw-select-option>
     <fw-select-option>Me,nein</fw-select-option>
     <fw-select-option>I am another option</fw-select-option>
-    <fw-select-option disabled>I am the chosen one</fw-select-option>
     `}</Story>
 </Preview>
-
diff --git a/src/components/select-option/select-option.tsx b/src/components/select-option/select-option.tsx
@@ -12,13 +12,9 @@ export class SelectOption {
    */
   @Prop({ reflect: true }) value: string;
   /**
-   * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
+   * Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to true.
    */
   @Prop({ reflect: true, mutable: true }) selected = false;
-  /**
-   * Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.
-   */
-  @Prop({ reflect: true, mutable: true }) disabled = false;
   /**
    * States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.
    */
@@ -38,23 +34,15 @@ export class SelectOption {
   @Event({ bubbles: true, composed: true }) fwSelected: EventEmitter;
 
   private onOptionSelected() {
-    if (this.disabled) { return; }
     this.selected = !this.selected;
     const { value, selected } = this;
     this.fwSelected.emit({ value, selected });
   }
 
   render() {
     return (
-      <li
-        ref={el => this.nativeLi = el}
-        class={{ 'select-option': true, 'selected': this.selected, 'disabled': this.disabled }}
-        onMouseDown={() => this.onOptionSelected()}>
-        {
-          this.html
-            ? '' :
-            <slot />
-        }
+      <li ref={el => this.nativeLi = el} class={{ 'select-option': true, 'selected': this.selected }} onMouseDown={() => this.onOptionSelected()}>
+        {this.html ? '' : <slot />}
       </li>
     );
   }

diff --git a/src/components/select/select.stories.mdx b/src/components/select/select.stories.mdx
@@ -41,7 +41,7 @@ import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
     <fw-select multiple label="Select the GOT house" state-text="Choose the house where you belong" required="true">
         <fw-select-option value="1">Starks</fw-select-option>
         <fw-select-option value="2">Lannisters</fw-select-option>
-        <fw-select-option value="3" selected disabled>Sand</fw-select-option>
+        <fw-select-option value="3">Sand</fw-select-option>
         <fw-select-option value="4">Greyjoys</fw-select-option>
         <fw-select-option value="5">Tyrell</fw-select-option>
     </fw-select>
@@ -52,28 +52,26 @@ import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
 ### With options and selected key
 <Preview>
   <Story name="WithOptionsAndSelectedKey">
-    {
-      () => `<fw-select label="Select the GOT house" state-text="Choose the house where you belong" required="true">
-                <fw-select-option value="1">Starks</fw-select-option>
-                <fw-select-option value="2" disabled>Lannisters</fw-select-option>
-                <fw-select-option value="3">Sand</fw-select-option>
-                <fw-select-option value="4">Greyjoys</fw-select-option>
-                <fw-select-option value="5">Tyrell</fw-select-option>
-            </fw-select>
-            <fw-select label="Select the GOT house" selected-value="2" required="true">
-                <fw-select-option value="1">Starks</fw-select-option>
-                <fw-select-option value="2">Lannisters</fw-select-option>
-                <fw-select-option value="3">Sand</fw-select-option>
-                <fw-select-option value="4">Greyjoys</fw-select-option>
-                <fw-select-option value="5">Tyrell</fw-select-option>
-            </fw-select>
-            <fw-select label="Select time" force-select="false" required="true">
-                <fw-select-option value="02:00">02:00</fw-select-option>
-                <fw-select-option value="12:15">12:15</fw-select-option>
-                <fw-select-option value="12:30" disabled>12:30</fw-select-option>
-                <fw-select-option value="12:45">12:45</fw-select-option>
-                <fw-select-option value="22:55">22:55</fw-select-option>
-            </fw-select>`
-    }
+    {() => `<fw-select label="Select the GOT house" state-text="Choose the house where you belong" required="true">
+    <fw-select-option value="1">Starks</fw-select-option>
+    <fw-select-option value="2">Lannisters</fw-select-option>
+    <fw-select-option value="3">Sand</fw-select-option>
+    <fw-select-option value="4">Greyjoys</fw-select-option>
+    <fw-select-option value="5">Tyrell</fw-select-option>
+</fw-select>
+<fw-select label="Select the GOT house" selected-value="2" required="true">
+    <fw-select-option value="1">Starks</fw-select-option>
+    <fw-select-option value="2">Lannisters</fw-select-option>
+    <fw-select-option value="3">Sand</fw-select-option>
+    <fw-select-option value="4">Greyjoys</fw-select-option>
+    <fw-select-option value="5">Tyrell</fw-select-option>
+</fw-select>
+<fw-select label="Select the GOT house" force-select="false" required="true">
+    <fw-select-option value="02:00">02:00</fw-select-option>
+    <fw-select-option value="12:15">12:15</fw-select-option>
+    <fw-select-option value="12:30">12:30</fw-select-option>
+    <fw-select-option value="12:45">12:45</fw-select-option>
+    <fw-select-option value="22:55">22:55</fw-select-option>
+</fw-select>`}
   </Story>
 </Preview>
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
@@ -170,7 +170,7 @@ export class Select {
     if (this.multiple) {
       return this.options
         .filter(option => option.selected)
-        .map(option => <fw-tag text={option.text} disabled={option.disabled} value={option.value}/>);
+        .map(option => <fw-tag text={option.text} value={option.value}/>);
     }
   }
 
@@ -188,7 +188,6 @@ export class Select {
         value={option.value}
         selected={option.selected}
         html={option.isHtml}
-        disabled={option.disabled}
         htmlContent={option.htmlContent}
         >{option.text}
       </fw-select-option>)
@@ -205,7 +204,6 @@ export class Select {
         text: option.html ? option.optionText : option.textContent,
         value: option.value,
         selected: option.selected,
-        disabled: option.disabled,
         htmlContent: option.html ? option.innerHTML : '',
       };
     });

diff --git a/src/components/tag/readme.md b/src/components/tag/readme.md
@@ -11,11 +11,10 @@ fw-tag provides a child component that is used to enable selecting multiple opti
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                            | Type      | Default     |
-| ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `disabled` | `disabled` | Sets the state of the tag to disabled. The close button is disabled. If the attribute’s value is undefined, the value is set to false. | `boolean` | `undefined` |
-| `text`     | `text`     | Display text in the tag component.                                                                                                     | `string`  | `undefined` |
-| `value`    | `value`    | Value associated with the tag component, that is saved when the form data is saved.                                                    | `string`  | `undefined` |
+| Property | Attribute | Description                                                                         | Type     | Default     |
+| -------- | --------- | ----------------------------------------------------------------------------------- | -------- | ----------- |
+| `text`   | `text`    | Display text in the tag component.                                                  | `string` | `undefined` |
+| `value`  | `value`   | Value associated with the tag component, that is saved when the form data is saved. | `string` | `undefined` |
 
 
 ## Events

diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss
@@ -31,11 +31,5 @@
       background-color: var(--color-smoke-100);
       cursor: pointer;
     }
-
-    &.disabled {
-      color: var(--color-elephant-500);
-      background-color: var(--color-smoke-50);
-      cursor: not-allowed;
-    }
   }
 }
diff --git a/src/components/tag/tag.stories.mdx b/src/components/tag/tag.stories.mdx
@@ -16,8 +16,3 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 <Preview>
 <Story name='Default'>{() => '<fw-tag text="Tag"></fw-tag>'}</Story>
 </Preview>
-
-### Disabled
-<Preview>
-<Story name='Disabled'>{() => '<fw-tag disabled text="Tag"></fw-tag>'}</Story>
-</Preview>
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
@@ -12,11 +12,6 @@ export class Tag {
    */
   @Prop({ reflect: true }) text: string;
 
-  /**
-   * Sets the state of the tag to disabled. The close button is disabled. If the attribute’s value is undefined, the value is set to false.
-   */
-  @Prop({ reflect: true }) disabled: false;
-
   /**
    * Value associated with the tag component, that is saved when the form data is saved.
    */
@@ -27,18 +22,15 @@ export class Tag {
   @Event() fwClosed: EventEmitter;
 
   removeTag() {
-    if (this.disabled) { return; }
     const { value, text } = this;
     this.fwClosed.emit({ value, text });
   }
   render() {
     return (
     <div class="tag">
       {this.text}
-      <span
-        role="button"
-        class={{ 'remove-btn': true, 'disabled': this.disabled }}
-        onClick={() => this.removeTag()}>×</span>
+      <span role="button" class="remove-btn"
+       onClick={() => this.removeTag()}>×</span>
     </div>
     );
   }