feat(dropdown-button): add disabled prop

Add disabled prop to dropdown button fix #145
freshworks · Nov 4, 2020 · 0aeca90 · 0aeca90
1 parent f1d7809
commit 0aeca90
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -89,6 +89,10 @@ export namespace Components {
           * Dropdown Button color
          */
         "color": "primary" | "secondary" | "danger" | "link" | "text";
+        /**
+          * Disables the dropdown button if its true
+         */
+        "disabled": boolean;
         /**
           * Label for the dropdown button
          */
@@ -810,6 +814,10 @@ declare namespace LocalJSX {
           * Dropdown Button color
          */
         "color"?: "primary" | "secondary" | "danger" | "link" | "text";
+        /**
+          * Disables the dropdown button if its true
+         */
+        "disabled"?: boolean;
         /**
           * Label for the dropdown button
          */

diff --git a/src/components/dropdown-button/dropdown-button.scss b/src/components/dropdown-button/dropdown-button.scss
@@ -150,6 +150,11 @@
         @include danger;
       }
 
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+      }
+
       &:focus {
         border: 1px solid var(--color-azure-800);
         box-shadow: 0 0 0 1px var(--color-azure-800);

diff --git a/src/components/dropdown-button/dropdown-button.tsx b/src/components/dropdown-button/dropdown-button.tsx
@@ -23,6 +23,11 @@ export class DropdownButton {
    */
   @Prop() split = false;
 
+  /**
+   * Disables the dropdown button if its true
+   */
+  @Prop() disabled = false;
+
   /**
    * Displays a searchable dropdown button
    */
@@ -89,7 +94,9 @@ export class DropdownButton {
    * Toggles dropdown b/w open and close
    */
   private handleDropdownToggle() {
-    this.isDropdownOpen = !this.isDropdownOpen;
+    if (!this.disabled) {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    }
   }
 
   /**
@@ -221,6 +228,7 @@ export class DropdownButton {
       const dropdownStateClasses = `
         dropdown-state
         ${'dropdown-state--' + this.color.toLowerCase()}
+        ${this.disabled ? 'disabled' : ''}
       `;
       return (this.split ?
       <div onClick={() => this.handleDropdownToggle()} class={dropdownStateClasses}>
@@ -234,7 +242,11 @@ export class DropdownButton {
     return (
       <div class="dropdown-container">
         <div class="btn-container">
-          <fw-button color={this.color} onClick={() => this.handleDropdownToggle()}>
+          <fw-button
+            color={this.color}
+            disabled={this.disabled}
+            onClick={() => this.handleDropdownToggle()}
+          >
             {this.label}
             <DropdownState />
           </fw-button>

diff --git a/src/components/dropdown-button/readme.md b/src/components/dropdown-button/readme.md
@@ -51,6 +51,7 @@ fw-dropdown-button displays a dropdown button on the user interface and enables
 | Property      | Attribute     | Description                                                                          | Type                                                       | Default     |
 | ------------- | ------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
 | `color`       | `color`       | Dropdown Button color                                                                | `"danger" or "link" or "primary" or "secondary" or "text"` | `'primary'` |
+| `disabled`    | `disabled`    | Disables the dropdown button if its true                                             | `boolean`                                                  | `false`     |
 | `label`       | `label`       | Label for the dropdown button                                                        | `string`                                                   | `undefined` |
 | `options`     | --            | Options to show in the dropdown button                                               | `any[]`                                                    | `[]`        |
 | `placeholder` | `placeholder` | Placeholder text for search input. Validated only if dropdown and searchable is true | `string`                                                   | `''`        |