fix(ui5-busyindicator): adjust stylings to latest spec (#1344)

- using scale with value more than 1 used to blur stylings on Webkit browsers BREAKING CHANGE: Medium size is now default FIXES: #1337
SAP · Mar 24, 2020 · 0af6c3d · 0af6c3d
1 parent bfe4b19
commit 0af6c3d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 38 deletions.
diff --git a/packages/main/src/BusyIndicator.js b/packages/main/src/BusyIndicator.js
@@ -39,7 +39,7 @@ const metadata = {
 		 * @defaultvalue "Large"
 		 * @public
 		 */
-		size: { type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Large },
+		size: { type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Medium },
 
 		/**
 		 * Defines if the busy indicator is visible on the screen. By default it is not.

diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -12,36 +12,35 @@
 }
 
 :host([size="Small"]) .ui5-busyindicator-root {
-	min-width: 3rem;
-	min-height: 1rem;
+	min-width: 1.5em;
+	min-height: .5rem;
 }
 
 :host([size="Small"]) .ui5-busyindicator-circle {
-	width: 0.125rem;
-	height: 0.125rem;
-	margin: 0 0.2rem;
+	width: .5rem;
+	height: .5rem;
 }
 
+:host(:not([size])) .ui5-busyindicator-root,
 :host([size="Medium"]) .ui5-busyindicator-root {
-	min-width: 5rem;
-	min-height: 2rem;
+	min-width: 3rem;
+	min-height: 1rem;
 }
 
+:host(:not([size])) .ui5-busyindicator-circle,
 :host([size="Medium"])  .ui5-busyindicator-circle {
-	width: 0.5rem;
-	height: 0.5rem;
-	margin: 0 0.4rem;
+	width: 1rem;
+	height: 1rem;
 }
 
 :host([size="Large"]) .ui5-busyindicator-root {
-	min-width: 8rem;
-	min-height: 3rem;
+	min-width: 6rem;
+	min-height: 2rem;
 }
 
 :host([size="Large"]) .ui5-busyindicator-circle {
-	width: 1rem;
-	height: 1rem;
-	margin: 0 .75rem;
+	width: 2rem;
+	height: 2rem;
 }
 
 .ui5-busyindicator-root {
@@ -97,15 +96,15 @@
 
 @keyframes grow {
 	0%, 50%, 100% {
-		-webkit-transform: scale(1.0);
-		-moz-transform: scale(1.0);
-		-ms-transform: scale(1.0);
-		transform: scale(1.0);
+		-webkit-transform: scale(0.5);
+		-moz-transform: scale(0.5);
+		-ms-transform: scale(0.5);
+		transform: scale(0.5);
 	}
 	25% {
-		-webkit-transform: scale(2.5);
-		-moz-transform: scale(2.5);
-		-ms-transform: scale(2.5);
-		transform: scale(2.5);
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		transform: scale(1);
 	}
 }
diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -31,25 +31,25 @@
 	<ui5-title>Medium ui5-busyindicator</ui5-title>
 	<ui5-busyindicator size="Medium" active id="indicator1"></ui5-busyindicator>
 
-	<br/>
-	<br/>
+	<br />
+	<br />
 	<ui5-busyindicator size="Medium" active id="indicator2"></ui5-busyindicator>
 
-	<br/>
-	<br/>
+	<br />
+	<br />
 
 	<ui5-busyindicator size="Medium" active>
 		<ui5-button>Hello World</ui5-button>
 	</ui5-busyindicator>
 
-	<br/>
-	<br/>
+	<br />
+	<br />
 	<ui5-busyindicator size="Medium" active>
 		<ui5-checkbox text="Hello World"></ui5-checkbox>
 	</ui5-busyindicator>
 
-	<br/>
-	<br/>
+	<br />
+	<br />
 
 	<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
 	<br>
@@ -65,12 +65,46 @@
 	<br>
 
 	<ui5-busyindicator size="Medium" active style="width: 500px; margin-left: 100px">
-			<ui5-list style="width: 100%; border: 1px solid black;">
-				<ui5-li>Item 1</ui5-li>
-				<ui5-li>Item 2</ui5-li>
-				<ui5-li>Item 3</ui5-li>
-			</ui5-list>
-		</ui5-busyindicator>
+		<ui5-list style="width: 100%; border: 1px solid black;">
+			<ui5-li>Item 1</ui5-li>
+			<ui5-li>Item 2</ui5-li>
+			<ui5-li>Item 3</ui5-li>
+		</ui5-list>
+	</ui5-busyindicator>
+
+	<br>
+	<br>
+	<br>
+
+	<span>Medium (default) </span>
+	<br>
+	<br>
+
+	<ui5-busyindicator active></ui5-busyindicator>
+	<br>
+	<br>
+	<span>Small </span>
+
+	<br>
+	<br>
+	<ui5-busyindicator size="Small" active></ui5-busyindicator>
+	<br>
+	<br>
+	<span>Medium </span>
+
+	<br>
+	<br>
+	<ui5-busyindicator size="Medium" active></ui5-busyindicator>
+	<br>
+	<br>
+	<span>Large </span>
+
+	<br>
+	<br>
+	<ui5-busyindicator size="Large" active></ui5-busyindicator>
+	<br>
+	<br>
+
 
 	<script>
 		const busyIndocator = document.getElementById("busy-container");