fix(core): use correct default colors, and replace loading bee with c…

…arbon loading spinner
carbon-design-system · Oct 1, 2018 · 80ff9bd · 80ff9bd
1 parent 203c7e6
commit 80ff9bd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 68 deletions.
diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -3,65 +3,27 @@ const baseOptions: any = {
 	containerResizable: true,
 	type: "basic",
 	colors: [
-		"#009BEF",
-		"#95D13C",
-		"#785EF0",
-		"#F87EAC",
-		"#FFB000",
-		"#00B6CB",
-		"#FF5C49",
-		"#047CC0",
-		"#FE8500",
-		"#5A3EC8",
-		"#40D5BB",
-		"#FF509E"
+		"#00a68f",
+		"#3b1a40",
+		"#473793",
+		"#3c6df0",
+		"#56D2BB"
 	],
 	tooltip: {
 		formatter: null
 	},
 	loadingOverlay: {
 		innerHTML: `
-<div class="loading-bee" role="status" aria-describedby="loadingBeeMessage" aria-live="assertive">
-	<svg width="100%" height="100%" viewBox="0 0 30 30">
-		<g class="loading-bee_wing-1">
-			<path d="M16.2,5.7l-0.1-0.1c-1.4,0-5.1-0.2-6.7-0.2c-1.1,0-2.5,0.8-3.7,2c-1.8,1.8-2.5,
-					4-1.6,4.9c0.2,0.2,1.2,1.2,3.4-0.3C8,11.6,15.7,6.1,16.2,5.7"></path>
+		<div class="loading-overlay-content">
+		  <div data-loading class="bx--loading bx--loading--small">
+			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+				<title>Loading</title>
+				<circle cx="0" cy="0" r="37.5" />
+			</svg>
+		  </div>
 
-			<path d="M24.3,13.8c-0.4,0.5-5.9,8.2-6.3,8.7c-1.5,2.2-0.5,3.2-0.3,3.4c0.9,0.9,3.1,0.2,
-					4.9-1.6c1.2-1.2,2-2.6,2-3.7c0-1.6-0.2-5.2-0.2-6.7L24.3,13.8"></path>
-		</g>
-
-		<g class="loading-bee_wing-2">
-			<path d="M16.2,5.7L16,5.5c-1.8-0.4-6.5-1.6-8.5-2C6.2,3.3,4.6,3.9,3.4,5.1c-1.8,
-				1.8-2.1,4.4-0.8,5.7c0.3,0.3,1.8,1.8,4.2,0.5C7.4,11,15.6,6.1,16.2,5.7"></path>
-
-			<path d="M24.3,13.8c-0.4,0.6-5.3,8.8-5.6,9.4c-1.3,2.4,0.2,3.9,0.5,4.2c1.4,1.4,3.9,
-				1,5.7-0.8c1.2-1.2,1.8-2.8,1.6-4.1c-0.5-2-1.6-6.7-2-8.5L24.3,13.8"></path>
-		</g>
-
-		<g class="loading-bee_wing-3">
-			<path d="M24.5,14c0.8,2.1,2.8,7.7,3.6,10.1c0.5,1.6,0.1,3.3-1.2,4.5c-1.8,1.8-4.7,
-				1.8-6.5,0c-0.4-0.4-2.4-2.4-1.3-4.9c0.3-0.6,4.7-9.3,5-10L24.5,14z"></path>
-
-			<path d="M16,5.5C13.8,4.7,8.3,2.7,5.9,1.9C4.3,1.4,2.6,1.8,1.4,3c-1.8,1.8-1.8,4.7,0,
-				6.5c0.4,0.4,2.4,2.4,4.9,1.3c0.6-0.3,9.3-4.7,10-5L16,5.5z"></path>
-		</g>
-		<g>
-			<g>
-				<path d="M22.9,14.6c0.9-2,0.4-4.4-1.3-6.2c-1.8-1.8-4.1-2.3-6.2-1.3L22.9,14.6z"></path>
-				<g>
-				<rect x="14.6" y="8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.8964 15.5454)" width="3.4" height="11.4"></rect>
-				<path d="M9.5,12.5l-2.3,2.3c0,0-0.1,0.1-0.1,0.2l8,8c0,0,0.1-0.1,0.2-0.1l2.3-2.3L9.5,12.5z"></path>
-				<path d="M5.8,16.9c-0.8,2-0.4,4.4,1.2,6.1c1.7,1.7,4,2,6.1,1.2L5.8,16.9z"></path>
-				</g>
-			</g>
-
-			<circle cx="21.5" cy="2.8" r="2.8"></circle>
-			<path d="M29.2,10.5c-1.1,1.1-2.9,1.1-4,0c-1.1-1.1-1.1-2.9,0-4s2.9-1.1,4,0C30.3,7.6,30.3,9.4,29.2,10.5z"></path>
-		</g>
-	</svg>
-	<p class="loadingBeeMessage">Loading...</p>
-</div>
+		  <p>Loading</p>
+		</div>
 		`
 	}
 };

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -225,27 +225,14 @@ div.chart-overlay {
 		transform: translate(-50%, -50%);
 	}
 
-	// TODO - Remove once loading bee animations are refactored
-	div.loading-bee {
+	div.loading-overlay-content {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 
-		svg {
-			width: 50px;
-			height: 50px;
-
-			g {
-				&.loading-bee_wing-1,
-				&.loading-bee_wing-2 {
-					display: none;
-				}
-			}
-		}
-
-		p.loadingBeeMessage {
-			margin-top: 10px;
+		div.bx--loading {
+			margin: auto;
 		}
 	}
 }