Merge pull request #505 from Infineon/303-design-review-component-status

design review changes: status
Infineon · Sep 12, 2023 · 94f3c06 · 94f3c06
2 parents 9572f2b + 835915c
commit 94f3c06
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/packages/components/src/components/status/readme.md b/packages/components/src/components/status/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                                                         | Default     |
-| -------- | --------- | ----------- | ---------------------------------------------------------------------------- | ----------- |
-| `border` | `border`  |             | `boolean`                                                                    | `false`     |
-| `color`  | `color`   |             | `"berry" \| "green" \| "grey" \| "grey-200" \| "ocean" \| "orange" \| "red"` | `'orange'`  |
-| `label`  | `label`   |             | `string`                                                                     | `undefined` |
+| Property | Attribute | Description | Type                                                                           | Default     |
+| -------- | --------- | ----------- | ------------------------------------------------------------------------------ | ----------- |
+| `border` | `border`  |             | `boolean`                                                                      | `false`     |
+| `color`  | `color`   |             | `"berry" \| "green" \| "grey" \| "light-grey" \| "ocean" \| "orange" \| "red"` | `'orange'`  |
+| `label`  | `label`   |             | `string`                                                                       | `undefined` |
 
 
 ----------------------------------------------

diff --git a/packages/components/src/components/status/status.scss b/packages/components/src/components/status/status.scss
@@ -9,13 +9,13 @@
   display: flex;
   min-height: 1.25em;
   align-items: center;
-  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;
+  padding: 0 tokens.$ifxSpace100;
   border-radius: tokens.$ifxBorderRadiusRound;
 }
 
 .text {
   margin: 0;
-  padding-left: 5px;
+  padding-left: tokens.$ifxSpace50;
   font-style: normal;
   font-weight: tokens.$ifxFontWeightSemibold;
   font-size: tokens.$ifxFontSizeM;
@@ -33,31 +33,31 @@
 
 .container {
   &.border-orange {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorOrange500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;
   }
 
   &.border-ocean {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorOcean500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;
   }
 
   &.border-grey {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorEngineering500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;
   }
 
-  &.border-grey-200 {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorEngineering200;
+  &.border-light-grey {
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;
   }
 
   &.border-red {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorRed500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;
   }
 
   &.border-green {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorGreen500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;
   }
 
   &.border-berry {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorBerry500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;
   }
 }
 
@@ -74,8 +74,8 @@
     background-color: tokens.$ifxColorEngineering500;
   }
 
-  &.grey-200 {
-    background-color: tokens.$ifxColorEngineering200;
+  &.light-grey {
+    background-color: tokens.$ifxColorEngineering300;
   }
 
   &.red {

diff --git a/packages/components/src/components/status/status.stories.ts b/packages/components/src/components/status/status.stories.ts
@@ -14,7 +14,7 @@ export default {
       attr: 'border',
     },
     color: {
-      options: ['orange', 'ocean', 'grey', 'grey-200', 'red', 'green', 'berry'],
+      options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],
       control: { type: 'radio' },
     },
   },

diff --git a/packages/components/src/components/status/status.tsx b/packages/components/src/components/status/status.tsx
@@ -10,7 +10,7 @@ export class Status {
 
   @Prop() label: string;
   @Prop() border: boolean = false;
-  @Prop() color: 'orange' | 'ocean' | 'grey' | 'grey-200' | 'red' | 'green' | 'berry' = 'orange';
+  @Prop() color: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry' = 'orange';
 
   render() {
     const borderClass = this.border ? `border-${this.color}` : '';