From ef9304da4b1446178b1b2bfa737d9867461cc4bc Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Sat, 27 Apr 2024 20:33:14 +0300 Subject: [PATCH] refactor: rename ValueState values (#8864) The base ValueState enum values have been changed from ValueState.Warning, ValueState.Error and ValueState.Success to ValueState.Critical, ValueState.Negative and ValueState.Positive, causing changes in multiple components supporting valueState property (+ properties of similar type as Dialog.state, StandardListItem.highlight and MessageStrip.design). BREAKING CHANGE: If you previously used ValueState.Warning, ValueState.Error or ValueState.Success, start using ValueState.Critical, ValueState.Negative and ValueState.Positive respectively. All components with valueState property are also affected. For example: ```html ``` ```html ``` Related to: https://github.com/SAP/ui5-webcomponents/issues/8461 --- .../03-understanding-components-APIs.md | 6 +- docs/Migrating to version 2.0 guide.md | 414 ++++++++++++++++++ packages/base/src/types/ValueState.ts | 6 +- packages/fiori/src/UploadCollectionItem.ts | 2 +- packages/fiori/test/pages/DialogWithBar.html | 2 +- packages/fiori/test/pages/ShellBar.html | 32 +- packages/main/src/CheckBox.ts | 6 +- packages/main/src/ComboBox.ts | 26 +- packages/main/src/DatePicker.ts | 2 +- packages/main/src/Dialog.ts | 12 +- packages/main/src/FileUploader.ts | 20 +- packages/main/src/Input.ts | 34 +- packages/main/src/ListItem.ts | 2 +- packages/main/src/MessageStrip.ts | 8 +- packages/main/src/MultiComboBox.ts | 32 +- packages/main/src/ProgressIndicator.ts | 12 +- packages/main/src/RadioButton.ts | 6 +- packages/main/src/Select.ts | 26 +- packages/main/src/SelectMenu.ts | 12 +- packages/main/src/StandardListItem.ts | 2 +- packages/main/src/StepInput.ts | 2 +- packages/main/src/TextArea.ts | 26 +- packages/main/src/TimePicker.ts | 10 +- packages/main/src/Tokenizer.ts | 14 +- packages/main/src/TreeItemBase.ts | 2 +- packages/main/src/themes/CheckBox.css | 24 +- packages/main/src/themes/Dialog.css | 12 +- packages/main/src/themes/FileUploader.css | 6 +- packages/main/src/themes/Input.css | 102 ++--- .../main/src/themes/InputSharedStyles.css | 28 +- packages/main/src/themes/ListItem.css | 12 +- packages/main/src/themes/MessageStrip.css | 4 +- .../main/src/themes/ProgressIndicator.css | 36 +- packages/main/src/themes/RadioButton.css | 36 +- .../src/themes/ResponsivePopoverCommon.css | 34 +- packages/main/src/themes/StepInput.css | 40 +- packages/main/src/themes/TextArea.css | 68 +-- packages/main/src/themes/TimePicker.css | 2 +- packages/main/src/types/HighlightTypes.ts | 6 +- packages/main/src/types/MessageStripDesign.ts | 2 +- packages/main/test/pages/Badge.js | 6 +- packages/main/test/pages/Button.html | 2 +- packages/main/test/pages/Carousel.html | 4 +- packages/main/test/pages/CheckBox.html | 8 +- packages/main/test/pages/ComboBox.html | 12 +- packages/main/test/pages/CoreControls.html | 24 +- .../main/test/pages/CoreControls_exp.html | 24 +- packages/main/test/pages/DatePicker.html | 6 +- .../main/test/pages/DatePicker_test_page.html | 4 +- packages/main/test/pages/DateTimePicker.html | 6 +- packages/main/test/pages/Dialog.html | 18 +- packages/main/test/pages/FileUploader.html | 6 +- packages/main/test/pages/HCB.html | 4 +- packages/main/test/pages/Icon.html | 6 +- packages/main/test/pages/Input.html | 30 +- packages/main/test/pages/InputIcons.html | 18 +- packages/main/test/pages/Input_quickview.html | 12 +- .../main/test/pages/Input_variations.html | 12 +- packages/main/test/pages/InputsAlignment.html | 4 +- packages/main/test/pages/Kitchen.html | 18 +- packages/main/test/pages/Kitchen.openui5.html | 18 +- packages/main/test/pages/List.html | 38 +- .../main/test/pages/ListGrowing_Button.html | 8 +- .../main/test/pages/ListGrowing_Scroll.html | 24 +- packages/main/test/pages/List_test_page.html | 14 +- packages/main/test/pages/MultiComboBox.html | 10 +- packages/main/test/pages/MultiInput.html | 8 +- .../test/pages/MultiInput_Suggestions.html | 2 +- packages/main/test/pages/Popover.html | 6 +- .../main/test/pages/ProgressIndicator.html | 24 +- packages/main/test/pages/RadioButton.html | 22 +- packages/main/test/pages/Select.html | 14 +- packages/main/test/pages/SelectMenu.html | 6 +- packages/main/test/pages/StepInput.html | 12 +- packages/main/test/pages/TextArea.html | 14 +- packages/main/test/pages/TimePicker.html | 2 +- packages/main/test/pages/ToolbarSelect.html | 2 +- packages/main/test/pages/Tree.html | 6 +- packages/main/test/pages/TreeDragAndDrop.html | 6 +- .../main/test/pages/styles/RadioButton.css | 4 +- packages/main/test/samples/List.sample.html | 46 +- packages/main/test/specs/ComboBox.spec.js | 2 +- packages/main/test/specs/DatePicker.spec.js | 18 +- .../main/test/specs/DateRangePicker.spec.js | 4 +- packages/main/test/specs/List.spec.js | 2 +- .../test/specs/MultiComboBox.mobile.spec.js | 4 +- .../main/test/specs/MultiComboBox.spec.js | 6 +- packages/main/test/specs/MultiInput.spec.js | 2 +- packages/main/test/specs/TimePicker.spec.js | 2 +- .../main/test/specs/ToolbarSelect.spec.js | 4 +- .../_stories/main/Badge/Badge.stories.ts | 2 +- .../_stories/main/Card/Card.stories.ts | 6 +- .../main/CheckBox/CheckBox.stories.ts | 42 +- .../_stories/main/Dialog/Dialog.stories.ts | 4 +- .../_stories/main/Input/Input.stories.ts | 4 +- .../_stories/main/List/List.stories.ts | 20 +- .../StandardListItem.stories.ts | 2 +- .../MultiComboBox/MultiComboBox.stories.ts | 8 +- .../main/MultiInput/MultiInput.stories.ts | 2 +- .../main/RadioButton/RadioButton.stories.ts | 6 +- .../_stories/main/Select/Select.stories.ts | 6 +- .../main/StepInput/StepInput.stories.ts | 6 +- .../main/TimePicker/TimePicker.stories.ts | 2 +- .../_stories/main/Toolbar/Toolbar.stories.ts | 6 +- .../docs/_components_pages/main/Dialog.mdx | 2 +- .../_samples/main/CheckBox/States/sample.html | 24 +- .../main/DatePicker/State/sample.html | 6 +- .../_samples/main/Dialog/Basic/sample.html | 2 +- .../main/Dialog/WithState/sample.html | 2 +- .../main/Input/ValueStateMessage/sample.html | 2 +- .../docs/_samples/main/List/Basic/sample.html | 6 +- .../docs/_samples/main/List/Growing/main.js | 2 +- .../_samples/main/List/Growing/sample.html | 8 +- .../main/List/GrowingOnButtonPress/main.js | 2 +- .../List/GrowingOnButtonPress/sample.html | 8 +- .../main/MessageStrip/Design/sample.html | 2 +- .../MultiComboBoxCustomValue/sample.html | 14 +- .../main/MultiInput/TokenCreation/main.js | 4 +- .../main/ProgressIndicator/States/sample.html | 4 +- .../main/RadioButton/States/sample.html | 6 +- .../_samples/main/Select/States/sample.html | 8 +- .../main/StepInput/States/sample.html | 8 +- .../_samples/main/TextArea/MaxLength/main.js | 2 +- .../_samples/main/TextArea/States/sample.html | 8 +- .../main/TimePicker/States/sample.html | 8 +- 125 files changed, 1168 insertions(+), 758 deletions(-) diff --git a/docs/1-getting-started/03-understanding-components-APIs.md b/docs/1-getting-started/03-understanding-components-APIs.md index 49ff3863a348..decb4eceba74 100644 --- a/docs/1-getting-started/03-understanding-components-APIs.md +++ b/docs/1-getting-started/03-understanding-components-APIs.md @@ -44,7 +44,7 @@ names are "kebab-case" (e.g. `value-state`) while property names are "camelCase" Attributes can be set directly on the web component in HTML. ```html - + ``` Properties can only be set programmatically. @@ -53,14 +53,14 @@ To set a property: ```js const myCb = document.getElementById("cb"); -myCb.valueState = "Error"; +myCb.valueState = "Negative"; ``` To set an attribute: ```js const myCb = document.getElementById("cb"); -myCb.setAttribute("value-state", "Error"); +myCb.setAttribute("value-state", "Negative"); ``` A note on Boolean attributes: in HTML Boolean attributes may have no value diff --git a/docs/Migrating to version 2.0 guide.md b/docs/Migrating to version 2.0 guide.md index a587adfa8d58..7ddce6eceddd 100644 --- a/docs/Migrating to version 2.0 guide.md +++ b/docs/Migrating to version 2.0 guide.md @@ -204,6 +204,230 @@ Now you have to use it like this: ``` + +### ui5-checkbox + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-combobox + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-date-picker + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + + +### ui5-date-time-picker + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-date-range-picker + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-dialog + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | state="Error/Warning/Success" | state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-file-uploader + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-input + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-multi-input + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-message-strip + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | design="Warning" | design="Critical" | + +- The property values `Warning` are renamed to `Critical`. If you previously used it like: +```html + +``` +Now you have to use it like: +```html + +``` + +### ui5-li + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | highlight="Error/Warning/Success" | highlight="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | additionalTextState="Error/Warning/Success" | additional-text-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + ### ui5-list | Changed item | Old | New | @@ -232,6 +456,23 @@ Now use `selectionMode` and `Single`, `Multiple` instead: ``` +### ui5-message-strip + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | design="Warning" | design="Critical" | + +- The property values `Warning` are renamed to `Critical`. If you previously used it like: +```html + +``` +Now you have to use it like: +```html + +``` + + + ### ui5-multi-combobox | Changed item | Old | New | @@ -245,6 +486,24 @@ Now use `selectionMode` and `Single`, `Multiple` instead: `` +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + + ### ui5-option | Changed item | Old | New | @@ -303,6 +562,106 @@ If you have previously used the `disabled` property, it won't take effect: ``` +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-radio-button + + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-select + + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + + +### ui5-step-input + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +### ui5-time-picker + + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + + + + ### ui5-tab-container | Changed item | Old | New | @@ -388,6 +747,23 @@ someTabSeparator.getDomRefInStrip(); - The `growingMaxLines` property has been renamed to `growingMaxRows`. +| Changed item | Old | New | +|--------------|---------|---------| +| Property | value-state="Error/Warning/Success" | value-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + ### ui5-tree | Changed item | Old | New | @@ -407,6 +783,44 @@ Now use `selectionMode` and `Single`, `Multiple` instead: ``` +### ui5-tree-item + + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | highlight="Error/Warning/Success" | highlight="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + +| Changed item | Old | New | +|--------------|---------|---------| +| Property | additional-text-state="Error/Warning/Success" | additional-text-state="Negative/Critical/Positive" | + +- The property values `Error/Warning/Success` are renamed to `Negative/Critical/Positive`. If you previously used it like: +```html + + + +``` +Now you have to use it like: +```html + + + +``` + + ## Fiori package (@ui5/webcomponents-fiori) ### ui5-bar diff --git a/packages/base/src/types/ValueState.ts b/packages/base/src/types/ValueState.ts index 339399f2e712..84160c701b88 100644 --- a/packages/base/src/types/ValueState.ts +++ b/packages/base/src/types/ValueState.ts @@ -12,17 +12,17 @@ enum ValueState { /** * @public */ - Success = "Success", + Positive = "Positive", /** * @public */ - Warning = "Warning", + Critical = "Critical", /** * @public */ - Error = "Error", + Negative = "Negative", /** * @public diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts index ea69e5757d47..8c7a570eb4af 100644 --- a/packages/fiori/src/UploadCollectionItem.ts +++ b/packages/fiori/src/UploadCollectionItem.ts @@ -403,7 +403,7 @@ class UploadCollectionItem extends ListItem { get valueStateName(): ValueState { if (this.uploadState === UploadState.Error) { - return ValueState.Error; + return ValueState.Negative; } if (this.uploadState === UploadState.Ready || this.uploadState === UploadState.Uploading) { diff --git a/packages/fiori/test/pages/DialogWithBar.html b/packages/fiori/test/pages/DialogWithBar.html index 35d164f3adcf..6ff4eeb816be 100644 --- a/packages/fiori/test/pages/DialogWithBar.html +++ b/packages/fiori/test/pages/DialogWithBar.html @@ -39,7 +39,7 @@ Error Dialog with Bar in Header - + Bar used in Header diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index 3c6183b11565..c0b91ca030fe 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -94,7 +94,7 @@ - + @@ -189,20 +189,20 @@

ShellBar in Compact

Instructions
- 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 @@ -235,7 +235,7 @@

ShellBar in Compact

- 1 + 1 diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index 02e19461f483..e016c0f996d5 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -362,9 +362,9 @@ class CheckBox extends UI5Element implements IFormElement { valueStateTextMappings() { return { - "Error": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR), - "Warning": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING), - "Success": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS), + "Negative": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR), + "Critical": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING), + "Positive": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS), }; } diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 609d3a91cb5a..0a6bd44eae78 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -105,9 +105,9 @@ type ComboBoxListItem = StandardListItem & { }; enum ValueStateIconMapping { - Error = "error", - Warning = "alert", - Success = "sys-enter-2", + Negative = "error", + Critical = "alert", + Positive = "sys-enter-2", Information = "information", } @@ -1134,7 +1134,7 @@ class ComboBox extends UI5Element { } get hasValueStateText(): boolean { - return this.hasValueState && this.valueState !== ValueState.Success; + return this.hasValueState && this.valueState !== ValueState.Positive; } get ariaValueStateHiddenText(): string { @@ -1169,19 +1169,19 @@ class ComboBox extends UI5Element { get valueStateTextMappings(): ValueStateAnnouncement { return { - [ValueState.Success]: ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS), - [ValueState.Error]: ComboBox.i18nBundle.getText(VALUE_STATE_ERROR), - [ValueState.Warning]: ComboBox.i18nBundle.getText(VALUE_STATE_WARNING), + [ValueState.Positive]: ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS), + [ValueState.Negative]: ComboBox.i18nBundle.getText(VALUE_STATE_ERROR), + [ValueState.Critical]: ComboBox.i18nBundle.getText(VALUE_STATE_WARNING), [ValueState.Information]: ComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION), }; } get valueStateTypeMappings(): ValueStateTypeAnnouncement { return { - [ValueState.Success]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), + [ValueState.Positive]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), [ValueState.Information]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION), - [ValueState.Error]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), - [ValueState.Warning]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), + [ValueState.Negative]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), + [ValueState.Critical]: ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), }; } @@ -1257,9 +1257,9 @@ class ComboBox extends UI5Element { popoverValueState: { "ui5-valuestatemessage-header": true, "ui5-valuestatemessage-root": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, }; diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 2931299c9609..edb58ba1535d 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -546,7 +546,7 @@ class DatePicker extends DateComponentBase implements IFormElement { const valid = this._checkValueValidity(this.value); const previousValueState = this.valueState; - this.valueState = valid ? ValueState.None : ValueState.Error; + this.valueState = valid ? ValueState.None : ValueState.Negative; const eventPrevented = !this.fireEvent("value-state-change", { valueState: this.valueState, valid }, true); diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 01dd50ab245a..4264d03bec25 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -39,14 +39,14 @@ import PopupAccessibleRole from "./types/PopupAccessibleRole.js"; */ const STEP_SIZE = 16; -type ValueStateWithIcon = ValueState.Error | ValueState.Warning | ValueState.Success | ValueState.Information; +type ValueStateWithIcon = ValueState.Negative | ValueState.Critical | ValueState.Positive | ValueState.Information; /** * Defines the icons corresponding to the dialog's state. */ const ICON_PER_STATE: Record = { - [ValueState.Error]: "error", - [ValueState.Warning]: "alert", - [ValueState.Success]: "sys-enter-2", + [ValueState.Negative]: "error", + [ValueState.Critical]: "alert", + [ValueState.Positive]: "sys-enter-2", [ValueState.Information]: "information", }; @@ -181,7 +181,7 @@ class Dialog extends Popup { /** * Defines the state of the `Dialog`. * - * **Note:** If `"Error"` and `"Warning"` state is set, it will change the + * **Note:** If `"Negative"` and `"Critical"` states is set, it will change the * accessibility role to "alertdialog", if the accessibleRole property is set to `"Dialog"`. * @default "None" * @public @@ -363,7 +363,7 @@ class Dialog extends Popup { return undefined; } - if (this.state === ValueState.Error || this.state === ValueState.Warning) { + if (this.state === ValueState.Negative || this.state === ValueState.Critical) { return PopupAccessibleRole.AlertDialog.toLowerCase(); } diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 5ad10e6d6aca..95309495ee2a 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -414,10 +414,10 @@ class FileUploader extends UI5Element implements IFormElement { get valueStateTextMappings(): Record { return { - "Success": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS), + "Positive": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS), "Information": FileUploader.i18nBundle.getText(VALUE_STATE_INFORMATION), - "Error": FileUploader.i18nBundle.getText(VALUE_STATE_ERROR), - "Warning": FileUploader.i18nBundle.getText(VALUE_STATE_WARNING), + "Negative": FileUploader.i18nBundle.getText(VALUE_STATE_ERROR), + "Critical": FileUploader.i18nBundle.getText(VALUE_STATE_WARNING), }; } @@ -430,7 +430,7 @@ class FileUploader extends UI5Element implements IFormElement { } get hasValueStateText(): boolean { - return this.hasValueState && this.valueState !== ValueState.Success; + return this.hasValueState && this.valueState !== ValueState.Positive; } get valueStateMessageText() { @@ -450,9 +450,9 @@ class FileUploader extends UI5Element implements IFormElement { */ get _valueStateMessageInputIcon(): string { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; @@ -463,9 +463,9 @@ class FileUploader extends UI5Element implements IFormElement { return { popoverValueState: { "ui5-valuestatemessage-root": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, }; diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 752e3bd3d32b..5296fd306caf 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1437,19 +1437,19 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { get valueStateTypeMappings() { return { - "Success": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), + "Positive": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), "Information": Input.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION), - "Error": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), - "Warning": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), + "Negative": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), + "Critical": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), }; } valueStateTextMappings() { return { - "Success": Input.i18nBundle.getText(VALUE_STATE_SUCCESS), + "Positive": Input.i18nBundle.getText(VALUE_STATE_SUCCESS), "Information": Input.i18nBundle.getText(VALUE_STATE_INFORMATION), - "Error": Input.i18nBundle.getText(VALUE_STATE_ERROR), - "Warning": Input.i18nBundle.getText(VALUE_STATE_WARNING), + "Negative": Input.i18nBundle.getText(VALUE_STATE_ERROR), + "Critical": Input.i18nBundle.getText(VALUE_STATE_WARNING), }; } @@ -1496,7 +1496,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { "input": { "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined), "ariaDescribedBy": ariaDescribedBy || undefined, - "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined, + "ariaInvalid": this.valueState === ValueState.Negative ? "true" : undefined, "ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault, "ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault, "role": this._inputAccInfo && this._inputAccInfo.role, @@ -1551,9 +1551,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { popoverValueState: { "ui5-valuestatemessage-root": true, "ui5-valuestatemessage-header": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, }; @@ -1599,7 +1599,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { } get hasValueStateMessage() { - return this.hasValueState && this.valueState !== ValueState.Success + return this.hasValueState && this.valueState !== ValueState.Positive && (!this._inputIconFocused // Handles the cases when valueStateMessage is forwarded (from datepicker e.g.) || !!(this._isPhone && this.Suggestions)); // Handles Input with suggestions on mobile } @@ -1656,9 +1656,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { */ get _valueStateInputIcon() { const iconPerValueState = { - Error: ``, - Warning: ``, - Success: ``, + Negative: ``, + Critical: ``, + Positive: ``, Information: ``, }; @@ -1682,9 +1682,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { */ get _valueStateMessageInputIcon() { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts index 3d1bb8e74c2f..b99d96ef0808 100644 --- a/packages/main/src/ListItem.ts +++ b/packages/main/src/ListItem.ts @@ -171,7 +171,7 @@ abstract class ListItem extends ListItemBase { /** * Defines the highlight state of the list items. - * Available options are: `"None"` (by default), `"Success"`, `"Warning"`, `"Information"` and `"Error"`. + * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public * @since 1.24 diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts index 6ad738686462..27f3b0969c83 100644 --- a/packages/main/src/MessageStrip.ts +++ b/packages/main/src/MessageStrip.ts @@ -35,7 +35,7 @@ enum DesignClassesMapping { Information = "ui5-message-strip-root--info", Positive = "ui5-message-strip-root--positive", Negative = "ui5-message-strip-root--negative", - Warning = "ui5-message-strip-root--warning", + Critical = "ui5-message-strip-root--critical", ColorSet1 = "ui5-message-strip-root--color-set-1", ColorSet2 = "ui5-message-strip-root--color-set-2", } @@ -48,7 +48,7 @@ type DesignTypeAnnouncemnt = Record; * ### Overview * * The `ui5-message-strip` component enables the embedding of app-related messages. - * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. + * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Critical and Negative. * Each message can have a Close button, so that it can be removed from the UI, if needed. * * ### Usage @@ -168,7 +168,7 @@ class MessageStrip extends UI5Element { Information: getTranslation(MESSAGE_STRIP_INFORMATION), Positive: getTranslation(MESSAGE_STRIP_SUCCESS), Negative: getTranslation(MESSAGE_STRIP_ERROR), - Warning: getTranslation(MESSAGE_STRIP_WARNING), + Critical: getTranslation(MESSAGE_STRIP_WARNING), ColorSet1: getTranslation(MESSAGE_STRIP_CUSTOM), ColorSet2: getTranslation(MESSAGE_STRIP_CUSTOM), }; @@ -203,7 +203,7 @@ class MessageStrip extends UI5Element { get standardIconName() { switch (this.design) { - case MessageStripDesign.Warning: + case MessageStripDesign.Critical: return "alert"; case MessageStripDesign.Positive: return "sys-enter-2"; diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index ac7559276fce..894dcb015c18 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -500,7 +500,7 @@ class MultiComboBox extends UI5Element { const value = target.value; if (!this.noValidation && !this._filterItems(value).length) { - this._dialogInputValueState = ValueState.Error; + this._dialogInputValueState = ValueState.Negative; } else { this._dialogInputValueState = this.valueState; } @@ -608,7 +608,7 @@ class MultiComboBox extends UI5Element { input.value = newValue; this.value = newValue; - this.valueState = ValueState.Error; + this.valueState = ValueState.Negative; this._shouldAutocomplete = false; this._resetValueState(oldValueState); @@ -1204,7 +1204,7 @@ class MultiComboBox extends UI5Element { return; } - this.valueState = ValueState.Error; + this.valueState = ValueState.Negative; this._performingSelectionTwice = true; this._resetValueState(oldValueState, () => { this._performingSelectionTwice = false; @@ -1736,7 +1736,7 @@ class MultiComboBox extends UI5Element { get hasValueStateMessage() { const valueState = isPhone() ? this._dialogInputValueState : this.valueState; - return this.hasValueState && valueState !== ValueState.Success; + return this.hasValueState && valueState !== ValueState.Positive; } get ariaValueStateHiddenText() { @@ -1794,9 +1794,9 @@ class MultiComboBox extends UI5Element { } return { - [ValueState.Error]: "error", - [ValueState.Warning]: "alert", - [ValueState.Success]: "sys-enter-2", + [ValueState.Negative]: "error", + [ValueState.Critical]: "alert", + [ValueState.Positive]: "sys-enter-2", [ValueState.Information]: "information", }[valueState]; } @@ -1830,18 +1830,18 @@ class MultiComboBox extends UI5Element { get valueStateTypeMappings(): ValueStateTypeAnnouncement { return { - [ValueState.Success]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), + [ValueState.Positive]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), [ValueState.Information]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION), - [ValueState.Error]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), - [ValueState.Warning]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), + [ValueState.Negative]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), + [ValueState.Critical]: MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), }; } get valueStateTextMappings(): ValueStateAnnouncement { return { - [ValueState.Success]: MultiComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS), - [ValueState.Error]: MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR), - [ValueState.Warning]: MultiComboBox.i18nBundle.getText(VALUE_STATE_WARNING), + [ValueState.Positive]: MultiComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS), + [ValueState.Negative]: MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR), + [ValueState.Critical]: MultiComboBox.i18nBundle.getText(VALUE_STATE_WARNING), [ValueState.Information]: MultiComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION), }; } @@ -1920,9 +1920,9 @@ class MultiComboBox extends UI5Element { popoverValueState: { "ui5-valuestatemessage-root": true, "ui5-valuestatemessage-header": true, - "ui5-valuestatemessage--success": (this.valueState === ValueState.Success) || (this._dialogInputValueState === ValueState.Success), - "ui5-valuestatemessage--error": (this.valueState === ValueState.Error) || (this._dialogInputValueState === ValueState.Error), - "ui5-valuestatemessage--warning": (this.valueState === ValueState.Warning) || (this._dialogInputValueState === ValueState.Warning), + "ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (this._dialogInputValueState === ValueState.Positive), + "ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (this._dialogInputValueState === ValueState.Negative), + "ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (this._dialogInputValueState === ValueState.Critical), "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information), }, }; diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts index 385ac4b0e68a..0c07cf871472 100644 --- a/packages/main/src/ProgressIndicator.ts +++ b/packages/main/src/ProgressIndicator.ts @@ -118,18 +118,18 @@ class ProgressIndicator extends UI5Element { valueStateTextMappings(): Record { return { - "Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR), - "Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING), - "Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS), + "Negative": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR), + "Critical": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING), + "Positive": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS), "Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION), }; } valueStateIconMappings(): Record { return { - "Error": "status-negative", - "Warning": "status-critical", - "Success": "status-positive", + "Negative": "status-negative", + "Critical": "status-critical", + "Positive": "status-positive", "Information": "information", }; } diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index 2ef3f110e66a..a26942b2ae57 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -452,11 +452,11 @@ class RadioButton extends UI5Element implements IFormElement { get valueStateText() { switch (this.valueState) { - case ValueState.Error: + case ValueState.Negative: return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR); - case ValueState.Warning: + case ValueState.Critical: return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING); - case ValueState.Success: + case ValueState.Positive: return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS); case ValueState.Information: return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION); diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 839452aa8f75..d32ea1b1dfcb 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -951,19 +951,19 @@ class Select extends UI5Element implements IFormElement { get valueStateTextMappings() { return { - [ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS), + [ValueState.Positive]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS), [ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_INFORMATION), - [ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_ERROR), - [ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_WARNING), + [ValueState.Negative]: Select.i18nBundle.getText(VALUE_STATE_ERROR), + [ValueState.Critical]: Select.i18nBundle.getText(VALUE_STATE_WARNING), }; } get valueStateTypeMappings() { return { - [ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), + [ValueState.Positive]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), [ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION), - [ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), - [ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), + [ValueState.Negative]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), + [ValueState.Critical]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), }; } @@ -1018,9 +1018,9 @@ class Select extends UI5Element implements IFormElement { */ get _valueStateMessageInputIcon() { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; @@ -1035,9 +1035,9 @@ class Select extends UI5Element implements IFormElement { return { popoverValueState: { "ui5-valuestatemessage-root": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, popover: { @@ -1074,7 +1074,7 @@ class Select extends UI5Element implements IFormElement { } get hasValueStateText() { - return this.hasValueState && this.valueState !== ValueState.Success; + return this.hasValueState && this.valueState !== ValueState.Positive; } get shouldOpenValueStateMessagePopover() { diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts index 724e2ca73a38..83fd8b7a201d 100644 --- a/packages/main/src/SelectMenu.ts +++ b/packages/main/src/SelectMenu.ts @@ -244,9 +244,9 @@ class SelectMenu extends UI5Element { return { popoverValueState: { "ui5-valuestatemessage-root": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, popover: { @@ -268,9 +268,9 @@ class SelectMenu extends UI5Element { get _valueStateMessageInputIcon() { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; diff --git a/packages/main/src/StandardListItem.ts b/packages/main/src/StandardListItem.ts index dff253519bdb..366f70b30d02 100644 --- a/packages/main/src/StandardListItem.ts +++ b/packages/main/src/StandardListItem.ts @@ -97,7 +97,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem { /** * Defines the state of the `additionalText`. * - * Available options are: `"None"` (by default), `"Success"`, `"Warning"`, `"Information"` and `"Error"`. + * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public * @since 1.0.0-rc.15 diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 89802ee07721..2ce6b3996cc4 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -421,7 +421,7 @@ class StepInput extends UI5Element implements IFormElement { const valid = !((this.min !== undefined && this.value < this.min) || (this.max !== undefined && this.value > this.max)); const previousValueState = this.valueState; - this.valueState = valid ? ValueState.None : ValueState.Error; + this.valueState = valid ? ValueState.None : ValueState.Negative; const eventPrevented = !this.fireEvent("value-state-change", { valueState: this.valueState, valid }, true); diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 604dc4428a54..0e147f4ae2de 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -530,8 +530,8 @@ class TextArea extends UI5Element implements IFormElement { }, valueStateMsg: { "ui5-valuestatemessage-header": true, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, }; @@ -592,7 +592,7 @@ class TextArea extends UI5Element implements IFormElement { } get ariaInvalid() { - return this.valueState === "Error" ? "true" : null; + return this.valueState === ValueState.Negative ? "true" : null; } get openValueStateMsgPopover() { @@ -608,7 +608,7 @@ class TextArea extends UI5Element implements IFormElement { } get hasValueState() { - return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Information; + return this.valueState === ValueState.Negative || this.valueState === ValueState.Critical || this.valueState === ValueState.Information; } get valueStateMessageText() { @@ -624,9 +624,9 @@ class TextArea extends UI5Element implements IFormElement { */ get _valueStateMessageIcon() { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; @@ -635,19 +635,19 @@ class TextArea extends UI5Element implements IFormElement { get valueStateTextMappings() { return { - "Success": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS), + "Positive": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS), "Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION), - "Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR), - "Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING), + "Negative": TextArea.i18nBundle.getText(VALUE_STATE_ERROR), + "Critical": TextArea.i18nBundle.getText(VALUE_STATE_WARNING), }; } get valueStateTypeMappings() { return { - "Success": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), + "Positive": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS), "Information": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION), - "Error": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), - "Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), + "Negative": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR), + "Critical": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING), }; } } diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 53f050241c22..0bed6cb465c8 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -199,7 +199,7 @@ class TimePicker extends UI5Element { value?: string; /** - * Defines the value state of the `ui5-time-picker`. + * Defines the value state of the component. * @default "None" * @public */ @@ -207,7 +207,7 @@ class TimePicker extends UI5Element { valueState!: `${ValueState}`; /** - * Determines whether the `ui5-time-picker` is displayed as disabled. + * Defines the disabled state of the comonent. * @default false * @public */ @@ -215,7 +215,7 @@ class TimePicker extends UI5Element { disabled!: boolean; /** - * Determines whether the `ui5-time-picker` is displayed as readonly. + * Defines the readonly state of the comonent. * @default false * @public */ @@ -488,8 +488,8 @@ class TimePicker extends UI5Element { _updateValueState() { const isValid = this.isValid(this.value); if (!isValid) { // If not valid - always set Error regardless of the current value state - this.valueState = ValueState.Error; - } else if (isValid && this.valueState === ValueState.Error) { // However if valid, change only Error (but not the others) to None + this.valueState = ValueState.Negative; + } else if (isValid && this.valueState === ValueState.Negative) { // However if valid, change only Error (but not the others) to None this.valueState = ValueState.None; } } diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 2ff41a83c138..e938cb985b3b 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -685,7 +685,7 @@ class Tokenizer extends UI5Element { } get noValueStatePopover() { - return this.valueState === ValueState.None || this.valueState === ValueState.Success; + return this.valueState === ValueState.None || this.valueState === ValueState.Positive; } get valueStateMessageText() { @@ -697,9 +697,9 @@ class Tokenizer extends UI5Element { */ get _valueStateMessageIcon() { const iconPerValueState = { - Error: "error", - Warning: "alert", - Success: "sys-enter-2", + Negative: "error", + Critical: "alert", + Positive: "sys-enter-2", Information: "information", }; @@ -733,9 +733,9 @@ class Tokenizer extends UI5Element { popoverValueState: { "ui5-valuestatemessage-root": true, "ui5-valuestatemessage-header": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Success, - "ui5-valuestatemessage--error": this.valueState === ValueState.Error, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, + "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, + "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, + "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, }, }; diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts index e53a27774e1b..1e92f560cc32 100644 --- a/packages/main/src/TreeItemBase.ts +++ b/packages/main/src/TreeItemBase.ts @@ -151,7 +151,7 @@ class TreeItemBase extends ListItem { /** * Defines the state of the `additionalText`. * - * Available options are: `"None"` (by default), `"Success"`, `"Warning"`, `"Information"` and `"Error"`. + * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * @default "None" * @public * @since 1.0.0-rc.15 diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 40610527174e..104b1a32fd3d 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -36,7 +36,7 @@ } /* readonly */ -:host([readonly]:not([value-state="Warning"]):not([value-state="Error"])) .ui5-checkbox-inner { +:host([readonly]:not([value-state="Critical"]):not([value-state="Negative"])) .ui5-checkbox-inner { background: var(--sapField_ReadOnly_Background); border: var(--_ui5_checkbox_inner_readonly_border); color: var(--sapField_TextColor); @@ -67,25 +67,25 @@ } /* value states */ -:host([value-state="Error"]) .ui5-checkbox-inner, -:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Negative"]) .ui5-checkbox-inner, +:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--sapField_InvalidBackground); border: var(--_ui5_checkbox_inner_error_border); color: var(--sapField_InvalidColor); } -:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_error_background_hover); } -:host([value-state="Warning"]) .ui5-checkbox-inner, -:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Critical"]) .ui5-checkbox-inner, +:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--sapField_WarningBackground); border: var(--_ui5_checkbox_inner_warning_border); color: var(--_ui5_checkbox_inner_warning_color); } -:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_warning_background_hover); } @@ -100,19 +100,19 @@ background: var(--_ui5_checkbox_inner_information_background_hover); } -:host([value-state="Success"]) .ui5-checkbox-inner, -:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Positive"]) .ui5-checkbox-inner, +:host([value-state="Positive"]) .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="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { +:host([value-state="Positive"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner { background: var(--_ui5_checkbox_inner_success_background_hover); } -:host([value-state="Warning"]) .ui5-checkbox-icon, -:host([value-state="Warning"][indeterminate]) .ui5-checkbox-inner::after { +:host([value-state="Critical"]) .ui5-checkbox-icon, +:host([value-state="Critical"][indeterminate]) .ui5-checkbox-inner::after { color: var(--_ui5_checkbox_checkmark_warning_color); } diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 9580cdb7d406..4cd5b58901fb 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -57,7 +57,7 @@ background: var(--sapObjectHeader_BorderColor); } -:host([state="Error"]) .ui5-popup-header-root::before { +:host([state="Negative"]) .ui5-popup-header-root::before { background: var(--sapErrorBorderColor); } @@ -65,11 +65,11 @@ background: var(--sapInformationBorderColor); } -:host([state="Success"]) .ui5-popup-header-root::before { +:host([state="Positive"]) .ui5-popup-header-root::before { background: var(--sapSuccessBorderColor); } -:host([state="Warning"]) .ui5-popup-header-root::before { +:host([state="Critical"]) .ui5-popup-header-root::before { background: var(--sapWarningBorderColor); } @@ -78,18 +78,18 @@ flex-shrink: 0; } -:host([state="Error"]) .ui5-dialog-value-state-icon { +:host([state="Negative"]) .ui5-dialog-value-state-icon { color: var(--_ui5_dialog_header_error_state_icon_color); } :host([state="Information"]) .ui5-dialog-value-state-icon { color: var(--_ui5_dialog_header_information_state_icon_color); } -:host([state="Success"]) .ui5-dialog-value-state-icon { +:host([state="Positive"]) .ui5-dialog-value-state-icon { color: var(--_ui5_dialog_header_success_state_icon_color); } -:host([state="Warning"]) .ui5-dialog-value-state-icon { +:host([state="Critical"]) .ui5-dialog-value-state-icon { color: var(--_ui5_dialog_header_warning_state_icon_color); } diff --git a/packages/main/src/themes/FileUploader.css b/packages/main/src/themes/FileUploader.css index cc2383dbb7b4..cc304159ce58 100644 --- a/packages/main/src/themes/FileUploader.css +++ b/packages/main/src/themes/FileUploader.css @@ -38,17 +38,17 @@ box-shadow: var(--sapField_Hover_Shadow); } -:host([value-state="Error"]:not([disabled]):hover) [ui5-input] { +:host([value-state="Negative"]:not([disabled]):hover) [ui5-input] { background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color); box-shadow: var(--sapField_Hover_InvalidShadow); } -:host([value-state="Warning"]:not([disabled]):hover) [ui5-input] { +:host([value-state="Critical"]:not([disabled]):hover) [ui5-input] { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_WarningShadow); } -:host([value-state="Success"]:not([disabled]):hover) [ui5-input] { +:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_SuccessShadow); } diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 5d1ea0a06faa..0aa80e4282af 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -172,29 +172,29 @@ padding-right: 0.125rem; } -:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder { +:host([value-state="Negative"]) [inner-input]::-webkit-input-placeholder { color: var(--_ui5-input_error_placeholder_color); font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight); } -:host([value-state="Error"]) [inner-input]::-moz-placeholder { +:host([value-state="Negative"]) [inner-input]::-moz-placeholder { color: var(--_ui5-input_error_placeholder_color); font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight); } -:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder { +:host([value-state="Critical"]) [inner-input]::-webkit-input-placeholder { font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight); } -:host([value-state="Warning"]) [inner-input]::-moz-placeholder { +:host([value-state="Critical"]) [inner-input]::-moz-placeholder { font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight); } -:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder { +:host([value-state="Positive"]) [inner-input]::-webkit-input-placeholder { color: var(--_ui5_input_placeholder_color); } -:host([value-state="Success"]) [inner-input]::-moz-placeholder { +:host([value-state="Positive"]) [inner-input]::-moz-placeholder { color: var(--_ui5_input_placeholder_color); } @@ -246,79 +246,79 @@ border-width: var(--_ui5_input_state_border_width); } -:host([value-state="Error"]) [inner-input], -:host([value-state="Warning"]) [inner-input] { +:host([value-state="Negative"]) [inner-input], +:host([value-state="Critical"]) [inner-input] { font-style: var(--_ui5_input_error_warning_font_style); text-indent: var(--_ui5_input_error_warning_text_indent); } -:host([value-state="Error"]) [inner-input] { +:host([value-state="Negative"]) [inner-input] { font-weight: var(--_ui5_input_error_font_weight); } -:host([value-state="Warning"]) [inner-input] { +:host([value-state="Critical"]) [inner-input] { font-weight: var(--_ui5_input_warning_font_weight); } -:host([value-state="Error"]:not([readonly]):not([disabled])) { +:host([value-state="Negative"]:not([readonly]):not([disabled])) { background: var(--sapField_InvalidBackgroundStyle); background-color: var(--sapField_InvalidBackground); border-color: var(--_ui5_input_value_state_error_border_color); box-shadow: var(--sapField_InvalidShadow); } -:host([value-state="Error"][focused]:not([opened]):not([readonly])) { +:host([value-state="Negative"][focused]:not([opened]):not([readonly])) { background-color: var(--_ui5_input_focused_value_state_error_background); border-color: var(--_ui5_input_focused_value_state_error_border_color); } -:host([value-state="Error"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { +:host([value-state="Negative"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color); } -:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{ +:host([value-state="Negative"]:not([readonly])) .ui5-input-root::before{ background-color: var(--_ui5-input-value-state-error-border-botom-color); } -:host([value-state="Error"]:not([readonly]):not([focused]):hover), -:host([value-state="Error"]:not([readonly])[focused][opened]:hover) { +:host([value-state="Negative"]:not([readonly]):not([focused]):hover), +:host([value-state="Negative"]:not([readonly])[focused][opened]:hover) { background-color: var(--_ui5_input_value_state_error_hover_background); box-shadow: var(--sapField_Hover_InvalidShadow); } -:host([value-state="Error"]:not([readonly]):not([disabled])), -:host([value-state="Warning"]:not([readonly]):not([disabled])), +:host([value-state="Negative"]:not([readonly]):not([disabled])), +:host([value-state="Critical"]:not([readonly]):not([disabled])), :host([value-state="Information"]:not([readonly]):not([disabled])) { border-style: var(--_ui5_input_error_warning_border_style); } -:host([value-state="Warning"]:not([readonly]):not([disabled])) { +:host([value-state="Critical"]:not([readonly]):not([disabled])) { background: var(--sapField_WarningBackgroundStyle); background-color: var(--sapField_WarningBackground); border-color: var(--_ui5_input_value_state_warning_border_color); box-shadow: var(--sapField_WarningShadow); } -:host([value-state="Warning"][focused]:not([opened]):not([readonly])) { +:host([value-state="Critical"][focused]:not([opened]):not([readonly])) { background-color: var(--_ui5_input_focused_value_state_warning_background); border-color: var(--_ui5_input_focused_value_state_warning_border_color); } -:host([value-state="Warning"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { +:host([value-state="Critical"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color); } -:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{ +:host([value-state="Critical"]:not([readonly])) .ui5-input-root::before{ background-color: var(--_ui5_input_value_state_warning_border_botom_color); } -:host([value-state="Warning"]:not([readonly]):not([focused]):hover), -:host([value-state="Warning"]:not([readonly])[focused][opened]:hover) { +:host([value-state="Critical"]:not([readonly]):not([focused]):hover), +:host([value-state="Critical"]:not([readonly])[focused][opened]:hover) { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_WarningShadow); } -:host([value-state="Success"]:not([readonly]):not([disabled])) { +:host([value-state="Positive"]:not([readonly]):not([disabled])) { background: var(--sapField_SuccessBackgroundStyle); background-color: var(--sapField_SuccessBackground); border-color: var(--_ui5_input_value_state_success_border_color); @@ -326,21 +326,21 @@ box-shadow: var(--sapField_SuccessShadow); } -:host([value-state="Success"][focused]:not([opened]):not([readonly])) { +:host([value-state="Positive"][focused]:not([opened]):not([readonly])) { background-color: var(--_ui5_input_focused_value_state_success_background); border-color: var(--_ui5_input_focused_value_state_success_border_color); } -:host([value-state="Success"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { +:host([value-state="Positive"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after { border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color); } -:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{ +:host([value-state="Positive"]:not([readonly])) .ui5-input-root::before{ background-color: var(--_ui5_input_value_state_success_border_botom_color); } -:host([value-state="Success"]:not([readonly]):not([focused]):hover), -:host([value-state="Success"]:not([readonly])[focused][opened]:hover) { +:host([value-state="Positive"]:not([readonly]):not([focused]):hover), +:host([value-state="Positive"]:not([readonly])[focused][opened]:hover) { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_SuccessShadow); } @@ -389,13 +389,13 @@ box-sizing: content-box !important; } -:host([value-state="Error"]) [input-icon], -:host([value-state="Warning"]) [input-icon]{ +:host([value-state="Negative"]) [input-icon], +:host([value-state="Critical"]) [input-icon]{ padding: var(--_ui5_input_error_warning_icon_padding); } -:host([value-state="Error"][focused]) [input-icon], -:host([value-state="Warning"][focused]) [input-icon]{ +:host([value-state="Negative"][focused]) [input-icon], +:host([value-state="Critical"][focused]) [input-icon]{ padding: var(--_ui5_input_error_warning_focused_icon_padding); } @@ -407,15 +407,15 @@ padding: var(--_ui5_input_information_focused_icon_padding); } -:host([value-state="Error"]) ::slotted([input-icon][ui5-icon]), -:host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]), -:host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) { +:host([value-state="Negative"]) ::slotted([input-icon][ui5-icon]), +:host([value-state="Negative"]) ::slotted([ui5-icon][slot="icon"]), +:host([value-state="Critical"]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_error_warning_custom_icon_padding); } -:host([value-state="Error"][focused]) ::slotted([input-icon][ui5-icon]), -:host([value-state="Error"][focused]) ::slotted([ui5-icon][slot="icon"]), -:host([value-state="Warning"][focused]) ::slotted([ui5-icon][slot="icon"]) { +:host([value-state="Negative"][focused]) ::slotted([input-icon][ui5-icon]), +:host([value-state="Negative"][focused]) ::slotted([ui5-icon][slot="icon"]), +:host([value-state="Critical"][focused]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_error_warning_custom_focused_icon_padding); } @@ -427,23 +427,23 @@ padding: var(--_ui5_input_information_custom_focused_icon_padding); } -:host([value-state="Error"]) [input-icon]:active, -:host([value-state="Error"]) [input-icon][pressed] { +:host([value-state="Negative"]) [input-icon]:active, +:host([value-state="Negative"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_error_icon_box_shadow); color: var(--_ui5_input_icon_error_pressed_color); } -:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Negative"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_error_icon_box_shadow); } -:host([value-state="Warning"]) [input-icon]:active, -:host([value-state="Warning"]) [input-icon][pressed] { +:host([value-state="Critical"]) [input-icon]:active, +:host([value-state="Critical"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_warning_icon_box_shadow); color: var(--_ui5_input_icon_warning_pressed_color); } -:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Critical"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_warning_icon_box_shadow); } @@ -457,13 +457,13 @@ box-shadow: var(--_ui5_input_information_icon_box_shadow); } -:host([value-state="Success"]) [input-icon]:active, -:host([value-state="Success"]) [input-icon][pressed] { +:host([value-state="Positive"]) [input-icon]:active, +:host([value-state="Positive"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_success_icon_box_shadow); color: var(--_ui5_input_icon_success_pressed_color); } -:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Positive"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_success_icon_box_shadow); } @@ -478,12 +478,12 @@ box-sizing: border-box; } -:host([value-state]:not([value-state="None"]):not([value-state="Success"])) .ui5-input-clear-icon-wrapper { +:host([value-state]:not([value-state="None"]):not([value-state="Positive"])) .ui5-input-clear-icon-wrapper { height: var(--_ui5_input_icon_wrapper_state_height); vertical-align: top; } -:host([value-state="Success"]) .ui5-input-clear-icon-wrapper { +:host([value-state="Positive"]) .ui5-input-clear-icon-wrapper { height: var(--_ui5_input_icon_wrapper_success_state_height); } diff --git a/packages/main/src/themes/InputSharedStyles.css b/packages/main/src/themes/InputSharedStyles.css index 217f964790cf..3557d9739c88 100644 --- a/packages/main/src/themes/InputSharedStyles.css +++ b/packages/main/src/themes/InputSharedStyles.css @@ -18,11 +18,11 @@ border-color: var(--_ui5_input_disabled_border_color); } -:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Negative"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_error_icon_box_shadow); } -:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Critical"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_warning_icon_box_shadow); } @@ -31,25 +31,25 @@ } -:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover { +:host([value-state="Positive"]) [input-icon]:not([pressed]):not(:active):hover { box-shadow: var(--_ui5_input_success_icon_box_shadow); } -:host([value-state="Error"]:not([readonly]):not([disabled])) { +:host([value-state="Negative"]:not([readonly]):not([disabled])) { background: var(--sapField_InvalidBackgroundStyle); background-color: var(--sapField_InvalidBackground); border-color: var(--_ui5_input_value_state_error_border_color); box-shadow: var(--sapField_InvalidShadow); } -:host([value-state="Warning"]:not([readonly]):not([disabled])) { +:host([value-state="Critical"]:not([readonly]):not([disabled])) { background: var(--sapField_WarningBackgroundStyle); background-color: var(--sapField_WarningBackground); border-color: var(--_ui5_input_value_state_warning_border_color); box-shadow: var(--sapField_WarningShadow); } -:host([value-state="Success"]:not([readonly]):not([disabled])) { +:host([value-state="Positive"]:not([readonly]):not([disabled])) { background: var(--sapField_SuccessBackgroundStyle); background-color: var(--sapField_SuccessBackground); border-color: var(--_ui5_input_value_state_success_border_color); @@ -65,14 +65,14 @@ box-shadow: var(--sapField_InformationShadow); } -:host([value-state="Error"]) [input-icon]:active, -:host([value-state="Error"]) [input-icon][pressed] { +:host([value-state="Negative"]) [input-icon]:active, +:host([value-state="Negative"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_error_icon_box_shadow); color: var(--_ui5_input_icon_error_pressed_color); } -:host([value-state="Warning"]) [input-icon]:active, -:host([value-state="Warning"]) [input-icon][pressed] { +:host([value-state="Critical"]) [input-icon]:active, +:host([value-state="Critical"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_warning_icon_box_shadow); color: var(--_ui5_input_icon_warning_pressed_color); } @@ -83,14 +83,14 @@ color: var(--_ui5_input_icon_information_pressed_color); } -:host([value-state="Success"]) [input-icon]:active, -:host([value-state="Success"]) [input-icon][pressed] { +:host([value-state="Positive"]) [input-icon]:active, +:host([value-state="Positive"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_success_icon_box_shadow); color: var(--_ui5_input_icon_success_pressed_color); } -:host([value-state="Error"]) [input-icon], -:host([value-state="Warning"]) [input-icon]{ +:host([value-state="Negative"]) [input-icon], +:host([value-state="Critical"]) [input-icon]{ padding: var(--_ui5_input_error_warning_icon_padding); } diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index a22e2d7e1e7d..4223e199521b 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -50,15 +50,15 @@ } /* [ui5-li]: additionalTextState */ -:host([additional-text-state="Warning"]) .ui5-li-additional-text { +:host([additional-text-state="Critical"]) .ui5-li-additional-text { color: var(--sapCriticalTextColor); } -:host([additional-text-state="Success"]) .ui5-li-additional-text { +:host([additional-text-state="Positive"]) .ui5-li-additional-text { color: var(--sapPositiveTextColor); } -:host([additional-text-state="Error"]) .ui5-li-additional-text { +:host([additional-text-state="Negative"]) .ui5-li-additional-text { color: var(--sapNegativeTextColor); } @@ -234,15 +234,15 @@ box-sizing: border-box; } -:host([highlight="Error"]) .ui5-li-highlight { +:host([highlight="Negative"]) .ui5-li-highlight { background: var(--sapNegativeTextColor); } -:host([highlight="Warning"]) .ui5-li-highlight { +:host([highlight="Critical"]) .ui5-li-highlight { background: var(--sapCriticalTextColor); } -:host([highlight="Success"]) .ui5-li-highlight { +:host([highlight="Positive"]) .ui5-li-highlight { background: var(--sapPositiveTextColor); } diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css index 4b5e5e77da3a..2acab501b4f5 100644 --- a/packages/main/src/themes/MessageStrip.css +++ b/packages/main/src/themes/MessageStrip.css @@ -55,12 +55,12 @@ color: var(--sapNegativeElementColor); } -.ui5-message-strip-root--warning { +.ui5-message-strip-root--critical { background-color: var(--sapWarningBackground); border-color: var(--sapMessage_WarningBorderColor); } -.ui5-message-strip-root--warning .ui5-message-strip-icon { +.ui5-message-strip-root--critical .ui5-message-strip-icon { color: var(--sapCriticalElementColor); } diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css index 670b7db3a612..13d777359808 100644 --- a/packages/main/src/themes/ProgressIndicator.css +++ b/packages/main/src/themes/ProgressIndicator.css @@ -98,15 +98,15 @@ inset-inline-end: var(--_ui5_progress_indicator_icon_right_position); } -:host([value-state="Error"]) .ui5-progress-indicator-icon { +:host([value-state="Negative"]) .ui5-progress-indicator-icon { color: var(--_ui5_progress_indicator_value_state_error_icon_color); } -:host([value-state="Warning"]) .ui5-progress-indicator-icon { +:host([value-state="Critical"]) .ui5-progress-indicator-icon { color: var(--_ui5_progress_indicator_value_state_warning_icon_color); } -:host([value-state="Success"]) .ui5-progress-indicator-icon { +:host([value-state="Positive"]) .ui5-progress-indicator-icon { color: var(--_ui5_progress_indicator_value_state_success_icon_color); } @@ -114,15 +114,15 @@ color: var(--_ui5_progress_indicator_value_state_information_icon_color); } -:host([value-state="Error"]) .ui5-progress-indicator-bar { +:host([value-state="Negative"]) .ui5-progress-indicator-bar { background: var(--_ui5_progress_indicator_value_state_error); } -:host([value-state="Warning"]) .ui5-progress-indicator-bar { +:host([value-state="Critical"]) .ui5-progress-indicator-bar { background: var(--_ui5_progress_indicator_value_state_warning); } -:host([value-state="Success"]) .ui5-progress-indicator-bar { +:host([value-state="Positive"]) .ui5-progress-indicator-bar { background: var(--_ui5_progress_indicator_value_state_success); } @@ -130,15 +130,15 @@ background: var(--_ui5_progress_indicator_value_state_information); } -:host([value-state="Error"]) .ui5-progress-indicator-root { +:host([value-state="Negative"]) .ui5-progress-indicator-root { background: var(--_ui5_progress_indicator_background_error); } -:host([value-state="Warning"]) .ui5-progress-indicator-root { +:host([value-state="Critical"]) .ui5-progress-indicator-root { background: var(--_ui5_progress_indicator_background_warning); } -:host([value-state="Success"]) .ui5-progress-indicator-root { +:host([value-state="Positive"]) .ui5-progress-indicator-root { background: var(--_ui5_progress_indicator_background_success); } @@ -146,15 +146,15 @@ background: var(--_ui5_progress_indicator_background_information); } -:host([value-state="Error"]) .ui5-progress-indicator-remaining-bar { +:host([value-state="Negative"]) .ui5-progress-indicator-remaining-bar { border-color: var(--_ui5_progress_indicator_border_color_error); } -:host([value-state="Warning"]) .ui5-progress-indicator-remaining-bar { +:host([value-state="Critical"]) .ui5-progress-indicator-remaining-bar { border-color: var(--_ui5_progress_indicator_border_color_warning); } -:host([value-state="Success"]) .ui5-progress-indicator-remaining-bar { +:host([value-state="Positive"]) .ui5-progress-indicator-remaining-bar { border-color: var(--_ui5_progress_indicator_border_color_success); } @@ -184,18 +184,18 @@ right: 0.0625rem; } -:host([value-state="Error"]) .ui5-progress-indicator-remaining-bar::before, -:host([value-state="Error"]) .ui5-progress-indicator-remaining-bar::after { +:host([value-state="Negative"]) .ui5-progress-indicator-remaining-bar::before, +:host([value-state="Negative"]) .ui5-progress-indicator-remaining-bar::after { background: var(--sapProgress_Value_NegativeBackground); } -:host([value-state="Warning"]) .ui5-progress-indicator-remaining-bar::before, -:host([value-state="Warning"]) .ui5-progress-indicator-remaining-bar::after { +:host([value-state="Critical"]) .ui5-progress-indicator-remaining-bar::before, +:host([value-state="Critical"]) .ui5-progress-indicator-remaining-bar::after { background: var(--sapProgress_Value_CriticalBackground); } -:host([value-state="Success"]) .ui5-progress-indicator-remaining-bar::before, -:host([value-state="Success"]) .ui5-progress-indicator-remaining-bar::after { +:host([value-state="Positive"]) .ui5-progress-indicator-remaining-bar::before, +:host([value-state="Positive"]) .ui5-progress-indicator-remaining-bar::after { background: var(--sapProgress_Value_PositiveBackground); } diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css index 30b4ea03bf56..dcac4b908a89 100644 --- a/packages/main/src/themes/RadioButton.css +++ b/packages/main/src/themes/RadioButton.css @@ -53,11 +53,11 @@ } /* hovered and value-state */ -:host(:not([value-state="Error"]):not([value-state="Warning"]):not([value-state="Success"]):not([value-state="Information"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer { +:host(:not([value-state="Negative"]):not([value-state="Critical"]):not([value-state="Positive"]):not([value-state="Information"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer { stroke: var(--_ui5_radio_button_outer_ring_hover_color); } -:host(:not([value-state="Error"]):not([value-state="Warning"]):not([value-state="Success"]):not([value-state="Information"])[checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer { +:host(:not([value-state="Negative"]):not([value-state="Critical"]):not([value-state="Positive"]):not([value-state="Information"])[checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer { stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color); } @@ -103,8 +103,8 @@ } /* value states */ -:host([value-state="Error"]) .ui5-radio-svg-outer, -:host([value-state="Warning"]) .ui5-radio-svg-outer { +:host([value-state="Negative"]) .ui5-radio-svg-outer, +:host([value-state="Critical"]) .ui5-radio-svg-outer { stroke-width: var(--sapField_InvalidBorderWidth); } @@ -113,44 +113,44 @@ } /* Error state */ -:host([value-state="Error"][checked]) .ui5-radio-svg-inner { +:host([value-state="Negative"][checked]) .ui5-radio-svg-inner { fill: var(--_ui5_radio_button_checked_error_fill); } -:host([value-state="Error"]) .ui5-radio-svg-outer, -:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { +:host([value-state="Negative"]) .ui5-radio-svg-outer, +:host([value-state="Negative"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { stroke: var(--sapField_InvalidColor); fill: var(--sapField_InvalidBackground); } -:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { +:host([value-state="Negative"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { fill: var(--_ui5_radio_button_hover_fill_error); } /* Warning state */ -:host([value-state="Warning"][checked]) .ui5-radio-svg-inner { +:host([value-state="Critical"][checked]) .ui5-radio-svg-inner { fill: var(--_ui5_radio_button_checked_warning_fill); } -:host([value-state="Warning"]) .ui5-radio-svg-outer, -:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { +:host([value-state="Critical"]) .ui5-radio-svg-outer, +:host([value-state="Critical"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { stroke: var(--sapField_WarningColor); fill: var(--sapField_WarningBackground); } -:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { +:host([value-state="Critical"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { fill: var(--_ui5_radio_button_hover_fill_warning); } /* Success state */ -:host([value-state="Success"][checked]) .ui5-radio-svg-inner { +:host([value-state="Positive"][checked]) .ui5-radio-svg-inner { fill: var(--_ui5_radio_button_checked_success_fill); } -:host([value-state="Success"]) .ui5-radio-svg-outer, -:host([value-state="Success"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { +:host([value-state="Positive"]) .ui5-radio-svg-outer, +:host([value-state="Positive"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer { stroke: var(--sapField_SuccessColor); fill: var(--sapField_SuccessBackground); } -:host([value-state="Success"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { +:host([value-state="Positive"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer { fill: var(--_ui5_radio_button_hover_fill_success); } @@ -168,8 +168,8 @@ fill: var(--_ui5_radio_button_hover_fill_information); } -:host([value-state="Error"]) .ui5-radio-root, -:host([value-state="Warning"]) .ui5-radio-root, +:host([value-state="Negative"]) .ui5-radio-root, +:host([value-state="Critical"]) .ui5-radio-root, :host([value-state="Information"]) .ui5-radio-root { stroke-dasharray: var(--_ui5_radio_button_warning_error_border_dash); } diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 6399b744b68d..4c81d412f689 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -37,9 +37,9 @@ } -.input-root-phone [value-state="Error"] [input-icon][data-ui5-compact-size], -.input-root-phone [value-state="Success"] [input-icon][data-ui5-compact-size], -.input-root-phone [value-state="Warning"] [input-icon][data-ui5-compact-size] { +.input-root-phone [value-state="Negative"] [input-icon][data-ui5-compact-size], +.input-root-phone [value-state="Positive"] [input-icon][data-ui5-compact-size], +.input-root-phone [value-state="Critical"] [input-icon][data-ui5-compact-size] { padding: .1875rem .5rem } @@ -83,64 +83,64 @@ border-width: var(--_ui5_input_state_border_width); } -.input-root-phone[value-state="Error"] [inner-input], -.input-root-phone[value-state="Warning"] [inner-input] { +.input-root-phone[value-state="Negative"] [inner-input], +.input-root-phone[value-state="Critical"] [inner-input] { font-style: var(--_ui5_input_error_warning_font_style); } -.input-root-phone[value-state="Error"] [inner-input] { +.input-root-phone[value-state="Negative"] [inner-input] { font-weight: var(--_ui5_input_error_font_weight); } -.input-root-phone[value-state="Error"]:not([readonly]) { +.input-root-phone[value-state="Negative"]:not([readonly]) { background: var(--sapField_InvalidBackgroundStyle); background-color: var(--sapField_InvalidBackground); border-color: var(--_ui5_input_value_state_error_border_color); } -.input-root-phone[value-state="Error"]:not([readonly]) [inner-input]:focus { +.input-root-phone[value-state="Negative"]:not([readonly]) [inner-input]:focus { background-color: var(--_ui5_input_focused_value_state_error_background); border-color: var(--_ui5_input_focused_value_state_error_border_color); } -.input-root-phone[value-state="Error"]:not([readonly]):focus-within:before { +.input-root-phone[value-state="Negative"]:not([readonly]):focus-within:before { border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color); } -.input-root-phone[value-state="Error"]:not([readonly]):not([disabled]), -.input-root-phone[value-state="Warning"]:not([readonly]):not([disabled]), +.input-root-phone[value-state="Negative"]:not([readonly]):not([disabled]), +.input-root-phone[value-state="Critical"]:not([readonly]):not([disabled]), .input-root-phone[value-state="Information"]:not([readonly]):not([disabled]) { border-style: var(--_ui5_input_error_warning_border_style); } -.input-root-phone[value-state="Warning"]:not([readonly]) { +.input-root-phone[value-state="Critical"]:not([readonly]) { background: var(--sapField_WarningBackgroundStyle); background-color: var(--sapField_WarningBackground); border-color: var(--_ui5_input_value_state_warning_border_color); } -.input-root-phone[value-state="Warning"]:not([readonly]) [inner-input]:focus { +.input-root-phone[value-state="Critical"]:not([readonly]) [inner-input]:focus { background-color: var(--_ui5_input_focused_value_state_warning_background); border-color: var(--_ui5_input_focused_value_state_warning_border_color); } -.input-root-phone[value-state="Warning"]:not([readonly]):focus-within:before { +.input-root-phone[value-state="Critical"]:not([readonly]):focus-within:before { border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color); } -.input-root-phone[value-state="Success"]:not([readonly]) { +.input-root-phone[value-state="Positive"]:not([readonly]) { background: var(--sapField_SuccessBackgroundStyle); background-color: var(--sapField_SuccessBackground); border-color: var(--_ui5_input_value_state_success_border_color); border-width: var(--_ui5_input_value_state_success_border_width); } -.input-root-phone[value-state="Success"]:not([readonly]) [inner-input]:focus { +.input-root-phone[value-state="Positive"]:not([readonly]) [inner-input]:focus { background-color: var(--_ui5_input_focused_value_state_success_background); border-color: var(--_ui5_input_focused_value_state_success_border_color); } -.input-root-phone[value-state="Success"]:not([readonly]):focus-within:before { +.input-root-phone[value-state="Positive"]:not([readonly]):focus-within:before { border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color); } diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css index a18d2d9ed3ca..1ed34965c267 100644 --- a/packages/main/src/themes/StepInput.css +++ b/packages/main/src/themes/StepInput.css @@ -49,7 +49,7 @@ box-shadow: var(--sapField_Hover_Shadow); } -:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) { +:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) { box-shadow: var(--sapField_Hover_SuccessShadow); } @@ -57,35 +57,35 @@ box-shadow: var(--sapField_Hover_InformationShadow); } -:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) { +:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) { box-shadow: var(--sapField_Hover_WarningShadow); } -:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) { +:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) { box-shadow: var(--sapField_Hover_InvalidShadow); } -:host([value-state="Success"]:not([readonly]):not([disabled]):hover), -:host([value-state="Error"]:not([readonly]):not([disabled]):hover), +:host([value-state="Positive"]:not([readonly]):not([disabled]):hover), +:host([value-state="Negative"]:not([readonly]):not([disabled]):hover), :host([value-state="Information"]:not([readonly]):not([disabled]):hover), -:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) { +:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) { background-color: var(--_ui5-step_input_button_state_hover_background_color); } :host(:not([value-state]):not([readonly]):not([disabled])[focused]), :host([value-state="None"]:not([readonly]):not([disabled])[focused]), -:host([value-state="Success"]:not([readonly]):not([disabled])[focused]), -:host([value-state="Error"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]), :host([value-state="Information"]:not([readonly]):not([disabled])[focused]), -:host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){ +:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){ background-color: var(--sapField_Focus_Background); } -:host([value-state="Success"]:not([readonly]):not([disabled]))::after, -:host([value-state="Error"]:not([readonly]):not([disabled]))::after, +:host([value-state="Positive"]:not([readonly]):not([disabled]))::after, +:host([value-state="Negative"]:not([readonly]):not([disabled]))::after, :host([value-state="None"]:not([readonly]):not([disabled]))::after, :host([value-state="Information"]:not([readonly]):not([disabled]))::after, -:host([value-state="Warning"]:not([readonly]):not([disabled]))::after { +:host([value-state="Critical"]:not([readonly]):not([disabled]))::after { position: absolute; content: ""; top: -1px; @@ -105,17 +105,17 @@ border-width: var(--_ui5_input_information_border_width); } -:host([value-state="Warning"]:not([readonly]):not([disabled]))::after { +:host([value-state="Critical"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_WarningColor); border-width: 2px; } -:host([value-state="Success"]:not([readonly]):not([disabled]))::after { +:host([value-state="Positive"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_SuccessColor); border-width: 1px; } -:host([value-state="Error"]:not([readonly]):not([disabled]))::after { +:host([value-state="Negative"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_InvalidColor); border-width: var(--_ui5_input_information_border_width); } @@ -123,11 +123,11 @@ :host([value-state])::after { border-width: var(--_ui5_input_state_border_width); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input { background-color: var(--_ui5_input_input_background_color); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover { background-color: var(--_ui5_step_input_input_error_background_color); } :host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) { @@ -239,15 +239,15 @@ border-color: var(--_ui5_step_input_input_information_border_color_focused_after); } -:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { +:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { border-color: var(--_ui5_step_input_input_warning_border_color_focused_after); } -:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { +:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { border-color: var(--_ui5_step_input_input_success_border_color_focused_after); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { border-color: var(--_ui5_step_input_input_error_border_color_focused_after); } diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index 754d6ea5f82b..bbe0373f3be4 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -109,8 +109,8 @@ right: var(--_ui5_textarea_readonly_focus_offset); } -:host([focused][value-state="Error"]:not([disabled])) .ui5-textarea-wrapper::after, -:host([focused][value-state="Warning"]:not([disabled])) .ui5-textarea-wrapper::after, +:host([focused][value-state="Negative"]:not([disabled])) .ui5-textarea-wrapper::after, +:host([focused][value-state="Critical"]:not([disabled])) .ui5-textarea-wrapper::after, :host([focused][value-state="Information"]:not([disabled])) .ui5-textarea-wrapper::after { top: var(--_ui5_textarea_value_state_focus_offset); bottom: var(--_ui5_textarea_value_state_focus_offset); @@ -200,21 +200,21 @@ max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); } -:host([rows="1"][value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner, -:host([rows="1"][value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner { +:host([rows="1"][value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner, +:host([rows="1"][value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner { height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); } -:host([value-state="Error"]) .ui5-textarea-mirror, -:host([value-state="Warning"]) .ui5-textarea-mirror { +:host([value-state="Negative"]) .ui5-textarea-mirror, +:host([value-state="Critical"]) .ui5-textarea-mirror { padding-top: var(--_ui5_textarea_padding_top_error_warning); padding-bottom: var(--_ui5_textarea_padding_bottom_error_warning); min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); } -:host([growing-max-rows="1"][value-state="Error"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Error"]) .ui5-textarea-mirror -:host([growing-max-rows="1"][value-state="Warning"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Warning"]) .ui5-textarea-mirror { +:host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-mirror +:host([growing-max-rows="1"][value-state="Critical"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Critical"]) .ui5-textarea-mirror { max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning); min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning); } @@ -274,96 +274,96 @@ color: var(--sapField_PlaceholderTextColor); } -:host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder { +:host([value-state="Negative"]) .ui5-textarea-inner::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight); font-style: var(--_ui5_textarea_error_placeholder_font_style); color: var(--_ui5_textarea_error_placeholder_color); } -:host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder { +:host([value-state="Negative"]) .ui5-textarea-inner::-moz-placeholder { /* Firefox 19+ */ font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight); font-style: var(--_ui5_textarea_error_placeholder_font_style); color: var(--_ui5_textarea_error_placeholder_color); } -:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder { +:host([value-state="Critical"]) .ui5-textarea-inner::-moz-placeholder { /* Firefox 19+ */ font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight); font-style: var(--_ui5_textarea_error_placeholder_font_style); color: var(--sapField_PlaceholderTextColor); } -:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder { +:host([value-state="Critical"]) .ui5-textarea-inner::-webkit-input-placeholder { font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight); font-style: var(--_ui5_textarea_error_placeholder_font_style); color: var(--sapField_PlaceholderTextColor); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { background: var(--sapField_InvalidBackgroundStyle); background-color: var(--sapField_InvalidBackground); border-color: var(--sapField_InvalidColor); box-shadow: var(--sapField_InvalidShadow); } -:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { +:host([value-state="Negative"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { background-color: var(--_ui5_textarea_focused_value_state_error_background); border-color: var(--sapField_InvalidColor); } -:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after { +:host([value-state="Negative"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after { border-color: var(--_ui5_textarea_focused_value_state_error_focus_outline_color); } -:host([value-state="Error"]:not([readonly]):not([focused]):not([disabled]):hover) .ui5-textarea-wrapper { +:host([value-state="Negative"]:not([readonly]):not([focused]):not([disabled]):hover) .ui5-textarea-wrapper { background-color: var(--_ui5_textarea_error_hover_background_color); box-shadow: var(--sapField_Hover_InvalidShadow); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner, -:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner, +:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner { font-style: var(--_ui5_textarea_error_warning_font_style); font-weight: var(--_ui5_textarea_error_warning_font_weight); padding: var(--_ui5_textarea_padding_top_error_warning) var(--_ui5_textarea_padding_right_and_left_error_warning) var(--_ui5_textarea_padding_bottom_error_warning); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper, -:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper, +:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { border-style: var(--_ui5_textarea_error_warning_border_style); border-width: var(--_ui5_textarea_state_border_width); padding: var(--_ui5_textarea_warning_error_wrapper_padding); } -:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner, -:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner, +:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner, +:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner, :host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner { border-style: none; } -:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { +:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { background: var(--sapField_WarningBackgroundStyle); background-color: var(--sapField_WarningBackground); border-color: var(--sapField_WarningColor); box-shadow: var(--sapField_WarningShadow); } -:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper { +:host([value-state="Critical"][focused]:not([readonly])) .ui5-textarea-wrapper { background-color: var(--_ui5_textarea_focused_value_state_warning_background); border-color: var(--sapField_WarningColor); } -:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper:after { +:host([value-state="Critical"][focused]:not([readonly])) .ui5-textarea-wrapper:after { border-color: var(--_ui5_textarea_focused_value_state_warning_focus_outline_color); } -:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper { +:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_WarningShadow); } -:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { +:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { background: var(--sapField_SuccessBackgroundStyle); background-color: var(--sapField_SuccessBackground); border-color: var(--sapField_SuccessColor); @@ -372,22 +372,22 @@ padding: var(--_ui5_textarea_success_wrapper_padding); } -:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper { +:host([value-state="Positive"][focused]:not([readonly])) .ui5-textarea-wrapper { background-color: var(--_ui5_textarea_focused_value_state_success_background); border-color: var(--sapField_SuccessColor); } -:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper:after { +:host([value-state="Positive"][focused]:not([readonly])) .ui5-textarea-wrapper:after { border-color: var(--_ui5_textarea_focused_value_state_success_focus_outline_color); } -:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper { +:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_SuccessShadow); } -:host([value-state][value-state="Success"]) .ui5-textarea-inner { +:host([value-state][value-state="Positive"]) .ui5-textarea-inner { border-radius: var(--sapField_BorderCornerRadius); } @@ -435,11 +435,11 @@ border-bottom-right-radius: var(--sapField_BorderCornerRadius); } -:host([value-state="Error"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { +:host([value-state="Negative"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { background-color: var(--sapScrollBar_TrackColor); } -:host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { +:host([value-state="Critical"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { background-color: var(--sapScrollBar_TrackColor); } @@ -447,7 +447,7 @@ background-color: var(--sapScrollBar_TrackColor); } -:host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { +:host([value-state="Positive"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar { background-color: var(--sapScrollBar_TrackColor); } diff --git a/packages/main/src/themes/TimePicker.css b/packages/main/src/themes/TimePicker.css index 0060d8f6f56e..cd5044eed8a5 100644 --- a/packages/main/src/themes/TimePicker.css +++ b/packages/main/src/themes/TimePicker.css @@ -21,7 +21,7 @@ -ms-user-select: none; } -:host([value-state="Error"]) { +:host([value-state="Negative"]) { background-color: var(--sapField_InvalidBackground); } diff --git a/packages/main/src/types/HighlightTypes.ts b/packages/main/src/types/HighlightTypes.ts index 4adb4f0a7ebc..b00b04f5818c 100644 --- a/packages/main/src/types/HighlightTypes.ts +++ b/packages/main/src/types/HighlightTypes.ts @@ -12,17 +12,17 @@ enum HighlightTypes { /** * @public */ - Success = "Success", + Positive = "Positive", /** * @public */ - Warning = "Warning", + Critical = "Critical", /** * @public */ - Error = "Error", + Negative = "Negative", /** * @public diff --git a/packages/main/src/types/MessageStripDesign.ts b/packages/main/src/types/MessageStripDesign.ts index 6ac9469766f1..32887c677035 100644 --- a/packages/main/src/types/MessageStripDesign.ts +++ b/packages/main/src/types/MessageStripDesign.ts @@ -25,7 +25,7 @@ enum MessageStripDesign { * Message is a warning * @public */ - Warning = "Warning", + Critical = "Critical", /** * Message uses custom color set 1 diff --git a/packages/main/test/pages/Badge.js b/packages/main/test/pages/Badge.js index efdb7931b205..417044713217 100644 --- a/packages/main/test/pages/Badge.js +++ b/packages/main/test/pages/Badge.js @@ -17,9 +17,9 @@ function initializeBadges() { "Set2", "Set3", "None", - "Success", - "Warning", - "Error", + "Positive", + "Critical", + "Negative", "Information" ]; diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index 091e336e0445..bbfb2bf3c43f 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -214,7 +214,7 @@
Password: - +
diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html index 7944f32f971f..269fb295c9f4 100644 --- a/packages/main/test/pages/Carousel.html +++ b/packages/main/test/pages/Carousel.html @@ -385,9 +385,9 @@ excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. Laptop Lenovo + additional-text-state="Negative">Laptop Lenovo IPhone 3 + additional-text-state="Negative">IPhone 3 diff --git a/packages/main/test/pages/CheckBox.html b/packages/main/test/pages/CheckBox.html index f74855f31c99..b26d02bfde4d 100644 --- a/packages/main/test/pages/CheckBox.html +++ b/packages/main/test/pages/CheckBox.html @@ -19,7 +19,7 @@ - + @@ -51,10 +51,10 @@
- - + + - +
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index dbae84d6650e..b1435291cd0a 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -61,7 +61,7 @@ - + @@ -71,7 +71,7 @@
Custom error value state message with a Link.
 - + @@ -80,13 +80,13 @@ - +
Items with grouping and value state: - + @@ -257,7 +257,7 @@

ComboBox in Compact

Readonly ComboBox with value state - + @@ -285,7 +285,7 @@

ComboBox in Compact

- + diff --git a/packages/main/test/pages/CoreControls.html b/packages/main/test/pages/CoreControls.html index 80fabd37ce31..215af56574ee 100644 --- a/packages/main/test/pages/CoreControls.html +++ b/packages/main/test/pages/CoreControls.html @@ -43,11 +43,11 @@
- + - + - + @@ -91,7 +91,7 @@ - +
@@ -152,10 +152,10 @@
- - - - + + + +
@@ -168,10 +168,10 @@
- - - - + + + +
diff --git a/packages/main/test/pages/CoreControls_exp.html b/packages/main/test/pages/CoreControls_exp.html index e6ea81db077e..0363992f2f96 100644 --- a/packages/main/test/pages/CoreControls_exp.html +++ b/packages/main/test/pages/CoreControls_exp.html @@ -50,11 +50,11 @@
- + - + - + @@ -98,7 +98,7 @@ - +
@@ -159,10 +159,10 @@
- - - - + + + +
@@ -175,10 +175,10 @@
- - - - + + + +
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 70e825dd00df..a281c08b2ab8 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -31,7 +31,7 @@

DatePicker with value-state-change event prevented

- +

DatePicker with no format pattern & min-max dates in ISO format

@@ -45,7 +45,7 @@

Date picker with placeholder.

+ value-state="Negative">
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Information message 2. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
 @@ -191,7 +191,7 @@

DatePicker with format `yyyy` should open picker on years

function datePickerInputChangeHandler(e) { var dp = e.currentTarget; - dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error'); + dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Negative'); } document.getElementById('ui5-datepicker--startDate').addEventListener('ui5-input change', datePickerInputChangeHandler); diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html index 5017d0dc09c0..10643ee194c9 100644 --- a/packages/main/test/pages/DatePicker_test_page.html +++ b/packages/main/test/pages/DatePicker_test_page.html @@ -37,7 +37,7 @@

DatePicker value-state-change event prevented

- + Set date @@ -55,7 +55,7 @@

Test placeholder

DatePicker with valueStateMessage

- +
This date is wrong
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html index 493d97c39349..a860e04c0b10 100644 --- a/packages/main/test/pages/DateTimePicker.html +++ b/packages/main/test/pages/DateTimePicker.html @@ -139,10 +139,10 @@
DateTimePicker states - - + + - +

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index 86fa96026987..bba8e55bff4f 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -489,7 +489,7 @@ Dialog states
Dialog with Error State - +
Error
@@ -504,16 +504,16 @@ Hello World! - Dialog with Success State - + Dialog with Positive State +
- Success + Positive
Hello World! Dialog with Warning State - +
Warning
@@ -526,7 +526,7 @@ Dialog roles
Error State, no role set - +
Error
@@ -549,10 +549,10 @@ Hello World! - Success State, 'AlertDialog' role set - + Positive State, 'AlertDialog' role set +
- Success + Positive
Hello World! diff --git a/packages/main/test/pages/FileUploader.html b/packages/main/test/pages/FileUploader.html index 79c033718032..8a60dde93f1a 100644 --- a/packages/main/test/pages/FileUploader.html +++ b/packages/main/test/pages/FileUploader.html @@ -23,11 +23,11 @@
- + Upload - + Upload
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Information message 2. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
@@ -48,7 +48,7 @@
- + Upload
diff --git a/packages/main/test/pages/HCB.html b/packages/main/test/pages/HCB.html index ef043b879571..ad0c0eb51210 100644 --- a/packages/main/test/pages/HCB.html +++ b/packages/main/test/pages/HCB.html @@ -22,8 +22,8 @@ - - + + diff --git a/packages/main/test/pages/Icon.html b/packages/main/test/pages/Icon.html index 0f3a7940d27e..f4d0fed767e8 100644 --- a/packages/main/test/pages/Icon.html +++ b/packages/main/test/pages/Icon.html @@ -76,13 +76,13 @@

Interactive Icon

- + - + - +

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index d61c66168373..adbba2af31fa 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -83,20 +83,20 @@

Input disabled

Input maxLength = 5

-

Input valueState Success

- +

Input valueState Positive

+

Input valueState Information

Test 'change' event

- +

Input with valueState and Dynamic suggestions

Custom error value state message with a Link.
 @@ -138,7 +138,7 @@

'suggestionItemSelect' event result on group item

Test 'input' event

- +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.

'input' test result

@@ -194,7 +194,7 @@

Input With aria-label

Readonly input with value state

- +

Inputs alignment

Press @@ -205,7 +205,7 @@

Inputs alignment

@@ -221,9 +221,9 @@

Inputs alignment

Condensed - + - + Cozy Compact Condensed @@ -235,7 +235,7 @@

Inputs alignment

Condensed - +

Input with multiple icons

@@ -365,9 +365,9 @@

sap_horizon

- - - + + +
@@ -458,7 +458,7 @@

Input - change event handling


- + 0 @@ -554,7 +554,7 @@

Input - change event handling

suggestion.description = "travel the world"; suggestion.text = item.text suggestion.additionalText = "explore"; - suggestion.additionalTextState = "Success"; + suggestion.additionalTextState = "Positive"; input.appendChild(suggestion); } }); diff --git a/packages/main/test/pages/InputIcons.html b/packages/main/test/pages/InputIcons.html index 1146863eb7c3..d31eb6662c01 100644 --- a/packages/main/test/pages/InputIcons.html +++ b/packages/main/test/pages/InputIcons.html @@ -43,25 +43,25 @@
- - - + + +
- - - + + +
- - - + + +
diff --git a/packages/main/test/pages/Input_quickview.html b/packages/main/test/pages/Input_quickview.html index 79d5d5b65075..ae90ee3b8c42 100644 --- a/packages/main/test/pages/Input_quickview.html +++ b/packages/main/test/pages/Input_quickview.html @@ -45,9 +45,9 @@

Quick View sample

OData API Audit - Laptop Lenovo - IPhone 3 - HP Monitor 24 + Laptop Lenovo + IPhone 3 + HP Monitor 24 @@ -91,9 +91,9 @@

Test Quick View sample

OData API Audit - Laptop Lenovo - IPhone 3 - HP Monitor 24 + Laptop Lenovo + IPhone 3 + HP Monitor 24 diff --git a/packages/main/test/pages/Input_variations.html b/packages/main/test/pages/Input_variations.html index a69005bcf566..015057e5feec 100644 --- a/packages/main/test/pages/Input_variations.html +++ b/packages/main/test/pages/Input_variations.html @@ -24,17 +24,17 @@ Input required - Input valueState Error - + Input valueState Negative + - Input valueState Success - + Input valueState Positive + Input valueState Information - Input valueState Warning - + Input valueState Critical + Input suggestions with grouping diff --git a/packages/main/test/pages/InputsAlignment.html b/packages/main/test/pages/InputsAlignment.html index fa4c79187472..86a9e524f177 100644 --- a/packages/main/test/pages/InputsAlignment.html +++ b/packages/main/test/pages/InputsAlignment.html @@ -14,7 +14,7 @@

The way the components will be rendered out of the box

- + @@ -49,7 +49,7 @@

The way the components will be rendered out of the box

Explicitly width:auto set

- + diff --git a/packages/main/test/pages/Kitchen.html b/packages/main/test/pages/Kitchen.html index ca3aec79441c..a66d1c6f5004 100644 --- a/packages/main/test/pages/Kitchen.html +++ b/packages/main/test/pages/Kitchen.html @@ -234,10 +234,10 @@ - - - - + + + +
@@ -246,9 +246,9 @@ - - - + + +
@@ -309,13 +309,13 @@
user: - +
pass: - +
diff --git a/packages/main/test/pages/Kitchen.openui5.html b/packages/main/test/pages/Kitchen.openui5.html index 33788b798ba2..54941dfdaf5b 100644 --- a/packages/main/test/pages/Kitchen.openui5.html +++ b/packages/main/test/pages/Kitchen.openui5.html @@ -216,10 +216,10 @@ - - - - + + + +
@@ -228,9 +228,9 @@ - - - + + +
@@ -294,13 +294,13 @@
user: - +
pass: - +
diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html index 5b0e42172f68..7df4ea311793 100644 --- a/packages/main/test/pages/List.html +++ b/packages/main/test/pages/List.html @@ -21,14 +21,14 @@ Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - Laptop Lenovo + Laptop Lenovo IPhone 3 - HP Monitor 24 - Audio cabel - DVD set + HP Monitor 24 + Audio cabel + DVD set @@ -44,7 +44,7 @@

List growing="Button" and growing-button-text property used

Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - Laptop Lenovo + Laptop Lenovo IPhone 3 @@ -56,14 +56,14 @@

ui5-list

Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - Laptop Lenovo - IPhone 3 + Laptop Lenovo + IPhone 3 - HP Monitor 24 - Audio cabel - DVD set + HP Monitor 24 + Audio cabel + DVD set @@ -227,10 +227,10 @@

Items 3/3



- Laptop HP + Laptop HP laptop Lenovo - IPhone 3 - DVD set + IPhone 3 + DVD set

@@ -321,16 +321,16 @@

Items 3/3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. diff --git a/packages/website/docs/_samples/main/DatePicker/State/sample.html b/packages/website/docs/_samples/main/DatePicker/State/sample.html index 3045305f81af..fed8cf46cfe2 100644 --- a/packages/website/docs/_samples/main/DatePicker/State/sample.html +++ b/packages/website/docs/_samples/main/DatePicker/State/sample.html @@ -14,11 +14,11 @@
This date exists only once every four years!
 - + - + - + diff --git a/packages/website/docs/_samples/main/Dialog/Basic/sample.html b/packages/website/docs/_samples/main/Dialog/Basic/sample.html index 056b304958cf..4109b14a7aef 100644 --- a/packages/website/docs/_samples/main/Dialog/Basic/sample.html +++ b/packages/website/docs/_samples/main/Dialog/Basic/sample.html @@ -22,7 +22,7 @@
Password - +
Email diff --git a/packages/website/docs/_samples/main/Dialog/WithState/sample.html b/packages/website/docs/_samples/main/Dialog/WithState/sample.html index c19a1ec325a3..69567ab7ea99 100644 --- a/packages/website/docs/_samples/main/Dialog/WithState/sample.html +++ b/packages/website/docs/_samples/main/Dialog/WithState/sample.html @@ -13,7 +13,7 @@ Open Dialog - +

Dialog with state

Close diff --git a/packages/website/docs/_samples/main/Input/ValueStateMessage/sample.html b/packages/website/docs/_samples/main/Input/ValueStateMessage/sample.html index 01a33d7d76cb..8cfdc29e8bb6 100644 --- a/packages/website/docs/_samples/main/Input/ValueStateMessage/sample.html +++ b/packages/website/docs/_samples/main/Input/ValueStateMessage/sample.html @@ -11,7 +11,7 @@ - +
This is an error message. Extra long text used as an error message.
Cozy Compact diff --git a/packages/website/docs/_samples/main/List/Basic/sample.html b/packages/website/docs/_samples/main/List/Basic/sample.html index 624f23156cc2..6c2886bec5e9 100644 --- a/packages/website/docs/_samples/main/List/Basic/sample.html +++ b/packages/website/docs/_samples/main/List/Basic/sample.html @@ -13,13 +13,13 @@ Pineapple + additional-text-state="Positive">Pineapple Orange + additional-text-state="Critical">Orange Blueberry Mango + additional-text-state="Negative">Mango diff --git a/packages/website/docs/_samples/main/List/Growing/main.js b/packages/website/docs/_samples/main/List/Growing/main.js index 47f6c85774ab..083e3cbc42bf 100644 --- a/packages/website/docs/_samples/main/List/Growing/main.js +++ b/packages/website/docs/_samples/main/List/Growing/main.js @@ -11,7 +11,7 @@ const listItemTemplate = (index) => { li.textContent = "Fruit name"; li.description = "the description goes here " + index; li.additionalText = "Available"; - li.additionalTextState = "Success"; + li.additionalTextState = "Positive"; li.icon = "nutrition-activity"; return li; } diff --git a/packages/website/docs/_samples/main/List/Growing/sample.html b/packages/website/docs/_samples/main/List/Growing/sample.html index fe119dcafb44..adedfad58cf3 100644 --- a/packages/website/docs/_samples/main/List/Growing/sample.html +++ b/packages/website/docs/_samples/main/List/Growing/sample.html @@ -13,15 +13,15 @@ Pineapple + additional-text-state="Positive">Pineapple Orange + additional-text-state="Critical">Orange Banana + additional-text-state="Negative">Banana Plum Mango + additional-text-state="Negative">Mango diff --git a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js index 47f6c85774ab..083e3cbc42bf 100644 --- a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js +++ b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js @@ -11,7 +11,7 @@ const listItemTemplate = (index) => { li.textContent = "Fruit name"; li.description = "the description goes here " + index; li.additionalText = "Available"; - li.additionalTextState = "Success"; + li.additionalTextState = "Positive"; li.icon = "nutrition-activity"; return li; } diff --git a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html index cf7b01519ab2..5f3a7e1b11a5 100644 --- a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html +++ b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html @@ -13,15 +13,15 @@ Pineapple + additional-text-state="Positive">Pineapple Orange + additional-text-state="Critical">Orange Banana + additional-text-state="Negative">Banana Plum Mango + additional-text-state="Negative">Mango diff --git a/packages/website/docs/_samples/main/MessageStrip/Design/sample.html b/packages/website/docs/_samples/main/MessageStrip/Design/sample.html index afa94a944be9..8a121f45ed8f 100644 --- a/packages/website/docs/_samples/main/MessageStrip/Design/sample.html +++ b/packages/website/docs/_samples/main/MessageStrip/Design/sample.html @@ -13,7 +13,7 @@ Information MessageStrip

Negative MessageStrip

- Warning MessageStrip

+ Critical MessageStrip

Positive MessageStrip diff --git a/packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxCustomValue/sample.html b/packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxCustomValue/sample.html index 0219867c9e5b..1d3c96c714df 100644 --- a/packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxCustomValue/sample.html +++ b/packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxCustomValue/sample.html @@ -12,15 +12,11 @@ - - - - - - - - - + + + + + diff --git a/packages/website/docs/_samples/main/MultiInput/TokenCreation/main.js b/packages/website/docs/_samples/main/MultiInput/TokenCreation/main.js index f52878dc601d..13211f3c0774 100644 --- a/packages/website/docs/_samples/main/MultiInput/TokenCreation/main.js +++ b/packages/website/docs/_samples/main/MultiInput/TokenCreation/main.js @@ -41,9 +41,9 @@ document.getElementById("multi-input").addEventListener("change", function (even return token.text === event.target.value }); if (isDuplicate) { - event.target.valueState = "Error"; + event.target.valueState = "Negative"; setTimeout(function () { - event.target.valueState = "Normal"; + event.target.valueState = "None"; }, 2000); return; } diff --git a/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html b/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html index 2382281dfd61..b0ae859d2811 100644 --- a/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html +++ b/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html @@ -13,8 +13,8 @@ - - + + diff --git a/packages/website/docs/_samples/main/RadioButton/States/sample.html b/packages/website/docs/_samples/main/RadioButton/States/sample.html index 0cc962464005..f78c9beb19cc 100644 --- a/packages/website/docs/_samples/main/RadioButton/States/sample.html +++ b/packages/website/docs/_samples/main/RadioButton/States/sample.html @@ -14,9 +14,9 @@ - - - + + + diff --git a/packages/website/docs/_samples/main/Select/States/sample.html b/packages/website/docs/_samples/main/Select/States/sample.html index 7c27eba3c4d6..f13e4df0b8c6 100644 --- a/packages/website/docs/_samples/main/Select/States/sample.html +++ b/packages/website/docs/_samples/main/Select/States/sample.html @@ -10,7 +10,7 @@ - + Apple Avocado Mango @@ -22,19 +22,19 @@ Mango - + Apple Avocado Mango - + Apple Avocado Mango - + Apple Avocado Mango diff --git a/packages/website/docs/_samples/main/StepInput/States/sample.html b/packages/website/docs/_samples/main/StepInput/States/sample.html index c4a998ee3db3..c44369dab95b 100644 --- a/packages/website/docs/_samples/main/StepInput/States/sample.html +++ b/packages/website/docs/_samples/main/StepInput/States/sample.html @@ -12,11 +12,11 @@



-

+



-

-

- +

+

+
Please provide valid value
 diff --git a/packages/website/docs/_samples/main/TextArea/MaxLength/main.js b/packages/website/docs/_samples/main/TextArea/MaxLength/main.js index faca27e5ea30..d6f2779a2383 100644 --- a/packages/website/docs/_samples/main/TextArea/MaxLength/main.js +++ b/packages/website/docs/_samples/main/TextArea/MaxLength/main.js @@ -6,5 +6,5 @@ textArea.addEventListener("input", () => { const value = textArea.value; const maxlength = textArea.maxlength; - textArea.valueState = value.length > maxlength ? "Warning" : "None"; + textArea.valueState = value.length > maxlength ? "Critical" : "None"; }); \ No newline at end of file diff --git a/packages/website/docs/_samples/main/TextArea/States/sample.html b/packages/website/docs/_samples/main/TextArea/States/sample.html index d697cd9a5185..8a25f567703d 100644 --- a/packages/website/docs/_samples/main/TextArea/States/sample.html +++ b/packages/website/docs/_samples/main/TextArea/States/sample.html @@ -11,11 +11,11 @@ - + - - - + + +
Please provide valid value
 diff --git a/packages/website/docs/_samples/main/TimePicker/States/sample.html b/packages/website/docs/_samples/main/TimePicker/States/sample.html index 21de7600983f..07b9fa99a228 100644 --- a/packages/website/docs/_samples/main/TimePicker/States/sample.html +++ b/packages/website/docs/_samples/main/TimePicker/States/sample.html @@ -11,11 +11,11 @@ - + - - - + + +
Please provide valid value