fix(components): fix color issues in button and chip (#2141)

Teradata · Apr 9, 2024 · 74f0106 · 74f0106
1 parent 2b7c6dd
commit 74f0106
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 0 deletions.
diff --git a/apps/knapsack/data/knapsack.pattern.button.json b/apps/knapsack/data/knapsack.pattern.button.json
@@ -28,6 +28,19 @@
               "type": "string",
               "description": "Icon to display, and aria-label value when label is not defined"
             },
+            "color": {
+              "type": "string",
+              "enum": [
+                "primary",
+                "secondary",
+                "emphasis",
+                "neutral",
+                "caution",
+                "negative",
+                "positive"
+              ],
+              "description": "Applies the button color"
+            },
             "raised": {
               "description": "Creates a contained button that is elevated above the surface",
               "type": "boolean"

diff --git a/apps/knapsack/dist/meta/button/button.web-components-raE1x4tYL.spec.d.ts b/apps/knapsack/dist/meta/button/button.web-components-raE1x4tYL.spec.d.ts
@@ -17,6 +17,17 @@ export interface Button {
    * Icon to display, and aria-label value when label is not defined
    */
   icon?: string;
+  /**
+   * Applies the button color
+   */
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'emphasis'
+    | 'neutral'
+    | 'caution'
+    | 'negative'
+    | 'positive';
   /**
    * Creates a contained button that is elevated above the surface
    */

diff --git a/apps/knapsack/dist/meta/button/button.web-components-raE1x4tYL.spec.json b/apps/knapsack/dist/meta/button/button.web-components-raE1x4tYL.spec.json
@@ -12,6 +12,19 @@
       "type": "string",
       "description": "Icon to display, and aria-label value when label is not defined"
     },
+    "color": {
+      "type": "string",
+      "enum": [
+        "primary",
+        "secondary",
+        "emphasis",
+        "neutral",
+        "caution",
+        "negative",
+        "positive"
+      ],
+      "description": "Applies the button color"
+    },
     "raised": {
       "description": "Creates a contained button that is elevated above the surface",
       "type": "boolean"

diff --git a/apps/knapsack/dist/meta/knapsack.html-data.json b/apps/knapsack/dist/meta/knapsack.html-data.json
@@ -215,6 +215,33 @@
           "name": "icon",
           "description": "Icon to display, and aria-label value when label is not defined"
         },
+        {
+          "name": "color",
+          "values": [
+            {
+              "name": "primary"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "emphasis"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "caution"
+            },
+            {
+              "name": "negative"
+            },
+            {
+              "name": "positive"
+            }
+          ],
+          "description": "Applies the button color"
+        },
         {
           "name": "raised",
           "description": "boolean Creates a contained button that is elevated above the surface"

diff --git a/libs/components/src/chips/chip-base.ts b/libs/components/src/chips/chip-base.ts
@@ -74,6 +74,7 @@ export class ChipBase extends LitElement {
       'mdc-evolution-chip--selectable': this.filter,
       'mdc-evolution-chip--with-avatar': this.avatar,
       secondary: this.state === 'secondary',
+      positive: this.state === 'positive',
       negative: this.state === 'negative',
       caution: this.state === 'caution',
     };

diff --git a/libs/components/src/chips/chip.scss b/libs/components/src/chips/chip.scss
@@ -22,6 +22,10 @@
     background-color: var(--mdc-theme-surface-primary);
   }
 
+  &.positive {
+    background-color: var(--cv-theme-surface-positive);
+  }
+
   &.negative {
     background-color: var(--mdc-theme-surface-negative);
   }

diff --git a/libs/components/src/chips/chips.stories.js b/libs/components/src/chips/chips.stories.js
@@ -64,6 +64,11 @@ Caution.args = {
   state: 'caution',
 };
 
+export const Positive = Template.bind({});
+Positive.args = {
+  state: 'positive',
+};
+
 export const Negative = Template.bind({});
 Negative.args = {
   state: 'negative',