feat(Tag): add disabled state for bq-tag component

Endava · Dec 12, 2023 · 761161e · 761161e
1 parent a015f3b
commit 761161e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 15 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -1000,6 +1000,10 @@ export namespace Components {
         "value": string;
     }
     interface BqTag {
+        /**
+          * If true, the button will be disabled (no interaction allowed)
+         */
+        "disabled"?: boolean;
         /**
           * If true, the tag component has color style
          */
@@ -2997,6 +3001,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface BqTag {
+        /**
+          * If true, the button will be disabled (no interaction allowed)
+         */
+        "disabled"?: boolean;
         /**
           * If true, the tag component has color style
          */

diff --git a/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx b/packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx
@@ -17,6 +17,7 @@ const meta: Meta = {
     open: { control: 'boolean' },
     type: { control: 'select', options: [...TAG_TYPE] },
     variant: { control: 'select', options: [...TAG_VARIANT] },
+    disabled: { control: 'boolean' },
     'is-removable': { control: 'boolean' },
     'has-icon': { control: 'boolean' },
     'has-color': { control: 'boolean' },
@@ -26,6 +27,7 @@ const meta: Meta = {
     open: false,
     type: 'default',
     variant: 'default',
+    disabled: false,
     'is-removable': false,
     'has-icon': false,
     'has-color': false,
@@ -44,6 +46,7 @@ const Template = (args: Args) =>
     variant=${args.variant}
     ?has-icon=${args['has-icon']}
     ?has-color=${args['has-color']}
+    ?disabled=${args.disabled}
   >
     <span slot="tag">Tag</span>
   </bq-tag>`;

diff --git a/packages/beeq/src/components/tag/bq-tag.tsx b/packages/beeq/src/components/tag/bq-tag.tsx
@@ -44,6 +44,9 @@ export class BqTag {
   /** The variant of tag to apply on top of the variant */
   @Prop({ reflect: true }) variant: TTagVariant = 'default';
 
+  /** If true, the button will be disabled (no interaction allowed) */
+  @Prop({ reflect: true }) disabled?: boolean = false;
+
   // Prop lifecycle events
   // =======================
 
@@ -101,10 +104,6 @@ export class BqTag {
   // These methods cannot be called from the host element.
   // =======================================================
 
-  // render() function
-  // Always the last one in the class.
-  // ===================================
-
   private handleHide = () => {
     const ev = this.bqHide.emit(this.el);
     if (!ev.defaultPrevented) {
@@ -122,6 +121,9 @@ export class BqTag {
   private get iconSize(): number {
     return SIZE_TO_VALUE_MAP[this.size] || SIZE_TO_VALUE_MAP.small;
   }
+  // render() function
+  // Always the last one in the class.
+  // ===================================
 
   render() {
     return (
@@ -132,9 +134,12 @@ export class BqTag {
       >
         <div
           class={{
-            [`bq-tag bq-tag__wrapper--${this.size} font-medium leading-regular`]: true,
+            'bq-tag': true,
+            disabled: this.disabled && !this.hasColor,
+            [`bq-tag__wrapper--${this.size} font-medium leading-regular`]: true,
             [`bq-tag__${this.type}__${this.variant}`]: this.hasColor,
           }}
+          aria-disabled={this.disabled}
           part="wrapper"
         >
           <div class={{ 'bq-tag__icon': true, '!hidden': !this.hasIcon }}>

diff --git a/packages/beeq/src/components/tag/readme.md b/packages/beeq/src/components/tag/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                       | Type                                                       | Default     |
-| ------------- | -------------- | ------------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `hasColor`    | `has-color`    | If true, the tag component has color style        | `boolean`                                                  | `undefined` |
-| `hasIcon`     | `has-icon`     | If true, the tag component has an icon            | `boolean`                                                  | `undefined` |
-| `isRemovable` | `is-removable` | If true, the tag component can be removed         | `boolean`                                                  | `undefined` |
-| `open`        | `open`         | If true, the tag component will be shown          | `boolean`                                                  | `undefined` |
-| `size`        | `size`         | The type of the tag component                     | `"extra_small" \| "medium" \| "small"`                     | `'small'`   |
-| `type`        | `type`         | The default type of the tag component             | `"default" \| "error" \| "info" \| "success" \| "warning"` | `'default'` |
-| `variant`     | `variant`      | The variant of tag to apply on top of the variant | `string`                                                   | `'default'` |
+| Property      | Attribute      | Description                                                   | Type                                                       | Default     |
+| ------------- | -------------- | ------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
+| `disabled`    | `disabled`     | If true, the button will be disabled (no interaction allowed) | `boolean`                                                  | `false`     |
+| `hasColor`    | `has-color`    | If true, the tag component has color style                    | `boolean`                                                  | `undefined` |
+| `hasIcon`     | `has-icon`     | If true, the tag component has an icon                        | `boolean`                                                  | `undefined` |
+| `isRemovable` | `is-removable` | If true, the tag component can be removed                     | `boolean`                                                  | `undefined` |
+| `open`        | `open`         | If true, the tag component will be shown                      | `boolean`                                                  | `undefined` |
+| `size`        | `size`         | The type of the tag component                                 | `"extra_small" \| "medium" \| "small"`                     | `'small'`   |
+| `type`        | `type`         | The default type of the tag component                         | `"default" \| "error" \| "info" \| "success" \| "warning"` | `'default'` |
+| `variant`     | `variant`      | The variant of tag to apply on top of the variant             | `string`                                                   | `'default'` |
 
 
 ## Events

diff --git a/packages/beeq/src/components/tag/scss/bq-tag.scss b/packages/beeq/src/components/tag/scss/bq-tag.scss
@@ -14,6 +14,9 @@
 
 .bq-tag {
   @apply inline-flex flex-row items-center justify-center bg-ui-secondary;
+
+  // Disabled
+  @apply [&.disabled]:cursor-not-allowed [&.disabled]:bg-ui-secondary-disabled [&.disabled]:text-text-primary-disabled;
 }
 
 .bq-tag__wrapper {
@@ -30,7 +33,9 @@
   }
 }
 
-/** Combinatii speciale de stiluri */
+/** 
+  * Set the tag color based on the type and variant value selected
+*/
 
 .bq-tag__default {
   &__default {