Merge pull request #422 from bethinkpl/add-chip-color-danger

LMS-2292 | Add chip color 'danger'
bethinkpl · Sep 26, 2024 · 780295e · 780295e
2 parents 1f59081 + 90e9735
commit 780295e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/lib/js/components/Chip/Chip.consts.ts b/lib/js/components/Chip/Chip.consts.ts
@@ -8,6 +8,7 @@ export const CHIP_COLORS = {
 	PRIMARY_STRONG: 'primaryStrong',
 	NEUTRAL: 'neutral',
 	FAIL: 'fail',
+	DANGER: 'danger',
 	SUCCESS: 'success',
 	INVERTED: 'inverted',
 	WARNING: 'warning',

diff --git a/lib/js/components/Chip/Chip.spec.ts b/lib/js/components/Chip/Chip.spec.ts
@@ -94,6 +94,7 @@ describe('Chip', () => {
 		[CHIP_COLORS.PRIMARY_STRONG, '-ds-color-primaryStrong'],
 		[CHIP_COLORS.NEUTRAL, '-ds-color-neutral'],
 		[CHIP_COLORS.FAIL, '-ds-color-fail'],
+		[CHIP_COLORS.DANGER, '-ds-color-danger'],
 		[CHIP_COLORS.SUCCESS, '-ds-color-success'],
 		[CHIP_COLORS.INFO, '-ds-color-info'],
 		[CHIP_COLORS.WARNING, '-ds-color-warning'],
@@ -106,6 +107,7 @@ describe('Chip', () => {
 				'-ds-color-primaryStrong',
 				'-ds-color-neutral',
 				'-ds-color-fail',
+				'-ds-color-danger',
 				'-ds-color-success',
 				'-ds-color-info',
 				'-ds-color-warning',

diff --git a/lib/js/components/Chip/Chip.vue b/lib/js/components/Chip/Chip.vue
@@ -86,6 +86,16 @@ $chip-colors: (
 			'background': $color-fail-background,
 		),
 	),
+	'danger': (
+		'label': $color-danger-text,
+		'icon': $color-danger-icon,
+		'background': $color-danger-background,
+		'disabled': (
+			'label': $color-danger-text-disabled,
+			'icon': $color-danger-icon-disabled,
+			'background': $color-danger-background,
+		),
+	),
 	'warning': (
 		'label': $color-warning-text,
 		'icon': $color-warning-icon,
@@ -245,6 +255,7 @@ const CHIP_ICON_BUTTONS_COLOR_MAP = {
 	[CHIP_COLORS.PRIMARY]: ICON_BUTTON_COLORS.PRIMARY,
 	[CHIP_COLORS.PRIMARY_STRONG]: ICON_BUTTON_COLORS.PRIMARY,
 	[CHIP_COLORS.FAIL]: ICON_BUTTON_COLORS.FAIL,
+	[CHIP_COLORS.DANGER]: ICON_BUTTON_COLORS.DANGER,
 	[CHIP_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
 	[CHIP_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
 	[CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,