feat(ui5-checkbox): add support for "Success" value state (#3278)

Add support  for "Success" value state

Fixes: #3198
Closes: #3198

Author: nnaydenow

packages/main/src/CheckBox.js

@@ -9,7 +9,11 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import Icon from "./Icon.js";
 import Label from "./Label.js";
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
+import {
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	VALUE_STATE_SUCCESS,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js";
@@ -88,8 +92,8 @@ const metadata = {
 		 * <li><code>Warning</code></li>
 		 * <li><code>Error</code></li>
 		 * <li><code>None</code>(default)</li>
-		 * <li><code>Negative</code></li>
-		 * <li><code>Transparent</code></li>
+		 * <li><code>Success</code></li>
+		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
 		 * @type {ValueState}
@@ -321,6 +325,7 @@ class CheckBox extends UI5Element {
 		return {
 			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
 		};
 	}
 

packages/main/src/themes/CheckBox.css

@@ -67,6 +67,13 @@
 	color: var(--sapField_InformationColor);
 }
 
+:host([value-state="Success"]) .ui5-checkbox-inner,
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+	background: var(--sapField_SuccessBackground);
+	border: var(--_ui5_checkbox_inner_success_border);
+	color: var(--sapField_SuccessColor);
+}
+
 :host([value-state="Warning"]) .ui5-checkbox-icon {
 	color: var(--_ui5_checkbox_checkmark_warning_color);
 }

packages/main/src/themes/base/CheckBox-parameters.css

@@ -8,6 +8,7 @@
 --_ui5_checkbox_inner_error_border: 0.125rem solid var(--sapField_InvalidColor);
 --_ui5_checkbox_inner_warning_border: 0.125rem solid var(--sapField_WarningColor);
 --_ui5_checkbox_inner_information_border: 0.125rem solid var(--sapField_InformationColor);
+--_ui5_checkbox_inner_success_border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor);
 --_ui5_checkbox_inner_readonly_border: 0.125rem solid var(--sapField_ReadOnly_BorderColor);
 --_ui5_checkbox_checkmark_warning_color: var(--sapField_TextColor);
 --_ui5_checkbox_checkmark_color: var(--sapSelectedColor);