refactor(ui5-li, ui5-li-custom, ui5-li-gh): styles cleanup (#678)

SAP · Jul 25, 2019 · 0353026 · 0353026
1 parent b5596e7
commit 0353026
Show file tree

Hide file tree

Showing 19 changed files with 438 additions and 311 deletions.
diff --git a/packages/main/src/CustomListItem.hbs b/packages/main/src/CustomListItem.hbs
@@ -1,5 +1,5 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-    <slot></slot>
+	<slot></slot>
 {{/inline}}
diff --git a/packages/main/src/CustomListItem.js b/packages/main/src/CustomListItem.js
@@ -60,10 +60,7 @@ class CustomListItem extends ListItem {
 
 	get classes() {
 		const result = super.classes;
-
-		// Modify main classes
-		result.main.sapMCustomLI = true;
-
+		result.main["ui5-custom-li-root"] = true;
 		return result;
 	}
 }

diff --git a/packages/main/src/GroupHeaderListItem.hbs b/packages/main/src/GroupHeaderListItem.hbs
@@ -1,10 +1,10 @@
 <li
 	tabindex="{{_tabIndex}}"
-	class="{{classes.main}}"
+	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{onfocusin}}"
 	@focusout="{{onfocusout}}"
 >
-		<div id="{{_id}}-content" class="{{classes.inner}}">
-				<span class="{{classes.span}}"><slot></slot></span>
-		</div>
+	<div id="{{_id}}-content" class="ui5-li-content">
+		<span class="ui5-ghli-title"><slot></slot></span>
+	</div>
 </li>
diff --git a/packages/main/src/GroupHeaderListItem.js b/packages/main/src/GroupHeaderListItem.js
@@ -59,21 +59,6 @@ class GroupHeaderListItem extends ListItemBase {
 	static get styles() {
 		return [ListItemBase.styles, groupheaderListItemCss];
 	}
-
-	get classes() {
-		const result = super.classes;
-
-		// Modify main classes
-		result.main.sapMGHLI = true;
-		result.main.sapMLIBTypeInactive = true;
-
-		// Define span classes
-		result.span = {
-			sapMGHLITitle: true,
-		};
-
-		return result;
-	}
 }
 
 GroupHeaderListItem.define();

diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -18,7 +18,7 @@
 		<slot></slot>
 
 		{{#if showNoDataText}}
-			<li id="{{_id}}-nodata" class="{{classes.noData}}" tabindex="{{noDataTabIndex}}">
+			<li id="{{_id}}-nodata" class="ui5-list-nodata" tabindex="{{noDataTabIndex}}">
 				<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 					{{noDataText}}
 				</div>

diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import FocusHelper from "@ui5/webcomponents-base/dist/FocusHelper.js";
-import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import ListItemBase from "./ListItemBase.js";
 import ListMode from "./types/ListMode.js";
@@ -275,7 +274,7 @@ class List extends UI5Element {
 				|| (this.separators === ListSeparators.Inner && !isLastChild);
 
 			item._mode = this.mode;
-			item._hideBorder = !showBottomBorder;
+			item.hasBorder = showBottomBorder;
 		});
 
 		this._previouslySelectedItem = null;
@@ -563,17 +562,6 @@ class List extends UI5Element {
 	get showNoDataText() {
 		return this.items.length === 0 && this.noDataText;
 	}
-
-	get classes() {
-		return {
-			noData: {
-				"ui5-list-nodata": true,
-				sapMLIB: true,
-				sapMLIBTypeInactive: true,
-				sapMLIBFocusable: isDesktop(),
-			},
-		};
-	}
 }
 
 List.define();

diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
@@ -9,7 +9,7 @@
 			{{> selectionElement}}
 		{{/if}}
 
-		<div id="{{_id}}-content" class="{{classes.inner}}">
+		<div id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}
 			{{> listItemContent}}
