refactor(ui5-tree): remove unnecessary code (#7804)

* refactor(ui5-tree): remove unnecessary code * refactor(ui5-tree): fix comment * refactor(ui5-tree): remove unnecessary parameters
SAP · Nov 14, 2023 · bccffe5 · bccffe5
1 parent a13a0b4
commit bccffe5
Show file tree

Hide file tree

Showing 28 changed files with 10 additions and 182 deletions.
diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts
@@ -276,24 +276,6 @@ class Tree extends UI5Element {
 	@property({ defaultValue: undefined, noAttribute: true })
 	accessibleRoleDescription?: string;
 
-	/**
-	 * Shows the toggle button at the end, rather than at the beginning of the items
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.8
-	 */
-	@property({ type: Boolean })
-	_toggleButtonEnd!: boolean;
-
-	/**
-	 * Represents the tree in a very minimal state - icons only with no text and no toggle buttons
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.8
-	 */
-	@property({ type: Boolean })
-	_minimal!: boolean;
-
 	/**
 	 * Defines the items of the component. Tree items may have other tree items as children.
 	 * <br><br>
@@ -336,7 +318,7 @@ class Tree extends UI5Element {
 	}
 
 	get _role() {
-		return this._minimal ? "menubar" : "tree";
+		return "tree";
 	}
 
 	get _label() {
@@ -429,8 +411,6 @@ class Tree extends UI5Element {
 
 			item.setAttribute("level", level.toString());
 
-			item._toggleButtonEnd = this._toggleButtonEnd;
-			item._minimal = this._minimal;
 			item._setsize = ariaSetSize;
 			item._posinset = index + 1;
 		});

diff --git a/packages/main/src/TreeItem.ts b/packages/main/src/TreeItem.ts
@@ -81,7 +81,7 @@ class TreeItem extends TreeItemBase {
 	additionalTextState!: `${ValueState}`;
 
 	get _showTitle() {
-		return this.text.length && !this._minimal;
+		return this.text.length;
 	}
 }
 

diff --git a/packages/main/src/TreeItemBase.hbs b/packages/main/src/TreeItemBase.hbs
@@ -9,7 +9,7 @@
 		class="ui5-li-tree-toggle-box"
 		style="{{styles.preContent}}"
 	>
-		{{#if _showToggleButtonBeginning}}
+		{{#if showToggleButton}}
 			<ui5-icon
 				part="toggle-icon"
 				class="ui5-li-tree-toggle-icon"
@@ -33,17 +33,6 @@
 	{{/if}}
 {{/inline}}
 
-{{#*inline "iconEnd"}}
-	{{#if _showToggleButtonEnd}}
-		<ui5-icon
-			part="toggle-icon"
-			class="ui5-li-tree-toggle-icon"
-			name="{{_toggleIconName}}"
-			@click="{{_toggleClick}}"
-		></ui5-icon>
-	{{/if}}
-{{/inline}}
-
 {{#*inline "listItemPostContent"}}
 	{{#if expanded}}
 		<ul

diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts
@@ -200,24 +200,6 @@ class TreeItemBase extends ListItem {
 	@property()
 	accessibleName!: string;
 
-	/**
-	 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.8
-	 */
-	@property({ type: Boolean })
-	_toggleButtonEnd!: boolean;
-
-	/**
-	 * Defines whether the item shows minimal details - only icon (no text or toggle button)
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.8
-	 */
-	@property({ type: Boolean })
-	_minimal!: boolean;
-
 	/**
 	 * @private
 	 * @since 1.0.0-rc.11
@@ -244,7 +226,6 @@ class TreeItemBase extends ListItem {
 
 	/**
 	 * Defines if the item should be collapsible or not.
-	 * It is true, for example, for the items inside the Popover of the Side Navigation
 	 * @private
 	 * @type {boolean}
 	 * @defaultvalue false
@@ -311,39 +292,24 @@ class TreeItemBase extends ListItem {
 		return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow";
 	}
 
-	get _showToggleButtonBeginning() {
-		return this.showToggleButton && !this._minimal && !this._toggleButtonEnd;
-	}
-
-	get _showToggleButtonEnd() {
-		return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
-	}
-
 	get _ariaLabel() {
 		return this.accessibleRoleDescription ? undefined : TreeItemBase.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
 	}
 
 	get _accInfo() {
 		const accInfoSettings = {
-			role: this._minimal ? "menuitemradio" : "treeitem",
-			ariaExpanded: this.showToggleButton && !this._minimal ? this.expanded : undefined,
-			ariaLevel: this._minimal ? undefined : this.level,
+			role: "treeitem",
+			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
+			ariaLevel: this.level,
 			posinset: this._posinset,
 			setsize: this._setsize,
 			ariaSelectedText: this.ariaSelectedText,
 			listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
 			ariaOwns: this.expanded ? `${this._id}-subtree` : undefined,
 			ariaHaspopup: this.ariaHaspopup || undefined,
-			ariaChecked: false,
-			ariaSelected: false,
+			ariaSelected: this.selected,
 		};
 
-		if (this._minimal) {
-			accInfoSettings.ariaChecked = this.selected;
-		} else {
-			accInfoSettings.ariaSelected = this.selected;
-		}
-
 		return { ...super._accInfo, ...accInfoSettings };
 	}
 

diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
@@ -37,7 +37,7 @@
 	align-items: center;
 	width: 100%;
 	height: 100%;
-	padding: var(--ui5-listitem-padding);
+	padding: 0 1rem;
 	box-sizing: border-box;
 }
 
@@ -50,11 +50,8 @@
 	content: "";
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
-	border-radius: var(--ui5-listitem-focus-border-radius);
-	top: var(--ui5-listitem-focus-offset);
-	right: var(--ui5-listitem-focus-offset);
-	bottom: var(--ui5-listitem-focus-offset);
-	left: var(--ui5-listitem-focus-offset);
+	border-radius: 0;
+	inset: 0.125rem;
 	pointer-events: none;
 }
 

diff --git a/packages/main/src/themes/TreeItem.css b/packages/main/src/themes/TreeItem.css
@@ -4,43 +4,10 @@
 	position: relative;
 }
 
-:host([_minimal]) .ui5-li-tree-toggle-box {
-	width: 0;
-	min-width: 0;
-}
-
-:host([_minimal]) .ui5-li-icon {
-	padding: 0;
-}
-
-:host([_minimal]) .ui5-li-content {
-	justify-content: center;
-}
-
-:host([_minimal]) .ui5-li-root-tree {
-	padding: 0;
-}
-
-:host([_minimal][show-toggle-button])::after {
-	display: var(--_ui5-tree-item-minimal-children-indicator-display);
-	content: "";
-	width: 0;
-	height: 0;
-	border-left: 0.375rem solid transparent;
-	border-bottom: .375rem solid var(--sapContent_NonInteractiveIconColor);
-	position: absolute;
-	right: 0.1875rem;
-	bottom: 0.125rem;
-}
-
 .ui5-li-tree-text-wrapper {
 	flex: auto;
 }
 
-:host([_minimal]) .ui5-li-text-wrapper {
-	display: none;
-}
-
 .ui5-li-root-tree {
 	padding-inline-start: 0;
 }
@@ -123,10 +90,6 @@ is the .ui5-li-root and not the host. The host height expands to fill subtree */
     background: var(--sapList_SelectionBackgroundColor);
 }
 
-:host([_minimal][selected]) .ui5-li-root {
-	background: var(--_ui5-tree-item-minimal-background);
-}
-
 :host([has-border]) {
     border-bottom: unset;
 }

diff --git a/packages/main/src/themes/base/ListItemBase-parameters.css b/packages/main/src/themes/base/ListItemBase-parameters.css
@@ -4,9 +4,6 @@
 	--ui5-listitem-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 	--ui5-listitem-focused-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 	--ui5-listitem-active-border-color: var(--sapContent_ContrastFocusColor);
-	--ui5-listitem-padding: 0 1rem;
-	--ui5-listitem-focus-border-radius: 0;
-	--ui5-listitem-focus-offset: 0.125rem;
 	--_ui5_listitembase_focus_width: 1px;
 	--_ui5-listitembase_disabled_opacity: 0.5;
 	--_ui5_product_switch_item_border: none;

diff --git a/packages/main/src/themes/base/TreeItem-parameters.css b/packages/main/src/themes/base/TreeItem-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
@@ -48,7 +48,6 @@
 @import "../base/GrowingButton-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "../base/TreeItem-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -47,7 +47,6 @@
 @import "../base/GrowingButton-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "../base/TreeItem-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -49,7 +49,6 @@
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "../base/TreeItem-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -49,7 +49,6 @@
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "../base/TreeItem-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "../base/TableRow-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "../base/TableRow-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "../base/TableRow-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "../base/TableRow-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -48,7 +48,6 @@
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -48,7 +48,6 @@
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -48,7 +48,6 @@
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
-@import "./TreeItem-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";