Merge remote-tracking branch 'origin/main' into popover_autoclose

TeodorTaushanov · TeodorTaushanov · commit a4b6650c2666 · 2023-09-01T13:23:55.000+03:00
diff --git a/packages/base/src/types/CSSSize.ts b/packages/base/src/types/CSSSize.ts
@@ -0,0 +1,19 @@
+import DataType from "./DataType.js";
+
+/**
+ * @class
+ * CSSSize data type.
+ *
+ * @extends sap.ui.webc.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.CSSSize
+ * @public
+ */
+class CSSSize extends DataType {
+	static isValid(value: string) {
+		return /^(auto|inherit|[-+]?(0*|([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%))|calc\(\s*(\(\s*)*[-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)(\s*(\)\s*)*(\s[-+]\s|[*\/])\s*(\(\s*)*([-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)))*\s*(\)\s*)*\))$/.test(value); // eslint-disable-line
+	}
+}
+
+export default CSSSize;
diff --git a/packages/main/src/BusyIndicator.hbs b/packages/main/src/BusyIndicator.hbs
@@ -17,7 +17,7 @@
 				<div class="ui5-busy-indicator-circle circle-animation-2"></div>
 			</div>
 			{{#if text}}
-				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text">
+				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
 					{{text}}
 				</ui5-label>
 			{{/if}}
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -267,15 +267,6 @@ class ComboBox extends UI5Element {
 
 	/**
 	 * Defines the value state of the component.
-	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @name sap.ui.webc.main.ComboBox.prototype.valueState
@@ -323,7 +314,6 @@ class ComboBox extends UI5Element {
 
 	/**
 	 * Defines the filter type of the component.
-	 * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.
 	 *
 	 * @type {sap.ui.webc.main.types.ComboBoxFilter}
 	 * @name sap.ui.webc.main.ComboBox.prototype.filter
@@ -352,7 +342,7 @@ class ComboBox extends UI5Element {
 	 *
 	 * @type {string}
 	 * @name sap.ui.webc.main.ComboBox.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @defaultvalue ""
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -336,8 +336,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 	/**
 	 * Defines the HTML type of the component.
-	 * Available options are: <code>Text</code>, <code>Email</code>,
-	 * <code>Number</code>, <code>Password</code>, <code>Tel</code>, and <code>URL</code>.
 	 * <br><br>
 	 * <b>Notes:</b>
 	 * <ul>
@@ -384,15 +382,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 	/**
 	 * Defines the value state of the component.
-	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @name sap.ui.webc.main.Input.prototype.valueState
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
@@ -24,6 +24,7 @@ import {
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import {
@@ -812,8 +813,8 @@ class TabContainer extends UI5Element {
 			}
 
 			tab._style = {
-				"--_ui5-tab-indentation-level": level,
-				"--_ui5-tab-extra-indent": extraIndent ? 1 : null,
+				[getScopedVarName("--_ui5-tab-indentation-level")]: level,
+				[getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
 			};
 		});
 	}
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
@@ -381,13 +381,7 @@ class Table extends UI5Element {
 
 	/**
 	 * Defines the mode of the component.
-	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>MultiSelect</code></li>
-	 * <li><code>SingleSelect</code></li>
-	 * <li><code>None</code></li>
-	 * <ul>
+	 *
 	 * @type {sap.ui.webc.main.types.TableMode}
 	 * @name sap.ui.webc.main.Table.prototype.mode
 	 * @defaultvalue "None"
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
@@ -1,6 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 
@@ -191,12 +192,12 @@ class ToolbarButton extends ToolbarItem {
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @name sap.ui.webc.main.ToolbarButton.prototype.width
-	 * @defaultvalue ""
-	 * @type {string}
+	 * @defaultvalue undefined
+	 * @type { sap.ui.webc.base.types.CSSSize }
 	 * @public
 	 */
-	@property()
-	width!: string;
+	@property({ validator: CSSSize })
+	width?: string;
 
 	static get staticAreaStyles() {
 		return ToolbarButtonPopoverCss;
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
@@ -3,6 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 
 import { registerToolbarItem } from "./ToolbarRegistry.js";
 
@@ -81,12 +82,12 @@ class ToolbarSelect extends ToolbarItem {
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @name sap.ui.webc.main.ToolbarSelect.prototype.width
-	 * @defaultvalue ""
-	 * @type {string}
+	 * @defaultvalue undefined
+	 * @type { sap.ui.webc.base.types.CSSSize }
 	 * @public
 	 */
-	@property()
-	width!: string;
+	@property({ validator: CSSSize })
+	width?: string;
 
 	/**
 	 * Defines the component options.
diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts
@@ -17,7 +17,7 @@ import ToolbarItem from "./ToolbarItem.js";
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.ToolbarSeparator
- * @extends sap.ui.webc.base.UI5Element
+ * @extends sap.ui.webc.main.ToolbarItem
  * @tagname ui5-toolbar-separator
  * @since 1.17.0
  * @abstract
diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts
@@ -1,5 +1,6 @@
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
 
 import ToolbarItem from "./ToolbarItem.js";
@@ -15,7 +16,7 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.ToolbarSpacer
- * @extends sap.ui.webc.base.UI5Element
+ * @extends sap.ui.webc.main.ToolbarItem
  * @tagname ui5-toolbar-spacer
  * @abstract
  * @since 1.17.0
@@ -33,12 +34,12 @@ class ToolbarSpacer extends ToolbarItem {
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @public
-	 * @type {string}
+	 * @type { sap.ui.webc.base.types.CSSSize }
 	 * @name sap.ui.webc.main.ToolbarSpacer.prototype.width
-	 * @defaultvalue ""
+	 * @defaultvalue undefined
 	 */
-	@property({ type: String })
-	width!: string
+	@property({ validator: CSSSize })
+	width?: string;
 
 	get styles() {
 		return this.width ? { width: this.width } : { flex: "auto" };
diff --git a/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts b/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts
@@ -17,7 +17,7 @@ import ComboBoxFilter from "@ui5/webcomponents/dist/types/ComboBoxFilter.js";
 const component = "ui5-combobox";
 
 export default {
-	title: "Main/ComboBox",
+	title: "Main/Combo Box",
 	component: "ComboBox",
 	subcomponents: {
 		ComboBoxItem: "ComboBoxItem",
@@ -54,18 +54,14 @@ export const Basic = Template.bind({});
 Basic.args = {
 	placeholder: "Enter value",
 	default: `
-		<ui5-cb-item text="Item 1"></ui5-cb-item>
-		<ui5-cb-item text="Item 2"></ui5-cb-item>
-		<ui5-cb-item text="Item 3"></ui5-cb-item>
+	<ui5-cb-item text="Austria"></ui5-cb-item>
+	<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+	<ui5-cb-item text="Germany"></ui5-cb-item>
+	<ui5-cb-item text="Italy"></ui5-cb-item>
+	<ui5-cb-item text="Spain"></ui5-cb-item>
 	`,
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-	disabled: true,
-	value: "Disabled",
-};
-
 export const Filters = Template.bind({});
 Filters.args = {
 	placeholder: "Contains Filtering",
@@ -74,30 +70,31 @@ Filters.args = {
 		<ui5-cb-item text="Austria"></ui5-cb-item>
 		<ui5-cb-item text="Bulgaria"></ui5-cb-item>
 		<ui5-cb-item text="Germany"></ui5-cb-item>
-		<ui5-cb-item text="United Kingdom"></ui5-cb-item>
 		<ui5-cb-item text="Kazakhstan"></ui5-cb-item>
+		<ui5-cb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-cb-item>
 	`,
 };
 
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
+export const TwoColumnsLayout = Template.bind({});
+TwoColumnsLayout.args = {
 	placeholder: "Two-column layout",
 	default: `
 		<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
 		<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
 		<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
 		<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
 		<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
+		<ui5-cb-item text="The United Kingdom of Great Britain and Northern Ireland" additional-text="UK"></ui5-cb-item>
 	`,
 };
 
-export const GroupingItems = Template.bind({});
-GroupingItems.args = {
-	placeholder: "ComboBox with grouping of suggestions",
+export const Grouping = Template.bind({});
+Grouping.args = {
+	placeholder: "Grouping of items",
 	default: `
 		<ui5-cb-group-item text="A"></ui5-cb-group-item>
 		<ui5-cb-item text="Argentina"></ui5-cb-item>
-		<ui5-cb-item text="Australia"></ui5-cb-item>
+		<ui5-cb-item text="Australia"></ui5-cb-item>	
 		<ui5-cb-item text="Austria"></ui5-cb-item>	
 		<ui5-cb-group-item text="B"></ui5-cb-group-item>
 		<ui5-cb-item text="Bahrain"></ui5-cb-item>
diff --git a/packages/playground/_stories/main/Input/Input.stories.ts b/packages/playground/_stories/main/Input/Input.stories.ts
diff --git a/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts b/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts
diff --git a/packages/playground/_stories/main/Table/Table.stories.ts b/packages/playground/_stories/main/Table/Table.stories.ts
diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
