diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js index 89baaabba0ca..f5e3ab8bdc78 100644 --- a/packages/main/src/CheckBox.js +++ b/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 = { *
  • Warning
  • *
  • Error
  • *
  • None(default)
  • - *
  • Negative
  • - *
  • Transparent
  • + *
  • Success
  • + *
  • Information
  • * * * @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), }; } diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index be0857e337b0..3a911f28bda9 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/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); } diff --git a/packages/main/src/themes/base/CheckBox-parameters.css b/packages/main/src/themes/base/CheckBox-parameters.css index 8aeb20b7662a..a94862fc11ef 100644 --- a/packages/main/src/themes/base/CheckBox-parameters.css +++ b/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);