From 1119212c92952403a9f0902f0aaac40d3ce3b291 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Tue, 5 Nov 2019 21:11:44 +0200 Subject: [PATCH 01/36] feat(ui5-productswitch): initial implementation FIXES: #857 --- packages/main/bundle.esm.js | 2 + packages/main/src/ProductSwitch.hbs | 3 + packages/main/src/ProductSwitch.js | 102 ++++++++++ packages/main/src/ProductSwitchItem.hbs | 24 +++ packages/main/src/ProductSwitchItem.js | 177 ++++++++++++++++++ packages/main/src/themes/ProductSwitch.css | 31 +++ .../main/src/themes/ProductSwitchItem.css | 127 +++++++++++++ .../themes/base/ProductSwitch-parameters.css | 0 .../base/ProductSwitchItem-parameters.css | 15 ++ .../ProductSwitchItem-parameters.css | 9 + .../themes/sap_belize/parameters-bundle.css | 1 + .../ProductSwitchItem-parameters.css | 12 ++ .../sap_belize_hcb/parameters-bundle.css | 1 + .../ProductSwitchItem-parameters.css | 1 + .../themes/sap_fiori_3/parameters-bundle.css | 1 + packages/main/test/pages/ProductSwitch.html | 69 +++++++ .../main/test/pages/ProductSwitchItem.html | 33 ++++ .../test/samples/ProductSwitch.sample.html | 126 +++++++++++++ .../main/test/specs/ProductSwitch.spec.js | 28 +++ .../main/test/specs/ProductSwitchItem.spec.js | 14 ++ 20 files changed, 776 insertions(+) create mode 100644 packages/main/src/ProductSwitch.hbs create mode 100644 packages/main/src/ProductSwitch.js create mode 100644 packages/main/src/ProductSwitchItem.hbs create mode 100644 packages/main/src/ProductSwitchItem.js create mode 100644 packages/main/src/themes/ProductSwitch.css create mode 100644 packages/main/src/themes/ProductSwitchItem.css create mode 100644 packages/main/src/themes/base/ProductSwitch-parameters.css create mode 100644 packages/main/src/themes/base/ProductSwitchItem-parameters.css create mode 100644 packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css create mode 100644 packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css create mode 100644 packages/main/test/pages/ProductSwitch.html create mode 100644 packages/main/test/pages/ProductSwitchItem.html create mode 100644 packages/main/test/samples/ProductSwitch.sample.html create mode 100644 packages/main/test/specs/ProductSwitch.spec.js create mode 100644 packages/main/test/specs/ProductSwitchItem.spec.js diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 19fc4e293189..3f5442c892f9 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -31,6 +31,8 @@ import Panel from "./dist/Panel.js"; import RadioButton from "./dist/RadioButton.js"; import Select from "./dist/Select.js"; import Option from "./dist/Option.js"; +import ProductSwitch from "./dist/ProductSwitch.js"; +import ProductSwitchItem from "./dist/ProductSwitchItem.js"; import ShellBar from "./dist/ShellBar.js"; import ShellBarItem from "./dist/ShellBarItem.js"; import Switch from "./dist/Switch.js"; diff --git a/packages/main/src/ProductSwitch.hbs b/packages/main/src/ProductSwitch.hbs new file mode 100644 index 000000000000..b77d667d823b --- /dev/null +++ b/packages/main/src/ProductSwitch.hbs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/packages/main/src/ProductSwitch.js b/packages/main/src/ProductSwitch.js new file mode 100644 index 000000000000..f3f277a08608 --- /dev/null +++ b/packages/main/src/ProductSwitch.js @@ -0,0 +1,102 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js"; + +// Styles +import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js"; + + +const metadata = { + tag: "ui5-productswitch", + properties: { + /** + * Indicates how much columns should be displayed. + * @private + */ + desktopColumns: { + type: Integer, + }, + }, + slots: { + /** + * Defines the items of the ui5-productswitch. + * + * @type {HTMLElement[]} + * @slot + * @public + */ + "default": { + propertyName: "items", + type: HTMLElement, + }, + }, + events: { + /** + * Fired when an item is activated. + * + * @event + * @param {HTMLElement} item the clicked item. + * @public + */ + itemClick: { + detail: { + item: { type: HTMLElement }, + }, + }, + }, +}; + +class ProductSwitch extends UI5Element { + constructor() { + super(); + this.initItemNavigation(); + + this.addEventListener("ui5-_press", this._onItemPress.bind(this)); + this.addEventListener("ui5-_focused", this._onItemFocused.bind(this)); + } + + initItemNavigation() { + this._itemNavigation = new ItemNavigation(this); + this._itemNavigation.getItemsCallback = () => this.items; + } + + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get styles() { + return ProductSwitchCss; + } + + static get template() { + return ProductSwitchTemplate; + } + + static async define(...params) { + super.define(...params); + } + + onBeforeRendering() { + this.desktopColumns = this.items.length > 6 ? 4 : 3; + } + + _onItemPress(event) { + this.fireEvent("itemClick", { item: event.detail.item }); + } + + _onItemFocused(event) { + const target = event.target; + + this._itemNavigation.update(target); + } +} + +ProductSwitch.define(); + +export default ProductSwitch; diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs new file mode 100644 index 000000000000..0b3c4c412b97 --- /dev/null +++ b/packages/main/src/ProductSwitchItem.hbs @@ -0,0 +1,24 @@ +
+ {{#if icon}} + + {{/if}} +
+ {{#if maintitle}} +
{{maintitle}}
+ {{/if}} + {{#if subtitle}} +
{{subtitle}}
+ {{/if}} +
+
\ No newline at end of file diff --git a/packages/main/src/ProductSwitchItem.js b/packages/main/src/ProductSwitchItem.js new file mode 100644 index 000000000000..90f19598722a --- /dev/null +++ b/packages/main/src/ProductSwitchItem.js @@ -0,0 +1,177 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; +import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js"; + +// Styles +import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; + + +const metadata = { + tag: "ui5-productswitchitem", + properties: { + /** + * Defines the title of the ui5-productswitchitem. + * @type {string} + * @defaultvalue "" + * @public + */ + maintitle: { + type: String, + }, + /** + * Defines the subtitle of the ui5-productswitchitem. + * @type {string} + * @defaultvalue "" + * @public + */ + subtitle: { + type: String, + }, + /** + * Defines the icon to be displayed as graphical element within the ui5-productswitchitem. + * The SAP-icons font provides numerous options. + *

+ * Example: + *
+ *
ui5-productswitchitem icon="sap-icon://palette"
+ * + * See all the available icons in the Icon Explorer. + * + * @type {string} + * @defaultvalue "" + * @public + */ + icon: { + type: String, + }, + /** + * Specifies a target where the targetSrc content must be open. + * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. + * @type {string} + * @defaultvalue "" + * @public + */ + target: { + type: String, + }, + /** + *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. + * @type {string} + * @defaultvalue "" + * @public + */ + targetSrc: { + type: String, + }, + /** + * Used to switch the active state (pressed or not) of the ui5-productswitchitem. + * @private + */ + active: { + type: Boolean, + }, + /** + * Indicates if the elements is on focus + * @private + */ + focused: { + type: Boolean, + }, + _tabIndex: { + type: String, + defaultValue: "-1", + noAttribute: true, + }, + }, + slots: { + // + }, + events: { + _focused: {}, + }, +}; + +class ProductSwitchItem extends UI5Element { + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get styles() { + return ProductSwitchItemCss; + } + + static get template() { + return ProductSwitchItemTemplate; + } + + static async define(...params) { + super.define(...params); + } + + onEnterDOM() { + document.addEventListener("mouseup", this._deactivate.bind(this)); + } + + onExitDOM() { + document.removeEventListener("mouseup", this._deactivate.bind(this)); + } + + _deactivate() { + if (this.active) { + this.active = false; + } + } + + _onmousedown() { + this.active = true; + this._fireItemPress(); + } + + _onkeydown(event) { + if (isSpace(event) || isEnter(event)) { + this.active = true; + } + + if (isSpace(event)) { + event.preventDefault(); + } + + if (isEnter(event)) { + this._fireItemPress(); + } + } + + _onkeyup(event) { + if (isSpace(event) || isEnter(event)) { + this.active = false; + } + + if (isSpace(event)) { + this._fireItemPress(); + } + } + + _onfocusout() { + this.active = false; + this.focused = false; + } + + _onfocusin(event) { + this.focused = true; + + this.fireEvent("_focused", event); + } + + _fireItemPress() { + this.fireEvent("_press", { item: this }); + } +} + +ProductSwitchItem.define(); + +export default ProductSwitchItem; diff --git a/packages/main/src/themes/ProductSwitch.css b/packages/main/src/themes/ProductSwitch.css new file mode 100644 index 000000000000..3f21c8df39c7 --- /dev/null +++ b/packages/main/src/themes/ProductSwitch.css @@ -0,0 +1,31 @@ +:host { + font-family: var(--sapUiFontFamily); + font-size: var(--sapMFontMediumSize); +} + +.ui5-productswitch-root { + display: flex; + flex-wrap: wrap; + width: 778px; + padding: 1.25rem 0.75rem; + box-sizing: border-box; +} + +:host([desktop-columns="3"]) .ui5-productswitch-root { + width: 588px; +} + +@media only screen and (max-width: 900px) { + .ui5-productswitch-root { + width: 588px; + } +} + +@media only screen and (max-width: 600px) { + .ui5-productswitch-root, + :host([desktop-columns="3"]) .ui5-productswitch-root { + flex-direction: column; + padding: 0; + width: 100%; + } +} \ No newline at end of file diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css new file mode 100644 index 000000000000..a3c3b7759599 --- /dev/null +++ b/packages/main/src/themes/ProductSwitchItem.css @@ -0,0 +1,127 @@ +:host { + font-family: var(--sapUiFontFamily); + font-size: var(--sapMFontMediumSize); + margin: 0.25rem; +} + +:host([icon]) .ui5-productswitchitem-root { + padding-top: 0.5rem; +} + +.ui5-productswitchitem-root { + background:var(--_ui5_product-switch-item_background_color); + width:var(--_ui5_product-switch-item_width); + height:var(--_ui5_product-switch-item_height); + padding: 0.5rem; + padding-top: 4rem; + border-radius: 0.25rem; + display: flex; + flex-direction: column; + align-items: center; + box-sizing: border-box; + cursor: pointer; + user-select: none; + -ms-user-select: none; +} + +.ui5-productswitchitem-root:hover { + background:var(--_ui5_product-switch-item_hover_background_color); +} + +:host([active]) .ui5-productswitchitem-root { + background:var(--_ui5_product-switch-item_active_background_color); +} + +:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-icon, +:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle, +:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { + color:var(--_ui5_product-switch-item_active_color); +} + +:host([focused]) .ui5-productswitchitem-root { + outline:var(--_ui5_product-switch-item_outline); + outline-offset:var(--_ui5_product-switch-item_outline_offset) +} + +:host([active][focused]) .ui5-productswitchitem-root { + outline-color: #ffffff; +} + +.ui5-productswitchitem-root .ui5-productswitchitem-icon { + width: 3rem; + height: 3rem; + padding: 0.75rem; + margin-bottom: 0.5rem; + box-sizing: border-box; + color:var(--_ui5_product-switch-item_icon_color); + pointer-events: none; +} + +.ui5-productswitchitem-root .ui5-productswitchitem-text-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle, +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle { + line-height: 1.25rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 10.25rem; + text-align: center; + pointer-events: none; +} + +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle { + font-size:var(--_ui5_product-switch-item_title_size); + color:var(--_ui5_product-switch-item_title_color); +} + +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { + font-size:var(--_ui5_product-switch-item_subtitle_size); + color:var(--_ui5_product-switch-item_subtitle_color); +} + + +@media only screen and (max-width: 600px) { + :host { + margin: 0; + width: 100%; + } + + .ui5-productswitchitem-root { + flex-direction: row; + padding: 0 1rem 0 1.875rem; + width: 100%; + max-width: 600px; + height: 5rem; + border: 0; + border-radius: 0; + } + + :host([icon]) .ui5-productswitchitem-root { + padding: 0 1rem; + } + + .ui5-productswitchitem-root .ui5-productswitchitem-icon { + padding: 0.875rem; + margin: 0 0.75rem 0 0; + } + + .ui5-productswitchitem-root .ui5-productswitchitem-text-content { + max-width: 100%; + align-items: flex-start; + } + + :host([icon]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content { + max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/ + } + + .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle, + .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { + max-width: 100%; + text-align: left; + } +} \ No newline at end of file diff --git a/packages/main/src/themes/base/ProductSwitch-parameters.css b/packages/main/src/themes/base/ProductSwitch-parameters.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css new file mode 100644 index 000000000000..872a3c8dc240 --- /dev/null +++ b/packages/main/src/themes/base/ProductSwitchItem-parameters.css @@ -0,0 +1,15 @@ +:root { + --_ui5_product-switch-item_width: 11.25rem; + --_ui5_product-switch-item_height: 7rem; + --_ui5_product-switch-item_background_color: #ffffff; + --_ui5_product-switch-item_hover_background_color: #f5f5f5; + --_ui5_product-switch-item_active_background_color: #0854a0; + --_ui5_product-switch-item_active_color: #ffffff; + --_ui5_product-switch-item_icon_color: #0854a0; + --_ui5_product-switch-item_title_color: #32363a; + --_ui5_product-switch-item_title_size: .875rem; + --_ui5_product-switch-item_subtitle_color: #6a6d70; + --_ui5_product-switch-item_subtitle_size: .75rem; + --_ui5_product-switch-item_outline: .0625rem #000000 dotted; + --_ui5_product-switch-item_outline_offset: -.1875rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css new file mode 100644 index 000000000000..e0c2d29b60ab --- /dev/null +++ b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css @@ -0,0 +1,9 @@ +@import "../base/ProductSwitchItem-parameters.css"; + +:root { + --_ui5_product-switch-item_hover_background_color: #f0f0f0; + --_ui5_product-switch-item_active_background_color: #427cac; + --_ui5_product-switch-item_icon_color: #346187; + --_ui5_product-switch-item_title_color: #333333; + --_ui5_product-switch-item_subtitle_color: #666666; +} \ 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 b1265dafdbdb..66b5c0355de7 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -19,6 +19,7 @@ @import "./MonthPicker-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; +@import "./ProductSwitchItem-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css new file mode 100644 index 000000000000..711079b64a15 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css @@ -0,0 +1,12 @@ +@import "../base/ProductSwitchItem-parameters.css"; + +:root { + --_ui5_product-switch-item_background_color: #000000; + --_ui5_product-switch-item_hover_background_color: #7a5100; + --_ui5_product-switch-item_active_background_color: #7a5100; + --_ui5_product-switch-item_active_color: #ffffff; + --_ui5_product-switch-item_icon_color: #ffffff; + --_ui5_product-switch-item_title_color: #ffffff; + --_ui5_product-switch-item_subtitle_color: #ffffff; + --_ui5_product-switch-item_outline: .125rem #ffffff dotted; +} \ 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 6af402580335..ff2891b0ce86 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 "./Popover-parameters.css"; +@import "./ProductSwitchItem-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css new file mode 100644 index 000000000000..b86ce8c0537a --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css @@ -0,0 +1 @@ +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file 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 cfc9f0825074..77de429838d9 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 "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; +@import "./ProductSwitchItem-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/test/pages/ProductSwitch.html b/packages/main/test/pages/ProductSwitch.html new file mode 100644 index 000000000000..701fd4ed3bbf --- /dev/null +++ b/packages/main/test/pages/ProductSwitch.html @@ -0,0 +1,69 @@ + + + + + + + + + ProductSwitch + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/main/test/pages/ProductSwitchItem.html new file mode 100644 index 000000000000..b1956a22c4dc --- /dev/null +++ b/packages/main/test/pages/ProductSwitchItem.html @@ -0,0 +1,33 @@ + + + + + + + + ProductSwitchItem + + + + + + + + + + + + + + + + diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html new file mode 100644 index 000000000000..69f80dda0a82 --- /dev/null +++ b/packages/main/test/samples/ProductSwitch.sample.html @@ -0,0 +1,126 @@ + + + + + <ui5-productswitch> + + + + + + + + + + + + + + + + + + + + + + +
+
ProductSwitch
+
<ui5-productswitch>
+
+ +
+

Basic ProductSwitch

+
+ + + + + + + + + + + + + + + + + + + + + + +
+

+<ui5-shellbar
+	id="shellbar"
+	primary-title="Corporate Portal"
+	secondary-title="secondary title"
+	logo="../../images/sap-logo-svg.svg"
+	show-product-switch
+	show-co-pilot>
+</ui5-shellbar>
+<ui5-popover id="productswitch-popover" placementType="Bottom">
+	<ui5-productswitch>
+		<ui5-productswitchitem maintitle="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
+		<ui5-productswitchitem maintitle="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
+	</ui5-productswitch>
+</ui5-popover>
+
+<script>
+	var shellBar = document.getElementById("shellbar");
+	var popover = document.getElementById("productswitch-popover");
+
+	shellbar.addEventListener("productSwitchClick", function(event) {
+		popover.openBy(event.detail.targetRef)
+	});
+</script>
+		
+
+ + + + + + diff --git a/packages/main/test/specs/ProductSwitch.spec.js b/packages/main/test/specs/ProductSwitch.spec.js new file mode 100644 index 000000000000..8692b9d9e834 --- /dev/null +++ b/packages/main/test/specs/ProductSwitch.spec.js @@ -0,0 +1,28 @@ +const assert = require("assert"); + +describe("ProductSwitch general interaction", () => { + browser.url("http://localhost:8080/test-resources/pages/ProductSwitch.html"); + + it("tests event itemClick", () => { + const productSwitch = browser.$("#productSwitchFourColumn"); + const input = browser.$("#eventTest"); + + productSwitch.click(); + productSwitch.keys("Space"); + productSwitch.keys("Enter"); + + assert.strictEqual(input.getProperty("value"), "3", "click should be called 3 times"); + }); + + it("tests desktopColumns attribute", () => { + const productSwitchFourColumn = browser.$("#productSwitchFourColumn"); + const productSwitchThreeColumn = browser.$("#productSwitchThreeColumn"); + const threeColumnPSItemCount = productSwitchThreeColumn.getProperty("items").length; + const fourColumnPSItemCount = productSwitchFourColumn.getProperty("items").length; + const fourColumnPSAttrValue = parseInt(productSwitchFourColumn.getAttribute("desktop-columns")); + const threeColumnPSAttrValue = parseInt(productSwitchThreeColumn.getAttribute("desktop-columns")); + + assert.strictEqual(fourColumnPSItemCount > 6, fourColumnPSAttrValue === 4, "product switch should have 4 columns."); + assert.strictEqual(threeColumnPSItemCount <= 6, threeColumnPSAttrValue === 3, "product switch should have 3 columns."); + }); +}); diff --git a/packages/main/test/specs/ProductSwitchItem.spec.js b/packages/main/test/specs/ProductSwitchItem.spec.js new file mode 100644 index 000000000000..c1116f638b39 --- /dev/null +++ b/packages/main/test/specs/ProductSwitchItem.spec.js @@ -0,0 +1,14 @@ +const assert = require("assert"); + +describe("ProductSwitchItem general interaction", () => { + browser.url("http://localhost:8080/test-resources/pages/ProductSwitchItem.html"); + + it("tests rendering", () => { + const productSwitchItem = browser.$("#productSwitchItem"); + + assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-icon"), "Icon is rendered."); + assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-maintitle"), "Title is rendered."); + assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-subtitle"), "SubTitle is rendered."); + }); +}); + \ No newline at end of file From 6c175d99d6e800f930c76912005e09f1f1eb1c27 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 6 Nov 2019 16:07:34 +0200 Subject: [PATCH 02/36] feat(ui5-productswitch): initial implementation fixes FIXES: #857 --- packages/main/src/ProductSwitch.hbs | 2 +- packages/main/src/ProductSwitch.js | 1 - packages/main/src/ProductSwitchItem.hbs | 4 +- packages/main/src/ProductSwitchItem.js | 21 +---- packages/main/src/themes/ProductSwitch.css | 7 +- .../main/src/themes/ProductSwitchItem.css | 83 ++++++++++--------- .../base/ProductSwitchItem-parameters.css | 26 +++--- .../ProductSwitchItem-parameters.css | 10 +-- .../ProductSwitchItem-parameters.css | 16 ++-- packages/main/test/pages/ProductSwitch.html | 38 ++++----- .../main/test/pages/ProductSwitchItem.html | 2 +- .../test/samples/ProductSwitch.sample.html | 62 +++++++------- .../main/test/specs/ProductSwitchItem.spec.js | 5 +- 13 files changed, 130 insertions(+), 147 deletions(-) diff --git a/packages/main/src/ProductSwitch.hbs b/packages/main/src/ProductSwitch.hbs index b77d667d823b..8e085526c69b 100644 --- a/packages/main/src/ProductSwitch.hbs +++ b/packages/main/src/ProductSwitch.hbs @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/packages/main/src/ProductSwitch.js b/packages/main/src/ProductSwitch.js index f3f277a08608..90eba0c95e71 100644 --- a/packages/main/src/ProductSwitch.js +++ b/packages/main/src/ProductSwitch.js @@ -53,7 +53,6 @@ class ProductSwitch extends UI5Element { super(); this.initItemNavigation(); - this.addEventListener("ui5-_press", this._onItemPress.bind(this)); this.addEventListener("ui5-_focused", this._onItemFocused.bind(this)); } diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs index 0b3c4c412b97..e4e588b7633c 100644 --- a/packages/main/src/ProductSwitchItem.hbs +++ b/packages/main/src/ProductSwitchItem.hbs @@ -14,8 +14,8 @@ > {{/if}}
- {{#if maintitle}} -
{{maintitle}}
+ {{#if primaryTitle}} +
{{primaryTitle}}
{{/if}} {{#if subtitle}}
{{subtitle}}
diff --git a/packages/main/src/ProductSwitchItem.js b/packages/main/src/ProductSwitchItem.js index 90f19598722a..3a112b757b54 100644 --- a/packages/main/src/ProductSwitchItem.js +++ b/packages/main/src/ProductSwitchItem.js @@ -16,7 +16,7 @@ const metadata = { * @defaultvalue "" * @public */ - maintitle: { + primaryTitle: { type: String, }, /** @@ -45,25 +45,6 @@ const metadata = { icon: { type: String, }, - /** - * Specifies a target where the targetSrc content must be open. - * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. - * @type {string} - * @defaultvalue "" - * @public - */ - target: { - type: String, - }, - /** - *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. - * @type {string} - * @defaultvalue "" - * @public - */ - targetSrc: { - type: String, - }, /** * Used to switch the active state (pressed or not) of the ui5-productswitchitem. * @private diff --git a/packages/main/src/themes/ProductSwitch.css b/packages/main/src/themes/ProductSwitch.css index 3f21c8df39c7..286ae4757ecd 100644 --- a/packages/main/src/themes/ProductSwitch.css +++ b/packages/main/src/themes/ProductSwitch.css @@ -6,18 +6,17 @@ .ui5-productswitch-root { display: flex; flex-wrap: wrap; - width: 778px; + width: 752px; /* 4 * item size */ padding: 1.25rem 0.75rem; - box-sizing: border-box; } :host([desktop-columns="3"]) .ui5-productswitch-root { - width: 588px; + width: 564px; /* 3 * item size */ } @media only screen and (max-width: 900px) { .ui5-productswitch-root { - width: 588px; + width: 564px; /* 3 * item size */ } } diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css index a3c3b7759599..79d9243bca9b 100644 --- a/packages/main/src/themes/ProductSwitchItem.css +++ b/packages/main/src/themes/ProductSwitchItem.css @@ -2,58 +2,64 @@ font-family: var(--sapUiFontFamily); font-size: var(--sapMFontMediumSize); margin: 0.25rem; -} - -:host([icon]) .ui5-productswitchitem-root { - padding-top: 0.5rem; -} - -.ui5-productswitchitem-root { - background:var(--_ui5_product-switch-item_background_color); - width:var(--_ui5_product-switch-item_width); - height:var(--_ui5_product-switch-item_height); + background:var(--_ui5_product_switch_item_background_color); + width:var(--_ui5_product_switch_item_width); + height:var(--_ui5_product_switch_item_height); padding: 0.5rem; padding-top: 4rem; border-radius: 0.25rem; - display: flex; - flex-direction: column; - align-items: center; box-sizing: border-box; - cursor: pointer; - user-select: none; - -ms-user-select: none; } -.ui5-productswitchitem-root:hover { - background:var(--_ui5_product-switch-item_hover_background_color); +:host([icon]) { + padding-top: 0.5rem; +} + +:host(:hover) { + background:var(--_ui5_product_switch_item_hover_background_color); } -:host([active]) .ui5-productswitchitem-root { - background:var(--_ui5_product-switch-item_active_background_color); +:host([active]) { + background:var(--_ui5_product_switch_item_active_background_color); } :host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-icon, -:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle, +:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title, :host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { - color:var(--_ui5_product-switch-item_active_color); + color:var(--_ui5_product_switch_item_active_color); +} + +:host([focused]) { + outline:var(--_ui5_product_switch_item_outline); + outline-offset:var(--_ui5_product_switch_item_outline_offset) } :host([focused]) .ui5-productswitchitem-root { - outline:var(--_ui5_product-switch-item_outline); - outline-offset:var(--_ui5_product-switch-item_outline_offset) + outline:none; } -:host([active][focused]) .ui5-productswitchitem-root { +:host([active][focused]) { outline-color: #ffffff; } +.ui5-productswitchitem-root { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + user-select: none; + -ms-user-select: none; +} + .ui5-productswitchitem-root .ui5-productswitchitem-icon { width: 3rem; height: 3rem; padding: 0.75rem; margin-bottom: 0.5rem; box-sizing: border-box; - color:var(--_ui5_product-switch-item_icon_color); + color:var(--_ui5_product_switch_item_icon_color); pointer-events: none; } @@ -64,7 +70,7 @@ } .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle, -.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle { +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title { line-height: 1.25rem; white-space: nowrap; overflow: hidden; @@ -74,14 +80,14 @@ pointer-events: none; } -.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle { - font-size:var(--_ui5_product-switch-item_title_size); - color:var(--_ui5_product-switch-item_title_color); +.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title { + font-size:var(--_ui5_product_switch_item_title_size); + color:var(--_ui5_product_switch_item_title_color); } .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { - font-size:var(--_ui5_product-switch-item_subtitle_size); - color:var(--_ui5_product-switch-item_subtitle_color); + font-size:var(--_ui5_product_switch_item_subtitle_size); + color:var(--_ui5_product_switch_item_subtitle_color); } @@ -89,19 +95,18 @@ :host { margin: 0; width: 100%; - } - - .ui5-productswitchitem-root { - flex-direction: row; padding: 0 1rem 0 1.875rem; width: 100%; max-width: 600px; height: 5rem; - border: 0; border-radius: 0; } - :host([icon]) .ui5-productswitchitem-root { + :host .ui5-productswitchitem-root { + flex-direction: row; + } + + :host([icon]) { padding: 0 1rem; } @@ -119,7 +124,7 @@ max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/ } - .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-maintitle, + .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title, .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle { max-width: 100%; text-align: left; diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css index 872a3c8dc240..ae47c99a823d 100644 --- a/packages/main/src/themes/base/ProductSwitchItem-parameters.css +++ b/packages/main/src/themes/base/ProductSwitchItem-parameters.css @@ -1,15 +1,15 @@ :root { - --_ui5_product-switch-item_width: 11.25rem; - --_ui5_product-switch-item_height: 7rem; - --_ui5_product-switch-item_background_color: #ffffff; - --_ui5_product-switch-item_hover_background_color: #f5f5f5; - --_ui5_product-switch-item_active_background_color: #0854a0; - --_ui5_product-switch-item_active_color: #ffffff; - --_ui5_product-switch-item_icon_color: #0854a0; - --_ui5_product-switch-item_title_color: #32363a; - --_ui5_product-switch-item_title_size: .875rem; - --_ui5_product-switch-item_subtitle_color: #6a6d70; - --_ui5_product-switch-item_subtitle_size: .75rem; - --_ui5_product-switch-item_outline: .0625rem #000000 dotted; - --_ui5_product-switch-item_outline_offset: -.1875rem; + --_ui5_product_switch_item_width: 11.25rem; + --_ui5_product_switch_item_height: 7rem; + --_ui5_product_switch_item_background_color: #ffffff; + --_ui5_product_switch_item_hover_background_color: #f5f5f5; + --_ui5_product_switch_item_active_background_color: #0854a0; + --_ui5_product_switch_item_active_color: #ffffff; + --_ui5_product_switch_item_icon_color: #0854a0; + --_ui5_product_switch_item_title_color: #32363a; + --_ui5_product_switch_item_title_size: .875rem; + --_ui5_product_switch_item_subtitle_color: #6a6d70; + --_ui5_product_switch_item_subtitle_size: .75rem; + --_ui5_product_switch_item_outline: .0625rem #000000 dotted; + --_ui5_product_switch_item_outline_offset: -.1875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css index e0c2d29b60ab..673e7a51184b 100644 --- a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css +++ b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css @@ -1,9 +1,9 @@ @import "../base/ProductSwitchItem-parameters.css"; :root { - --_ui5_product-switch-item_hover_background_color: #f0f0f0; - --_ui5_product-switch-item_active_background_color: #427cac; - --_ui5_product-switch-item_icon_color: #346187; - --_ui5_product-switch-item_title_color: #333333; - --_ui5_product-switch-item_subtitle_color: #666666; + --_ui5_product_switch_item_hover_background_color: #f0f0f0; + --_ui5_product_switch_item_active_background_color: #427cac; + --_ui5_product_switch_item_icon_color: #346187; + --_ui5_product_switch_item_title_color: #333333; + --_ui5_product_switch_item_subtitle_color: #666666; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css index 711079b64a15..ab6ff049a885 100644 --- a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css @@ -1,12 +1,12 @@ @import "../base/ProductSwitchItem-parameters.css"; :root { - --_ui5_product-switch-item_background_color: #000000; - --_ui5_product-switch-item_hover_background_color: #7a5100; - --_ui5_product-switch-item_active_background_color: #7a5100; - --_ui5_product-switch-item_active_color: #ffffff; - --_ui5_product-switch-item_icon_color: #ffffff; - --_ui5_product-switch-item_title_color: #ffffff; - --_ui5_product-switch-item_subtitle_color: #ffffff; - --_ui5_product-switch-item_outline: .125rem #ffffff dotted; + --_ui5_product_switch_item_background_color: #000000; + --_ui5_product_switch_item_hover_background_color: #7a5100; + --_ui5_product_switch_item_active_background_color: #7a5100; + --_ui5_product_switch_item_active_color: #ffffff; + --_ui5_product_switch_item_icon_color: #ffffff; + --_ui5_product_switch_item_title_color: #ffffff; + --_ui5_product_switch_item_subtitle_color: #ffffff; + --_ui5_product_switch_item_outline: .125rem #ffffff dotted; } \ No newline at end of file diff --git a/packages/main/test/pages/ProductSwitch.html b/packages/main/test/pages/ProductSwitch.html index 701fd4ed3bbf..c45c838ae2cd 100644 --- a/packages/main/test/pages/ProductSwitch.html +++ b/packages/main/test/pages/ProductSwitch.html @@ -29,27 +29,27 @@ - - - - + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -59,7 +59,7 @@ var oInput = document.getElementById("eventTest"); var pressCount = 0; - oProductSwitch.addEventListener("ui5-itemClick", function (oEvent) { + oProductSwitch.addEventListener("itemClick", function (oEvent) { pressCount += 1; oInput.value = pressCount; }); diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/main/test/pages/ProductSwitchItem.html index b1956a22c4dc..d29901916bc9 100644 --- a/packages/main/test/pages/ProductSwitchItem.html +++ b/packages/main/test/pages/ProductSwitchItem.html @@ -27,7 +27,7 @@ - + diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html index 69f80dda0a82..c5cf58820c31 100644 --- a/packages/main/test/samples/ProductSwitch.sample.html +++ b/packages/main/test/samples/ProductSwitch.sample.html @@ -50,22 +50,22 @@

Basic ProductSwitch

show-product-switch show-co-pilot> - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -79,7 +79,7 @@

Basic ProductSwitch


-<ui5-shellbar
+	<ui5-shellbar
 	id="shellbar"
 	primary-title="Corporate Portal"
 	secondary-title="secondary title"
@@ -87,22 +87,22 @@ <h3>Basic ProductSwitch</h3>
 	show-product-switch
 	show-co-pilot>
 </ui5-shellbar>
-<ui5-popover id="productswitch-popover" placementType="Bottom">
+<ui5-popover id="productswitch-popover" placement-type="Bottom">
 	<ui5-productswitch>
-		<ui5-productswitchitem maintitle="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
 	</ui5-productswitch>
 </ui5-popover>
 
diff --git a/packages/main/test/specs/ProductSwitchItem.spec.js b/packages/main/test/specs/ProductSwitchItem.spec.js
index c1116f638b39..b5a1ee4cac3e 100644
--- a/packages/main/test/specs/ProductSwitchItem.spec.js
+++ b/packages/main/test/specs/ProductSwitchItem.spec.js
@@ -7,8 +7,7 @@ describe("ProductSwitchItem general interaction", () => {
 		const productSwitchItem = browser.$("#productSwitchItem");
 
 		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-icon"), "Icon is rendered.");
-		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-maintitle"), "Title is rendered.");
+		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-primary-title"), "Title is rendered.");
 		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-subtitle"), "SubTitle is rendered.");
 	});
-});
-	
\ No newline at end of file
+});
\ No newline at end of file

From 0438511af858678e2ae4c70052ab8332aceaeb10 Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Mon, 18 Nov 2019 14:22:57 +0200
Subject: [PATCH 03/36] feat(ui5-productswitch): ui5-button internal usage

---
 packages/base/src/delegate/ItemNavigation.js  |  11 +-
 packages/main/bundle.esm.js                   |   2 -
 packages/main/src/Button.js                   |   4 +
 packages/main/src/ProductSwitch.hbs           |   2 +-
 packages/main/src/ProductSwitch.js            |  50 +++---
 packages/main/src/ProductSwitchItem.hbs       |  37 +++--
 packages/main/src/ProductSwitchItem.js        | 102 +++----------
 packages/main/src/themes/Button.css           |   4 +
 packages/main/src/themes/ProductSwitch.css    |  10 +-
 .../main/src/themes/ProductSwitchItem.css     | 143 ++++++++++--------
 .../base/ProductSwitchItem-parameters.css     |   5 +-
 packages/main/test/pages/ProductSwitch.html   |  50 +++---
 .../main/test/pages/ProductSwitchItem.html    |   2 +-
 .../test/samples/ProductSwitch.sample.html    |  92 +++--------
 .../main/test/specs/ProductSwitch.spec.js     |  11 --
 .../main/test/specs/ProductSwitchItem.spec.js |   6 +-
 16 files changed, 220 insertions(+), 311 deletions(-)

diff --git a/packages/base/src/delegate/ItemNavigation.js b/packages/base/src/delegate/ItemNavigation.js
index b85e8f1bb41d..98f8e700500e 100644
--- a/packages/base/src/delegate/ItemNavigation.js
+++ b/packages/base/src/delegate/ItemNavigation.js
@@ -184,9 +184,16 @@ class ItemNavigation extends EventProvider {
 		}
 
 		const currentItem = items[this.currentIndex];
+		let ref = currentItem;
+		let checked = false;
 
-		if (currentItem instanceof UI5Element) {
-			return currentItem.getFocusDomRef();
+		while (ref instanceof UI5Element) {
+			ref = ref.getFocusDomRef();
+			checked = true;
+		}
+
+		if (checked) {
+			return ref;
 		}
 
 		if (!this.rootWebComponent.getDomRef()) {
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index 205aed40ade7..a697d2737c14 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -33,8 +33,6 @@ import Select from "./dist/Select.js";
 import Option from "./dist/Option.js";
 import ProductSwitch from "./dist/ProductSwitch.js";
 import ProductSwitchItem from "./dist/ProductSwitchItem.js";
-import ShellBar from "./dist/ShellBar.js";
-import ShellBarItem from "./dist/ShellBarItem.js";
 import Switch from "./dist/Switch.js";
 import MessageStrip from "./dist/MessageStrip.js";
 import MultiComboBox from "./dist/MultiComboBox.js";
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index 4a828598213f..4e2132cf8961 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -255,6 +255,10 @@ class Button extends UI5Element {
 		}
 	}
 
+	getFocusDomRef() {
+		return this.shadowRoot.querySelector("button");
+	}
+
 	_onmousedown(event) {
 		event.isMarked = "button";
 		this.active = true;
diff --git a/packages/main/src/ProductSwitch.hbs b/packages/main/src/ProductSwitch.hbs
index 8e085526c69b..154244c781b1 100644
--- a/packages/main/src/ProductSwitch.hbs
+++ b/packages/main/src/ProductSwitch.hbs
@@ -1,3 +1,3 @@
-<div class="ui5-productswitch-root" @ui5-_press={{_onItemPress}}>
+<div class="ui5-product-switch-root" @focusin={{_onfocusin}}>
 	<slot></slot>
 </div>
\ No newline at end of file
diff --git a/packages/main/src/ProductSwitch.js b/packages/main/src/ProductSwitch.js
index 90eba0c95e71..e5e4392a2ed3 100644
--- a/packages/main/src/ProductSwitch.js
+++ b/packages/main/src/ProductSwitch.js
@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
@@ -9,7 +10,7 @@ import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
 
 
 const metadata = {
-	tag: "ui5-productswitch",
+	tag: "ui5-product-switch",
 	properties: {
 		/**
 		 * Indicates how much columns should be displayed.
@@ -21,7 +22,7 @@ const metadata = {
 	},
 	slots: {
 		/**
-		 * Defines the items of the <code>ui5-productswitch</code>.
+		 * Defines the items of the <code>ui5-product-switch</code>.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
@@ -32,32 +33,16 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: {
-		/**
-		 * Fired when an item is activated.
-		 *
-		 * @event
-		 * @param {HTMLElement} item the clicked item.
-		 * @public
-		 */
-		itemClick: {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-	},
 };
 
 class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
 		this.initItemNavigation();
-
-		this.addEventListener("ui5-_focused", this._onItemFocused.bind(this));
 	}
 
 	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
+		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
 		this._itemNavigation.getItemsCallback = () => this.items;
 	}
 
@@ -77,19 +62,36 @@ class ProductSwitch extends UI5Element {
 		return ProductSwitchTemplate;
 	}
 
-	static async define(...params) {
-		super.define(...params);
+	onEnterDOM() {
+		ResizeHandler.register(document.body, this._handleResize.bind(this));
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(document.body, this._handleResize);
 	}
 
+
 	onBeforeRendering() {
 		this.desktopColumns = this.items.length > 6 ? 4 : 3;
 	}
 
-	_onItemPress(event) {
-		this.fireEvent("itemClick", { item: event.detail.item });
+	_handleResize() {
+		if (!this._itemNavigation) {
+			return;
+		}
+
+		const iWidth = document.body.clientWidth;
+
+		if (iWidth <= 600) {
+			this._itemNavigation.rowSize = 1;
+		} else if (iWidth <= 900 || this.items.length <= 6) {
+			this._itemNavigation.rowSize = 3;
+		} else {
+			this._itemNavigation.rowSize = 4;
+		}
 	}
 
-	_onItemFocused(event) {
+	_onfocusin(event) {
 		const target = event.target;
 
 		this._itemNavigation.update(target);
diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs
index e4e588b7633c..9acadf4ef10f 100644
--- a/packages/main/src/ProductSwitchItem.hbs
+++ b/packages/main/src/ProductSwitchItem.hbs
@@ -1,24 +1,31 @@
-<div
-	class="ui5-productswitchitem-root"
-	data-sap-focus-ref
-	@focusout="{{_onfocusout}}"
-	@focusin="{{_onfocusin}}"
-	@mousedown="{{_onmousedown}}"
-	@keydown="{{_onkeydown}}"
-	@keyup="{{_onkeyup}}"
-	tabindex={{_tabIndex}}>
+<ui5-button
+	design="Transparent"
+	class="ui5-product-switch-item-root"
+	?non-focusable={{_check}}>
+	{{#if targetSrc}}
+		<a class="ui5-product-switch-item-wrapper" href="{{targetSrc}}" target="{{target}}" tabindex="-1">
+			{{> item}}
+		</a>
+	{{else}}
+		<div class="ui5-product-switch-item-wrapper">
+			{{> item}}
+		</div>
+	{{/if}}
+</ui5-button>
+
+{{#*inline "item"}}
 	{{#if icon}}
 		<ui5-icon
-			class="ui5-productswitchitem-icon"
+			class="ui5-product-switch-item-icon"
 			src="{{icon}}"
 		></ui5-icon>
 	{{/if}}
-	<div class="ui5-productswitchitem-text-content">
-		{{#if primaryTitle}}
-			<div class="ui5-productswitchitem-primary-title">{{primaryTitle}}</div>
+	<div class="ui5-product-switch-item-text-content">
+		{{#if heading}}
+			<div class="ui5-product-switch-item-heading">{{heading}}</div>
 		{{/if}}
 		{{#if subtitle}}
-			<div class="ui5-productswitchitem-subtitle">{{subtitle}}</div>
+			<div class="ui5-product-switch-item-subtitle">{{subtitle}}</div>
 		{{/if}}
 	</div>
-</div>
\ No newline at end of file
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/ProductSwitchItem.js b/packages/main/src/ProductSwitchItem.js
index 3a112b757b54..793dbf86e62a 100644
--- a/packages/main/src/ProductSwitchItem.js
+++ b/packages/main/src/ProductSwitchItem.js
@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
 
 // Styles
@@ -8,19 +7,19 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
 
 
 const metadata = {
-	tag: "ui5-productswitchitem",
+	tag: "ui5-product-switch-item",
 	properties: {
 		/**
-		  * Defines the title of the <code>ui5-productswitchitem</code>.
+		  * Defines the title of the <code>ui5-product-switch-item</code>.
 		  * @type {string}
 		  * @defaultvalue ""
 		  * @public
 		  */
-		primaryTitle: {
+		heading: {
 			type: String,
 		},
 		/**
-		 * Defines the subtitle of the <code>ui5-productswitchitem</code>.
+		 * Defines the subtitle of the <code>ui5-product-switch-item</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -29,12 +28,12 @@ const metadata = {
 			type: String,
 		},
 		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-productswitchitem</code>.
+		 * Defines the icon to be displayed as graphical element within the <code>ui5-product-switch-item</code>.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
 		 * <br>
-		 * <pre>ui5-productswitchitem icon="sap-icon://palette"</pre>
+		 * <pre>ui5-product-switch-item icon="sap-icon://palette"</pre>
 		 *
 		 * See all the available icons in 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>.
 		 *
@@ -46,18 +45,23 @@ const metadata = {
 			type: String,
 		},
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-productswitchitem</code>.
-		 * @private
+		 * Specifies a target where the targetSrc content must be open.
+		 * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
 		 */
-		active: {
-			type: Boolean,
+		target: {
+			type: String,
 		},
 		/**
-		 * Indicates if the elements is on focus
-		 * @private
+		 *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
 		 */
-		focused: {
-			type: Boolean,
+		targetSrc: {
+			type: String,
 		},
 		_tabIndex: {
 			type: String,
@@ -65,12 +69,6 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: {
-		//
-	},
-	events: {
-		_focused: {},
-	},
 };
 
 class ProductSwitchItem extends UI5Element {
@@ -90,66 +88,8 @@ class ProductSwitchItem extends UI5Element {
 		return ProductSwitchItemTemplate;
 	}
 
-	static async define(...params) {
-		super.define(...params);
-	}
-
-	onEnterDOM() {
-		document.addEventListener("mouseup", this._deactivate.bind(this));
-	}
-
-	onExitDOM() {
-		document.removeEventListener("mouseup", this._deactivate.bind(this));
-	}
-
-	_deactivate() {
-		if (this.active) {
-			this.active = false;
-		}
-	}
-
-	_onmousedown() {
-		this.active = true;
-		this._fireItemPress();
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = true;
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this._fireItemPress();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = false;
-		}
-
-		if (isSpace(event)) {
-			this._fireItemPress();
-		}
-	}
-
-	_onfocusout() {
-		this.active = false;
-		this.focused = false;
-	}
-
-	_onfocusin(event) {
-		this.focused = true;
-
-		this.fireEvent("_focused", event);
-	}
-
-	_fireItemPress() {
-		this.fireEvent("_press", { item: this });
+	get _check() {
+		return this._tabIndex !== "0";
 	}
 }
 
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index f30e28a8d923..27531753094e 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -96,6 +96,8 @@
 .ui5-button-text {
 	outline: none;
 	position: relative;
+	width: 100%;
+	height: 100%;
 }
 
 :host([has-icon]) .ui5-button-text {
@@ -120,6 +122,8 @@ bdi {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
+	width: 100%;
+	height: 100%;
 }
 
 :host([active]:not([disabled])) {
diff --git a/packages/main/src/themes/ProductSwitch.css b/packages/main/src/themes/ProductSwitch.css
index 286ae4757ecd..b7c5bc36653b 100644
--- a/packages/main/src/themes/ProductSwitch.css
+++ b/packages/main/src/themes/ProductSwitch.css
@@ -3,26 +3,26 @@
 	font-size: var(--sapMFontMediumSize);
 }
 
-.ui5-productswitch-root {
+.ui5-product-switch-root {
 	display: flex;
 	flex-wrap: wrap;
 	width: 752px; /* 4 * item size */
 	padding: 1.25rem 0.75rem;
 }
 
-:host([desktop-columns="3"]) .ui5-productswitch-root {
+:host([desktop-columns="3"]) .ui5-product-switch-root {
 	width: 564px; /* 3 * item size */
 }
 
 @media only screen and (max-width: 900px) {
-	.ui5-productswitch-root {
+	.ui5-product-switch-root {
 		width: 564px; /* 3 * item size */
 	}
 }
 
 @media only screen and (max-width: 600px) {
-	.ui5-productswitch-root,
-	:host([desktop-columns="3"]) .ui5-productswitch-root {
+	.ui5-product-switch-root,
+	:host([desktop-columns="3"]) .ui5-product-switch-root {
 		flex-direction: column;
 		padding: 0;
 		width: 100%;
diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css
index 79d9243bca9b..3bfe51aca279 100644
--- a/packages/main/src/themes/ProductSwitchItem.css
+++ b/packages/main/src/themes/ProductSwitchItem.css
@@ -1,132 +1,141 @@
 :host {
-	font-family: var(--sapUiFontFamily);
-	font-size: var(--sapMFontMediumSize);
+	width: var(--_ui5_product_switch_item_width);
+	height: var(--_ui5_product_switch_item_height);
 	margin: 0.25rem;
-	background:var(--_ui5_product_switch_item_background_color);
-	width:var(--_ui5_product_switch_item_width);
-	height:var(--_ui5_product_switch_item_height);
+}
+
+.ui5-product-switch-item-root {
+	width: 100%;
+	height: 100%;
+	border-radius: 0.25rem;
 	padding: 0.5rem;
 	padding-top: 4rem;
-	border-radius: 0.25rem;
-	box-sizing: border-box;
+	user-select: none;
+	-ms-user-select: none;
 }
 
-:host([icon]) {
+:host([icon]) .ui5-product-switch-item-root {
 	padding-top: 0.5rem;
 }
 
-:host(:hover) {
-	background:var(--_ui5_product_switch_item_hover_background_color);
-}
-
-:host([active]) {
-	background:var(--_ui5_product_switch_item_active_background_color);
-}
-
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-icon,
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title,
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-	color:var(--_ui5_product_switch_item_active_color);
-}
-
-:host([focused]) {
-	outline:var(--_ui5_product_switch_item_outline);
-	outline-offset:var(--_ui5_product_switch_item_outline_offset)
-}
-
-:host([focused]) .ui5-productswitchitem-root {
-	outline:none;
-}
-
-:host([active][focused]) {
-	outline-color: #ffffff;
-}
-
-.ui5-productswitchitem-root {
+.ui5-product-switch-item-root .ui5-product-switch-item-wrapper {
 	width: 100%;
 	height: 100%;
-	display: flex;
 	flex-direction: column;
+	display: flex;
 	align-items: center;
-	cursor: pointer;
-	user-select: none;
-	-ms-user-select: none;
+	text-decoration: none;
+	outline: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-icon {
+.ui5-product-switch-item-root .ui5-product-switch-item-icon {
 	width: 3rem;
 	height: 3rem;
 	padding: 0.75rem;
 	margin-bottom: 0.5rem;
 	box-sizing: border-box;
-	color:var(--_ui5_product_switch_item_icon_color);
+	color: var(--_ui5_product_switch_item_icon_color);
 	pointer-events: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content {
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
+	flex-direction: column;
+	max-width: 10.25rem;
+	height: 2.5rem;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle,
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title {
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading,
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
 	line-height: 1.25rem;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	max-width: 10.25rem;
+	max-width: 100%;
 	text-align: center;
 	pointer-events: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title {
-	font-size:var(--_ui5_product_switch_item_title_size);
-	color:var(--_ui5_product_switch_item_title_color);
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading {
+	font-size: var(--_ui5_product_switch_item_title_size);
+	color: var(--_ui5_product_switch_item_title_color);
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-	font-size:var(--_ui5_product_switch_item_subtitle_size);
-	color:var(--_ui5_product_switch_item_subtitle_color);
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	font-size: var(--_ui5_product_switch_item_subtitle_size);
+	color: var(--_ui5_product_switch_item_subtitle_color);
 }
 
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-icon,
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-heading,
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	color: var(--_ui5_product_switch_item_active_color);
+}
+
+.ui5-product-switch-item-root:not([active]):hover {
+	background: var(--_ui5_product_switch_item_hover_background_color);
+	border-color: transparent;
+}
 
 @media only screen and (max-width: 600px) {
 	:host {
 		margin: 0;
 		width: 100%;
-		padding: 0 1rem 0 1.875rem;
 		width: 100%;
 		max-width: 600px;
 		height: 5rem;
+	}
+
+	.ui5-product-switch-item-root {
+		width: 100%;
+		height: 100%;
 		border-radius: 0;
+		padding: 0 1.25rem;
 	}
 
-	:host .ui5-productswitchitem-root {
-		flex-direction: row;
+	:host([icon]) .ui5-product-switch-item-root {
+		padding-left: 0.4375rem;
+		padding-top: 0;
 	}
 
-	:host([icon]) {
-		padding: 0 1rem;
+	.ui5-product-switch-item-root .ui5-product-switch-item-wrapper {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-icon {
+	.ui5-product-switch-item-root .ui5-product-switch-item-icon {
 		padding: 0.875rem;
+		color: var(--_ui5_product_switch_item_mobile_icon_color);
 		margin: 0 0.75rem 0 0;
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content {
-		max-width: 100%;
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 		align-items: flex-start;
+		max-width: 100%;
+		height: auto;
 	}
 
-	:host([icon]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content {
-		max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/
+	:host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+		max-width: calc(100% - 3.75rem);
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title,
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-		max-width: 100%;
-		text-align: left;
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+		font-size: var(--_ui5_product_switch_item_mobile_subtitle_size);
+		padding-top: 0.75rem;
 	}
+}
+/* IE SPECIFIC */
+.ui5-product-switch-item-root[design="Transparent"]:not([active]):hover {
+	border-color: transparent;
+}
+
+ui5-product-switch-item ui5-button[focused] {
+	outline: var(--_ui5_product_switch_item_outline);
+}
+
+ui5-product-switch-item ui5-button[focused] .ui5-button-root::after {
+	display: none;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css
index ae47c99a823d..677cc42a963f 100644
--- a/packages/main/src/themes/base/ProductSwitchItem-parameters.css
+++ b/packages/main/src/themes/base/ProductSwitchItem-parameters.css
@@ -1,15 +1,14 @@
 :root {
 	--_ui5_product_switch_item_width: 11.25rem;
 	--_ui5_product_switch_item_height: 7rem;
-	--_ui5_product_switch_item_background_color: #ffffff;
 	--_ui5_product_switch_item_hover_background_color: #f5f5f5;
-	--_ui5_product_switch_item_active_background_color: #0854a0;
 	--_ui5_product_switch_item_active_color: #ffffff;
 	--_ui5_product_switch_item_icon_color: #0854a0;
+	--_ui5_product_switch_item_mobile_icon_color: #6a6d70;
 	--_ui5_product_switch_item_title_color: #32363a;
 	--_ui5_product_switch_item_title_size: .875rem;
 	--_ui5_product_switch_item_subtitle_color: #6a6d70;
 	--_ui5_product_switch_item_subtitle_size: .75rem;
+	--_ui5_product_switch_item_mobile_subtitle_size: .875rem;
 	--_ui5_product_switch_item_outline: .0625rem #000000 dotted;
-	--_ui5_product_switch_item_outline_offset: -.1875rem;
 }
\ No newline at end of file
diff --git a/packages/main/test/pages/ProductSwitch.html b/packages/main/test/pages/ProductSwitch.html
index c45c838ae2cd..e1cfdd2d22dd 100644
--- a/packages/main/test/pages/ProductSwitch.html
+++ b/packages/main/test/pages/ProductSwitch.html
@@ -28,38 +28,38 @@
 </head>
 
 <body>
-	<ui5-productswitch id="productSwitchThreeColumn">
-		<ui5-productswitchitem id="firstItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-	</ui5-productswitch>
+	<ui5-product-switch id="productSwitchThreeColumn">
+		<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+	</ui5-product-switch>
 
-	<ui5-productswitch id="productSwitchFourColumn">
-		<ui5-productswitchitem id="firstItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-	</ui5-productswitch>
+	<ui5-product-switch id="productSwitchFourColumn">
+		<ui5-product-switch-item id="firstItem" heading="Home" subtitle="Central Home" target-src="#" icon="sap-icon://home"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+	</ui5-product-switch>
 
-	<ui5-input id="eventTest" />
+	<ui5-input id="eventTest"></ui5-input>
 
 	<script>
-		var oProductSwitch = document.getElementById("productSwitchFourColumn");
+		var oProductSwitch = document.getElementById("firstItem");
 		var oInput = document.getElementById("eventTest");
 		var pressCount = 0;
 
-		oProductSwitch.addEventListener("itemClick", function (oEvent) {
+		oProductSwitch.addEventListener("click", function (oEvent) {
 			pressCount += 1;
 			oInput.value = pressCount;
 		});
diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/main/test/pages/ProductSwitchItem.html
index d29901916bc9..0d4af4e67f79 100644
--- a/packages/main/test/pages/ProductSwitchItem.html
+++ b/packages/main/test/pages/ProductSwitchItem.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-		<ui5-productswitchitem id="productSwitchItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
+		<ui5-product-switch-item id="productSwitchItem" heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
 </body>
 
 </html>
diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html
index c5cf58820c31..05d08b335b35 100644
--- a/packages/main/test/samples/ProductSwitch.sample.html
+++ b/packages/main/test/samples/ProductSwitch.sample.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-	<title>&lt;ui5-productswitch&gt;</title>
+	<title>&lt;ui5-product-switch&gt;</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
@@ -36,86 +36,36 @@
 
 	<header>
 		<div class="control-header">ProductSwitch</div>
-		<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-productswitch&gt;</div>
+		<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-product-switch&gt;</div>
 	</header>
 
 	<section>
 		<h3>Basic ProductSwitch</h3>
 		<div class="snippet">
-			<ui5-shellbar
-				id="shellbar"
-				primary-title="Corporate Portal"
-				secondary-title="secondary title"
-				logo="../../images/sap-logo-svg.svg"
-				show-product-switch
-				show-co-pilot>
-			</ui5-shellbar>
-			<ui5-popover id="productswitch-popover" placement-type="Bottom">
-				<ui5-productswitch>
-						<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-				</ui5-productswitch>
-			</ui5-popover>
-
-			<script>
-				var shellBar = document.getElementById("shellbar");
+				<ui5-product-switch>
+						<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+				</ui5-product-switch>
+				<!-- var shellBar = document.getElementById("shellbar");
 				var popover = document.getElementById("productswitch-popover");
 
 				shellbar.addEventListener("productSwitchClick", function(event) {
 					popover.openBy(event.detail.targetRef)
-				});
-			</script>
+				}); -->
+			<!-- </script> -->
 		</div>
-		<pre class="prettyprint lang-html"><xmp>
-	<ui5-shellbar
-	id="shellbar"
-	primary-title="Corporate Portal"
-	secondary-title="secondary title"
-	logo="../../images/sap-logo-svg.svg"
-	show-product-switch
-	show-co-pilot>
-</ui5-shellbar>
-<ui5-popover id="productswitch-popover" placement-type="Bottom">
-	<ui5-productswitch>
-		<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-	</ui5-productswitch>
-</ui5-popover>
-
-<script>
-	var shellBar = document.getElementById("shellbar");
-	var popover = document.getElementById("productswitch-popover");
-
-	shellbar.addEventListener("productSwitchClick", function(event) {
-		popover.openBy(event.detail.targetRef)
-	});
-</script>
-		
- @@ -36,7 +35,7 @@ - + diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/fiori/test/pages/ProductSwitchItem.html similarity index 83% rename from packages/main/test/pages/ProductSwitchItem.html rename to packages/fiori/test/pages/ProductSwitchItem.html index 0d4af4e67f79..8669660e9197 100644 --- a/packages/main/test/pages/ProductSwitchItem.html +++ b/packages/fiori/test/pages/ProductSwitchItem.html @@ -4,13 +4,13 @@ - + ProductSwitchItem diff --git a/packages/fiori/test/samples/ProductSwitch.sample.html b/packages/fiori/test/samples/ProductSwitch.sample.html new file mode 100644 index 000000000000..32201f5a7786 --- /dev/null +++ b/packages/fiori/test/samples/ProductSwitch.sample.html @@ -0,0 +1,90 @@ +
+
ProductSwitch
+
<ui5-product-switch>
+
+ +
+

Basic ProductSwitch

+
+ + + + + + + + + + + + + + + + + + + + + + +
+

+<ui5-shellbar
+	id="shellbar"
+	heading="Corporate Portal"
+	secondary-title="secondary title"
+	logo="../../images/sap-logo-svg.svg"
+	show-product-switch
+	show-co-pilot>
+</ui5-shellbar>
+<ui5-popover id="productswitch-popover" placement-type="Bottom">
+	<ui5-product-switch>
+			<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+	</ui5-product-switch>
+</ui5-popover>
+
+<script>
+	var shellBar = document.getElementById("shellbar");
+	var popover = document.getElementById("productswitch-popover");
+
+	shellbar.addEventListener("productSwitchClick", function(event) {
+		if (popover.opened) {
+			popover.close();
+		} else {
+			popover.openBy(event.detail.targetRef);
+		}
+	});
+</script>
+	
+
\ No newline at end of file diff --git a/packages/main/test/specs/ProductSwitch.spec.js b/packages/fiori/test/specs/ProductSwitch.spec.js similarity index 93% rename from packages/main/test/specs/ProductSwitch.spec.js rename to packages/fiori/test/specs/ProductSwitch.spec.js index 3761b15e8714..126805c55729 100644 --- a/packages/main/test/specs/ProductSwitch.spec.js +++ b/packages/fiori/test/specs/ProductSwitch.spec.js @@ -1,7 +1,7 @@ const assert = require("assert"); describe("ProductSwitch general interaction", () => { - browser.url("http://localhost:8080/test-resources/pages/ProductSwitch.html"); + browser.url("http://localhost:8081/test-resources/pages/ProductSwitch.html"); it("tests desktopColumns attribute", () => { const productSwitchFourColumn = browser.$("#productSwitchFourColumn"); diff --git a/packages/main/test/specs/ProductSwitchItem.spec.js b/packages/fiori/test/specs/ProductSwitchItem.spec.js similarity index 88% rename from packages/main/test/specs/ProductSwitchItem.spec.js rename to packages/fiori/test/specs/ProductSwitchItem.spec.js index a775b18546ee..5e95502a6667 100644 --- a/packages/main/test/specs/ProductSwitchItem.spec.js +++ b/packages/fiori/test/specs/ProductSwitchItem.spec.js @@ -1,7 +1,7 @@ const assert = require("assert"); describe("ProductSwitchItem general interaction", () => { - browser.url("http://localhost:8080/test-resources/pages/ProductSwitchItem.html"); + browser.url("http://localhost:8081/test-resources/pages/ProductSwitchItem.html"); it("tests rendering", () => { const productSwitchItem = browser.$("#productSwitchItem"); diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index a697d2737c14..7f0537265ea3 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -31,8 +31,6 @@ import Panel from "./dist/Panel.js"; import RadioButton from "./dist/RadioButton.js"; import Select from "./dist/Select.js"; import Option from "./dist/Option.js"; -import ProductSwitch from "./dist/ProductSwitch.js"; -import ProductSwitchItem from "./dist/ProductSwitchItem.js"; import Switch from "./dist/Switch.js"; import MessageStrip from "./dist/MessageStrip.js"; import MultiComboBox from "./dist/MultiComboBox.js"; diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index 4e2132cf8961..4a828598213f 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -255,10 +255,6 @@ class Button extends UI5Element { } } - getFocusDomRef() { - return this.shadowRoot.querySelector("button"); - } - _onmousedown(event) { event.isMarked = "button"; this.active = true; diff --git a/packages/main/src/IconTemplate.lit.js b/packages/main/src/IconTemplate.lit.js index 2e066c368e3f..cd18ff2cb939 100644 --- a/packages/main/src/IconTemplate.lit.js +++ b/packages/main/src/IconTemplate.lit.js @@ -7,6 +7,7 @@ const mainBlock = context => { dir="${ifDefined(context.dir)}" viewBox="0 0 512 512" role="img" + focusable="false" preserveAspectRatio="xMidYMid meet" aria-label="${ifDefined(context.accessibleNameText)}" xmlns="http://www.w3.org/2000/svg" diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs deleted file mode 100644 index 9acadf4ef10f..000000000000 --- a/packages/main/src/ProductSwitchItem.hbs +++ /dev/null @@ -1,31 +0,0 @@ - - {{#if targetSrc}} - - {{> item}} - - {{else}} -
- {{> item}} -
- {{/if}} -
- -{{#*inline "item"}} - {{#if icon}} - - {{/if}} -
- {{#if heading}} -
{{heading}}
- {{/if}} - {{#if subtitle}} -
{{subtitle}}
- {{/if}} -
-{{/inline}} \ No newline at end of file diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 27531753094e..f30e28a8d923 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -96,8 +96,6 @@ .ui5-button-text { outline: none; position: relative; - width: 100%; - height: 100%; } :host([has-icon]) .ui5-button-text { @@ -122,8 +120,6 @@ bdi { display: flex; justify-content: flex-start; align-items: center; - width: 100%; - height: 100%; } :host([active]:not([disabled])) { diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css deleted file mode 100644 index 3bfe51aca279..000000000000 --- a/packages/main/src/themes/ProductSwitchItem.css +++ /dev/null @@ -1,141 +0,0 @@ -:host { - width: var(--_ui5_product_switch_item_width); - height: var(--_ui5_product_switch_item_height); - margin: 0.25rem; -} - -.ui5-product-switch-item-root { - width: 100%; - height: 100%; - border-radius: 0.25rem; - padding: 0.5rem; - padding-top: 4rem; - user-select: none; - -ms-user-select: none; -} - -:host([icon]) .ui5-product-switch-item-root { - padding-top: 0.5rem; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-wrapper { - width: 100%; - height: 100%; - flex-direction: column; - display: flex; - align-items: center; - text-decoration: none; - outline: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-icon { - width: 3rem; - height: 3rem; - padding: 0.75rem; - margin-bottom: 0.5rem; - box-sizing: border-box; - color: var(--_ui5_product_switch_item_icon_color); - pointer-events: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content { - display: flex; - align-items: center; - flex-direction: column; - max-width: 10.25rem; - height: 2.5rem; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading, -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - line-height: 1.25rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - text-align: center; - pointer-events: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading { - font-size: var(--_ui5_product_switch_item_title_size); - color: var(--_ui5_product_switch_item_title_color); -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - font-size: var(--_ui5_product_switch_item_subtitle_size); - color: var(--_ui5_product_switch_item_subtitle_color); -} - -.ui5-product-switch-item-root[active] .ui5-product-switch-item-icon, -.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-heading, -.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - color: var(--_ui5_product_switch_item_active_color); -} - -.ui5-product-switch-item-root:not([active]):hover { - background: var(--_ui5_product_switch_item_hover_background_color); - border-color: transparent; -} - -@media only screen and (max-width: 600px) { - :host { - margin: 0; - width: 100%; - width: 100%; - max-width: 600px; - height: 5rem; - } - - .ui5-product-switch-item-root { - width: 100%; - height: 100%; - border-radius: 0; - padding: 0 1.25rem; - } - - :host([icon]) .ui5-product-switch-item-root { - padding-left: 0.4375rem; - padding-top: 0; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-wrapper { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-icon { - padding: 0.875rem; - color: var(--_ui5_product_switch_item_mobile_icon_color); - margin: 0 0.75rem 0 0; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-text-content { - align-items: flex-start; - max-width: 100%; - height: auto; - } - - :host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content { - max-width: calc(100% - 3.75rem); - } - - .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - font-size: var(--_ui5_product_switch_item_mobile_subtitle_size); - padding-top: 0.75rem; - } -} -/* IE SPECIFIC */ -.ui5-product-switch-item-root[design="Transparent"]:not([active]):hover { - border-color: transparent; -} - -ui5-product-switch-item ui5-button[focused] { - outline: var(--_ui5_product_switch_item_outline); -} - -ui5-product-switch-item ui5-button[focused] .ui5-button-root::after { - display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/base/ProductSwitch-parameters.css b/packages/main/src/themes/base/ProductSwitch-parameters.css deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css deleted file mode 100644 index 677cc42a963f..000000000000 --- a/packages/main/src/themes/base/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --_ui5_product_switch_item_width: 11.25rem; - --_ui5_product_switch_item_height: 7rem; - --_ui5_product_switch_item_hover_background_color: #f5f5f5; - --_ui5_product_switch_item_active_color: #ffffff; - --_ui5_product_switch_item_icon_color: #0854a0; - --_ui5_product_switch_item_mobile_icon_color: #6a6d70; - --_ui5_product_switch_item_title_color: #32363a; - --_ui5_product_switch_item_title_size: .875rem; - --_ui5_product_switch_item_subtitle_color: #6a6d70; - --_ui5_product_switch_item_subtitle_size: .75rem; - --_ui5_product_switch_item_mobile_subtitle_size: .875rem; - --_ui5_product_switch_item_outline: .0625rem #000000 dotted; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css deleted file mode 100644 index 673e7a51184b..000000000000 --- a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,9 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_hover_background_color: #f0f0f0; - --_ui5_product_switch_item_active_background_color: #427cac; - --_ui5_product_switch_item_icon_color: #346187; - --_ui5_product_switch_item_title_color: #333333; - --_ui5_product_switch_item_subtitle_color: #666666; -} \ 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 bb1652fe3b95..e96d63eb4666 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -16,7 +16,6 @@ @import "./MonthPicker-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; -@import "./ProductSwitchItem-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css deleted file mode 100644 index ab6ff049a885..000000000000 --- a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,12 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_background_color: #000000; - --_ui5_product_switch_item_hover_background_color: #7a5100; - --_ui5_product_switch_item_active_background_color: #7a5100; - --_ui5_product_switch_item_active_color: #ffffff; - --_ui5_product_switch_item_icon_color: #ffffff; - --_ui5_product_switch_item_title_color: #ffffff; - --_ui5_product_switch_item_subtitle_color: #ffffff; - --_ui5_product_switch_item_outline: .125rem #ffffff dotted; -} \ 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 3527feb861b0..0823635ff979 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -15,7 +15,6 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; -@import "./ProductSwitchItem-parameters.css"; @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 a8bf2cc51e40..93334cfd445a 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -14,7 +14,6 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; -@import "./ProductSwitchItem-parameters.css"; @import "./RadioButton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html deleted file mode 100644 index 05d08b335b35..000000000000 --- a/packages/main/test/samples/ProductSwitch.sample.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - <ui5-product-switch> - - - - - - - - - - - - - - - - - - - - - - -
-
ProductSwitch
-
<ui5-product-switch>
-
- -
-

Basic ProductSwitch

-
- - - - - - - - - - - - - - - - - - -
- - - - - - From 90399b57057d60da42570420c4f93f9a2df77111 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 11:10:34 +0200 Subject: [PATCH 05/36] feat(ui5-product-switch): stand alone component fixes --- packages/fiori/src/ProductSwitchItem.js | 3 --- packages/main/src/IconTemplate.lit.js | 1 - 2 files changed, 4 deletions(-) diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 9b0bbce70ce5..86108649676f 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -91,9 +91,6 @@ const metadata = { /** * Fired when the ui5-product-switch-item is activated either with a * mouse/tap or by using the Enter or Space key. - *

- * Note: The event will not be fired if the disabled - * property is set to true. * * @event * @public diff --git a/packages/main/src/IconTemplate.lit.js b/packages/main/src/IconTemplate.lit.js index cd18ff2cb939..2e066c368e3f 100644 --- a/packages/main/src/IconTemplate.lit.js +++ b/packages/main/src/IconTemplate.lit.js @@ -7,7 +7,6 @@ const mainBlock = context => { dir="${ifDefined(context.dir)}" viewBox="0 0 512 512" role="img" - focusable="false" preserveAspectRatio="xMidYMid meet" aria-label="${ifDefined(context.accessibleNameText)}" xmlns="http://www.w3.org/2000/svg" From 427486d4a1c49aa5c6e6427956d03c41deeec96b Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 17:17:52 +0200 Subject: [PATCH 06/36] feat(ui5-product-switch): stand alone component review fixes --- packages/fiori/src/ProductSwitch.js | 25 +++++-------- packages/fiori/src/ProductSwitchItem.js | 13 +++++-- .../fiori/src/themes/ProductSwitchItem.css | 21 +++++++++++ .../base/ProductSwitchItem-parameters.css | 5 ++- .../ProductSwitchItem-parameters.css | 4 ++- .../ProductSwitchItem-parameters.css | 7 +--- packages/fiori/test/pages/ProductSwitch.html | 36 +++++++++---------- .../fiori/test/pages/ProductSwitchItem.html | 2 +- 8 files changed, 67 insertions(+), 46 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 82569987c471..345a221b2b18 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -36,12 +36,6 @@ const metadata = { }; class ProductSwitch extends UI5Element { - constructor() { - super(); - - this.initItemNavigation(); - } - initItemNavigation() { this._itemNavigation = new ItemNavigation(this, { rowSize: 4 }); this._itemNavigation.getItemsCallback = () => this.items; @@ -64,28 +58,27 @@ class ProductSwitch extends UI5Element { } onEnterDOM() { - ResizeHandler.register(document.body, this._handleResize.bind(this)); + this._handleResizeBound = this._handleResize.bind(this); + + this.initItemNavigation(); + + ResizeHandler.register(document.body, this._handleResizeBound); } onExitDOM() { - ResizeHandler.deregister(document.body, this._handleResize); + ResizeHandler.deregister(document.body, this._handleResizeBound); } - onBeforeRendering() { this.desktopColumns = this.items.length > 6 ? 4 : 3; } _handleResize() { - if (!this._itemNavigation) { - return; - } - - const iWidth = document.body.clientWidth; + const documentWidth = document.body.clientWidth; - if (iWidth <= 600) { + if (documentWidth <= 600) { this._itemNavigation.rowSize = 1; - } else if (iWidth <= 900 || this.items.length <= 6) { + } else if (documentWidth <= 900 || this.items.length <= 6) { this._itemNavigation.rowSize = 3; } else { this._itemNavigation.rowSize = 4; diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 86108649676f..2e13059b4884 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -49,11 +49,12 @@ const metadata = { * Specifies a target where the targetSrc content must be open. * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. * @type {string} - * @defaultvalue "" + * @defaultvalue "_self" * @public */ target: { type: String, + defaultValue: "_self", }, /** *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. @@ -118,11 +119,17 @@ class ProductSwitchItem extends UI5Element { } onEnterDOM() { - document.addEventListener("mouseup", this._deactivate.bind(this)); + this._deactivate = () => { + if (this.active) { + this.active = false; + } + }; + + document.addEventListener("mouseup", this._deactivate); } onExitDOM() { - document.removeEventListener("mouseup", this._deactivate.bind(this)); + document.removeEventListener("mouseup", this._deactivate); } _deactivate() { diff --git a/packages/fiori/src/themes/ProductSwitchItem.css b/packages/fiori/src/themes/ProductSwitchItem.css index 593100d3ff02..bec59fbce7c8 100644 --- a/packages/fiori/src/themes/ProductSwitchItem.css +++ b/packages/fiori/src/themes/ProductSwitchItem.css @@ -130,4 +130,25 @@ font-size: var(--sapMFontMediumSize); padding-top: .75rem; } +} + +ui5-product-switch-item[focused] { + outline: none; + position: relative; +} + +ui5-product-switch-item[focused] .ui5-product-switch-item-root::after { + content: ""; + position: absolute; + border-color: var(--_ui5_product_switch_item_outline_color); + border-width: var(--_ui5_product_switch_item_outline_width); + border-style: dotted; + top: var(--_ui5_product_switch_item_outline_offset_positive); + bottom: var(--_ui5_product_switch_item_outline_offset_positive); + left: var(--_ui5_product_switch_item_outline_offset_positive); + right: var(--_ui5_product_switch_item_outline_offset_positive); +} + +ui5-product-switch-item[active][focused] .ui5-product-switch-item-root::after { + border-color: var(--_ui5_product_switch_item_active_outline_color); } \ No newline at end of file diff --git a/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css index 01c284700684..da79680b4701 100644 --- a/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css @@ -1,7 +1,10 @@ :root { --_ui5_product_switch_item_width: 11.25rem; --_ui5_product_switch_item_height: 7rem; - --_ui5_product_switch_item_outline: .0625rem var(--sapUiContentFocusColor) dotted; + --_ui5_product_switch_item_outline_width: .0625rem; + --_ui5_product_switch_item_outline_color: var(--sapUiContentFocusColor); + --_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted; --_ui5_product_switch_item_active_outline_color: var(--sapUiContentContrastFocusColor); --_ui5_product_switch_item_outline_offset: -.1875rem; + --_ui5_product_switch_item_outline_offset_positive: .1875rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css index 4b32c6f20ec7..2d63a03f7f8d 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css @@ -1,6 +1,8 @@ @import "../base/ProductSwitchItem-parameters.css"; :root { - --_ui5_product_switch_item_outline: .125rem var(--sapUiContentContrastFocusColor) dotted; + --_ui5_product_switch_item_outline_width: .125rem; + --_ui5_product_switch_item_outline_color: var(--sapUiContentContrastFocusColor); + --_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted; --_ui5_product_switch_item_outline_offset: -.25rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css index 1c3dd5515688..b86ce8c0537a 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css @@ -1,6 +1 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_outline: .0625rem var(--sapUiContentFocusColor) dotted; - --_ui5_product_switch_item_active_outline_color: var(--sapUiContentContrastFocusColor); -} \ No newline at end of file +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/test/pages/ProductSwitch.html b/packages/fiori/test/pages/ProductSwitch.html index 9844e9bd2633..74b8948b336a 100644 --- a/packages/fiori/test/pages/ProductSwitch.html +++ b/packages/fiori/test/pages/ProductSwitch.html @@ -28,27 +28,27 @@ - - - - + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/packages/fiori/test/pages/ProductSwitchItem.html b/packages/fiori/test/pages/ProductSwitchItem.html index 8669660e9197..47b82eb6a82c 100644 --- a/packages/fiori/test/pages/ProductSwitchItem.html +++ b/packages/fiori/test/pages/ProductSwitchItem.html @@ -27,7 +27,7 @@ - + From bed648c2202e3eae410a5354bcb690b527480061 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 17:45:04 +0200 Subject: [PATCH 07/36] feat(ui5-product-switch): stand alone component review fixes 2 --- packages/fiori/src/ProductSwitch.js | 26 ++++++++++++++-- packages/fiori/src/ProductSwitchItem.js | 41 +++++++++++++++++-------- 2 files changed, 53 insertions(+), 14 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 345a221b2b18..7032ea735bd9 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -35,7 +35,31 @@ const metadata = { }, }; +/** + * @class + *

Overview

+ * + * The ui5-product-switch is a Fiori specific control that is used in ui5-shellbar + *

+ *

ES6 Module Import

+ * import "@ui5/webcomponents-fiori/dist/ProductSwitch"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ProductSwitch + * @extends sap.ui.webcomponents.base.UI5Element + * @tagname ui5-product-switch + * @appenddocs ProductSwitch + * @public + * @since 1.0.0-rc.5 + */ class ProductSwitch extends UI5Element { + constructor() { + super(); + + this.initItemNavigation(); + } + initItemNavigation() { this._itemNavigation = new ItemNavigation(this, { rowSize: 4 }); this._itemNavigation.getItemsCallback = () => this.items; @@ -60,8 +84,6 @@ class ProductSwitch extends UI5Element { onEnterDOM() { this._handleResizeBound = this._handleResize.bind(this); - this.initItemNavigation(); - ResizeHandler.register(document.body, this._handleResizeBound); } diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 2e13059b4884..5306c8e0b912 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -101,7 +101,36 @@ const metadata = { }, }; +/** + * @class + *

Overview

+ * + * The ui5-product-switch-item is used as a child of ui5-product-switch + * Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch. + *

+ *

ES6 Module Import

+ * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ProductSwitchItem + * @extends sap.ui.webcomponents.base.UI5Element + * @tagname ui5-product-switch-item + * @appenddocs ProductSwitchItem + * @public + * @since 1.0.0-rc.5 + */ class ProductSwitchItem extends UI5Element { + constructor() { + super(); + + this._deactivate = () => { + if (this.active) { + this.active = false; + } + }; + } + static get metadata() { return metadata; } @@ -119,12 +148,6 @@ class ProductSwitchItem extends UI5Element { } onEnterDOM() { - this._deactivate = () => { - if (this.active) { - this.active = false; - } - }; - document.addEventListener("mouseup", this._deactivate); } @@ -132,12 +155,6 @@ class ProductSwitchItem extends UI5Element { document.removeEventListener("mouseup", this._deactivate); } - _deactivate() { - if (this.active) { - this.active = false; - } - } - _onmousedown() { this.active = true; } From ece646d1f4c9aceb8200f3d33c9e612fa0539eab Mon Sep 17 00:00:00 2001 From: Naydenov Date: Thu, 21 Nov 2019 16:24:33 +0200 Subject: [PATCH 08/36] feat(ui5-product-switch): docu improvement --- packages/fiori/src/ProductSwitch.js | 4 ++-- packages/fiori/src/ProductSwitchItem.js | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 7032ea735bd9..ed7184124500 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -13,7 +13,7 @@ const metadata = { tag: "ui5-product-switch", properties: { /** - * Indicates how much columns should be displayed. + * Indicates how many columns are displayed. * @private */ desktopColumns: { @@ -49,7 +49,7 @@ const metadata = { * @alias sap.ui.webcomponents.main.ProductSwitch * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-product-switch - * @appenddocs ProductSwitch + * @appenddocs ProductSwitchItem * @public * @since 1.0.0-rc.5 */ diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 5306c8e0b912..786d54029e26 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -29,7 +29,7 @@ const metadata = { type: String, }, /** - * Defines the icon to be displayed as graphical element within the ui5-product-switch-item. + * Defines the icon to be displayed as a graphical element within the ui5-product-switch-item. * The SAP-icons font provides numerous options. *

* Example: @@ -46,7 +46,7 @@ const metadata = { type: String, }, /** - * Specifies a target where the targetSrc content must be open. + * Specifies a target where the targetSrc content must be open. * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. * @type {string} * @defaultvalue "_self" @@ -57,7 +57,7 @@ const metadata = { defaultValue: "_self", }, /** - *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. + *Defines the ui5-product-switch-item target URI. Supports standard hyperlink behavior. * @type {string} * @defaultvalue "" * @public @@ -73,7 +73,7 @@ const metadata = { type: Boolean, }, /** - * Indicates if the elements is on focus + * Indicates whether the element is focused. * @private */ focused: { @@ -91,7 +91,7 @@ const metadata = { events: { /** * Fired when the ui5-product-switch-item is activated either with a - * mouse/tap or by using the Enter or Space key. + * click/tap or by using the Enter or Space key. * * @event * @public @@ -104,8 +104,7 @@ const metadata = { /** * @class *

Overview

- * - * The ui5-product-switch-item is used as a child of ui5-product-switch + * The ui5-product-switch-item represents the items displayed in the ui5-product-switch web component * Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch. *

*

ES6 Module Import

@@ -116,7 +115,6 @@ const metadata = { * @alias sap.ui.webcomponents.main.ProductSwitchItem * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-product-switch-item - * @appenddocs ProductSwitchItem * @public * @since 1.0.0-rc.5 */ From bd4b7ef2afab565516ae755503eae6f6adcf4be5 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Mon, 18 Nov 2019 13:10:22 +0200 Subject: [PATCH 09/36] feat(ui5-icon): change src property to name (#928) BREAKING CHANGE: @ui5/webcomponents/dist/Icon.js The src property was renamed to name and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add"). Note: the src property will continue to work until the next release due to the impact of the change, but will produce a warning in the console. @ui5/webcomponents/dist/Card.js The avatar property was removed. Use the avatar slot instead - pass an icon( After: and respectively: becomes: @ui5/webcomponents-fiori/dist/ShellBarItem.js The src property was renamed to icon and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add") --- docs/How To Use.md | 4 +- packages/fiori/src/ShellBar.hbs | 6 +- packages/fiori/src/ShellBar.js | 10 +- packages/fiori/src/ShellBarItem.js | 6 +- packages/fiori/test/pages/Components.html | 2 +- packages/fiori/test/pages/ShellBar.html | 42 ++-- .../fiori/test/samples/ShellBar.sample.html | 34 +-- packages/fiori/test/specs/ShellBar.spec.js | 4 +- packages/main/src/Button.hbs | 2 +- packages/main/src/Button.js | 2 +- packages/main/src/CalendarHeader.hbs | 4 +- packages/main/src/CalendarHeader.js | 4 +- packages/main/src/Card.hbs | 11 +- packages/main/src/Card.js | 31 +-- packages/main/src/CheckBox.hbs | 4 +- packages/main/src/DatePicker.hbs | 2 +- packages/main/src/Icon.js | 44 +++- packages/main/src/ListItem.hbs | 2 +- packages/main/src/MessageStrip.hbs | 4 +- packages/main/src/MessageStrip.js | 10 +- packages/main/src/MultiComboBox.hbs | 2 +- packages/main/src/Panel.hbs | 2 +- packages/main/src/Select.hbs | 2 +- packages/main/src/StandardListItem.hbs | 4 +- packages/main/src/Switch.hbs | 4 +- packages/main/src/TabContainer.hbs | 10 +- packages/main/src/TimelineItem.hbs | 2 +- packages/main/src/Token.hbs | 2 +- packages/main/src/Token.js | 2 +- packages/main/src/themes/Card.css | 20 +- packages/main/test/pages/Badge.html | 16 +- packages/main/test/pages/Button.html | 64 +++--- packages/main/test/pages/Card.html | 14 +- packages/main/test/pages/Components.html | 4 +- packages/main/test/pages/Icon.html | 42 ++-- packages/main/test/pages/Input.html | 8 +- packages/main/test/pages/Kitchen.html | 135 ++++++------ packages/main/test/pages/Kitchen.openui5.html | 116 +++++----- packages/main/test/pages/List.html | 30 +-- packages/main/test/pages/List_test_page.html | 6 +- packages/main/test/pages/Panel.html | 4 +- packages/main/test/pages/Popover.html | 2 +- packages/main/test/pages/Popups.html | 4 +- packages/main/test/pages/ShellBar.html | 207 ------------------ packages/main/test/pages/Simple.html | 2 +- packages/main/test/pages/TabContainer.html | 20 +- packages/main/test/pages/Timeline.html | 6 +- packages/main/test/pages/form.html | 2 +- packages/main/test/qunit/Button.qunit.js | 6 +- packages/main/test/qunit/Dialog.qunit.js | 2 +- packages/main/test/qunit/Input.qunit.js | 2 +- packages/main/test/qunit/Popover.qunit.js | 2 +- .../main/test/qunit/TabContainer.qunit.js | 8 +- packages/main/test/samples/Badge.sample.html | 32 +-- packages/main/test/samples/Button.sample.html | 60 ++--- packages/main/test/samples/Card.sample.html | 52 +++-- packages/main/test/samples/Icon.sample.html | 28 +-- packages/main/test/samples/Input.sample.html | 8 +- packages/main/test/samples/List.sample.html | 92 ++++---- packages/main/test/samples/Select.sample.html | 60 ++--- .../test/samples/TabContainer.sample.html | 18 +- .../main/test/samples/Timeline.sample.html | 12 +- .../test/samples/ToggleButton.sample.html | 60 ++--- 63 files changed, 618 insertions(+), 784 deletions(-) delete mode 100644 packages/main/test/pages/ShellBar.html diff --git a/docs/How To Use.md b/docs/How To Use.md index 9831ba453620..2fde434f2719 100644 --- a/docs/How To Use.md +++ b/docs/How To Use.md @@ -79,14 +79,14 @@ properties and attributes. An example of such web component is the `ui5-icon`: ```html - + ``` The icon accepts no text or other HTML elements inside its opening and closing tags. Therefore, in the next example, the text inside the `` will be ignored. ```html -This is an icon +This is an icon ``` Other UI5 Web Components, such as `` accept text (and in addition HTML elements that make sense when writing text) diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs index 0489087b5e0a..2885e35776ee 100644 --- a/packages/fiori/src/ShellBar.hbs +++ b/packages/fiori/src/ShellBar.hbs @@ -49,13 +49,13 @@
{{#each _itemsInfo}} - {{#if this.src}} + {{#if this.icon}} @@ -80,7 +80,7 @@ {{#each _hiddenIcons}} {{this.text}} diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js index 4cbc80cd9a48..2df132043d48 100644 --- a/packages/fiori/src/ShellBar.js +++ b/packages/fiori/src/ShellBar.js @@ -728,7 +728,7 @@ class ShellBar extends UI5Element { const items = [ { - src: "sap-icon://search", + icon: "search", text: "Search", classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`, priority: 4, @@ -740,7 +740,7 @@ class ShellBar extends UI5Element { }, ...this.items.map((item, index) => { return { - src: item.src, + icon: item.icon, id: item._id, refItemid: item._id, text: item.text, @@ -754,7 +754,7 @@ class ShellBar extends UI5Element { }; }), { - src: "sap-icon://bell", + icon: "bell", text: "Notifications", classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`, priority: 3, @@ -766,7 +766,7 @@ class ShellBar extends UI5Element { _tabIndex: "-1", }, { - src: "sap-icon://overflow", + icon: "overflow", text: "Overflow", classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`, priority: 5, @@ -792,7 +792,7 @@ class ShellBar extends UI5Element { _tabIndex: "-1", }, { - src: "sap-icon://grid", + icon: "grid", text: "Product Switch", classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`, priority: 2, diff --git a/packages/fiori/src/ShellBarItem.js b/packages/fiori/src/ShellBarItem.js index a94713bbb688..d223b1145b3d 100644 --- a/packages/fiori/src/ShellBarItem.js +++ b/packages/fiori/src/ShellBarItem.js @@ -11,11 +11,11 @@ const metadata = { tag: "ui5-shellbar-item", properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ { /** - * Defines the item source URI. + * Defines the name of the item's icon. * @type {string} * @public */ - src: { + icon: { type: String, }, @@ -28,8 +28,6 @@ const metadata = { text: { type: String, }, - - _icon: { type: HTMLElement }, }, events: /** @lends sap.ui.webcomponents.main.ShellBarItem.prototype */ { diff --git a/packages/fiori/test/pages/Components.html b/packages/fiori/test/pages/Components.html index d6db3a7f7988..887c8da0bd8f 100644 --- a/packages/fiori/test/pages/Components.html +++ b/packages/fiori/test/pages/Components.html @@ -22,7 +22,7 @@ - + diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index 937e837137d7..0df5ba80f516 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -71,15 +71,15 @@ primary-title="Custom Actions" secondary-title="Second Title" > - - - - - - - - - + + + + + + + + + - - - - + + + + @@ -118,10 +118,10 @@ show-co-pilot > - + - - + + @@ -139,11 +139,11 @@
- App Finder - Settings - Edit Home Page - Help - Sign out + App Finder + Settings + Edit Home Page + Help + Sign out
diff --git a/packages/fiori/test/samples/ShellBar.sample.html b/packages/fiori/test/samples/ShellBar.sample.html index 8ce06097eeb5..cabf7010a7da 100644 --- a/packages/fiori/test/samples/ShellBar.sample.html +++ b/packages/fiori/test/samples/ShellBar.sample.html @@ -23,10 +23,10 @@

ShellBar

show-co-pilot > - + - - + + @@ -44,11 +44,11 @@

ShellBar

- App Finder - Settings - Edit Home Page - Help - Sign out + App Finder + Settings + Edit Home Page + Help + Sign out
@@ -72,10 +72,10 @@

ShellBar

show-co-pilot > - + - - + + @@ -94,11 +94,11 @@

ShellBar

- App Finder - Settings - Edit Home Page - Help - Sign out + App Finder + Settings + Edit Home Page + Help + Sign out
@@ -122,7 +122,7 @@

Basic ShellBar

logo="../../assets/images/sap-logo-svg.svg" > - +
diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index e21baa612c09..12d33ed55fb4 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -107,8 +107,8 @@ describe("Component Behaviour", () => { assert.strictEqual(productSwitchIcon.isDisplayed(), true, "Product switch should be visible"); assert.strictEqual(overflowPopover.isDisplayedInViewport(), true, "Overflow popover should be visible"); assert.strictEqual(listItemsCount, 2, "2 actions should overflow"); - assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("src"), "Popover items have same sources as corresponding icons"); - assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("src"), "Popover items have same sources as corresponding icons"); + assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("name"), "Popover items have same sources as corresponding icons"); + assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("name"), "Popover items have same sources as corresponding icons"); }); diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs index 6c816079ebf8..97faee8a3be2 100644 --- a/packages/main/src/Button.hbs +++ b/packages/main/src/Button.hbs @@ -20,7 +20,7 @@ {{#if icon}} {{/if}} diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index 4a828598213f..daa9b41f84bd 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -55,7 +55,7 @@ const metadata = { *

* Example: *
- *
ui5-button icon="sap-icon://palette"
+ *
ui5-button icon="palette"
* * See all the available icons in the Icon Explorer. * diff --git a/packages/main/src/CalendarHeader.hbs b/packages/main/src/CalendarHeader.hbs index 413308ebd8fe..62a9086261d3 100644 --- a/packages/main/src/CalendarHeader.hbs +++ b/packages/main/src/CalendarHeader.hbs @@ -10,7 +10,7 @@ >
@@ -47,7 +47,7 @@ > diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js index d8c8ca7f38a8..cab9a6165470 100644 --- a/packages/main/src/CalendarHeader.js +++ b/packages/main/src/CalendarHeader.js @@ -65,10 +65,10 @@ class CalendarHeader extends UI5Element { constructor() { super(); this._btnPrev = {}; - this._btnPrev.icon = "sap-icon://slim-arrow-left"; + this._btnPrev.icon = "slim-arrow-left"; this._btnNext = {}; - this._btnNext.icon = "sap-icon://slim-arrow-right"; + this._btnNext.icon = "slim-arrow-right"; this._btn1 = {}; this._btn1.type = ButtonDesign.Transparent; diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs index a54dbe66b46c..237f4a7905c7 100644 --- a/packages/main/src/Card.hbs +++ b/packages/main/src/Card.hbs @@ -13,15 +13,10 @@ tabindex="{{tabindex}}" role="group" aria-labelledby="{{_id}}-heading {{_id}}-subtitle"> - {{#if image}} - - {{/if}} - {{#if icon}} - - - - {{/if}} +
+ +
{{#if heading}} diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index a6b45bdddb36..0dcd4a5505b6 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -28,6 +28,20 @@ const metadata = { propertyName: "content", type: HTMLElement, }, + + /** + * Defines the visual representation in the header of the card. + * Supports images and icons. + * Note: + * SAP-icons font provides numerous options. To find all the available icons, see the + * Icon Explorer. + * @type {HTMLElement[]} + * @slot + * @public + */ + avatar: { + type: HTMLElement, + }, }, properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ { @@ -72,19 +86,6 @@ const metadata = { type: Boolean, }, - /** - * Defines image source URI or built-in icon font URI. - *

- * Note: - * SAP-icons font provides numerous options. To find all the available icons, see the - * Icon Explorer. - * @type {string} - * @public - */ - avatar: { - type: String, - }, - _headerActive: { type: Boolean, noAttribute: true, @@ -113,7 +114,9 @@ const metadata = { * tile with separate header and content areas. * The content area of a ui5-card can be arbitrary HTML content. * The header can be used through several properties, such as: - * heading, subtitle, status and avatar. + * heading, subtitle, status + * and a slot: + * avatar. * *

Keyboard handling

* In case you enable headerInteractive property, you can press the ui5-card header by Space and Enter keys. diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs index 03374a6f2157..3193e7f74fed 100644 --- a/packages/main/src/CheckBox.hbs +++ b/packages/main/src/CheckBox.hbs @@ -11,9 +11,9 @@ >
{{#if checked}} - + {{/if}} - +
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs index 00eb9ca7f9d8..375900aa28b0 100644 --- a/packages/main/src/DatePicker.hbs +++ b/packages/main/src/DatePicker.hbs @@ -19,7 +19,7 @@ {{#unless readonly}} ui5-icon. *

- * SAP-icons font provides numerous options. To find all the available icons, see the + * To browse all available icons, see the * Icon Explorer. *

* Example: *
* src='sap-icon://add', src='sap-icon://delete', src='sap-icon://employee'. + * NOTE: This property is about to be removed in the next version! Please use the name property instead. * * @type {string} * @public + * @deprecated */ src: { type: String, }, + /** + * Defines the unique identifier (icon name) of each ui5-icon. + *

+ * To browse all available icons, see the + * Icon Explorer. + *

+ * Example: + *
+ * name='add', name='delete', name='employee'. + * + * @type {string} + * @public + */ + name: { + type: String, + }, + /** * Defines the text alternative of the ui5-icon. * If not provided a default text alternative will be set, if present. @@ -82,21 +101,16 @@ const metadata = { * @class *

Overview

* - * The ui5-icon component is a wrapper around the HTML tag to embed an icon from an icon font. + * The ui5-icon component represents an SVG icon. * There are two main scenarios how the ui5-icon component is used: * as a purely decorative element; or as a visually appealing clickable area in the form of an icon button. - * In the first case, images are not predefined as tab stops in accessibility mode. - *

- * The ui5-icon uses embedded font instead of pixel image. - * Comparing to image, ui5-icon is easily scalable, - * its color can be altered live, and various effects can be added using CSS. *

* A large set of built-in icons is available - * and they can be used by setting the src property on the ui5-icon. + * and they can be used by setting the name property on the ui5-icon. * *

ES6 Module Import

* - * import "@ui5/webcomponents/dist/Icon"; + * import "@ui5/webcomponents/dist/Icon.js"; * * @constructor * @author SAP SE @@ -155,13 +169,19 @@ class Icon extends UI5Element { } async onBeforeRendering() { - let iconData = getIconDataSync(this.src); + const name = this.name || this.src; + if (this.src) { + /* eslint-disable-next-line */ + console.warn(`The src property is about to be depricated in the next version of UI5 Web Components. Please use the name property!`); + } + + let iconData = getIconDataSync(name); if (!iconData) { try { - iconData = await getIconData(this.src); + iconData = await getIconData(name); } catch (e) { /* eslint-disable-next-line */ - return console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. "@ui5/webcomponents/dist/icons/${this.src.replace("sap-icon://", "")}.js", or setup a JSON build step and import "@ui5/webcomponents/dist/json-imports/Icons.js".`); + return console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. "@ui5/webcomponents/dist/icons/${name.replace("sap-icon://", "")}.js", or setup a JSON build step and import "@ui5/webcomponents/dist/json-imports/Icons.js".`); } } this.pathData = iconData.pathData; diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs index d50793def650..e3752c3bb365 100644 --- a/packages/main/src/ListItem.hbs +++ b/packages/main/src/ListItem.hbs @@ -52,7 +52,7 @@
diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs index 2b097032cbe1..7f7c2d6a5e60 100644 --- a/packages/main/src/MessageStrip.hbs +++ b/packages/main/src/MessageStrip.hbs @@ -5,7 +5,7 @@ aria-labelledby="{{_id}}"> {{#unless noIcon}} - + {{/unless}} {{hiddenText}} @@ -19,7 +19,7 @@ > diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js index 6ba6d797b313..675ce6b13013 100644 --- a/packages/main/src/MessageStrip.js +++ b/packages/main/src/MessageStrip.js @@ -45,7 +45,7 @@ const metadata = { *

* Example: *
- *
ui5-messagestrip icon="sap-icon://palette"
+ *
ui5-messagestrip icon="palette"
* * See all the available icons in the Icon Explorer. * @@ -194,10 +194,10 @@ class MessageStrip extends UI5Element { static iconMappings() { return { - "Information": "sap-icon://message-information", - "Positive": "sap-icon://message-success", - "Negative": "sap-icon://message-error", - "Warning": "sap-icon://message-warning", + "Information": "message-information", + "Positive": "message-success", + "Negative": "message-error", + "Warning": "message-warning", }; } diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index cd6164f03fe2..6e9fc3a4562d 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -34,7 +34,7 @@ {{#unless readonly}} - + {{/if}} {{/inline}} {{#*inline "iconEnd"}} {{#if displayIconEnd}} - + {{/if}} {{/inline}} diff --git a/packages/main/src/Switch.hbs b/packages/main/src/Switch.hbs index 27fdf7b7cd9a..c1557acb2891 100644 --- a/packages/main/src/Switch.hbs +++ b/packages/main/src/Switch.hbs @@ -12,10 +12,10 @@
{{#if graphical}} - + - + {{else}} {{_textOn}} diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index eb5e8f82eacb..63b6cdd436eb 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -3,7 +3,7 @@ dir="{{rtl}}" >
- +
@@ -45,14 +45,14 @@
- + {{#if showOverflow}} @@ -87,7 +87,7 @@ >
{{#if this.item.icon}} - + {{/if}} {{this.item.text}} @@ -118,7 +118,7 @@ {{#*inline "iconTab"}}
- +
diff --git a/packages/main/src/TimelineItem.hbs b/packages/main/src/TimelineItem.hbs index 4bce3f0b8711..bb3d034257dd 100644 --- a/packages/main/src/TimelineItem.hbs +++ b/packages/main/src/TimelineItem.hbs @@ -5,7 +5,7 @@
{{#if icon}}
- +
{{/if}}
diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs index 8ea15e323090..0fc60e6c2c20 100644 --- a/packages/main/src/Token.hbs +++ b/packages/main/src/Token.hbs @@ -2,6 +2,6 @@ {{#unless readonly}} - + {{/unless}}
diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 8300c4043d37..6cb8773c3954 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -163,7 +163,7 @@ class Token extends UI5Element { } get iconURI() { - return getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel"; + return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel"; } static async define(...params) { diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css index a7d9ec793ee8..55fdb05f9471 100644 --- a/packages/main/src/themes/Card.css +++ b/packages/main/src/themes/Card.css @@ -9,7 +9,7 @@ color: var(--sapUiGroupTitleTextColor); background: var(--sapUiTileBackground); box-shadow: var(--sapUiShadowLevel0); - border-radius: 0.25rem; + border-radius: .25rem; border: 1px solid var(--_ui5_card_border_color); overflow: hidden; font-family: var(--sapUiFontFamily); @@ -69,19 +69,21 @@ display: flex; align-items: center; justify-content: center; - margin-right: 0.75rem; + margin-right: .75rem; } -.ui5-card-header .ui5-card-avatar.ui5-card-header-img { - border-radius: 50%; -} - -.ui5-card-header .ui5-card-avatar .ui5-card-header-icon { +::slotted(ui5-icon) { width: 1.5rem; height: 1.5rem; color: var(--sapUiTileIconColor); } +::slotted(img) { + width: 100%; + height: 100%; + border-radius: 50%; +} + .ui5-card-header .ui5-card-status { display: inline-block; font-family: var(--sapUiFontFamily); @@ -109,7 +111,7 @@ font-size: var(--sapMFontMediumSize); font-weight: normal; color: var(--sapUiTileTextColor); - margin-top: 0.5rem; + margin-top: .5rem; max-height: 2.1rem; } @@ -127,7 +129,7 @@ } [dir="rtl"] .ui5-card-header .ui5-card-avatar { - margin-left: 0.75rem; + margin-left: .75rem; margin-right: 0; } diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html index 4db52748b850..07ea8d319e5e 100644 --- a/packages/main/test/pages/Badge.html +++ b/packages/main/test/pages/Badge.html @@ -47,28 +47,28 @@

Badges

IN WAREHOUSE
- done + done - + - in process + in process - + - + - pending + pending - + - + diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index 5eb6c35b291b..9124d9c8e053 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -34,8 +34,8 @@
- - + +

@@ -54,44 +54,44 @@

- Action Bar Button - - + Action Bar Button + +

- Action Bar Button - - + Action Bar Button + +


- Default - Default + Default + Default

- Agree - Agree + Agree + Agree

- Decline - Decline + Decline + Decline

- Transparent - Transparent + Transparent + Transparent

- Emphasized - Emphasized + Emphasized + Emphasized

@@ -99,7 +99,7 @@

- Icon last + Icon last @@ -125,36 +125,36 @@

- Action Bar Button - - + Action Bar Button + +


- Default - Default + Default + Default

- Agree - Agree + Agree + Agree

- Decline - Decline + Decline + Decline

- Transparent - Transparent + Transparent + Transparent

- Emphasized - Emphasized + Emphasized + Emphasized

-<ui5-shellbar
+	<ui5-shellbar
 	id="shellbar"
 	primary-title="Corporate Portal"
 	secondary-title="secondary title"
@@ -87,22 +87,22 @@ <h3>Basic ProductSwitch</h3>
 	show-product-switch
 	show-co-pilot>
 </ui5-shellbar>
-<ui5-popover id="productswitch-popover" placementType="Bottom">
+<ui5-popover id="productswitch-popover" placement-type="Bottom">
 	<ui5-productswitch>
-		<ui5-productswitchitem maintitle="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem maintitle="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
+		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
 	</ui5-productswitch>
 </ui5-popover>
 
diff --git a/packages/main/test/specs/ProductSwitchItem.spec.js b/packages/main/test/specs/ProductSwitchItem.spec.js
index c1116f638b39..b5a1ee4cac3e 100644
--- a/packages/main/test/specs/ProductSwitchItem.spec.js
+++ b/packages/main/test/specs/ProductSwitchItem.spec.js
@@ -7,8 +7,7 @@ describe("ProductSwitchItem general interaction", () => {
 		const productSwitchItem = browser.$("#productSwitchItem");
 
 		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-icon"), "Icon is rendered.");
-		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-maintitle"), "Title is rendered.");
+		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-primary-title"), "Title is rendered.");
 		assert.ok(productSwitchItem.shadow$(".ui5-productswitchitem-subtitle"), "SubTitle is rendered.");
 	});
-});
-	
\ No newline at end of file
+});
\ No newline at end of file

From 004fae3110fe0cd1945d15755f6018e08d3a056d Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Mon, 18 Nov 2019 14:22:57 +0200
Subject: [PATCH 27/36] feat(ui5-productswitch): ui5-button internal usage

---
 packages/base/src/delegate/ItemNavigation.js  |  11 +-
 packages/main/bundle.esm.js                   |   5 +
 packages/main/src/Button.js                   |   4 +
 packages/main/src/ProductSwitch.hbs           |   2 +-
 packages/main/src/ProductSwitch.js            |  50 +++---
 packages/main/src/ProductSwitchItem.hbs       |  37 +++--
 packages/main/src/ProductSwitchItem.js        | 102 +++----------
 packages/main/src/themes/Button.css           |   4 +
 packages/main/src/themes/ProductSwitch.css    |  10 +-
 .../main/src/themes/ProductSwitchItem.css     | 143 ++++++++++--------
 .../base/ProductSwitchItem-parameters.css     |   5 +-
 packages/main/test/pages/ProductSwitch.html   |  50 +++---
 .../main/test/pages/ProductSwitchItem.html    |   2 +-
 .../test/samples/ProductSwitch.sample.html    |  92 +++--------
 .../main/test/specs/ProductSwitch.spec.js     |  11 --
 .../main/test/specs/ProductSwitchItem.spec.js |   6 +-
 16 files changed, 225 insertions(+), 309 deletions(-)

diff --git a/packages/base/src/delegate/ItemNavigation.js b/packages/base/src/delegate/ItemNavigation.js
index b85e8f1bb41d..98f8e700500e 100644
--- a/packages/base/src/delegate/ItemNavigation.js
+++ b/packages/base/src/delegate/ItemNavigation.js
@@ -184,9 +184,16 @@ class ItemNavigation extends EventProvider {
 		}
 
 		const currentItem = items[this.currentIndex];
+		let ref = currentItem;
+		let checked = false;
 
-		if (currentItem instanceof UI5Element) {
-			return currentItem.getFocusDomRef();
+		while (ref instanceof UI5Element) {
+			ref = ref.getFocusDomRef();
+			checked = true;
+		}
+
+		if (checked) {
+			return ref;
 		}
 
 		if (!this.rootWebComponent.getDomRef()) {
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index a218b0c22e73..dd3006962498 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -33,6 +33,11 @@ import Panel from "./dist/Panel.js";
 import RadioButton from "./dist/RadioButton.js";
 import Select from "./dist/Select.js";
 import Option from "./dist/Option.js";
+<<<<<<< HEAD
+=======
+import ProductSwitch from "./dist/ProductSwitch.js";
+import ProductSwitchItem from "./dist/ProductSwitchItem.js";
+>>>>>>> feat(ui5-productswitch): ui5-button internal usage
 import Switch from "./dist/Switch.js";
 import MessageStrip from "./dist/MessageStrip.js";
 import MultiComboBox from "./dist/MultiComboBox.js";
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index daa9b41f84bd..f8a2c4478074 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -255,6 +255,10 @@ class Button extends UI5Element {
 		}
 	}
 
+	getFocusDomRef() {
+		return this.shadowRoot.querySelector("button");
+	}
+
 	_onmousedown(event) {
 		event.isMarked = "button";
 		this.active = true;
diff --git a/packages/main/src/ProductSwitch.hbs b/packages/main/src/ProductSwitch.hbs
index 8e085526c69b..154244c781b1 100644
--- a/packages/main/src/ProductSwitch.hbs
+++ b/packages/main/src/ProductSwitch.hbs
@@ -1,3 +1,3 @@
-<div class="ui5-productswitch-root" @ui5-_press={{_onItemPress}}>
+<div class="ui5-product-switch-root" @focusin={{_onfocusin}}>
 	<slot></slot>
 </div>
\ No newline at end of file
diff --git a/packages/main/src/ProductSwitch.js b/packages/main/src/ProductSwitch.js
index 90eba0c95e71..e5e4392a2ed3 100644
--- a/packages/main/src/ProductSwitch.js
+++ b/packages/main/src/ProductSwitch.js
@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
@@ -9,7 +10,7 @@ import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
 
 
 const metadata = {
-	tag: "ui5-productswitch",
+	tag: "ui5-product-switch",
 	properties: {
 		/**
 		 * Indicates how much columns should be displayed.
@@ -21,7 +22,7 @@ const metadata = {
 	},
 	slots: {
 		/**
-		 * Defines the items of the <code>ui5-productswitch</code>.
+		 * Defines the items of the <code>ui5-product-switch</code>.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
@@ -32,32 +33,16 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: {
-		/**
-		 * Fired when an item is activated.
-		 *
-		 * @event
-		 * @param {HTMLElement} item the clicked item.
-		 * @public
-		 */
-		itemClick: {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-	},
 };
 
 class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
 		this.initItemNavigation();
-
-		this.addEventListener("ui5-_focused", this._onItemFocused.bind(this));
 	}
 
 	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
+		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
 		this._itemNavigation.getItemsCallback = () => this.items;
 	}
 
@@ -77,19 +62,36 @@ class ProductSwitch extends UI5Element {
 		return ProductSwitchTemplate;
 	}
 
-	static async define(...params) {
-		super.define(...params);
+	onEnterDOM() {
+		ResizeHandler.register(document.body, this._handleResize.bind(this));
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(document.body, this._handleResize);
 	}
 
+
 	onBeforeRendering() {
 		this.desktopColumns = this.items.length > 6 ? 4 : 3;
 	}
 
-	_onItemPress(event) {
-		this.fireEvent("itemClick", { item: event.detail.item });
+	_handleResize() {
+		if (!this._itemNavigation) {
+			return;
+		}
+
+		const iWidth = document.body.clientWidth;
+
+		if (iWidth <= 600) {
+			this._itemNavigation.rowSize = 1;
+		} else if (iWidth <= 900 || this.items.length <= 6) {
+			this._itemNavigation.rowSize = 3;
+		} else {
+			this._itemNavigation.rowSize = 4;
+		}
 	}
 
-	_onItemFocused(event) {
+	_onfocusin(event) {
 		const target = event.target;
 
 		this._itemNavigation.update(target);
diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs
index e4e588b7633c..9acadf4ef10f 100644
--- a/packages/main/src/ProductSwitchItem.hbs
+++ b/packages/main/src/ProductSwitchItem.hbs
@@ -1,24 +1,31 @@
-<div
-	class="ui5-productswitchitem-root"
-	data-sap-focus-ref
-	@focusout="{{_onfocusout}}"
-	@focusin="{{_onfocusin}}"
-	@mousedown="{{_onmousedown}}"
-	@keydown="{{_onkeydown}}"
-	@keyup="{{_onkeyup}}"
-	tabindex={{_tabIndex}}>
+<ui5-button
+	design="Transparent"
+	class="ui5-product-switch-item-root"
+	?non-focusable={{_check}}>
+	{{#if targetSrc}}
+		<a class="ui5-product-switch-item-wrapper" href="{{targetSrc}}" target="{{target}}" tabindex="-1">
+			{{> item}}
+		</a>
+	{{else}}
+		<div class="ui5-product-switch-item-wrapper">
+			{{> item}}
+		</div>
+	{{/if}}
+</ui5-button>
+
+{{#*inline "item"}}
 	{{#if icon}}
 		<ui5-icon
-			class="ui5-productswitchitem-icon"
+			class="ui5-product-switch-item-icon"
 			src="{{icon}}"
 		></ui5-icon>
 	{{/if}}
-	<div class="ui5-productswitchitem-text-content">
-		{{#if primaryTitle}}
-			<div class="ui5-productswitchitem-primary-title">{{primaryTitle}}</div>
+	<div class="ui5-product-switch-item-text-content">
+		{{#if heading}}
+			<div class="ui5-product-switch-item-heading">{{heading}}</div>
 		{{/if}}
 		{{#if subtitle}}
-			<div class="ui5-productswitchitem-subtitle">{{subtitle}}</div>
+			<div class="ui5-product-switch-item-subtitle">{{subtitle}}</div>
 		{{/if}}
 	</div>
-</div>
\ No newline at end of file
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/ProductSwitchItem.js b/packages/main/src/ProductSwitchItem.js
index 3a112b757b54..793dbf86e62a 100644
--- a/packages/main/src/ProductSwitchItem.js
+++ b/packages/main/src/ProductSwitchItem.js
@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
 
 // Styles
@@ -8,19 +7,19 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
 
 
 const metadata = {
-	tag: "ui5-productswitchitem",
+	tag: "ui5-product-switch-item",
 	properties: {
 		/**
-		  * Defines the title of the <code>ui5-productswitchitem</code>.
+		  * Defines the title of the <code>ui5-product-switch-item</code>.
 		  * @type {string}
 		  * @defaultvalue ""
 		  * @public
 		  */
-		primaryTitle: {
+		heading: {
 			type: String,
 		},
 		/**
-		 * Defines the subtitle of the <code>ui5-productswitchitem</code>.
+		 * Defines the subtitle of the <code>ui5-product-switch-item</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -29,12 +28,12 @@ const metadata = {
 			type: String,
 		},
 		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-productswitchitem</code>.
+		 * Defines the icon to be displayed as graphical element within the <code>ui5-product-switch-item</code>.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
 		 * <br>
-		 * <pre>ui5-productswitchitem icon="sap-icon://palette"</pre>
+		 * <pre>ui5-product-switch-item icon="sap-icon://palette"</pre>
 		 *
 		 * See all the available icons in 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>.
 		 *
@@ -46,18 +45,23 @@ const metadata = {
 			type: String,
 		},
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-productswitchitem</code>.
-		 * @private
+		 * Specifies a target where the targetSrc content must be open.
+		 * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
 		 */
-		active: {
-			type: Boolean,
+		target: {
+			type: String,
 		},
 		/**
-		 * Indicates if the elements is on focus
-		 * @private
+		 *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
 		 */
-		focused: {
-			type: Boolean,
+		targetSrc: {
+			type: String,
 		},
 		_tabIndex: {
 			type: String,
@@ -65,12 +69,6 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: {
-		//
-	},
-	events: {
-		_focused: {},
-	},
 };
 
 class ProductSwitchItem extends UI5Element {
@@ -90,66 +88,8 @@ class ProductSwitchItem extends UI5Element {
 		return ProductSwitchItemTemplate;
 	}
 
-	static async define(...params) {
-		super.define(...params);
-	}
-
-	onEnterDOM() {
-		document.addEventListener("mouseup", this._deactivate.bind(this));
-	}
-
-	onExitDOM() {
-		document.removeEventListener("mouseup", this._deactivate.bind(this));
-	}
-
-	_deactivate() {
-		if (this.active) {
-			this.active = false;
-		}
-	}
-
-	_onmousedown() {
-		this.active = true;
-		this._fireItemPress();
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = true;
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this._fireItemPress();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.active = false;
-		}
-
-		if (isSpace(event)) {
-			this._fireItemPress();
-		}
-	}
-
-	_onfocusout() {
-		this.active = false;
-		this.focused = false;
-	}
-
-	_onfocusin(event) {
-		this.focused = true;
-
-		this.fireEvent("_focused", event);
-	}
-
-	_fireItemPress() {
-		this.fireEvent("_press", { item: this });
+	get _check() {
+		return this._tabIndex !== "0";
 	}
 }
 
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index f30e28a8d923..27531753094e 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -96,6 +96,8 @@
 .ui5-button-text {
 	outline: none;
 	position: relative;
+	width: 100%;
+	height: 100%;
 }
 
 :host([has-icon]) .ui5-button-text {
@@ -120,6 +122,8 @@ bdi {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
+	width: 100%;
+	height: 100%;
 }
 
 :host([active]:not([disabled])) {
diff --git a/packages/main/src/themes/ProductSwitch.css b/packages/main/src/themes/ProductSwitch.css
index 286ae4757ecd..b7c5bc36653b 100644
--- a/packages/main/src/themes/ProductSwitch.css
+++ b/packages/main/src/themes/ProductSwitch.css
@@ -3,26 +3,26 @@
 	font-size: var(--sapMFontMediumSize);
 }
 
-.ui5-productswitch-root {
+.ui5-product-switch-root {
 	display: flex;
 	flex-wrap: wrap;
 	width: 752px; /* 4 * item size */
 	padding: 1.25rem 0.75rem;
 }
 
-:host([desktop-columns="3"]) .ui5-productswitch-root {
+:host([desktop-columns="3"]) .ui5-product-switch-root {
 	width: 564px; /* 3 * item size */
 }
 
 @media only screen and (max-width: 900px) {
-	.ui5-productswitch-root {
+	.ui5-product-switch-root {
 		width: 564px; /* 3 * item size */
 	}
 }
 
 @media only screen and (max-width: 600px) {
-	.ui5-productswitch-root,
-	:host([desktop-columns="3"]) .ui5-productswitch-root {
+	.ui5-product-switch-root,
+	:host([desktop-columns="3"]) .ui5-product-switch-root {
 		flex-direction: column;
 		padding: 0;
 		width: 100%;
diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css
index 79d9243bca9b..3bfe51aca279 100644
--- a/packages/main/src/themes/ProductSwitchItem.css
+++ b/packages/main/src/themes/ProductSwitchItem.css
@@ -1,132 +1,141 @@
 :host {
-	font-family: var(--sapUiFontFamily);
-	font-size: var(--sapMFontMediumSize);
+	width: var(--_ui5_product_switch_item_width);
+	height: var(--_ui5_product_switch_item_height);
 	margin: 0.25rem;
-	background:var(--_ui5_product_switch_item_background_color);
-	width:var(--_ui5_product_switch_item_width);
-	height:var(--_ui5_product_switch_item_height);
+}
+
+.ui5-product-switch-item-root {
+	width: 100%;
+	height: 100%;
+	border-radius: 0.25rem;
 	padding: 0.5rem;
 	padding-top: 4rem;
-	border-radius: 0.25rem;
-	box-sizing: border-box;
+	user-select: none;
+	-ms-user-select: none;
 }
 
-:host([icon]) {
+:host([icon]) .ui5-product-switch-item-root {
 	padding-top: 0.5rem;
 }
 
-:host(:hover) {
-	background:var(--_ui5_product_switch_item_hover_background_color);
-}
-
-:host([active]) {
-	background:var(--_ui5_product_switch_item_active_background_color);
-}
-
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-icon,
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title,
-:host([active]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-	color:var(--_ui5_product_switch_item_active_color);
-}
-
-:host([focused]) {
-	outline:var(--_ui5_product_switch_item_outline);
-	outline-offset:var(--_ui5_product_switch_item_outline_offset)
-}
-
-:host([focused]) .ui5-productswitchitem-root {
-	outline:none;
-}
-
-:host([active][focused]) {
-	outline-color: #ffffff;
-}
-
-.ui5-productswitchitem-root {
+.ui5-product-switch-item-root .ui5-product-switch-item-wrapper {
 	width: 100%;
 	height: 100%;
-	display: flex;
 	flex-direction: column;
+	display: flex;
 	align-items: center;
-	cursor: pointer;
-	user-select: none;
-	-ms-user-select: none;
+	text-decoration: none;
+	outline: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-icon {
+.ui5-product-switch-item-root .ui5-product-switch-item-icon {
 	width: 3rem;
 	height: 3rem;
 	padding: 0.75rem;
 	margin-bottom: 0.5rem;
 	box-sizing: border-box;
-	color:var(--_ui5_product_switch_item_icon_color);
+	color: var(--_ui5_product_switch_item_icon_color);
 	pointer-events: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content {
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
+	flex-direction: column;
+	max-width: 10.25rem;
+	height: 2.5rem;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle,
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title {
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading,
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
 	line-height: 1.25rem;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	max-width: 10.25rem;
+	max-width: 100%;
 	text-align: center;
 	pointer-events: none;
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title {
-	font-size:var(--_ui5_product_switch_item_title_size);
-	color:var(--_ui5_product_switch_item_title_color);
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading {
+	font-size: var(--_ui5_product_switch_item_title_size);
+	color: var(--_ui5_product_switch_item_title_color);
 }
 
-.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-	font-size:var(--_ui5_product_switch_item_subtitle_size);
-	color:var(--_ui5_product_switch_item_subtitle_color);
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	font-size: var(--_ui5_product_switch_item_subtitle_size);
+	color: var(--_ui5_product_switch_item_subtitle_color);
 }
 
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-icon,
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-heading,
+.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	color: var(--_ui5_product_switch_item_active_color);
+}
+
+.ui5-product-switch-item-root:not([active]):hover {
+	background: var(--_ui5_product_switch_item_hover_background_color);
+	border-color: transparent;
+}
 
 @media only screen and (max-width: 600px) {
 	:host {
 		margin: 0;
 		width: 100%;
-		padding: 0 1rem 0 1.875rem;
 		width: 100%;
 		max-width: 600px;
 		height: 5rem;
+	}
+
+	.ui5-product-switch-item-root {
+		width: 100%;
+		height: 100%;
 		border-radius: 0;
+		padding: 0 1.25rem;
 	}
 
-	:host .ui5-productswitchitem-root {
-		flex-direction: row;
+	:host([icon]) .ui5-product-switch-item-root {
+		padding-left: 0.4375rem;
+		padding-top: 0;
 	}
 
-	:host([icon]) {
-		padding: 0 1rem;
+	.ui5-product-switch-item-root .ui5-product-switch-item-wrapper {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-icon {
+	.ui5-product-switch-item-root .ui5-product-switch-item-icon {
 		padding: 0.875rem;
+		color: var(--_ui5_product_switch_item_mobile_icon_color);
 		margin: 0 0.75rem 0 0;
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content {
-		max-width: 100%;
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 		align-items: flex-start;
+		max-width: 100%;
+		height: auto;
 	}
 
-	:host([icon]) .ui5-productswitchitem-root .ui5-productswitchitem-text-content {
-		max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/
+	:host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+		max-width: calc(100% - 3.75rem);
 	}
 
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-primary-title,
-	.ui5-productswitchitem-root .ui5-productswitchitem-text-content .ui5-productswitchitem-subtitle {
-		max-width: 100%;
-		text-align: left;
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+		font-size: var(--_ui5_product_switch_item_mobile_subtitle_size);
+		padding-top: 0.75rem;
 	}
+}
+/* IE SPECIFIC */
+.ui5-product-switch-item-root[design="Transparent"]:not([active]):hover {
+	border-color: transparent;
+}
+
+ui5-product-switch-item ui5-button[focused] {
+	outline: var(--_ui5_product_switch_item_outline);
+}
+
+ui5-product-switch-item ui5-button[focused] .ui5-button-root::after {
+	display: none;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css
index ae47c99a823d..677cc42a963f 100644
--- a/packages/main/src/themes/base/ProductSwitchItem-parameters.css
+++ b/packages/main/src/themes/base/ProductSwitchItem-parameters.css
@@ -1,15 +1,14 @@
 :root {
 	--_ui5_product_switch_item_width: 11.25rem;
 	--_ui5_product_switch_item_height: 7rem;
-	--_ui5_product_switch_item_background_color: #ffffff;
 	--_ui5_product_switch_item_hover_background_color: #f5f5f5;
-	--_ui5_product_switch_item_active_background_color: #0854a0;
 	--_ui5_product_switch_item_active_color: #ffffff;
 	--_ui5_product_switch_item_icon_color: #0854a0;
+	--_ui5_product_switch_item_mobile_icon_color: #6a6d70;
 	--_ui5_product_switch_item_title_color: #32363a;
 	--_ui5_product_switch_item_title_size: .875rem;
 	--_ui5_product_switch_item_subtitle_color: #6a6d70;
 	--_ui5_product_switch_item_subtitle_size: .75rem;
+	--_ui5_product_switch_item_mobile_subtitle_size: .875rem;
 	--_ui5_product_switch_item_outline: .0625rem #000000 dotted;
-	--_ui5_product_switch_item_outline_offset: -.1875rem;
 }
\ No newline at end of file
diff --git a/packages/main/test/pages/ProductSwitch.html b/packages/main/test/pages/ProductSwitch.html
index c45c838ae2cd..e1cfdd2d22dd 100644
--- a/packages/main/test/pages/ProductSwitch.html
+++ b/packages/main/test/pages/ProductSwitch.html
@@ -28,38 +28,38 @@
 </head>
 
 <body>
-	<ui5-productswitch id="productSwitchThreeColumn">
-		<ui5-productswitchitem id="firstItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-	</ui5-productswitch>
+	<ui5-product-switch id="productSwitchThreeColumn">
+		<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+	</ui5-product-switch>
 
-	<ui5-productswitch id="productSwitchFourColumn">
-		<ui5-productswitchitem id="firstItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-	</ui5-productswitch>
+	<ui5-product-switch id="productSwitchFourColumn">
+		<ui5-product-switch-item id="firstItem" heading="Home" subtitle="Central Home" target-src="#" icon="sap-icon://home"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+		<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+	</ui5-product-switch>
 
-	<ui5-input id="eventTest" />
+	<ui5-input id="eventTest"></ui5-input>
 
 	<script>
-		var oProductSwitch = document.getElementById("productSwitchFourColumn");
+		var oProductSwitch = document.getElementById("firstItem");
 		var oInput = document.getElementById("eventTest");
 		var pressCount = 0;
 
-		oProductSwitch.addEventListener("itemClick", function (oEvent) {
+		oProductSwitch.addEventListener("click", function (oEvent) {
 			pressCount += 1;
 			oInput.value = pressCount;
 		});
diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/main/test/pages/ProductSwitchItem.html
index d29901916bc9..0d4af4e67f79 100644
--- a/packages/main/test/pages/ProductSwitchItem.html
+++ b/packages/main/test/pages/ProductSwitchItem.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-		<ui5-productswitchitem id="productSwitchItem" primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
+		<ui5-product-switch-item id="productSwitchItem" heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
 </body>
 
 </html>
diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html
index c5cf58820c31..05d08b335b35 100644
--- a/packages/main/test/samples/ProductSwitch.sample.html
+++ b/packages/main/test/samples/ProductSwitch.sample.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-	<title>&lt;ui5-productswitch&gt;</title>
+	<title>&lt;ui5-product-switch&gt;</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
@@ -36,86 +36,36 @@
 
 	<header>
 		<div class="control-header">ProductSwitch</div>
-		<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-productswitch&gt;</div>
+		<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-product-switch&gt;</div>
 	</header>
 
 	<section>
 		<h3>Basic ProductSwitch</h3>
 		<div class="snippet">
-			<ui5-shellbar
-				id="shellbar"
-				primary-title="Corporate Portal"
-				secondary-title="secondary title"
-				logo="../../images/sap-logo-svg.svg"
-				show-product-switch
-				show-co-pilot>
-			</ui5-shellbar>
-			<ui5-popover id="productswitch-popover" placement-type="Bottom">
-				<ui5-productswitch>
-						<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-						<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-				</ui5-productswitch>
-			</ui5-popover>
-
-			<script>
-				var shellBar = document.getElementById("shellbar");
+				<ui5-product-switch>
+						<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+						<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+				</ui5-product-switch>
+				<!-- var shellBar = document.getElementById("shellbar");
 				var popover = document.getElementById("productswitch-popover");
 
 				shellbar.addEventListener("productSwitchClick", function(event) {
 					popover.openBy(event.detail.targetRef)
-				});
-			</script>
+				}); -->
+			<!-- </script> -->
 		</div>
-		<pre class="prettyprint lang-html"><xmp>
-	<ui5-shellbar
-	id="shellbar"
-	primary-title="Corporate Portal"
-	secondary-title="secondary title"
-	logo="../../images/sap-logo-svg.svg"
-	show-product-switch
-	show-co-pilot>
-</ui5-shellbar>
-<ui5-popover id="productswitch-popover" placement-type="Bottom">
-	<ui5-productswitch>
-		<ui5-productswitchitem primary-title="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Guided Buying" icon="sap-icon://credit-card"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Strategic Procurement" icon="sap-icon://cart-3"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Human Capital Management" icon="sap-icon://customer"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Service Cloud" icon="sap-icon://family-care"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-productswitchitem>
-		<ui5-productswitchitem primary-title="S/4HANA" icon="sap-icon://batch-payments"></ui5-productswitchitem>
-	</ui5-productswitch>
-</ui5-popover>
-
-<script>
-	var shellBar = document.getElementById("shellbar");
-	var popover = document.getElementById("productswitch-popover");
-
-	shellbar.addEventListener("productSwitchClick", function(event) {
-		popover.openBy(event.detail.targetRef)
-	});
-</script>
-		
- @@ -36,7 +35,7 @@ - + diff --git a/packages/main/test/pages/ProductSwitchItem.html b/packages/fiori/test/pages/ProductSwitchItem.html similarity index 83% rename from packages/main/test/pages/ProductSwitchItem.html rename to packages/fiori/test/pages/ProductSwitchItem.html index 0d4af4e67f79..8669660e9197 100644 --- a/packages/main/test/pages/ProductSwitchItem.html +++ b/packages/fiori/test/pages/ProductSwitchItem.html @@ -4,13 +4,13 @@ - + ProductSwitchItem diff --git a/packages/fiori/test/samples/ProductSwitch.sample.html b/packages/fiori/test/samples/ProductSwitch.sample.html new file mode 100644 index 000000000000..32201f5a7786 --- /dev/null +++ b/packages/fiori/test/samples/ProductSwitch.sample.html @@ -0,0 +1,90 @@ +
+
ProductSwitch
+
<ui5-product-switch>
+
+ +
+

Basic ProductSwitch

+
+ + + + + + + + + + + + + + + + + + + + + + +
+

+<ui5-shellbar
+	id="shellbar"
+	heading="Corporate Portal"
+	secondary-title="secondary title"
+	logo="../../images/sap-logo-svg.svg"
+	show-product-switch
+	show-co-pilot>
+</ui5-shellbar>
+<ui5-popover id="productswitch-popover" placement-type="Bottom">
+	<ui5-product-switch>
+			<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
+			<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
+	</ui5-product-switch>
+</ui5-popover>
+
+<script>
+	var shellBar = document.getElementById("shellbar");
+	var popover = document.getElementById("productswitch-popover");
+
+	shellbar.addEventListener("productSwitchClick", function(event) {
+		if (popover.opened) {
+			popover.close();
+		} else {
+			popover.openBy(event.detail.targetRef);
+		}
+	});
+</script>
+	
+
\ No newline at end of file diff --git a/packages/main/test/specs/ProductSwitch.spec.js b/packages/fiori/test/specs/ProductSwitch.spec.js similarity index 93% rename from packages/main/test/specs/ProductSwitch.spec.js rename to packages/fiori/test/specs/ProductSwitch.spec.js index 3761b15e8714..126805c55729 100644 --- a/packages/main/test/specs/ProductSwitch.spec.js +++ b/packages/fiori/test/specs/ProductSwitch.spec.js @@ -1,7 +1,7 @@ const assert = require("assert"); describe("ProductSwitch general interaction", () => { - browser.url("http://localhost:8080/test-resources/pages/ProductSwitch.html"); + browser.url("http://localhost:8081/test-resources/pages/ProductSwitch.html"); it("tests desktopColumns attribute", () => { const productSwitchFourColumn = browser.$("#productSwitchFourColumn"); diff --git a/packages/main/test/specs/ProductSwitchItem.spec.js b/packages/fiori/test/specs/ProductSwitchItem.spec.js similarity index 88% rename from packages/main/test/specs/ProductSwitchItem.spec.js rename to packages/fiori/test/specs/ProductSwitchItem.spec.js index a775b18546ee..5e95502a6667 100644 --- a/packages/main/test/specs/ProductSwitchItem.spec.js +++ b/packages/fiori/test/specs/ProductSwitchItem.spec.js @@ -1,7 +1,7 @@ const assert = require("assert"); describe("ProductSwitchItem general interaction", () => { - browser.url("http://localhost:8080/test-resources/pages/ProductSwitchItem.html"); + browser.url("http://localhost:8081/test-resources/pages/ProductSwitchItem.html"); it("tests rendering", () => { const productSwitchItem = browser.$("#productSwitchItem"); diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index dd3006962498..0796c81123c8 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -34,10 +34,13 @@ import RadioButton from "./dist/RadioButton.js"; import Select from "./dist/Select.js"; import Option from "./dist/Option.js"; <<<<<<< HEAD +<<<<<<< HEAD ======= import ProductSwitch from "./dist/ProductSwitch.js"; import ProductSwitchItem from "./dist/ProductSwitchItem.js"; >>>>>>> feat(ui5-productswitch): ui5-button internal usage +======= +>>>>>>> feat(ui5-product-switch): stand alone component import Switch from "./dist/Switch.js"; import MessageStrip from "./dist/MessageStrip.js"; import MultiComboBox from "./dist/MultiComboBox.js"; diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index f8a2c4478074..daa9b41f84bd 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -255,10 +255,6 @@ class Button extends UI5Element { } } - getFocusDomRef() { - return this.shadowRoot.querySelector("button"); - } - _onmousedown(event) { event.isMarked = "button"; this.active = true; diff --git a/packages/main/src/ProductSwitchItem.hbs b/packages/main/src/ProductSwitchItem.hbs deleted file mode 100644 index 9acadf4ef10f..000000000000 --- a/packages/main/src/ProductSwitchItem.hbs +++ /dev/null @@ -1,31 +0,0 @@ - - {{#if targetSrc}} - - {{> item}} - - {{else}} -
- {{> item}} -
- {{/if}} -
- -{{#*inline "item"}} - {{#if icon}} - - {{/if}} -
- {{#if heading}} -
{{heading}}
- {{/if}} - {{#if subtitle}} -
{{subtitle}}
- {{/if}} -
-{{/inline}} \ No newline at end of file diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 27531753094e..f30e28a8d923 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -96,8 +96,6 @@ .ui5-button-text { outline: none; position: relative; - width: 100%; - height: 100%; } :host([has-icon]) .ui5-button-text { @@ -122,8 +120,6 @@ bdi { display: flex; justify-content: flex-start; align-items: center; - width: 100%; - height: 100%; } :host([active]:not([disabled])) { diff --git a/packages/main/src/themes/ProductSwitchItem.css b/packages/main/src/themes/ProductSwitchItem.css deleted file mode 100644 index 3bfe51aca279..000000000000 --- a/packages/main/src/themes/ProductSwitchItem.css +++ /dev/null @@ -1,141 +0,0 @@ -:host { - width: var(--_ui5_product_switch_item_width); - height: var(--_ui5_product_switch_item_height); - margin: 0.25rem; -} - -.ui5-product-switch-item-root { - width: 100%; - height: 100%; - border-radius: 0.25rem; - padding: 0.5rem; - padding-top: 4rem; - user-select: none; - -ms-user-select: none; -} - -:host([icon]) .ui5-product-switch-item-root { - padding-top: 0.5rem; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-wrapper { - width: 100%; - height: 100%; - flex-direction: column; - display: flex; - align-items: center; - text-decoration: none; - outline: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-icon { - width: 3rem; - height: 3rem; - padding: 0.75rem; - margin-bottom: 0.5rem; - box-sizing: border-box; - color: var(--_ui5_product_switch_item_icon_color); - pointer-events: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content { - display: flex; - align-items: center; - flex-direction: column; - max-width: 10.25rem; - height: 2.5rem; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading, -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - line-height: 1.25rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - text-align: center; - pointer-events: none; -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading { - font-size: var(--_ui5_product_switch_item_title_size); - color: var(--_ui5_product_switch_item_title_color); -} - -.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - font-size: var(--_ui5_product_switch_item_subtitle_size); - color: var(--_ui5_product_switch_item_subtitle_color); -} - -.ui5-product-switch-item-root[active] .ui5-product-switch-item-icon, -.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-heading, -.ui5-product-switch-item-root[active] .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - color: var(--_ui5_product_switch_item_active_color); -} - -.ui5-product-switch-item-root:not([active]):hover { - background: var(--_ui5_product_switch_item_hover_background_color); - border-color: transparent; -} - -@media only screen and (max-width: 600px) { - :host { - margin: 0; - width: 100%; - width: 100%; - max-width: 600px; - height: 5rem; - } - - .ui5-product-switch-item-root { - width: 100%; - height: 100%; - border-radius: 0; - padding: 0 1.25rem; - } - - :host([icon]) .ui5-product-switch-item-root { - padding-left: 0.4375rem; - padding-top: 0; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-wrapper { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-icon { - padding: 0.875rem; - color: var(--_ui5_product_switch_item_mobile_icon_color); - margin: 0 0.75rem 0 0; - } - - .ui5-product-switch-item-root .ui5-product-switch-item-text-content { - align-items: flex-start; - max-width: 100%; - height: auto; - } - - :host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content { - max-width: calc(100% - 3.75rem); - } - - .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle { - font-size: var(--_ui5_product_switch_item_mobile_subtitle_size); - padding-top: 0.75rem; - } -} -/* IE SPECIFIC */ -.ui5-product-switch-item-root[design="Transparent"]:not([active]):hover { - border-color: transparent; -} - -ui5-product-switch-item ui5-button[focused] { - outline: var(--_ui5_product_switch_item_outline); -} - -ui5-product-switch-item ui5-button[focused] .ui5-button-root::after { - display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/base/ProductSwitch-parameters.css b/packages/main/src/themes/base/ProductSwitch-parameters.css deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/main/src/themes/base/ProductSwitchItem-parameters.css b/packages/main/src/themes/base/ProductSwitchItem-parameters.css deleted file mode 100644 index 677cc42a963f..000000000000 --- a/packages/main/src/themes/base/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --_ui5_product_switch_item_width: 11.25rem; - --_ui5_product_switch_item_height: 7rem; - --_ui5_product_switch_item_hover_background_color: #f5f5f5; - --_ui5_product_switch_item_active_color: #ffffff; - --_ui5_product_switch_item_icon_color: #0854a0; - --_ui5_product_switch_item_mobile_icon_color: #6a6d70; - --_ui5_product_switch_item_title_color: #32363a; - --_ui5_product_switch_item_title_size: .875rem; - --_ui5_product_switch_item_subtitle_color: #6a6d70; - --_ui5_product_switch_item_subtitle_size: .75rem; - --_ui5_product_switch_item_mobile_subtitle_size: .875rem; - --_ui5_product_switch_item_outline: .0625rem #000000 dotted; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css deleted file mode 100644 index 673e7a51184b..000000000000 --- a/packages/main/src/themes/sap_belize/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,9 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_hover_background_color: #f0f0f0; - --_ui5_product_switch_item_active_background_color: #427cac; - --_ui5_product_switch_item_icon_color: #346187; - --_ui5_product_switch_item_title_color: #333333; - --_ui5_product_switch_item_subtitle_color: #666666; -} \ 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 2e96b2d202dc..0f2b5f19a437 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -9,6 +9,7 @@ @import "../base/GroupHeaderListItem-parameters.css"; @import "./Input-parameters.css"; @import "./InputIcon-parameters.css"; +<<<<<<< HEAD @import "../base/Link-parameters.css"; @import "../base/ListItemBase-parameters.css"; @import "../base/MessageStrip-parameters.css"; @@ -27,3 +28,23 @@ @import "../base/YearPicker-parameters.css"; @import "../base/Token-parameters.css"; @import "../base/MultiComboBox-parameters.css"; +======= +@import "./Link-parameters.css"; +@import "./ListItemBase-parameters.css"; +@import "./MessageStrip-parameters.css"; +@import "./MonthPicker-parameters.css"; +@import "./Panel-parameters.css"; +@import "./Popover-parameters.css"; +@import "./RadioButton-parameters.css"; +@import "./Select-parameters.css"; +@import "./Switch-parameters.css"; +@import "./TabContainer-parameters.css"; +@import "./Table-parameters.css"; +@import "./TableRow-parameters.css"; +@import "./TextArea-parameters.css"; +@import "./TimelineItem-parameters.css"; +@import "./ToggleButton-parameters.css"; +@import "./YearPicker-parameters.css"; +@import "./Token-parameters.css"; +@import "./MultiComboBox-parameters.css"; +>>>>>>> feat(ui5-product-switch): stand alone component diff --git a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css deleted file mode 100644 index ab6ff049a885..000000000000 --- a/packages/main/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css +++ /dev/null @@ -1,12 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_background_color: #000000; - --_ui5_product_switch_item_hover_background_color: #7a5100; - --_ui5_product_switch_item_active_background_color: #7a5100; - --_ui5_product_switch_item_active_color: #ffffff; - --_ui5_product_switch_item_icon_color: #ffffff; - --_ui5_product_switch_item_title_color: #ffffff; - --_ui5_product_switch_item_subtitle_color: #ffffff; - --_ui5_product_switch_item_outline: .125rem #ffffff dotted; -} \ 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 c4c750435477..fdac2deb4c5d 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -15,7 +15,6 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "./Popover-parameters.css"; -@import "./ProductSwitchItem-parameters.css"; @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 68b855e78e78..42ffb8db2657 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -13,10 +13,17 @@ @import "./MonthPicker-parameters.css"; @import "../base/MessageStrip-parameters.css"; @import "./Panel-parameters.css"; +<<<<<<< HEAD @import "../base/Popover-parameters.css"; @import "../base/RadioButton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; +======= +@import "./Popover-parameters.css"; +@import "./RadioButton-parameters.css"; +@import "./Select-parameters.css"; +@import "./Switch-parameters.css"; +>>>>>>> feat(ui5-product-switch): stand alone component @import "./TabContainer-parameters.css"; @import "../base/TextArea-parameters.css"; @import "../base/TimelineItem-parameters.css"; diff --git a/packages/main/test/samples/ProductSwitch.sample.html b/packages/main/test/samples/ProductSwitch.sample.html deleted file mode 100644 index 05d08b335b35..000000000000 --- a/packages/main/test/samples/ProductSwitch.sample.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - <ui5-product-switch> - - - - - - - - - - - - - - - - - - - - - - -
-
ProductSwitch
-
<ui5-product-switch>
-
- -
-

Basic ProductSwitch

-
- - - - - - - - - - - - - - - - - - -
- - - - - - From cffff2d365c8a74763323bf2859a806149372477 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 11:10:34 +0200 Subject: [PATCH 29/36] feat(ui5-product-switch): stand alone component fixes --- packages/fiori/src/ProductSwitchItem.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 9b0bbce70ce5..86108649676f 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -91,9 +91,6 @@ const metadata = { /** * Fired when the ui5-product-switch-item is activated either with a * mouse/tap or by using the Enter or Space key. - *

- * Note: The event will not be fired if the disabled - * property is set to true. * * @event * @public From 633230607fa7e0ba650e18765188097dc38125c5 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 17:17:52 +0200 Subject: [PATCH 30/36] feat(ui5-product-switch): stand alone component review fixes --- packages/fiori/src/ProductSwitch.js | 25 +++++-------- packages/fiori/src/ProductSwitchItem.js | 13 +++++-- .../fiori/src/themes/ProductSwitchItem.css | 21 +++++++++++ .../base/ProductSwitchItem-parameters.css | 5 ++- .../ProductSwitchItem-parameters.css | 4 ++- .../ProductSwitchItem-parameters.css | 7 +--- packages/fiori/test/pages/ProductSwitch.html | 36 +++++++++---------- .../fiori/test/pages/ProductSwitchItem.html | 2 +- 8 files changed, 67 insertions(+), 46 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 82569987c471..345a221b2b18 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -36,12 +36,6 @@ const metadata = { }; class ProductSwitch extends UI5Element { - constructor() { - super(); - - this.initItemNavigation(); - } - initItemNavigation() { this._itemNavigation = new ItemNavigation(this, { rowSize: 4 }); this._itemNavigation.getItemsCallback = () => this.items; @@ -64,28 +58,27 @@ class ProductSwitch extends UI5Element { } onEnterDOM() { - ResizeHandler.register(document.body, this._handleResize.bind(this)); + this._handleResizeBound = this._handleResize.bind(this); + + this.initItemNavigation(); + + ResizeHandler.register(document.body, this._handleResizeBound); } onExitDOM() { - ResizeHandler.deregister(document.body, this._handleResize); + ResizeHandler.deregister(document.body, this._handleResizeBound); } - onBeforeRendering() { this.desktopColumns = this.items.length > 6 ? 4 : 3; } _handleResize() { - if (!this._itemNavigation) { - return; - } - - const iWidth = document.body.clientWidth; + const documentWidth = document.body.clientWidth; - if (iWidth <= 600) { + if (documentWidth <= 600) { this._itemNavigation.rowSize = 1; - } else if (iWidth <= 900 || this.items.length <= 6) { + } else if (documentWidth <= 900 || this.items.length <= 6) { this._itemNavigation.rowSize = 3; } else { this._itemNavigation.rowSize = 4; diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 86108649676f..2e13059b4884 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -49,11 +49,12 @@ const metadata = { * Specifies a target where the targetSrc content must be open. * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. * @type {string} - * @defaultvalue "" + * @defaultvalue "_self" * @public */ target: { type: String, + defaultValue: "_self", }, /** *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. @@ -118,11 +119,17 @@ class ProductSwitchItem extends UI5Element { } onEnterDOM() { - document.addEventListener("mouseup", this._deactivate.bind(this)); + this._deactivate = () => { + if (this.active) { + this.active = false; + } + }; + + document.addEventListener("mouseup", this._deactivate); } onExitDOM() { - document.removeEventListener("mouseup", this._deactivate.bind(this)); + document.removeEventListener("mouseup", this._deactivate); } _deactivate() { diff --git a/packages/fiori/src/themes/ProductSwitchItem.css b/packages/fiori/src/themes/ProductSwitchItem.css index 593100d3ff02..bec59fbce7c8 100644 --- a/packages/fiori/src/themes/ProductSwitchItem.css +++ b/packages/fiori/src/themes/ProductSwitchItem.css @@ -130,4 +130,25 @@ font-size: var(--sapMFontMediumSize); padding-top: .75rem; } +} + +ui5-product-switch-item[focused] { + outline: none; + position: relative; +} + +ui5-product-switch-item[focused] .ui5-product-switch-item-root::after { + content: ""; + position: absolute; + border-color: var(--_ui5_product_switch_item_outline_color); + border-width: var(--_ui5_product_switch_item_outline_width); + border-style: dotted; + top: var(--_ui5_product_switch_item_outline_offset_positive); + bottom: var(--_ui5_product_switch_item_outline_offset_positive); + left: var(--_ui5_product_switch_item_outline_offset_positive); + right: var(--_ui5_product_switch_item_outline_offset_positive); +} + +ui5-product-switch-item[active][focused] .ui5-product-switch-item-root::after { + border-color: var(--_ui5_product_switch_item_active_outline_color); } \ No newline at end of file diff --git a/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css index 01c284700684..da79680b4701 100644 --- a/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/base/ProductSwitchItem-parameters.css @@ -1,7 +1,10 @@ :root { --_ui5_product_switch_item_width: 11.25rem; --_ui5_product_switch_item_height: 7rem; - --_ui5_product_switch_item_outline: .0625rem var(--sapUiContentFocusColor) dotted; + --_ui5_product_switch_item_outline_width: .0625rem; + --_ui5_product_switch_item_outline_color: var(--sapUiContentFocusColor); + --_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted; --_ui5_product_switch_item_active_outline_color: var(--sapUiContentContrastFocusColor); --_ui5_product_switch_item_outline_offset: -.1875rem; + --_ui5_product_switch_item_outline_offset_positive: .1875rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css index 4b32c6f20ec7..2d63a03f7f8d 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/sap_belize_hcb/ProductSwitchItem-parameters.css @@ -1,6 +1,8 @@ @import "../base/ProductSwitchItem-parameters.css"; :root { - --_ui5_product_switch_item_outline: .125rem var(--sapUiContentContrastFocusColor) dotted; + --_ui5_product_switch_item_outline_width: .125rem; + --_ui5_product_switch_item_outline_color: var(--sapUiContentContrastFocusColor); + --_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted; --_ui5_product_switch_item_outline_offset: -.25rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css index 1c3dd5515688..b86ce8c0537a 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css @@ -1,6 +1 @@ -@import "../base/ProductSwitchItem-parameters.css"; - -:root { - --_ui5_product_switch_item_outline: .0625rem var(--sapUiContentFocusColor) dotted; - --_ui5_product_switch_item_active_outline_color: var(--sapUiContentContrastFocusColor); -} \ No newline at end of file +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/test/pages/ProductSwitch.html b/packages/fiori/test/pages/ProductSwitch.html index 9844e9bd2633..74b8948b336a 100644 --- a/packages/fiori/test/pages/ProductSwitch.html +++ b/packages/fiori/test/pages/ProductSwitch.html @@ -28,27 +28,27 @@ - - - - + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/packages/fiori/test/pages/ProductSwitchItem.html b/packages/fiori/test/pages/ProductSwitchItem.html index 8669660e9197..47b82eb6a82c 100644 --- a/packages/fiori/test/pages/ProductSwitchItem.html +++ b/packages/fiori/test/pages/ProductSwitchItem.html @@ -27,7 +27,7 @@ - + From 0196282d8983640e532c6bf521cece8fa03a2dd7 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 20 Nov 2019 17:45:04 +0200 Subject: [PATCH 31/36] feat(ui5-product-switch): stand alone component review fixes 2 --- packages/fiori/src/ProductSwitch.js | 26 ++++++++++++++-- packages/fiori/src/ProductSwitchItem.js | 41 +++++++++++++++++-------- 2 files changed, 53 insertions(+), 14 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 345a221b2b18..7032ea735bd9 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -35,7 +35,31 @@ const metadata = { }, }; +/** + * @class + *

Overview

+ * + * The ui5-product-switch is a Fiori specific control that is used in ui5-shellbar + *

+ *

ES6 Module Import

+ * import "@ui5/webcomponents-fiori/dist/ProductSwitch"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ProductSwitch + * @extends sap.ui.webcomponents.base.UI5Element + * @tagname ui5-product-switch + * @appenddocs ProductSwitch + * @public + * @since 1.0.0-rc.5 + */ class ProductSwitch extends UI5Element { + constructor() { + super(); + + this.initItemNavigation(); + } + initItemNavigation() { this._itemNavigation = new ItemNavigation(this, { rowSize: 4 }); this._itemNavigation.getItemsCallback = () => this.items; @@ -60,8 +84,6 @@ class ProductSwitch extends UI5Element { onEnterDOM() { this._handleResizeBound = this._handleResize.bind(this); - this.initItemNavigation(); - ResizeHandler.register(document.body, this._handleResizeBound); } diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 2e13059b4884..5306c8e0b912 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -101,7 +101,36 @@ const metadata = { }, }; +/** + * @class + *

Overview

+ * + * The ui5-product-switch-item is used as a child of ui5-product-switch + * Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch. + *

+ *

ES6 Module Import

+ * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ProductSwitchItem + * @extends sap.ui.webcomponents.base.UI5Element + * @tagname ui5-product-switch-item + * @appenddocs ProductSwitchItem + * @public + * @since 1.0.0-rc.5 + */ class ProductSwitchItem extends UI5Element { + constructor() { + super(); + + this._deactivate = () => { + if (this.active) { + this.active = false; + } + }; + } + static get metadata() { return metadata; } @@ -119,12 +148,6 @@ class ProductSwitchItem extends UI5Element { } onEnterDOM() { - this._deactivate = () => { - if (this.active) { - this.active = false; - } - }; - document.addEventListener("mouseup", this._deactivate); } @@ -132,12 +155,6 @@ class ProductSwitchItem extends UI5Element { document.removeEventListener("mouseup", this._deactivate); } - _deactivate() { - if (this.active) { - this.active = false; - } - } - _onmousedown() { this.active = true; } From 1d1541cf8d9463da93c08269f3797a83ef1da884 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Thu, 21 Nov 2019 16:24:33 +0200 Subject: [PATCH 32/36] feat(ui5-product-switch): docu improvement --- packages/fiori/src/ProductSwitch.js | 4 ++-- packages/fiori/src/ProductSwitchItem.js | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index 7032ea735bd9..ed7184124500 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -13,7 +13,7 @@ const metadata = { tag: "ui5-product-switch", properties: { /** - * Indicates how much columns should be displayed. + * Indicates how many columns are displayed. * @private */ desktopColumns: { @@ -49,7 +49,7 @@ const metadata = { * @alias sap.ui.webcomponents.main.ProductSwitch * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-product-switch - * @appenddocs ProductSwitch + * @appenddocs ProductSwitchItem * @public * @since 1.0.0-rc.5 */ diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 5306c8e0b912..786d54029e26 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -29,7 +29,7 @@ const metadata = { type: String, }, /** - * Defines the icon to be displayed as graphical element within the ui5-product-switch-item. + * Defines the icon to be displayed as a graphical element within the ui5-product-switch-item. * The SAP-icons font provides numerous options. *

* Example: @@ -46,7 +46,7 @@ const metadata = { type: String, }, /** - * Specifies a target where the targetSrc content must be open. + * Specifies a target where the targetSrc content must be open. * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered. * @type {string} * @defaultvalue "_self" @@ -57,7 +57,7 @@ const metadata = { defaultValue: "_self", }, /** - *Defines the ProductSwitchItem target URI. Supports standard hyperlink behavior. + *Defines the ui5-product-switch-item target URI. Supports standard hyperlink behavior. * @type {string} * @defaultvalue "" * @public @@ -73,7 +73,7 @@ const metadata = { type: Boolean, }, /** - * Indicates if the elements is on focus + * Indicates whether the element is focused. * @private */ focused: { @@ -91,7 +91,7 @@ const metadata = { events: { /** * Fired when the ui5-product-switch-item is activated either with a - * mouse/tap or by using the Enter or Space key. + * click/tap or by using the Enter or Space key. * * @event * @public @@ -104,8 +104,7 @@ const metadata = { /** * @class *

Overview

- * - * The ui5-product-switch-item is used as a child of ui5-product-switch + * The ui5-product-switch-item represents the items displayed in the ui5-product-switch web component * Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch. *

*

ES6 Module Import

@@ -116,7 +115,6 @@ const metadata = { * @alias sap.ui.webcomponents.main.ProductSwitchItem * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-product-switch-item - * @appenddocs ProductSwitchItem * @public * @since 1.0.0-rc.5 */ From f8479ae83ac219ebaf8caccc4ec4af8c51c186c4 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Mon, 25 Nov 2019 12:21:10 +0200 Subject: [PATCH 33/36] feat(ui5-product-switch): stand alone component fixes --- packages/fiori/src/ProductSwitch.js | 9 +++++++-- packages/fiori/src/ProductSwitchItem.hbs | 2 +- packages/fiori/src/ProductSwitchItem.js | 2 +- .../themes/sap_belize/ProductSwitchItem-parameters.css | 1 - .../fiori/src/themes/sap_belize/parameters-bundle.css | 2 +- .../sap_fiori_3/ProductSwitchItem-parameters.css | 1 - .../fiori/src/themes/sap_fiori_3/parameters-bundle.css | 2 +- .../sap_fiori_3_dark/ProductSwitchItem-parameters.css | 1 - .../src/themes/sap_fiori_3_dark/parameters-bundle.css | 2 +- packages/fiori/test/pages/ProductSwitch.html | 2 +- packages/fiori/test/pages/ProductSwitchItem.html | 2 +- packages/fiori/test/samples/ProductSwitch.sample.html | 10 +++++++--- 12 files changed, 21 insertions(+), 15 deletions(-) delete mode 100644 packages/fiori/src/themes/sap_belize/ProductSwitchItem-parameters.css delete mode 100644 packages/fiori/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css delete mode 100644 packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css diff --git a/packages/fiori/src/ProductSwitch.js b/packages/fiori/src/ProductSwitch.js index ed7184124500..841e1a010ac0 100644 --- a/packages/fiori/src/ProductSwitch.js +++ b/packages/fiori/src/ProductSwitch.js @@ -57,6 +57,11 @@ class ProductSwitch extends UI5Element { constructor() { super(); + this.ROW_MIN_WIDTH = { + ONE_COLUMN: 600, + THREE_COLUMN: 900, + }; + this.initItemNavigation(); } @@ -98,9 +103,9 @@ class ProductSwitch extends UI5Element { _handleResize() { const documentWidth = document.body.clientWidth; - if (documentWidth <= 600) { + if (documentWidth <= this.ROW_MIN_WIDTH.ONE_COLUMN) { this._itemNavigation.rowSize = 1; - } else if (documentWidth <= 900 || this.items.length <= 6) { + } else if (documentWidth <= this.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) { this._itemNavigation.rowSize = 3; } else { this._itemNavigation.rowSize = 4; diff --git a/packages/fiori/src/ProductSwitchItem.hbs b/packages/fiori/src/ProductSwitchItem.hbs index abdd0a2e5ebd..516f35d2f53a 100644 --- a/packages/fiori/src/ProductSwitchItem.hbs +++ b/packages/fiori/src/ProductSwitchItem.hbs @@ -29,7 +29,7 @@ {{#if icon}} {{/if}} diff --git a/packages/fiori/src/ProductSwitchItem.js b/packages/fiori/src/ProductSwitchItem.js index 786d54029e26..462afbfb8ea3 100644 --- a/packages/fiori/src/ProductSwitchItem.js +++ b/packages/fiori/src/ProductSwitchItem.js @@ -57,7 +57,7 @@ const metadata = { defaultValue: "_self", }, /** - *Defines the ui5-product-switch-item target URI. Supports standard hyperlink behavior. + * Defines the ui5-product-switch-item target URI. Supports standard hyperlink behavior. * @type {string} * @defaultvalue "" * @public diff --git a/packages/fiori/src/themes/sap_belize/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_belize/ProductSwitchItem-parameters.css deleted file mode 100644 index b86ce8c0537a..000000000000 --- a/packages/fiori/src/themes/sap_belize/ProductSwitchItem-parameters.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css index db8996474e7a..b86ce8c0537a 100644 --- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css @@ -1 +1 @@ -@import "./ProductSwitchItem-parameters.css"; \ No newline at end of file +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css deleted file mode 100644 index b86ce8c0537a..000000000000 --- a/packages/fiori/src/themes/sap_fiori_3/ProductSwitchItem-parameters.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css index db8996474e7a..b86ce8c0537a 100644 --- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css @@ -1 +1 @@ -@import "./ProductSwitchItem-parameters.css"; \ No newline at end of file +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css deleted file mode 100644 index b86ce8c0537a..000000000000 --- a/packages/fiori/src/themes/sap_fiori_3_dark/ProductSwitchItem-parameters.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css index db8996474e7a..b86ce8c0537a 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -1 +1 @@ -@import "./ProductSwitchItem-parameters.css"; \ No newline at end of file +@import "../base/ProductSwitchItem-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/test/pages/ProductSwitch.html b/packages/fiori/test/pages/ProductSwitch.html index 74b8948b336a..b1bb3d02614a 100644 --- a/packages/fiori/test/pages/ProductSwitch.html +++ b/packages/fiori/test/pages/ProductSwitch.html @@ -5,7 +5,7 @@ - ProductSwitch + ui5-product-switch