refactor(ui5-button): remove iconSize property (#3227)

iconSize is a public property that is used only for the purpose of the MessageStrip close button. Remove the property and add a Shadow Part so the MessageStrip can re-style the button. Part of #3107 BREAKING_CHANGE: iconSize property of ui5-button has been deprecated
SAP · May 14, 2021 · ff9d7dd · ff9d7dd
1 parent 8c66d5a
commit ff9d7dd
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 29 deletions.
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -24,9 +24,9 @@
 >
 	{{#if icon}}
 		<ui5-icon
-			style="{{styles.icon}}"
 			class="ui5-button-icon"
 			name="{{icon}}"
+			part="icon"
 			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>
 	{{/if}}

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -93,19 +93,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines the size of the icon inside the <code>ui5-button</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
 		/**
 		 * When set to <code>true</code>, the <code>ui5-button</code> will
 		 * automatically submit the nearest form element upon <code>press</code>.
@@ -486,15 +473,6 @@ class Button extends UI5Element {
 		return this.iconOnly && !this.title;
 	}
 
-	get styles() {
-		return {
-			icon: {
-				width: this.iconSize,
-				height: this.iconSize,
-			},
-		};
-	}
-
 	static async onDefine() {
 		await fetchI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -24,12 +24,11 @@
 
 	{{#unless noCloseButton}}
 		<ui5-button
-				icon="decline"
-				icon-size=".75rem"
-				design="Transparent"
-				class="ui5-messagestrip-close-button"
-				title="{{_closeButtonText}}"
-				@click={{_closeClick}}
+			icon="decline"
+			design="Transparent"
+			class="ui5-messagestrip-close-button"
+			title="{{_closeButtonText}}"
+			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
@@ -91,10 +91,16 @@
 	top: 0.125rem;
 	color: var(--sapTextColor);
 }
+
 .ui5-messagestrip-close-button[active] {
 	color: var(--sapButton_Active_TextColor);
 }
 
+.ui5-messagestrip-close-button::part(icon) {
+	width: .75rem;
+	height: .75rem;
+}
+
 /* RTL */
 .ui5-messagestrip-root[dir="rtl"] {
 	padding-right: 2.5rem;