fix(ui5-messagestrip): Close button now has the correct design (#2029)

SAP · Aug 3, 2020 · 7f99be5 · 7f99be5
1 parent 509aca2
commit 7f99be5
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 136 deletions.
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -22,6 +22,7 @@
 >
 	{{#if icon}}
 		<ui5-icon
+			style="{{styles.icon}}"
 			class="ui5-button-icon"
 			name="{{icon}}"
 			show-tooltip={{iconOnly}}

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -82,6 +82,19 @@ 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>.
@@ -383,6 +396,15 @@ class Button extends UI5Element {
 		return this.nonFocusable ? "-1" : this._tabIndex;
 	}
 
+	get styles() {
+		return {
+			icon: {
+				width: this.iconSize,
+				height: this.iconSize,
+			},
+		};
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			Icon.define(),

diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -1,4 +1,4 @@
-<div class="{{classes.main}}"
+<div class="{{classes.root}}"
 	id="{{_id}}"
 	role="alert"
 	dir="{{effectiveDir}}"
@@ -16,19 +16,16 @@
 	{{/unless}}
 
 	<span class="ui5-hidden-text">{{hiddenText}}</span>
-	<span class="{{classes.label}}"><slot></slot></span>
+	<span class="ui5-messagestrip-text"><slot></slot></span>
 
 	{{#unless noCloseButton}}
-		<button
-			class="ui5-messagestrip-close-icon-wrapper"
-			title="{{_closeButtonText}}"
-			@click={{_closeClick}}
-		>
-			<ui5-icon
-				class="ui5-messagestrip-close-icon"
-				name="decline"
-			>
-			</ui5-icon>
-		</button>
+		<ui5-button
+				icon="decline"
+				icon-size=".75rem"
+				design="Transparent"
+				class="ui5-messagestrip-close-button"
+				title="{{_closeButtonText}}"
+				@click={{_closeClick}}
+		></ui5-button>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import "@ui5/webcomponents-icons/dist/icons/message-information.js";
 import "@ui5/webcomponents-icons/dist/icons/message-success.js";
@@ -10,6 +9,7 @@ import "@ui5/webcomponents-icons/dist/icons/message-warning.js";
 import MessageStripType from "./types/MessageStripType.js";
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -153,42 +153,27 @@ class MessageStrip extends UI5Element {
 
 	constructor() {
 		super();
-
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_closeClick() {
 		this.fireEvent("close", {});
 	}
 
-	_closeKeyDown(event) {
-		if (isEnter(event)) {
-			this.fireEvent("close");
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-	}
-
-	_closeKeyUp(event) {
-		if (isSpace(event)) {
-			this.fireEvent("close");
-		}
-	}
-
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-
-		await Icon.define();
+		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents"),
+			Icon.define(),
+			Button.define(),
+		]);
 	}
 
 	static typeClassesMappings() {
 		return {
-			"Information": "ui5-messagestrip--info",
-			"Positive": "ui5-messagestrip--positive",
-			"Negative": "ui5-messagestrip--negative",
-			"Warning": "ui5-messagestrip--warning",
+			"Information": "ui5-messagestrip-root--info",
+			"Positive": "ui5-messagestrip-root--positive",
+			"Negative": "ui5-messagestrip-root--negative",
+			"Warning": "ui5-messagestrip-root--warning",
 		};
 	}
 
@@ -211,14 +196,10 @@ class MessageStrip extends UI5Element {
 
 	get classes() {
 		return {
-			label: {
-				"ui5-messagestrip-text": true,
-				"ui5-messagestripNoCloseButton": this.noCloseButton,
-			},
-			main: {
+			root: {
 				"ui5-messagestrip-root": true,
-				"ui5-messagestrip-icon--hidden": this.noIcon,
-				"ui5-messagestrip-close-icon--hidden": this.noCloseButton,
+				"ui5-messagestrip-root-no-icon": this.noIcon,
+				"ui5-messagestrip-root-no-close-button": this.noCloseButton,
 				[this.typeClasses]: true,
 			},
 		};

diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -64,10 +64,6 @@
 }
 
 .ui5-button-icon {
-	font-size: var(--_ui5_button_icon_font_size);
-	height: 0;
-	top: -.5rem;
-	position: relative;
 	color: inherit;
 	flex-shrink: 0;
 }
@@ -82,6 +78,7 @@
 
 :host([icon-only]) .ui5-button-root {
 	min-width: auto;
+	padding: 0;
 }
 
 :host([icon-only]) .ui5-button-text {
@@ -289,4 +286,4 @@ ui5-button[design="Emphasized"][focused] .ui5-button-root::after {
 ui5-button ui5-icon.ui5-button-icon {
 	height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/
 	top: 0;
-}
+}
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
@@ -5,6 +5,7 @@
 	width: 100%;
 }
 
+/** Root classes **/
 .ui5-messagestrip-root {
 	width: 100%;
 	height: 100%;
@@ -14,148 +15,108 @@
 	border-width: var(--_ui5_messagestrip_border_width);
 	border-style: solid;
 	box-sizing: border-box;
-	padding: 0.4375rem 2rem 0.4375rem 2.5rem;
 	position: relative;
 }
 
-.ui5-messagestrip-root .ui5-messagestrip-icon-wrapper {
-	position: absolute;
-	top: var(--_ui5_messagestrip_icon_top);
-	left: 0.75rem;
-	box-sizing: border-box;
+.ui5-messagestrip-root-no-icon {
+	padding: var(--_ui5_messagestrip_padding_no_icon);
 }
 
-.ui5-messagestrip-root .ui5-messagestrip-text {
-	width: 100%;
-	color: var(--sapTextColor);
-	line-height: 1.2;
-}
-
-.ui5-messagestrip-icon--hidden {
-	padding: 0.4375rem 2rem 0.4375rem 1rem;
-}
-
-.ui5-messagestrip-close-icon--hidden {
+.ui5-messagestrip-root-no-close-button {
 	padding-right: 1rem;
 }
 
-.ui5-messagestrip-text {
-	font-family: var(--sapFontFamily);
-	font-size: var(--sapFontSize);
-}
-
-.ui5-messagestrip--info {
+.ui5-messagestrip-root--info {
 	background-color: var(--sapInformationBackground);
 	border-color: var(--sapInformationBorderColor);
 	color: var(--sapTextColor);
 }
 
-.ui5-messagestrip--info .ui5-messagestrip-icon {
+.ui5-messagestrip-root--info .ui5-messagestrip-icon {
 	color: var(--sapInformativeElementColor);
 }
 
-.ui5-messagestrip--positive {
+.ui5-messagestrip-root--positive {
 	background-color: var(--sapSuccessBackground);
 	border-color: var(--sapSuccessBorderColor);
 }
 
-.ui5-messagestrip--positive .ui5-messagestrip-icon {
+.ui5-messagestrip-root--positive .ui5-messagestrip-icon {
 	color: var(--sapPositiveElementColor);
 }
 
-.ui5-messagestrip--negative {
+.ui5-messagestrip-root--negative {
 	background-color: var(--sapErrorBackground);
 	border-color: var(--sapErrorBorderColor);
 }
 
-.ui5-messagestrip--negative .ui5-messagestrip-icon {
+.ui5-messagestrip-root--negative .ui5-messagestrip-icon {
 	color: var(--sapNegativeElementColor);
 }
 
-.ui5-messagestrip--warning {
+.ui5-messagestrip-root--warning {
 	background-color: var(--sapWarningBackground);
 	border-color: var(--sapWarningBorderColor);
 }
 
-.ui5-messagestrip--warning .ui5-messagestrip-icon {
+.ui5-messagestrip-root--warning .ui5-messagestrip-icon {
 	color: var(--sapCriticalElementColor);
 }
 
-.ui5-messagestrip-close-icon-wrapper {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+/** Icon wrapper **/
+.ui5-messagestrip-icon-wrapper {
+	position: absolute;
+	top: var(--_ui5_messagestrip_icon_top);
+	left: 0.75rem;
+	box-sizing: border-box;
+}
+
+/** Text **/
+.ui5-messagestrip-text {
+	width: 100%;
+	color: var(--sapTextColor);
+	line-height: 1.2;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+/** Close button **/
+.ui5-messagestrip-close-button {
 	width: var(--_ui5_messagestrip_close_button_size);
+	min-width: var(--_ui5_messagestrip_close_button_size);
 	height: var(--_ui5_messagestrip_close_button_size);
-	border-radius: 0.25rem;
-	background: transparent;
-	color: var(--sapTextColor);
-	cursor: pointer;
+	min-height: var(--_ui5_messagestrip_close_button_size);
 	position: absolute;
 	right: 0.125rem;
 	top: 0.125rem;
-	outline: none;
-	border: var(--_ui5_messagestrip_close_button_border);
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui5-messagestrip-close-icon-wrapper:hover {
-	background-color: var(--sapButton_Lite_Hover_Background);
+	color: var(--sapTextColor);
 }
-
-.ui5-messagestrip-close-icon-wrapper:active {
-	background-color: var(--sapButton_Active_Background);
+.ui5-messagestrip-close-button[active] {
 	color: var(--sapButton_Active_TextColor);
 }
 
-.ui5-messagestrip-close-icon {
-	width: 0.75rem;
-	height: 0.75rem;
-	pointer-events: none;
-}
-
-.ui5-messagestrip-close-icon-wrapper:active .ui5-messagestrip-close-icon {
-	color: currentColor;
-}
-
-.ui5-messagestrip-close-icon-wrapper:focus {
-	outline-offset: var(--_ui5_messagestrip_focus_offset);
-	outline: var(--_ui5_messagestrip_focus_width) dotted var(--sapContent_FocusColor);
-}
-
-.ui5-messagestrip-close-icon-wrapper:active:focus {
-	outline: var(--_ui5_messagestrip_focus_width) dotted var(--sapContent_ContrastFocusColor);
-}
-
-/* FF renders outine around element content, causing double outline - around the button and the icon */
-.ui5-messagestrip-close-icon-wrapper::-moz-focus-inner {
-	border: none;
-}
-
 /* RTL */
 .ui5-messagestrip-root[dir="rtl"] {
 	padding-right: 2.5rem;
 	padding-left: 2rem;
 }
 
-[dir="rtl"] .ui5-messagestrip-icon-wrapper {
-	right: 0.75rem;
-	left: 0;
-}
-
-[dir="rtl"] .ui5-messagestrip-icon--hidden {
+[dir="rtl"] .ui5-messagestrip-root-no-icon {
 	padding-right: 1rem;
 	padding-left: 2rem;
 }
 
-[dir="rtl"] .ui5-messagestrip-close-icon--hidden {
+[dir="rtl"] .ui5-messagestrip-root-no-close-button {
 	padding-left: 1rem;
 	padding-right: 0;
 }
 
-[dir="rtl"] .ui5-messagestrip-close-icon-wrapper {
+[dir="rtl"] .ui5-messagestrip-icon-wrapper {
+	right: 0.75rem;
+	left: 0;
+}
+
+[dir="rtl"] .ui5-messagestrip-close-button {
 	left: 0.125rem;
 	right: auto;
-}
+}