@@ -32,21 +32,21 @@
 	{{#if modeSingleSelect}}
 		<ui5-radiobutton
 				id="{{_id}}-singleSelectionElement"
-				class="singleSelectionRadioButton"
+				class="ui5-li-singlesel-radiobtn"
 				?selected="{{selected}}">
 		</ui5-radiobutton>
 	{{/if}}
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
 				id="{{_id}}-multiSelectionElement"
-				class="multiSelectionCheckBox"
+				class="ui5-li-multisel-cb"
 				?checked="{{selected}}">
 		</ui5-checkbox>
 	{{/if}}
 
 	{{#if modeDelete}}
-		<div class="sapMDeleteListItemButton">
+		<div class="ui5-li-deletebtn">
 			<ui5-button
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -43,7 +43,23 @@ const metadata = {
 			defaultValue: ListItemType.Active,
 		},
 
-		_active: {
+		/**
+		 * Indicates if the list item is active, e.g pressed down with the mouse or the keyboard keys.
+		 *
+		 * @type {boolean}
+		 * @private
+		*/
+		active: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the list item is actionable, e.g has hover and pressed effects.
+		 *
+		 * @type {boolean}
+		 * @private
+		*/
+		actionable: {
 			type: Boolean,
 			noAttribute: true,
 		},
@@ -92,13 +108,18 @@ class ListItem extends ListItemBase {
 		};
 
 		this.deactivate = () => {
-			if (this._active) {
-				this._active = false;
+			if (this.active) {
+				this.active = false;
 			}
 		};
 	}
 
-	onBeforeRendering() {}
+	onBeforeRendering(...params) {
+		const desktop = isDesktop();
+		const isActionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
+
+		this.actionable = desktop && isActionable;
+	}
 
 	onEnterDOM() {
 		document.addEventListener("mouseup", this.deactivate);
@@ -165,11 +186,10 @@ class ListItem extends ListItemBase {
 
 	activate() {
 		if (this.type === ListItemType.Active) {
-			this._active = true;
+			this.active = true;
 		}
 	}
 
-
 	_onDelete(event) {
 		this.fireEvent("_selectionRequested", { item: this, selected: event.selected });
 	}
@@ -178,23 +198,6 @@ class ListItem extends ListItemBase {
 		this.fireEvent("_press", { item: this, selected: this.selected });
 	}
 
-	get classes() {
-		const result = super.classes;
-
-		const desktop = isDesktop();
-		const isActionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
-
-		// Modify main classes
-		result.main[`sapMLIBType${this.type}`] = true;
-		result.main.sapMSLI = true;
-		result.main.sapMLIBActionable = desktop && isActionable;
-		result.main.sapMLIBHoverable = desktop && isActionable;
-		result.main.sapMLIBSelected = this.selected;
-		result.main.sapMLIBActive = this._active;
-
-		return result;
-	}
-
 	get placeSelectionElementBefore() {
 		return this._mode === ListMode.MultiSelect
 			|| this._mode === ListMode.SingleSelectBegin;

diff --git a/packages/main/src/ListItemBase.js b/packages/main/src/ListItemBase.js
@@ -1,8 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import FocusHelper from "@ui5/webcomponents-base/dist/FocusHelper.js";
 import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { isDesktop, isPhone } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
-import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 
 // Styles
@@ -15,7 +13,11 @@ const metadata = {
 	"abstract": true,
 	properties: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
 
-		_hideBorder: {
+		/**
+		* Defines if the list item should display its bottom border.
+		* @private
+		*/
+		hasBorder: {
 			type: Boolean,
 			noAttribute: true,
 		},
@@ -108,16 +110,8 @@ class ListItemBase extends UI5Element {
 	get classes() {
 		return {
 			main: {
-				sapMLIBBorder: !this._hideBorder,
-				sapMLIB: true,
-				"sapMLIB-CTX": true,
-				sapMLIBShowSeparator: true,
-				sapMLIBFocusable: isDesktop(),
-				"sap-phone": isPhone(),
-				"sapUiSizeCompact": getCompactSize(),
-			},
-			inner: {
-				sapMLIBContent: true,
+				"ui5-li-root": true,
+				"ui5-li--focusable": true,
 			},
 		};
 	}

diff --git a/packages/main/src/StandardListItem.hbs b/packages/main/src/StandardListItem.hbs
@@ -1,33 +1,33 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="sapMSLITextWrapper">
+	<div class="ui5-li-title-wrapper">
 		{{#if textContent.length}}
-			<span class="sapMSLITitle"><slot></slot></span>
+			<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{/if}}
 		{{#if description}}
-			<span class="sapMSLIDescription">{{description}}</span>
+			<span part="description" class="ui5-li-desc">{{description}}</span>
 		{{/if}}
 	</div>
 	{{#if info}}
-		<span class="{{classes.info}}">{{info}}</span>
+		<span part="info" class="ui5-li-info">{{info}}</span>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "imageBegin"}}
 	{{#if displayImage}}
-		<img src="{{image}}" class="sapMSLIImg">
+		<img part="img" src="{{image}}" class="ui5-li-img">
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon src="{{icon}}" class="sapMLIBIcon"></ui5-icon>
+		<ui5-icon part="icon" src="{{icon}}" class="ui5-li-icon"></ui5-icon>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon src="{{icon}}" class="sapMLIBIcon"></ui5-icon>
+		<ui5-icon part="icon" src="{{icon}}" class="ui5-li-icon"></ui5-icon>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js
@@ -83,6 +83,15 @@ const metadata = {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
+
+		/**
+		 * Indicates if the list item has text content.
+		 * @type {boolean}
+		 * @private
+		 */
+		hasTitle: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
 		/**
@@ -131,6 +140,11 @@ class StandardListItem extends ListItem {
 		return metadata;
 	}
 
+	onBeforeRendering(...params) {
+		super.onBeforeRendering(...params);
+		this.hasTitle = !!this.textContent;
+	}
+
 	get displayImage() {
 		return !!this.image;
 	}
@@ -143,24 +157,6 @@ class StandardListItem extends ListItem {
 		return (this.icon && this.iconEnd);
 	}
 
-	get classes() {
-		const result = super.classes;
-		const hasDesc = this.description && !!this.description.length;
-		const hasTitle = this.textContent;
-		const infoState = this.infoState.toLowerCase();
-
-		// Modify main classes
-		result.main.sapMSLIWithTitleAndDescription = hasDesc && hasTitle;
-
-		// Add "info" classes
-		result.info = {
-			"sapMSLI-info": true,
-			[`sapMSLI-info--${infoState}`]: true,
-		};
-
-		return result;
-	}
-
 	static async define(...params) {
 		await Icon.define();