From e8009c978c7c3eee1f697f31c68438496285bfc3 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Sun, 5 Jul 2020 12:03:44 +0300 Subject: [PATCH] feat(ui5-progress-indicator): initial implementation (#1887) Fixes: #1392 --- packages/main/bundle.esm.js | 1 + packages/main/src/ProgressIndicator.hbs | 29 +++ packages/main/src/ProgressIndicator.js | 223 ++++++++++++++++++ .../main/src/themes/ProgressIndicator.css | 122 ++++++++++ .../base/ProgressIndicator-parameters.css | 12 + .../ProgressIndicator-parameters.css | 8 + .../themes/sap_belize/parameters-bundle.css | 1 + .../ProgressIndicator-parameters.css | 11 + .../sap_belize_hcb/parameters-bundle.css | 1 + .../ProgressIndicator-parameters.css | 11 + .../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 ++++++++++++ .../samples/ProgressIndicator.sample.html | 64 +++++ .../main/test/specs/ProgressIndicator.spec.js | 27 +++ .../build-scripts/samples-prepare.js | 1 + packages/theme-base/css-vars-usage.json | 1 + 18 files changed, 662 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/samples/ProgressIndicator.sample.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 db4c342d5c1f..584fac57bfcc 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -58,6 +58,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..db046591c5a0 --- /dev/null +++ b/packages/main/src/ProgressIndicator.hbs @@ -0,0 +1,29 @@ +
+
+ {{#unless showValueInRemainingBar}} + {{> valueLabel}} + {{/unless}} +
+
+ {{#if showValueInRemainingBar}} + {{> valueLabel}} + {{/if}} +
+
+ +{{#*inline "valueLabel"}} + {{#if showIcon}} + + {{/if}} + {{#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..cbb814d6b8e1 --- /dev/null +++ b/packages/main/src/ProgressIndicator.js @@ -0,0 +1,223 @@ +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 { 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"; + +/** + * @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 is 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; + + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + } + + onBeforeRendering() { + this._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20; + 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), + }; + } + + valueStateIconMappings() { + return { + "Error": "status-negative", + "Warning": "status-critical", + "Success": "status-positive", + "Information": "hint", + }; + } + + 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; + } + + get valueStateText() { + const percentValue = `${this.validatedValue}%`; + const valueText = this.valueStateTextMappings()[this.valueState]; + + 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"); + } +} + +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..04ac725684ef --- /dev/null +++ b/packages/main/src/themes/ProgressIndicator.css @@ -0,0 +1,122 @@ +:host(:not([hidden])) { + display: inline-block; + min-height: 1rem; + min-width: 4rem; + width: 100%; + height: 1rem; + 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%; + font-size: var(--sapFontSmallSize); + font-family: var(--sapFontFamily); +} + +.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 { + margin: 0 0.375rem; +} + +.ui5-progress-indicator-icon { + margin-left: 0.375rem; + width: var(--sapFontSmallSize); + height: var(--sapFontSmallSize); + display: var(--_ui5_progress_indicator_icon_visibility); +} + +: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; +} + +[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, +[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; + 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-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 new file mode 100644 index 000000000000..7f414fa656c8 --- /dev/null +++ b/packages/main/src/themes/base/ProgressIndicator-parameters.css @@ -0,0 +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; +} \ 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..30a64b66c0a0 --- /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 1573dd86c409..9c3bdd1188a6 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/PopupsCommon-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..f379ae43d880 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css @@ -0,0 +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: inline-block; +} \ 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 312293675a1f..d66143aa5134 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/PopupsCommon-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..f379ae43d880 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css @@ -0,0 +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: inline-block; +} \ 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 58a4674e2176..39fbe34e7679 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/PopupsCommon-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 6596d0143031..eb4c87d0cc5c 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/PopupsCommon-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 6596d0143031..eb4c87d0cc5c 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/PopupsCommon-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/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 diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js new file mode 100644 index 000000000000..3ecb3fabcfae --- /dev/null +++ b/packages/main/test/specs/ProgressIndicator.spec.js @@ -0,0 +1,27 @@ +const assert = require("chai").assert; + +const getValidatedValue = (pi) => { + return browser.execute((pi) => { + return pi.validatedValue; + }, pi); +}; + +describe("API", () => { + browser.url("http://localhost:8080/test-resources/pages/ProgressIndicator.html"); + + it("tests value validation", () => { + const progressIndicator = $("#test-progress-indicator"); + const negativeButton = $("#sixthBtn"); + const validButton = $("#thirdBtn"); + const largerButton = $("#seventhBtn"); + + validButton.click(); + assert.strictEqual(getValidatedValue(progressIndicator), 50, "The value is validated correctly."); + + negativeButton.click(); + assert.strictEqual(getValidatedValue(progressIndicator), 0, "The value is limited to 0 and it is 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 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 => { diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index e6180145f409..cc068895dcec 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",