feat(core): add spacer components

carbon-design-system · Dec 16, 2019 · 4e5ab5c · 4e5ab5c
1 parent 948b204
commit 4e5ab5c
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 28 deletions.
diff --git a/packages/core/src/axis-chart.ts b/packages/core/src/axis-chart.ts
@@ -12,7 +12,8 @@ import {
 	Legend,
 	Title,
 	Tooltip,
-	TooltipBar
+	TooltipBar,
+	Spacer
 } from "./components/index";
 import { Tools } from "./tools";
 
@@ -79,6 +80,17 @@ export class AxisChart extends Chart {
 			fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 		}
 
+		const legendSpacerComponent = {
+			id: "spacer",
+			components: [
+				new Spacer(this.model, this.services)
+			],
+			growth: {
+				x: LayoutGrowth.PREFERRED,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
 		const fullFrameComponent = {
 			id: "full-frame",
 			components: [
@@ -87,6 +99,7 @@ export class AxisChart extends Chart {
 					this.services,
 					[
 						legendComponent,
+						legendSpacerComponent,
 						graphFrameComponent
 					],
 					{
@@ -104,6 +117,19 @@ export class AxisChart extends Chart {
 		const topLevelLayoutComponents = [];
 		if (this.model.getOptions().title) {
 			topLevelLayoutComponents.push(titleComponent);
+
+			const titleSpacerComponent = {
+				id: "spacer",
+				components: [
+					new Spacer(this.model, this.services)
+				],
+				growth: {
+					x: LayoutGrowth.PREFERRED,
+					y: LayoutGrowth.FIXED
+				}
+			};
+
+			topLevelLayoutComponents.push(titleSpacerComponent);
 		}
 		topLevelLayoutComponents.push(fullFrameComponent);
 

diff --git a/packages/core/src/chart.ts b/packages/core/src/chart.ts
@@ -14,7 +14,8 @@ import { Component,
 	Title,
 	Legend,
 	LayoutComponent,
-	Tooltip
+	Tooltip,
+	Spacer
 } from "./components";
 import { Tools } from "./tools";
 
@@ -168,6 +169,17 @@ export class Chart {
 			fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 		}
 
+		const legendSpacerComponent = {
+			id: "spacer",
+			components: [
+				new Spacer(this.model, this.services)
+			],
+			growth: {
+				x: LayoutGrowth.PREFERRED,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
 		const fullFrameComponent = {
 			id: "full-frame",
 			components: [
@@ -176,6 +188,7 @@ export class Chart {
 					this.services,
 					[
 						legendComponent,
+						legendSpacerComponent,
 						graphFrameComponent
 					],
 					{
@@ -193,6 +206,19 @@ export class Chart {
 		const topLevelLayoutComponents = [];
 		if (this.model.getOptions().title) {
 			topLevelLayoutComponents.push(titleComponent);
+
+			const titleSpacerComponent = {
+				id: "spacer",
+				components: [
+					new Spacer(this.model, this.services)
+				],
+				growth: {
+					x: LayoutGrowth.PREFERRED,
+					y: LayoutGrowth.FIXED
+				}
+			};
+
+			topLevelLayoutComponents.push(titleSpacerComponent);
 		}
 		topLevelLayoutComponents.push(fullFrameComponent);
 

diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts
@@ -58,17 +58,6 @@ export class Legend extends Component {
 		if (legendClickable && addedLegendItems.size() > 0) {
 			this.addEventListeners();
 		}
-
-		const legendPosition = Tools.getProperty(options, "legend", "position");
-		if (legendPosition === LegendPositions.BOTTOM || legendPosition === LegendPositions.TOP) {
-			// TODO - Replace with layout component margins
-			DOMUtils.appendOrSelect(svg, "rect.spacer")
-				.attr("x", 0)
-				.attr("y", 10)
-				.attr("width", 20)
-				.attr("height", 20)
-				.attr("fill", "none");
-		}
 	}
 
 	breakItemsIntoLines(addedLegendItems) {
@@ -101,7 +90,7 @@ export class Legend extends Component {
 				const previousLegendItem = select(svg.selectAll("g.legend-item").nodes()[i - 1]);
 
 				if (itemIndexInLine === 0 || previousLegendItem.empty() || legendOrientation === LegendOrientations.VERTICAL) {
-					if (legendOrientation === LegendOrientations.VERTICAL) {
+					if (legendOrientation === LegendOrientations.VERTICAL && i !== 0) {
 						lineNumber++;
 					}
 				} else {
@@ -117,11 +106,7 @@ export class Legend extends Component {
 					}
 				}
 
-				const legendPosition = Tools.getProperty(options, "legend", "position");
-				let yOffset = 0;
-				if (legendPosition === LegendPositions.BOTTOM) {
-					yOffset = 20;
-				}
+				const yOffset = 0;
 
 				// Position checkbox
 				// TODO - Replace with layout component margins

diff --git a/packages/core/src/components/essentials/title.ts b/packages/core/src/components/essentials/title.ts
@@ -57,14 +57,6 @@ export class Title extends Component {
 			.attr("y", 20)
 			.text(this.model.getOptions().title);
 
-		// TODO - Replace with layout component margins
-		DOMUtils.appendOrSelect(svg, "rect.spacer")
-			.attr("x", 0)
-			.attr("y", 20)
-			.attr("width", 20)
-			.attr("height", 20)
-			.attr("fill", "none");
-
 		// title needs to first render so that we can check for overflow
 		this.truncateTitle();
 	}

diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -16,9 +16,12 @@ export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
 
+// Layout
+export * from "./layout/spacer";
+export * from "./layout/layout";
+
 // MISC
 export * from "./axes/two-dimensional-axes";
 export * from "./axes/axis";
 export * from "./axes/grid";
 export * from "./axes/horizontal-zero-line";
-export * from "./layout/layout";
diff --git a/packages/core/src/components/layout/spacer.ts b/packages/core/src/components/layout/spacer.ts
@@ -0,0 +1,16 @@
+// Internal Imports
+import { Component } from "../component";
+import * as Configuration from "../../configuration";
+
+export class Spacer extends Component {
+	type = "spacer";
+
+	render() {
+		this.getContainerSVG().append("rect")
+			.attr("x", 0)
+			.attr("y", 0)
+			.attr("width", this.configs.size || Configuration.spacers.default.size)
+			.attr("height", this.configs.size || Configuration.spacers.default.size)
+			.attr("opacity", 0);
+	}
+}
diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -272,3 +272,9 @@ export const axis = {
 		rotateIfSmallerThan: 30
 	}
 };
+
+export const spacers = {
+	default: {
+		size: 24
+	}
+};