Merge remote-tracking branch 'origin/master' into shellbar-styles-cle…

…anup
SAP · Jul 25, 2019 · 3822280 · 3822280
2 parents 54c7dcc + 6af3302
commit 3822280
Show file tree

Hide file tree

Showing 46 changed files with 333 additions and 244 deletions.
diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
@@ -220,8 +220,8 @@ class UI5Element extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		const observedProps = this.getMetadata().getPublicPropsList();
-		return observedProps.map(camelToKebabCase);
+		const observedAttributes = this.getMetadata().getAttributesList();
+		return observedAttributes.map(camelToKebabCase);
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -241,7 +241,7 @@ class UI5Element extends HTMLElement {
 	}
 
 	_updateAttribute(name, newValue) {
-		if (!UI5ElementMetadata.isPublicProperty(name)) {
+		if (!this.constructor.getMetadata().hasAttribute(name)) {
 			return;
 		}
 

diff --git a/packages/base/src/UI5ElementMetadata.js b/packages/base/src/UI5ElementMetadata.js
@@ -10,12 +10,17 @@ class UI5ElementMetadata {
 		return this.metadata.tag;
 	}
 
+	hasAttribute(propName) {
+		const propData = this.getProperties()[propName];
+		return propData.type !== Object && !propData.noAttribute;
+	}
+
 	getPropsList() {
 		return Object.keys(this.getProperties());
 	}
 
-	getPublicPropsList() {
-		return this.getPropsList().filter(UI5ElementMetadata.isPublicProperty);
+	getAttributesList() {
+		return this.getPropsList().filter(this.hasAttribute, this);
 	}
 
 	getSlots() {
@@ -34,10 +39,6 @@ class UI5ElementMetadata {
 		return this.metadata.events || {};
 	}
 
-	static isPublicProperty(prop) {
-		return prop.charAt(0) !== "_";
-	}
-
 	static validatePropertyValue(value, propData) {
 		const isMultiple = propData.multiple;
 		if (isMultiple) {
@@ -54,11 +55,6 @@ class UI5ElementMetadata {
 const validateSingleProperty = (value, propData) => {
 	const propertyType = propData.type;
 
-	// Association handling
-	if (propData.association) {
-		return value;
-	}
-
 	if (propertyType === Boolean) {
 		return typeof value === "boolean" ? value : false;
 	}

diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js
@@ -20,7 +20,7 @@ const metadata = {
 
 		/**
 		 * Defines the color scheme of the <code>ui5-badge</code>.
-		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color> and <code>border-color</code>.
+		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>.
 		 * To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default.
 		 * <br><br>
 		 * <b>Note:</b> color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.

diff --git a/packages/main/src/BusyIndicator.js b/packages/main/src/BusyIndicator.js
@@ -31,7 +31,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
 		/**
 		 * Defines the size of the <code>ui5-busyindicator</code>.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are "Small", "Medium" and "Large"
 		 *
 		 * @type {BusyIndicatorSize}

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -22,7 +22,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-button</code> design.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
 		 * "Negative", and "Transparent".
 		 *

diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js
@@ -76,9 +76,11 @@ const metadata = {
 		},
 		_calendarWidth: {
 			type: String,
+			noAttribute: true,
 		},
 		_calendarHeight: {
 			type: String,
+			noAttribute: true,
 		},
 		formatPattern: {
 			type: String,

diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
@@ -72,7 +72,7 @@ const metadata = {
 
 		/**
 		 * Defines image source URI or built-in icon font URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous options. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
@@ -85,6 +85,7 @@ const metadata = {
 
 		_headerActive: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
@@ -113,7 +114,7 @@ const metadata = {
  * <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
  *
  * <h3>Keyboard handling</h3>
- * In case you enable <code>headerInteractive</cdoe> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
+ * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
  *
  * <h3>ES6 Module Import</h3>
  *

diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
@@ -143,12 +143,12 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * Allows the user to set a binary value, such as true/false or yes/no for an item.
- * <br/><br/>
+ * <br><br>
  * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.
  * If it's checked, an indicator is displayed inside the box.
  * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square
  * box or its label.
- * <br/><br/>
+ * <br><br>
  * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.
  * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.
  *

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -137,6 +137,7 @@ const metadata = {
 
 		_isPickerOpen: {
 			type: Boolean,
+			noAttribute: true,
 		},
 		_popover: {
 			type: Object,
@@ -179,8 +180,10 @@ const metadata = {
  * <h3>Usage</h3>
  *
  * The user can enter a date by:
- * <ul><li>Using the calendar that opens in a popup</li>
- * <li>Typing it in directly in the input field</li></ul>
+ * <ul>
+ * <li>Using the calendar that opens in a popup</li>
+ * <li>Typing it in directly in the input field</li>
+ * </ul>
  * <br><br>
  * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date.
  * When the user directly triggers the calendar display, the actual date is displayed.

diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js
@@ -69,6 +69,7 @@ const metadata = {
 		},
 		_hidden: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
@@ -3,7 +3,7 @@
 <span class="ui5-popup-frame">
 	<span id="{{_id}}-firstfe" tabindex="0"></span>
 	<div style="{{zindex}}" class="ui5-dialog-root-parent {{classes.dialogParent}}">
-		<div tabindex="-1" aria-labelledby="{{headerId}}" role="dialog" class="ui5-popup-root ui5-dialog-root">
+		<div tabindex="-1" aria-labelledby="{{headerId}}" role="dialog" aria-modal="true" class="ui5-popup-root ui5-dialog-root">
 			{{> header}}
 			<section class="ui5-dialog-section">
 				<div class="ui5-popup-content">

diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
@@ -36,7 +36,7 @@ const metadata = {
  * The <code>ui5-dialog</code> component is used to temporarily display some information in a
  * size-limited window in front of the regular app screen.
  * It is used to prompt the user for an action or a confirmation.
- * The code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and
+ * The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and
  * the main screen is dimmed/blocked.
  * The dialog combines concepts known from other technologies where the windows have
  * names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.

diff --git a/packages/main/src/GroupHeaderListItem.js b/packages/main/src/GroupHeaderListItem.js
@@ -17,7 +17,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-li-groupheader</code>.
-		 * <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <br>
+		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
 		 * @slot

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -44,14 +44,14 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-input</code> suggestion items.
-		 * </br></br>
-		 * Example: </br>
-		 * &lt;ui5-input show-suggestions></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li></br>
+		 * <br><br>
+		 * Example: <br>
+		 * &lt;ui5-input show-suggestions><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br>
 		 * &lt;/ui5-input>
 		 * <ui5-input show-suggestions><ui5-li>Item #1</ui5-li><ui5-li>Item #2</ui5-li></ui5-input>
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code>
 		 * property is set to <code>true</code>.
 		 *

diff --git a/packages/main/src/Label.js b/packages/main/src/Label.js
@@ -77,8 +77,6 @@ const metadata = {
  * providing valuable information to the user.
  * Usually it is placed next to a value holder, such as a text field.
  * It informs the user about what data is displayed or expected in the value holder.
- * The <code>ui5-label</code> is associated with its value holder by setting the
- * <code>labelFor</code> association.
  * <br><br>
  * The <code>ui5-label</code> appearance can be influenced by properties,
  * such as <code>required</code> and <code>wrap</code>.

diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -21,7 +21,7 @@ const metadata = {
 		/**
 		 * Defines whether the <code>ui5-link</code> is disabled.
 		 * <br><br>
-		 * <b>Note:</b> When disabled, the <code>ui5-link</code cannot be triggered by the user.
+		 * <b>Note:</b> When disabled, the <code>ui5-link</code> cannot be triggered by the user.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -48,9 +48,11 @@ const metadata = {
 		 * Defines the <code>ui5-link</code> target.
 		 * <br><br>
 		 * <b>Notes:</b>
-		 * <ul><li>Available options are the standard values: <code>_self</code>, <code>_top</code>,
+		 * <ul>
+		 * <li>Available options are the standard values: <code>_self</code>, <code>_top</code>,
 		 * <code>_blank</code>, <code>_parent</code>, and <code>_search</code>.</li>
-		 * <li>This property must only be used when the <code>href</code> property is set.</li></ul>
+		 * <li>This property must only be used when the <code>href</code> property is set.</li>
+		 * </ul>
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -90,6 +92,7 @@ const metadata = {
 
 		_rel: {
 			type: String,
+			noAttribute: true,
 		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Link.prototype */ {

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -30,7 +30,7 @@ const metadata = {
 		/**
 		 * Defines the visual indication and behavior of the list items.
 		 * Available options are <code>Active</code> (by default) and <code>Inactive</code>.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while with type <code>Inactive</code> - will not.
 		 *
@@ -45,11 +45,13 @@ const metadata = {
 
 		_active: {
 			type: Boolean,
+			noAttribute: true,
 		},
 
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
+			noAttribute: true,
 		},
 	},
 	events: {

diff --git a/packages/main/src/ListItemBase.js b/packages/main/src/ListItemBase.js
@@ -17,11 +17,13 @@ const metadata = {
 
 		_hideBorder: {
 			type: Boolean,
+			noAttribute: true,
 		},
 
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
+			noAttribute: true,
 		},
 	},
 	events: {

diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js
@@ -26,7 +26,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-messagestrip</code> type.
-		 * <br></br>
+		 * <br><br>
 		 * <b>Note:</b> Available options are <code>Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
 		 * and "Warning".
 		 *
@@ -41,10 +41,10 @@ const metadata = {
 
 		/**
 		 * Defines the icon src URI to be displayed as graphical element within the <code>ui5-messagestrip</code>.
-		 * <br></br>
+		 * <br><br>
 		 * <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> type will be added.
 		 * The SAP-icons font provides numerous options.
-		 * <br></br>
+		 * <br><br>
 		 * Example:
 		 * <br>
 		 * <pre>ui5-messagestrip icon="sap-icon://palette"</pre>

diff --git a/packages/main/src/MonthPicker.js b/packages/main/src/MonthPicker.js
@@ -44,6 +44,7 @@ const metadata = {
 		},
 		_hidden: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -23,11 +23,11 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the <code>ui5-multi-combobox</code> items.
-		 * </br></br>
-		 * Example: </br>
-		 * &lt;ui5-multi-combobox></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li></br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li></br>
+		 * <br><br>
+		 * Example: <br>
+		 * &lt;ui5-multi-combobox><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br>
 		 * &lt;/ui5-multi-combobox>
 		 * <br> <br>
 		 *
@@ -121,8 +121,14 @@ const metadata = {
 			type: Boolean,
 		},
 
-		_filteredItems: { type: Object },
-		_iconPressed: { type: Boolean },
+		_filteredItems: {
+			type: Object,
+		},
+
+		_iconPressed: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
@@ -180,14 +186,14 @@ const metadata = {
  *
  * The <code>ui5-multi-combobox</code> provides advanced keyboard handling.
  *
- * <h4>Picker</h3>
+ * <h2>Picker</h2>
  * If the <code>ui5-multi-combobox</code> is focused,
  * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
  * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
  * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
  * <br>
  *
- * <h4>Tokens</h2>
+ * <h2>Tokens</h2>
  * <ul>
  * <li> Left/Right arrow keys - moves the focus selection form the currently focues token to the previous/next one (if available). </li>
  * <li> Delete -  deletes the token and focuses the previous token. </li>

diff --git a/packages/main/src/Option.js b/packages/main/src/Option.js
@@ -19,7 +19,7 @@ const metadata = {
 
 		/**
 		 * Defines the <code>icon</code> source URI.
-		 * </br></br>
+		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.

diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
@@ -108,9 +108,11 @@ const metadata = {
 		},
 		_contentExpanded: {
 			type: Boolean,
+			noAttribute: true,
 		},
 		_animationRunning: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	events: {