From 9f075ab0690eac9069a413dd759319f90743e367 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Mon, 29 Jun 2020 17:02:49 +0300 Subject: [PATCH 1/9] feat(ui5-progress-indicator): init implementation of new component Fixes: #1392 --- packages/main/bundle.esm.js | 1 + packages/main/src/ProgressIndicator.hbs | 18 ++ packages/main/src/ProgressIndicator.js | 175 ++++++++++++++++++ .../main/src/themes/ProgressIndicator.css | 88 +++++++++ .../base/ProgressIndicator-parameters.css | 11 ++ .../ProgressIndicator-parameters.css | 8 + .../themes/sap_belize/parameters-bundle.css | 1 + .../ProgressIndicator-parameters.css | 10 + .../sap_belize_hcb/parameters-bundle.css | 1 + .../ProgressIndicator-parameters.css | 10 + .../sap_belize_hcw/parameters-bundle.css | 1 + .../themes/sap_fiori_3/parameters-bundle.css | 1 + .../sap_fiori_3_dark/parameters-bundle.css | 1 + .../main/test/pages/ProgressIndicator.html | 147 +++++++++++++++ .../main/test/specs/ProgressIndicator.spec.js | 21 +++ packages/theme-base/css-vars-usage.json | 1 + 16 files changed, 495 insertions(+) create mode 100644 packages/main/src/ProgressIndicator.hbs create mode 100644 packages/main/src/ProgressIndicator.js create mode 100644 packages/main/src/themes/ProgressIndicator.css create mode 100644 packages/main/src/themes/base/ProgressIndicator-parameters.css create mode 100644 packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css create mode 100644 packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css create mode 100644 packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css create mode 100644 packages/main/test/pages/ProgressIndicator.html create mode 100644 packages/main/test/specs/ProgressIndicator.spec.js diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index dc9c1163f26f..cc37c636a5ee 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -57,6 +57,7 @@ import Select from "./dist/Select.js"; import Switch from "./dist/Switch.js"; import MessageStrip from "./dist/MessageStrip.js"; import MultiComboBox from "./dist/MultiComboBox.js"; +import ProgressIndicator from "./dist/ProgressIndicator.js"; import RatingIndicator from "./dist/RatingIndicator.js"; import TabContainer from "./dist/TabContainer.js"; import Tab from "./dist/Tab.js"; diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs new file mode 100644 index 000000000000..fdac6cfc0730 --- /dev/null +++ b/packages/main/src/ProgressIndicator.hbs @@ -0,0 +1,18 @@ +
+
+ {{#unless showValueInRemainingBar}} + {{> valueLabel}} + {{/unless}} +
+
+ {{#if showValueInRemainingBar}} + {{> valueLabel}} + {{/if}} +
+
+ +{{#*inline "valueLabel"}} + {{#unless hideValue}} + {{validatedValue}}% + {{/unless}} +{{/inline}} \ No newline at end of file diff --git a/packages/main/src/ProgressIndicator.js b/packages/main/src/ProgressIndicator.js new file mode 100644 index 000000000000..d49f5b498309 --- /dev/null +++ b/packages/main/src/ProgressIndicator.js @@ -0,0 +1,175 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; +import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; +import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js"; + +// Styles +import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-progress-indicator", + properties: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ { + /** + * Defines whether ui5-progress-indicator is in disabled state. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + disabled: { + type: Boolean, + }, + /** + * Defines whether ui5-progress-indicator value to be shown. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + hideValue: { + type: Boolean, + }, + /** + * Specifies the numerical value in percent for the length of the ui5-progress-indicator. + * + * Note: + * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0. + * @type {Integer} + * @defaultvalue 0 + * @public + */ + value: { + type: Integer, + defaultValue: 0, + }, + /** + * Defines the value state of the ui5-progress-indicator. + *

+ * Available options are: + * + * + * @type {ValueState} + * @defaultvalue "None" + * @public + */ + valueState: { + type: ValueState, + defaultValue: ValueState.None, + }, + }, + slots: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ { + // + }, + events: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ { + // + }, +}; + +/** + * @class + * + *

Overview

+ * Shows the progress of a process in a graphical way. To indicate the progress, + * the inside of the ui5-progress-indicator is filled with a color. + * + *

Responsive Behavior

+ * You can change the size of the Rating Indicator by changing its width or height CSS properties. + *
+ * Example: <ui5-progress-indicator style="height: 2rem; width: 6rem;"></ui5-progress-indicator> + * + * For the ui5-progress-indicator + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/ProgressIndicator.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ProgressIndicator + * @extends UI5Element + * @tagname ui5-progress-indicator + * @public + * @since 1.0.0-rc.8 + */ +class ProgressIndicator extends UI5Element { + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get styles() { + return ProgressIndicatorCss; + } + + static get template() { + return ProgressIndicatorTemplate; + } + + constructor() { + super(); + + this._previousValue = 0; + this._transitionDuration = 0; + } + + onBeforeRendering() { + this._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20; + this._previousValue = this.validatedValue; + } + + get styles() { + return { + bar: { + "width": `${this.validatedValue}%`, + "transition-duration": this.shouldAnimate ? `${this._transitionDuration}ms` : "none", + }, + }; + } + + get classes() { + return { + root: { + "ui5-progress-indicator-max-value": this.validatedValue === 100, + "ui5-progress-indicator-min-value": this.validatedValue === 0, + }, + }; + } + + get validatedValue() { + if (this.value < 0) { + return 0; + } + + if (this.value > 100) { + return 100; + } + + return this.value; + } + + get showValueInRemainingBar() { + return this.value <= 50; + } + + get shouldAnimate() { + return getAnimationMode() !== AnimationMode.None; + } +} + +ProgressIndicator.define(); + +export default ProgressIndicator; diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css new file mode 100644 index 000000000000..45b480dff08e --- /dev/null +++ b/packages/main/src/themes/ProgressIndicator.css @@ -0,0 +1,88 @@ +:host(:not([hidden])) { + display: inline-block; + min-height: 1rem; + min-width: 4rem; + width: 100%; + height: 1rem; + font-size: var(--sapFontSmallSize); + font-family: var(--sapFontFamily); + box-sizing: border-box; + overflow: hidden; +} + +.ui5-progress-indicator-root { + box-sizing: border-box; + display: flex; + align-items: center; + background: var(--sapField_Background); + border-radius: 0.5rem; + overflow: hidden; + height: 100%; + width: 100%; +} + +.ui5-progress-indicator-bar { + background: var(--_ui5_progress-indicator_value_state_none); + justify-content: flex-end; + height: 100%; + display: flex; + align-items: center; + color: var(--_ui5_progress-indicator_bar_color); + transition-property: width; + transition-timing-function: linear; + box-sizing: border-box; + border: var(--_ui5_progress-indicator_bar_border_max); + border-radius: 0.5rem 0 0 0.5rem; +} + +.ui5-progress-indicator-min-value .ui5-progress-indicator-bar, +.ui5-progress-indicator-max-value .ui5-progress-indicator-remaining-bar { + border:none; +} + +.ui5-progress-indicator-max-value .ui5-progress-indicator-bar { + border-radius: 0.5rem; +} + +.ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { + border-left: var(--_ui5_progress-indicator_border); + border-radius: 0.5rem; +} + +.ui5-progress-indicator-remaining-bar { + justify-content: flex-start; + height: 100%; + display: flex; + align-items: center; + flex-grow: 1; + flex-basis: 0; + border: var(--_ui5_progress-indicator_border); + border-left: none; + border-radius: 0 0.5rem 0.5rem 0; + box-sizing: border-box; + color: var(--_ui5_progress-indicator_color); +} + +.ui5-progress-indicator-value { + padding: 0 0.375rem; +} + +:host([value-state="Error"]) .ui5-progress-indicator-bar { + background: var(--_ui5_progress-indicator_value_state_error); +} + +:host([value-state="Warning"]) .ui5-progress-indicator-bar { + background: var(--_ui5_progress-indicator_value_state_warning); +} + +:host([value-state="Success"]) .ui5-progress-indicator-bar { + background: var(--_ui5_progress-indicator_value_state_success); +} + +:host([value-state="Information"]) .ui5-progress-indicator-bar { + background: var(--_ui5_progress-indicator_value_state_information); +} + +:host([disabled]) .ui5-progress-indicator-root { + opacity: 0.5; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/ProgressIndicator-parameters.css b/packages/main/src/themes/base/ProgressIndicator-parameters.css new file mode 100644 index 000000000000..6411781a6559 --- /dev/null +++ b/packages/main/src/themes/base/ProgressIndicator-parameters.css @@ -0,0 +1,11 @@ +:root { + --_ui5_progress-indicator_value_state_none: var(--sapNeutralElementColor); + --_ui5_progress-indicator_value_state_error: var(--sapNegativeElementColor); + --_ui5_progress-indicator_value_state_warning: var(--sapCriticalElementColor); + --_ui5_progress-indicator_value_state_success: var(--sapPositiveElementColor); + --_ui5_progress-indicator_value_state_information: var(--sapInformativeElementColor); + --_ui5_progress-indicator_color: var(--sapTextColor); + --_ui5_progress-indicator_bar_color: var(--sapContent_ContrastTextColor); + --_ui5_progress-indicator_border: 0.0625rem solid var(--sapField_BorderColor); + --_ui5_progress-indicator_bar_border_max: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css new file mode 100644 index 000000000000..abea1c59f8d9 --- /dev/null +++ b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css @@ -0,0 +1,8 @@ +@import "../base/ProgressIndicator-parameters.css"; + +:root { + --_ui5_progress-indicator_value_state_error: var(--sapNegativeElementColor); + --_ui5_progress-indicator_value_state_warning: var(--sapCriticalElementColor); + --_ui5_progress-indicator_value_state_success: var(--sapPositiveElementColor); + --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 4128e3ae88d8..5444b0d6e8a8 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -18,6 +18,7 @@ @import "../base/MonthPicker-parameters.css"; @import "../base/Panel-parameters.css"; @import "../base/Popup-parameters.css"; +@import "./ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css new file mode 100644 index 000000000000..04ae74c88570 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css @@ -0,0 +1,10 @@ +@import "../base/ProgressIndicator-parameters.css"; + +:root { + --_ui5_progress-indicator_value_state_none: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_error: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_warning: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); + --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index de87604b94e5..506f3e8ace47 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -18,6 +18,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popup-parameters.css"; +@import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css new file mode 100644 index 000000000000..04ae74c88570 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css @@ -0,0 +1,10 @@ +@import "../base/ProgressIndicator-parameters.css"; + +:root { + --_ui5_progress-indicator_value_state_none: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_error: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_warning: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); + --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); + --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css index 5088ce6ba66a..c0a6266c9800 100644 --- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css @@ -18,6 +18,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popup-parameters.css"; +@import "./ProgressIndicator-parameters"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index c46306435a59..4b9e85481e2f 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -17,6 +17,7 @@ @import "../base/MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popup-parameters.css"; +@import "../base/ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index c46306435a59..4b9e85481e2f 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -17,6 +17,7 @@ @import "../base/MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popup-parameters.css"; +@import "../base/ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; diff --git a/packages/main/test/pages/ProgressIndicator.html b/packages/main/test/pages/ProgressIndicator.html new file mode 100644 index 000000000000..3315413d50c4 --- /dev/null +++ b/packages/main/test/pages/ProgressIndicator.html @@ -0,0 +1,147 @@ + + + + + + + + + Progress Indicator + + + + + + + + + +
+ Value is 0 +
+ +
+ Value is 100 +
+ +
+ Value less than 50 +
+ +
+ Value greater than 50 +
+ +
+ Value less than 50 without value +
+ +
+ Value greater than 50 without value +
+ +
+ ValueState.None +
+ +
+ ValueState.Error +
+ +
+ ValueState.Warning +
+ +
+ ValueState.Success +
+ +
+ ValueState.Information +
+ +
+ Disabled +
+ +
+ ValueState.None +
+ +
+ ValueState.Error +
+ +
+ ValueState.Warning +
+ +
+ ValueState.Success +
+ +
+ ValueState.Information +
+ +
+ Disabled +
+ +
+ Custom Size 1 +
+ +
+ Custom Size 2 +
+ +
+ Test progress indicator +
+ + Set 0 value + Set 25 value + Set 50 value + Set 75 value + Set 100 value + Set negative value + Set larger than 100 value + + + + + \ No newline at end of file diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js new file mode 100644 index 000000000000..92bac14f6663 --- /dev/null +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -0,0 +1,21 @@ +const assert = require("chai").assert; + +describe("Attributes propagation", () => { + browser.url("http://localhost:8080/test-resources/pages/ProgressIndicator.html"); + + it("Header text attribute is propagated", () => { + const progressIndicator = $("#test-progress-indicator"); + const negativeButton = $("sixthBtn"); + const validButton = $("#thirdBtn"); + const largerButton = $("seventhBtn"); + + validButton.click() + assert.ok(progressIndicator.validateValue, 50, "Value visual representation is validate correctly."); + + negativeButton.click() + assert.ok(progressIndicator.validateValue, 0, "Value visual representation is limited to 0 and it validated correctly."); + + largerButton.click() + assert.ok(progressIndicator.validateValue, 100, "Value visual representation is limited to 100 and it validated correctly."); + }); +}); \ No newline at end of file diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index b1a5db3c24d3..b08ef49a606a 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -174,6 +174,7 @@ "--sapNegativeElementColor", "--sapNegativeTextColor", "--sapNeutralColor", + "--sapNeutralElementColor", "--sapNeutralTextColor", "--sapObjectHeader_Background", "--sapObjectHeader_BorderColor", From 129303924dd6c16f4962ca50dabb85ccd1b1383e Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Tue, 30 Jun 2020 08:40:46 +0300 Subject: [PATCH 2/9] feat(ui5-progress-indicator): add accessibility Fixes: #1392 --- packages/main/src/ProgressIndicator.hbs | 9 ++++++- packages/main/src/ProgressIndicator.js | 31 +++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs index fdac6cfc0730..27a81b7f521d 100644 --- a/packages/main/src/ProgressIndicator.hbs +++ b/packages/main/src/ProgressIndicator.hbs @@ -1,4 +1,11 @@ -
+
{{#unless showValueInRemainingBar}} {{> valueLabel}} diff --git a/packages/main/src/ProgressIndicator.js b/packages/main/src/ProgressIndicator.js index d49f5b498309..c1161324bcd5 100644 --- a/packages/main/src/ProgressIndicator.js +++ b/packages/main/src/ProgressIndicator.js @@ -4,7 +4,14 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; +import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js"; +import { + VALUE_STATE_ERROR, + VALUE_STATE_WARNING, + VALUE_STATE_SUCCESS, + VALUE_STATE_INFORMATION, +} from "./generated/i18n/i18n-defaults.js"; // Styles import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js"; @@ -124,6 +131,8 @@ class ProgressIndicator extends UI5Element { this._previousValue = 0; this._transitionDuration = 0; + + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); } onBeforeRendering() { @@ -131,6 +140,17 @@ class ProgressIndicator extends UI5Element { this._previousValue = this.validatedValue; } + valueStateTextMappings() { + const i18nBundle = this.i18nBundle; + + return { + "Error": i18nBundle.getText(VALUE_STATE_ERROR), + "Warning": i18nBundle.getText(VALUE_STATE_WARNING), + "Success": i18nBundle.getText(VALUE_STATE_SUCCESS), + "Information": i18nBundle.getText(VALUE_STATE_INFORMATION), + }; + } + get styles() { return { bar: { @@ -168,6 +188,17 @@ class ProgressIndicator extends UI5Element { get shouldAnimate() { return getAnimationMode() !== AnimationMode.None; } + + get valueStateText() { + const percentValue = `${this.validatedValue}%`; + const valueText = this.valueStateTextMappings()[this.valueState]; + + return valueText ? `${percentValue} ${valueText}` : percentValue; + } + + static async onDefine() { + await fetchI18nBundle("@ui5/webcomponents"); + } } ProgressIndicator.define(); From 347cfa6c685970bddbffcce9b57d8890c6fe5aac Mon Sep 17 00:00:00 2001 From: Naydenov Date: Tue, 30 Jun 2020 15:05:41 +0300 Subject: [PATCH 3/9] added rtl support --- packages/main/src/ProgressIndicator.hbs | 2 +- .../main/src/themes/ProgressIndicator.css | 24 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs index fdac6cfc0730..a8761c1937c9 100644 --- a/packages/main/src/ProgressIndicator.hbs +++ b/packages/main/src/ProgressIndicator.hbs @@ -1,4 +1,4 @@ -
+
{{#unless showValueInRemainingBar}} {{> valueLabel}} diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css index 45b480dff08e..c9fb6cb893fb 100644 --- a/packages/main/src/themes/ProgressIndicator.css +++ b/packages/main/src/themes/ProgressIndicator.css @@ -85,4 +85,28 @@ :host([disabled]) .ui5-progress-indicator-root { opacity: 0.5; +} + +[dir="rtl"] .ui5-progress-indicator-bar { + border-radius: 0 0.5rem 0.5rem 0; +} + +[dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-bar, +[dir="rtl"].ui5-progress-indicator-max-value .ui5-progress-indicator-remaining-bar { + border:none; +} + +[dir="rtl"].ui5-progress-indicator-max-value .ui5-progress-indicator-bar { + border-radius: 0.5rem; +} + +[dir="rtl"] .ui5-progress-indicator-remaining-bar { + border: var(--_ui5_progress-indicator_border); + border-right: none; + border-radius: 0.5rem 0 0 0.5rem; +} + +[dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { + border-right: var(--_ui5_progress-indicator_border); + border-radius: 0.5rem; } \ No newline at end of file From 662a10c2c45e883462efa322deec304a67f5df02 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 1 Jul 2020 15:37:04 +0300 Subject: [PATCH 4/9] added value state icons in high contrast themes and fixed review comments --- packages/main/src/ProgressIndicator.hbs | 9 +++++--- packages/main/src/ProgressIndicator.js | 19 ++++++++++++++++- .../main/src/themes/ProgressIndicator.css | 21 +++++++++++++++---- .../base/ProgressIndicator-parameters.css | 1 + .../ProgressIndicator-parameters.css | 1 + .../ProgressIndicator-parameters.css | 1 + .../main/test/specs/ProgressIndicator.spec.js | 8 +++---- 7 files changed, 48 insertions(+), 12 deletions(-) diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs index ab14a5b479b7..db046591c5a0 100644 --- a/packages/main/src/ProgressIndicator.hbs +++ b/packages/main/src/ProgressIndicator.hbs @@ -2,10 +2,10 @@ dir="{{effectiveDir}}" role="progressbar" aria-valuemin="0" - aria-valuenow="{{this.validatedValue}}" + aria-valuenow="{{validatedValue}}" aria-valuemax="100" - aria-valuetext="{{this.valueStateText}}" - ?aria-disabled="{{this.disabled}}" + aria-valuetext="{{valueStateText}}" + ?aria-disabled="{{disabled}}" >
{{#unless showValueInRemainingBar}} @@ -20,6 +20,9 @@
{{#*inline "valueLabel"}} + {{#if showIcon}} + + {{/if}} {{#unless hideValue}} {{validatedValue}}% {{/unless}} diff --git a/packages/main/src/ProgressIndicator.js b/packages/main/src/ProgressIndicator.js index c1161324bcd5..9f5638a5bb9b 100644 --- a/packages/main/src/ProgressIndicator.js +++ b/packages/main/src/ProgressIndicator.js @@ -33,7 +33,7 @@ const metadata = { type: Boolean, }, /** - * Defines whether ui5-progress-indicator value to be shown. + * Defines whether ui5-progress-indicator value is shown. * * @type {boolean} * @defaultvalue false @@ -151,6 +151,15 @@ class ProgressIndicator extends UI5Element { }; } + valueStateIconMappings() { + return { + "Error": "status-negative", + "Warning": "status-critical", + "Success": "status-positive", + "Information": "hint", + }; + } + get styles() { return { bar: { @@ -196,6 +205,14 @@ class ProgressIndicator extends UI5Element { return valueText ? `${percentValue} ${valueText}` : percentValue; } + get showIcon() { + return this.valueState !== ValueState.None + } + + get valueStateIcon() { + return this.valueStateIconMappings()[this.valueState]; + } + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); } diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css index c9fb6cb893fb..48d1433f15c5 100644 --- a/packages/main/src/themes/ProgressIndicator.css +++ b/packages/main/src/themes/ProgressIndicator.css @@ -4,9 +4,6 @@ min-width: 4rem; width: 100%; height: 1rem; - font-size: var(--sapFontSmallSize); - font-family: var(--sapFontFamily); - box-sizing: border-box; overflow: hidden; } @@ -19,6 +16,8 @@ overflow: hidden; height: 100%; width: 100%; + font-size: var(--sapFontSmallSize); + font-family: var(--sapFontFamily); } .ui5-progress-indicator-bar { @@ -64,7 +63,21 @@ } .ui5-progress-indicator-value { - padding: 0 0.375rem; + margin: 0 0.375rem; +} + +.ui5-progress-indicator-icon { + margin-left: 0.375rem; + width: var(--sapFontSmallSize); + height: var(--sapFontSmallSize); +} + +ui5-icon[name].ui5-progress-indicator-icon { + display: var(--_ui5_progress-indicator_icon_visibility); +} + +[dir="rtl"] .ui5-progress-indicator-icon { + margin-right: 0 0.375rem 0 0; } :host([value-state="Error"]) .ui5-progress-indicator-bar { diff --git a/packages/main/src/themes/base/ProgressIndicator-parameters.css b/packages/main/src/themes/base/ProgressIndicator-parameters.css index 6411781a6559..776db72301e7 100644 --- a/packages/main/src/themes/base/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/base/ProgressIndicator-parameters.css @@ -8,4 +8,5 @@ --_ui5_progress-indicator_bar_color: var(--sapContent_ContrastTextColor); --_ui5_progress-indicator_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_progress-indicator_bar_border_max: none; + --_ui5_progress-indicator_icon_visibility: none; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css index 04ae74c88570..297699ba905e 100644 --- a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css @@ -7,4 +7,5 @@ --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); + --_ui5_progress-indicator_icon_visibility: block; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css index 04ae74c88570..297699ba905e 100644 --- a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css @@ -7,4 +7,5 @@ --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); + --_ui5_progress-indicator_icon_visibility: block; } \ No newline at end of file diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js index 92bac14f6663..d5d31d199687 100644 --- a/packages/main/test/specs/ProgressIndicator.spec.js +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -1,13 +1,13 @@ const assert = require("chai").assert; -describe("Attributes propagation", () => { +describe("Properties", () => { browser.url("http://localhost:8080/test-resources/pages/ProgressIndicator.html"); - it("Header text attribute is propagated", () => { + it("Value validation", () => { const progressIndicator = $("#test-progress-indicator"); - const negativeButton = $("sixthBtn"); + const negativeButton = $("#sixthBtn"); const validButton = $("#thirdBtn"); - const largerButton = $("seventhBtn"); + const largerButton = $("#seventhBtn"); validButton.click() assert.ok(progressIndicator.validateValue, 50, "Value visual representation is validate correctly."); From b413da524b6954377024fd1651c988da40007bbc Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 1 Jul 2020 16:08:38 +0300 Subject: [PATCH 5/9] added samples to playground --- packages/main/src/ProgressIndicator.js | 2 +- .../samples/ProgressIndicator.sample.html | 64 +++++++++++++++++++ 2 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 packages/main/test/samples/ProgressIndicator.sample.html diff --git a/packages/main/src/ProgressIndicator.js b/packages/main/src/ProgressIndicator.js index 9f5638a5bb9b..cbb814d6b8e1 100644 --- a/packages/main/src/ProgressIndicator.js +++ b/packages/main/src/ProgressIndicator.js @@ -206,7 +206,7 @@ class ProgressIndicator extends UI5Element { } get showIcon() { - return this.valueState !== ValueState.None + return this.valueState !== ValueState.None; } get valueStateIcon() { diff --git a/packages/main/test/samples/ProgressIndicator.sample.html b/packages/main/test/samples/ProgressIndicator.sample.html new file mode 100644 index 000000000000..f09b1ad118db --- /dev/null +++ b/packages/main/test/samples/ProgressIndicator.sample.html @@ -0,0 +1,64 @@ +
+

Progress Indicator

+
+ +
+
+ + +
@ui5/webcomponents
+ +
<ui5-progress-indicator>
+ +
+

Basic Progress Indicator

+
+ + + + +
+ 

+<ui5-progress-indicator value="0"></ui5-progress-indicator>
+<ui5-progress-indicator value="25"></ui5-progress-indicator>
+<ui5-progress-indicator value="75" disabled></ui5-progress-indicator>
+<ui5-progress-indicator value="100"></ui5-progress-indicator>
+
+
+ +
+

Progress Indicator With Value State

+
+ + + + + +
+ 

+<ui5-progress-indicator value-state="None" value="25"></ui5-progress-indicator>
+<ui5-progress-indicator value-state="Error" value="50"></ui5-progress-indicator>
+<ui5-progress-indicator value-state="Warning" value="75"></ui5-progress-indicator>
+<ui5-progress-indicator value-state="Success" value="90"></ui5-progress-indicator>
+<ui5-progress-indicator value-state="Information" value="100"></ui5-progress-indicator>
+
+
+ +
+

Progress Indicator With Custom Sizes

+
+ + +
+ 

+<ui5-progress-indicator value="25" style="height: 50px; width: 200px;"></ui5-progress-indicator>
+<ui5-progress-indicator value="75" style="height: 50px; width: 200px;"></ui5-progress-indicator>
+
+
+ + + \ No newline at end of file From 319eecbba2d8c63092d6f6aac4c7889d2e88048d Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 1 Jul 2020 16:11:51 +0300 Subject: [PATCH 6/9] marked component as new --- packages/playground/build-scripts/samples-prepare.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/playground/build-scripts/samples-prepare.js b/packages/playground/build-scripts/samples-prepare.js index dbe6f0da2d36..bb1c5bb9389e 100644 --- a/packages/playground/build-scripts/samples-prepare.js +++ b/packages/playground/build-scripts/samples-prepare.js @@ -20,6 +20,7 @@ const newComponents = [ "UploadCollection", "Tree", "RatingIndicator", + "ProgressIndicator", ]; packages.forEach(package => { From 82291bed7717ea4f233d6b32e1e2f335bd897725 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 1 Jul 2020 17:18:58 +0300 Subject: [PATCH 7/9] changed css variables name and validate the test --- .../main/src/themes/ProgressIndicator.css | 37 +++++++++---------- .../base/ProgressIndicator-parameters.css | 20 +++++----- .../ProgressIndicator-parameters.css | 8 ++-- .../ProgressIndicator-parameters.css | 14 +++---- .../ProgressIndicator-parameters.css | 14 +++---- .../main/test/specs/ProgressIndicator.spec.js | 6 +-- 6 files changed, 48 insertions(+), 51 deletions(-) diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css index 48d1433f15c5..7a2554c5f047 100644 --- a/packages/main/src/themes/ProgressIndicator.css +++ b/packages/main/src/themes/ProgressIndicator.css @@ -21,16 +21,16 @@ } .ui5-progress-indicator-bar { - background: var(--_ui5_progress-indicator_value_state_none); + background: var(--_ui5_p_i_value_state_none); justify-content: flex-end; height: 100%; display: flex; align-items: center; - color: var(--_ui5_progress-indicator_bar_color); + color: var(--_ui5_p_i_bar_color); transition-property: width; transition-timing-function: linear; box-sizing: border-box; - border: var(--_ui5_progress-indicator_bar_border_max); + border: var(--_ui5_p_i_bar_border_max); border-radius: 0.5rem 0 0 0.5rem; } @@ -44,7 +44,7 @@ } .ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { - border-left: var(--_ui5_progress-indicator_border); + border-left: var(--_ui5_p_i_border); border-radius: 0.5rem; } @@ -55,11 +55,11 @@ align-items: center; flex-grow: 1; flex-basis: 0; - border: var(--_ui5_progress-indicator_border); + border: var(--_ui5_p_i_border); border-left: none; border-radius: 0 0.5rem 0.5rem 0; box-sizing: border-box; - color: var(--_ui5_progress-indicator_color); + color: var(--_ui5_p_i_color); } .ui5-progress-indicator-value { @@ -70,30 +70,23 @@ margin-left: 0.375rem; width: var(--sapFontSmallSize); height: var(--sapFontSmallSize); -} - -ui5-icon[name].ui5-progress-indicator-icon { - display: var(--_ui5_progress-indicator_icon_visibility); -} - -[dir="rtl"] .ui5-progress-indicator-icon { - margin-right: 0 0.375rem 0 0; + display: var(--_ui5_p_i_icon_visibility); } :host([value-state="Error"]) .ui5-progress-indicator-bar { - background: var(--_ui5_progress-indicator_value_state_error); + background: var(--_ui5_p_i_value_state_error); } :host([value-state="Warning"]) .ui5-progress-indicator-bar { - background: var(--_ui5_progress-indicator_value_state_warning); + background: var(--_ui5_p_i_value_state_warning); } :host([value-state="Success"]) .ui5-progress-indicator-bar { - background: var(--_ui5_progress-indicator_value_state_success); + background: var(--_ui5_p_i_value_state_success); } :host([value-state="Information"]) .ui5-progress-indicator-bar { - background: var(--_ui5_progress-indicator_value_state_information); + background: var(--_ui5_p_i_value_state_information); } :host([disabled]) .ui5-progress-indicator-root { @@ -102,6 +95,8 @@ ui5-icon[name].ui5-progress-indicator-icon { [dir="rtl"] .ui5-progress-indicator-bar { border-radius: 0 0.5rem 0.5rem 0; + flex-direction: row-reverse; + justify-content: flex-start; } [dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-bar, @@ -114,12 +109,14 @@ ui5-icon[name].ui5-progress-indicator-icon { } [dir="rtl"] .ui5-progress-indicator-remaining-bar { - border: var(--_ui5_progress-indicator_border); + border: var(--_ui5_p_i_border); border-right: none; border-radius: 0.5rem 0 0 0.5rem; + flex-direction: row-reverse; + justify-content: flex-end; } [dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { - border-right: var(--_ui5_progress-indicator_border); + border-right: var(--_ui5_p_i_border); border-radius: 0.5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/ProgressIndicator-parameters.css b/packages/main/src/themes/base/ProgressIndicator-parameters.css index 776db72301e7..926b945bb537 100644 --- a/packages/main/src/themes/base/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/base/ProgressIndicator-parameters.css @@ -1,12 +1,12 @@ :root { - --_ui5_progress-indicator_value_state_none: var(--sapNeutralElementColor); - --_ui5_progress-indicator_value_state_error: var(--sapNegativeElementColor); - --_ui5_progress-indicator_value_state_warning: var(--sapCriticalElementColor); - --_ui5_progress-indicator_value_state_success: var(--sapPositiveElementColor); - --_ui5_progress-indicator_value_state_information: var(--sapInformativeElementColor); - --_ui5_progress-indicator_color: var(--sapTextColor); - --_ui5_progress-indicator_bar_color: var(--sapContent_ContrastTextColor); - --_ui5_progress-indicator_border: 0.0625rem solid var(--sapField_BorderColor); - --_ui5_progress-indicator_bar_border_max: none; - --_ui5_progress-indicator_icon_visibility: none; + --_ui5_p_i_value_state_none: var(--sapNeutralElementColor); + --_ui5_p_i_value_state_error: var(--sapNegativeElementColor); + --_ui5_p_i_value_state_warning: var(--sapCriticalElementColor); + --_ui5_p_i_value_state_success: var(--sapPositiveElementColor); + --_ui5_p_i_value_state_information: var(--sapInformativeElementColor); + --_ui5_p_i_color: var(--sapTextColor); + --_ui5_p_i_bar_color: var(--sapContent_ContrastTextColor); + --_ui5_p_i_border: 0.0625rem solid var(--sapField_BorderColor); + --_ui5_p_i_bar_border_max: none; + --_ui5_p_i_icon_visibility: none; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css index abea1c59f8d9..49edb6d3893e 100644 --- a/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css @@ -1,8 +1,8 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_progress-indicator_value_state_error: var(--sapNegativeElementColor); - --_ui5_progress-indicator_value_state_warning: var(--sapCriticalElementColor); - --_ui5_progress-indicator_value_state_success: var(--sapPositiveElementColor); - --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); + --_ui5_p_i_value_state_error: var(--sapNegativeElementColor); + --_ui5_p_i_value_state_warning: var(--sapCriticalElementColor); + --_ui5_p_i_value_state_success: var(--sapPositiveElementColor); + --_ui5_p_i_value_state_information: var(--sapHighlightColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css index 297699ba905e..4cd462b56ecb 100644 --- a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css @@ -1,11 +1,11 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_progress-indicator_value_state_none: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_error: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_warning: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); - --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); - --_ui5_progress-indicator_icon_visibility: block; + --_ui5_p_i_value_state_none: var(--sapHighlightColor); + --_ui5_p_i_value_state_error: var(--sapHighlightColor); + --_ui5_p_i_value_state_warning: var(--sapHighlightColor); + --_ui5_p_i_value_state_success: var(--sapHighlightColor); + --_ui5_p_i_value_state_information: var(--sapHighlightColor); + --_ui5_p_i_bar_border_max: var(--_ui5_p_i_border); + --_ui5_p_i_icon_visibility: inline-block; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css index 297699ba905e..4cd462b56ecb 100644 --- a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css @@ -1,11 +1,11 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_progress-indicator_value_state_none: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_error: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_warning: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_success: var(--sapHighlightColor); - --_ui5_progress-indicator_value_state_information: var(--sapHighlightColor); - --_ui5_progress-indicator_bar_border_max: var(--_ui5_progress-indicator_border); - --_ui5_progress-indicator_icon_visibility: block; + --_ui5_p_i_value_state_none: var(--sapHighlightColor); + --_ui5_p_i_value_state_error: var(--sapHighlightColor); + --_ui5_p_i_value_state_warning: var(--sapHighlightColor); + --_ui5_p_i_value_state_success: var(--sapHighlightColor); + --_ui5_p_i_value_state_information: var(--sapHighlightColor); + --_ui5_p_i_bar_border_max: var(--_ui5_p_i_border); + --_ui5_p_i_icon_visibility: inline-block; } \ No newline at end of file diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js index d5d31d199687..8b239b10d9bb 100644 --- a/packages/main/test/specs/ProgressIndicator.spec.js +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -10,12 +10,12 @@ describe("Properties", () => { const largerButton = $("#seventhBtn"); validButton.click() - assert.ok(progressIndicator.validateValue, 50, "Value visual representation is validate correctly."); + assert.strictEqual(progressIndicator.validateValue, 50, "Value visual representation is validate correctly."); negativeButton.click() - assert.ok(progressIndicator.validateValue, 0, "Value visual representation is limited to 0 and it validated correctly."); + assert.strictEqual(progressIndicator.validateValue, 0, "Value visual representation is limited to 0 and it validated correctly."); largerButton.click() - assert.ok(progressIndicator.validateValue, 100, "Value visual representation is limited to 100 and it validated correctly."); + assert.strictEqual(progressIndicator.validateValue, 100, "Value visual representation is limited to 100 and it validated correctly."); }); }); \ No newline at end of file From 89ee377096c4a18035a1a6da38c9b7088dc9247f Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 1 Jul 2020 17:51:06 +0300 Subject: [PATCH 8/9] fixed review comments --- .../main/src/themes/ProgressIndicator.css | 26 +++++++++---------- .../base/ProgressIndicator-parameters.css | 20 +++++++------- .../ProgressIndicator-parameters.css | 8 +++--- .../ProgressIndicator-parameters.css | 14 +++++----- .../ProgressIndicator-parameters.css | 14 +++++----- .../main/test/specs/ProgressIndicator.spec.js | 12 ++++----- 6 files changed, 47 insertions(+), 47 deletions(-) diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css index 7a2554c5f047..04ac725684ef 100644 --- a/packages/main/src/themes/ProgressIndicator.css +++ b/packages/main/src/themes/ProgressIndicator.css @@ -21,16 +21,16 @@ } .ui5-progress-indicator-bar { - background: var(--_ui5_p_i_value_state_none); + background: var(--_ui5_progress_indicator_value_state_none); justify-content: flex-end; height: 100%; display: flex; align-items: center; - color: var(--_ui5_p_i_bar_color); + color: var(--_ui5_progress_indicator_bar_color); transition-property: width; transition-timing-function: linear; box-sizing: border-box; - border: var(--_ui5_p_i_bar_border_max); + border: var(--_ui5_progress_indicator_bar_border_max); border-radius: 0.5rem 0 0 0.5rem; } @@ -44,7 +44,7 @@ } .ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { - border-left: var(--_ui5_p_i_border); + border-left: var(--_ui5_progress_indicator_border); border-radius: 0.5rem; } @@ -55,11 +55,11 @@ align-items: center; flex-grow: 1; flex-basis: 0; - border: var(--_ui5_p_i_border); + border: var(--_ui5_progress_indicator_border); border-left: none; border-radius: 0 0.5rem 0.5rem 0; box-sizing: border-box; - color: var(--_ui5_p_i_color); + color: var(--_ui5_progress_indicator_color); } .ui5-progress-indicator-value { @@ -70,23 +70,23 @@ margin-left: 0.375rem; width: var(--sapFontSmallSize); height: var(--sapFontSmallSize); - display: var(--_ui5_p_i_icon_visibility); + display: var(--_ui5_progress_indicator_icon_visibility); } :host([value-state="Error"]) .ui5-progress-indicator-bar { - background: var(--_ui5_p_i_value_state_error); + background: var(--_ui5_progress_indicator_value_state_error); } :host([value-state="Warning"]) .ui5-progress-indicator-bar { - background: var(--_ui5_p_i_value_state_warning); + background: var(--_ui5_progress_indicator_value_state_warning); } :host([value-state="Success"]) .ui5-progress-indicator-bar { - background: var(--_ui5_p_i_value_state_success); + background: var(--_ui5_progress_indicator_value_state_success); } :host([value-state="Information"]) .ui5-progress-indicator-bar { - background: var(--_ui5_p_i_value_state_information); + background: var(--_ui5_progress_indicator_value_state_information); } :host([disabled]) .ui5-progress-indicator-root { @@ -109,7 +109,7 @@ } [dir="rtl"] .ui5-progress-indicator-remaining-bar { - border: var(--_ui5_p_i_border); + border: var(--_ui5_progress_indicator_border); border-right: none; border-radius: 0.5rem 0 0 0.5rem; flex-direction: row-reverse; @@ -117,6 +117,6 @@ } [dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar { - border-right: var(--_ui5_p_i_border); + border-right: var(--_ui5_progress_indicator_border); border-radius: 0.5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/ProgressIndicator-parameters.css b/packages/main/src/themes/base/ProgressIndicator-parameters.css index 926b945bb537..7f414fa656c8 100644 --- a/packages/main/src/themes/base/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/base/ProgressIndicator-parameters.css @@ -1,12 +1,12 @@ :root { - --_ui5_p_i_value_state_none: var(--sapNeutralElementColor); - --_ui5_p_i_value_state_error: var(--sapNegativeElementColor); - --_ui5_p_i_value_state_warning: var(--sapCriticalElementColor); - --_ui5_p_i_value_state_success: var(--sapPositiveElementColor); - --_ui5_p_i_value_state_information: var(--sapInformativeElementColor); - --_ui5_p_i_color: var(--sapTextColor); - --_ui5_p_i_bar_color: var(--sapContent_ContrastTextColor); - --_ui5_p_i_border: 0.0625rem solid var(--sapField_BorderColor); - --_ui5_p_i_bar_border_max: none; - --_ui5_p_i_icon_visibility: none; + --_ui5_progress_indicator_value_state_none: var(--sapNeutralElementColor); + --_ui5_progress_indicator_value_state_error: var(--sapNegativeElementColor); + --_ui5_progress_indicator_value_state_warning: var(--sapCriticalElementColor); + --_ui5_progress_indicator_value_state_success: var(--sapPositiveElementColor); + --_ui5_progress_indicator_value_state_information: var(--sapInformativeElementColor); + --_ui5_progress_indicator_color: var(--sapTextColor); + --_ui5_progress_indicator_bar_color: var(--sapContent_ContrastTextColor); + --_ui5_progress_indicator_border: 0.0625rem solid var(--sapField_BorderColor); + --_ui5_progress_indicator_bar_border_max: none; + --_ui5_progress_indicator_icon_visibility: none; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css index 49edb6d3893e..30a64b66c0a0 100644 --- a/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize/ProgressIndicator-parameters.css @@ -1,8 +1,8 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_p_i_value_state_error: var(--sapNegativeElementColor); - --_ui5_p_i_value_state_warning: var(--sapCriticalElementColor); - --_ui5_p_i_value_state_success: var(--sapPositiveElementColor); - --_ui5_p_i_value_state_information: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_error: var(--sapNegativeElementColor); + --_ui5_progress_indicator_value_state_warning: var(--sapCriticalElementColor); + --_ui5_progress_indicator_value_state_success: var(--sapPositiveElementColor); + --_ui5_progress_indicator_value_state_information: var(--sapHighlightColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css index 4cd462b56ecb..f379ae43d880 100644 --- a/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css @@ -1,11 +1,11 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_p_i_value_state_none: var(--sapHighlightColor); - --_ui5_p_i_value_state_error: var(--sapHighlightColor); - --_ui5_p_i_value_state_warning: var(--sapHighlightColor); - --_ui5_p_i_value_state_success: var(--sapHighlightColor); - --_ui5_p_i_value_state_information: var(--sapHighlightColor); - --_ui5_p_i_bar_border_max: var(--_ui5_p_i_border); - --_ui5_p_i_icon_visibility: inline-block; + --_ui5_progress_indicator_value_state_none: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_error: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_warning: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_success: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_information: var(--sapHighlightColor); + --_ui5_progress_indicator_bar_border_max: var(--_ui5_progress_indicator_border); + --_ui5_progress_indicator_icon_visibility: inline-block; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css index 4cd462b56ecb..f379ae43d880 100644 --- a/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css @@ -1,11 +1,11 @@ @import "../base/ProgressIndicator-parameters.css"; :root { - --_ui5_p_i_value_state_none: var(--sapHighlightColor); - --_ui5_p_i_value_state_error: var(--sapHighlightColor); - --_ui5_p_i_value_state_warning: var(--sapHighlightColor); - --_ui5_p_i_value_state_success: var(--sapHighlightColor); - --_ui5_p_i_value_state_information: var(--sapHighlightColor); - --_ui5_p_i_bar_border_max: var(--_ui5_p_i_border); - --_ui5_p_i_icon_visibility: inline-block; + --_ui5_progress_indicator_value_state_none: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_error: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_warning: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_success: var(--sapHighlightColor); + --_ui5_progress_indicator_value_state_information: var(--sapHighlightColor); + --_ui5_progress_indicator_bar_border_max: var(--_ui5_progress_indicator_border); + --_ui5_progress_indicator_icon_visibility: inline-block; } \ No newline at end of file diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js index 8b239b10d9bb..e005137e20ce 100644 --- a/packages/main/test/specs/ProgressIndicator.spec.js +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -9,13 +9,13 @@ describe("Properties", () => { const validButton = $("#thirdBtn"); const largerButton = $("#seventhBtn"); - validButton.click() - assert.strictEqual(progressIndicator.validateValue, 50, "Value visual representation is validate correctly."); + validButton.click(); + assert.strictEqual(progressIndicator.validatedValue, 50, "Value visual representation is validate correctly."); - negativeButton.click() - assert.strictEqual(progressIndicator.validateValue, 0, "Value visual representation is limited to 0 and it validated correctly."); + negativeButton.click(); + assert.strictEqual(progressIndicator.validatedValue, 0, "Value visual representation is limited to 0 and it validated correctly."); - largerButton.click() - assert.strictEqual(progressIndicator.validateValue, 100, "Value visual representation is limited to 100 and it validated correctly."); + largerButton.click(); + assert.strictEqual(progressIndicator.validatedValue, 100, "Value visual representation is limited to 100 and it validated correctly."); }); }); \ No newline at end of file From 1a90bfb2a8626b4433c9471908f723ef92b3d498 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Sun, 5 Jul 2020 00:26:03 +0300 Subject: [PATCH 9/9] validated test --- .../main/test/specs/ProgressIndicator.spec.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js index e005137e20ce..3ecb3fabcfae 100644 --- a/packages/main/test/specs/ProgressIndicator.spec.js +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -1,21 +1,27 @@ const assert = require("chai").assert; -describe("Properties", () => { +const getValidatedValue = (pi) => { + return browser.execute((pi) => { + return pi.validatedValue; + }, pi); +}; + +describe("API", () => { browser.url("http://localhost:8080/test-resources/pages/ProgressIndicator.html"); - it("Value validation", () => { + it("tests value validation", () => { const progressIndicator = $("#test-progress-indicator"); const negativeButton = $("#sixthBtn"); const validButton = $("#thirdBtn"); const largerButton = $("#seventhBtn"); - validButton.click(); - assert.strictEqual(progressIndicator.validatedValue, 50, "Value visual representation is validate correctly."); + validButton.click(); + assert.strictEqual(getValidatedValue(progressIndicator), 50, "The value is validated correctly."); - negativeButton.click(); - assert.strictEqual(progressIndicator.validatedValue, 0, "Value visual representation is limited to 0 and it validated correctly."); + negativeButton.click(); + assert.strictEqual(getValidatedValue(progressIndicator), 0, "The value is limited to 0 and it is validated correctly."); - largerButton.click(); - assert.strictEqual(progressIndicator.validatedValue, 100, "Value visual representation is limited to 100 and it validated correctly."); + largerButton.click(); + assert.strictEqual(getValidatedValue(progressIndicator), 100, "The value is limited to 100 and it is validated correctly."); }); }); \ No newline at end of file