LAN-1006: Add label-feedback-reject button type to OXD button (#778)

* LAN 1006 - New label-feedback-reject button added * LAN 1006 - new button changelog added * LAN 1006 - new reject button color changed
orangehrm · May 10, 2024 · a7d9b93 · a7d9b93
1 parent 3688050
commit a7d9b93
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 0 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+2024-05-09 - 5a8b404db53df944733a36a373b1429c98a6d79d - Button/button.scss, Button/types.ts, Button/_variables.scss, styles/_colors.scss - Add label-feedback-reject button
+
 2024-05-06 - 78c22c31a971adbf9a9c146f871994bcf7eaa648 - components/LinearProgress/LinearProgress.vue - Add new component LinearProgress to support linear progress
 
 2024-05-06 - e9f660cd0022162a017d8fc58f7690cba72be1af - Icon/icons.ts - Add oxd-time-zone icon

diff --git a/components/src/core/components/Button/_variables.scss b/components/src/core/components/Button/_variables.scss
@@ -315,6 +315,20 @@ $oxd-button-color--label-feedback-success-hover: $oxd-button-font-color--label-f
 $oxd-button-color--label-feedback-success-focus: $oxd-button-color--label-feedback-success-hover !default;
 $oxd-button-color--label-feedback-success-inactive: $oxd-interface-gray-lighten-1-color !default;
 
+/* Reject */
+$oxd-button-font-color--label-feedback-reject: $oxd-feedback-reject-color !default;
+$oxd-button-color--label-feedback-reject: rgba(
+  $oxd-feedback-reject-color,
+  0.2
+) !default;
+$oxd-button-color--label-feedback-reject-pressed: rgba(
+  $oxd-feedback-reject-color,
+  0.2
+) !default;
+$oxd-button-color--label-feedback-reject-hover: $oxd-button-font-color--label-feedback-reject !default;
+$oxd-button-color--label-feedback-reject-focus: $oxd-button-color--label-feedback-reject-hover !default;
+$oxd-button-color--label-feedback-reject-inactive: $oxd-interface-gray-lighten-1-color !default;
+
 /* Text button */
 $oxd-button-font-color--label-text: $oxd-interface-gray-darken-1-color !default;
 $oxd-button-color--label-text: rgba(
@@ -426,6 +440,14 @@ $oxd-label-feedback-buttons: (
     hover: $oxd-button-color--label-feedback-success-hover,
     inactive: $oxd-button-color--label-feedback-success-inactive,
   ),
+  reject: (
+    font: $oxd-button-font-color--label-feedback-reject,
+    active: $oxd-button-color--label-feedback-reject,
+    pressed: $oxd-button-color--label-feedback-reject-pressed,
+    focus: $oxd-button-color--label-feedback-reject-focus,
+    hover: $oxd-button-color--label-feedback-reject-hover,
+    inactive: $oxd-button-color--label-feedback-reject-inactive,
+  ),
   text: (
     font: $oxd-button-font-color--label-text,
     active: $oxd-button-color--label-text,

diff --git a/components/src/core/components/Button/button.scss b/components/src/core/components/Button/button.scss
@@ -98,6 +98,9 @@
     &-success {
       @include oxd-button-label-feedback('success');
     }
+    &-reject {
+      @include oxd-button-label-feedback('reject');
+    }
   }
 
   /* Text Button */

diff --git a/components/src/core/components/Button/types.ts b/components/src/core/components/Button/types.ts
@@ -28,6 +28,7 @@ export const TYPE_LABEL_FEEDBACK_INFO = 'label-feedback-info';
 export const TYPE_LABEL_FEEDBACK_DANGER = 'label-feedback-danger';
 export const TYPE_LABEL_FEEDBACK_WARN = 'label-feedback-warn';
 export const TYPE_LABEL_FEEDBACK_SUCCESS = 'label-feedback-success';
+export const TYPE_LABEL_FEEDBACK_REJECT = 'label-feedback-reject';
 
 export const TYPE_TEXT = 'text';
 export const TYPE_TOOL = 'tool';
@@ -68,6 +69,7 @@ export const TYPES = [
   TYPE_LABEL_FEEDBACK_DANGER,
   TYPE_LABEL_FEEDBACK_WARN,
   TYPE_LABEL_FEEDBACK_SUCCESS,
+  TYPE_LABEL_FEEDBACK_REJECT,
   TYPE_TEXT,
   TYPE_TOOL,
   TYPE_GLASS,
@@ -101,6 +103,7 @@ export type ButtonType =
   | typeof TYPE_LABEL_FEEDBACK_DANGER
   | typeof TYPE_LABEL_FEEDBACK_WARN
   | typeof TYPE_LABEL_FEEDBACK_SUCCESS
+  | typeof TYPE_LABEL_FEEDBACK_REJECT
   | typeof TYPE_TEXT
   | typeof TYPE_TOOL;
 

diff --git a/components/src/styles/_colors.scss b/components/src/styles/_colors.scss
@@ -30,6 +30,7 @@ $oxd-feedback-info-color: #1e6ceb !default;
 $oxd-feedback-danger-color: #eb0910 !default;
 $oxd-feedback-warn-color: #ffa62f !default;
 $oxd-feedback-success-color: #34bc40 !default;
+$oxd-feedback-reject-color: #ffaa00 !default;
 
 $oxd-white-color: #ffffff !default;
 $oxd-black-color: #000000 !default;

diff --git a/storybook/stories/core/components/Button/Button.stories.js b/storybook/stories/core/components/Button/Button.stories.js
@@ -137,6 +137,7 @@ LabelFeedback.argTypes = {
         'label-feedback-danger',
         'label-feedback-warn',
         'label-feedback-success',
+        'label-feedback-reject'
       ],
     },
   },