fix: replace built-in padding with built-in gap in between iterator i…

…tems (#174)
BrightspaceUILabs · Jul 25, 2022 · 8740b84 · 8740b84
1 parent b8f2328
commit 8740b84
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 6 deletions.
diff --git a/components/d2l-navigation-iterator/d2l-navigation-iterator.js b/components/d2l-navigation-iterator/d2l-navigation-iterator.js
@@ -20,10 +20,10 @@ class NavigationIterator extends  LocalizeNavigationElement(LitElement) {
 			:host {
 				align-items: center;
 				display: flex;
+				gap: 1.2rem;
 				height: 3.3rem;
 				justify-content: space-between;
 				max-width: 20rem;
-				padding: 0 1.2rem;
 			}
 			:host([hidden]) {
 				display: none;

diff --git a/test/iterator.visual-diff.html b/test/iterator.visual-diff.html
@@ -18,27 +18,27 @@
 	</head>
 	<body class="d2l-typography">
 		<div class="visual-diff">
-			<div class="wrapper" id="iterator-default" style="min-width: 300px;">
+			<div class="wrapper" id="iterator-default">
 				<d2l-navigation-iterator></d2l-navigation-iterator>
 			</div>
 		</div>
 		<div class="visual-diff">
-			<div class="wrapper" id="iterator-hide-text" style="min-width: 300px;">
+			<div class="wrapper" id="iterator-hide-text">
 				<d2l-navigation-iterator hide-text></d2l-navigation-iterator>
 			</div>
 		</div>
 		<div class="visual-diff">
-			<div class="wrapper" id="iterator-disabled" style="min-width: 300px;">
+			<div class="wrapper" id="iterator-disabled">
 				<d2l-navigation-iterator previous-disabled next-disabled></d2l-navigation-iterator>
 			</div>
 		</div>
 		<div class="visual-diff">
-			<div class="wrapper" id="iterator-custom-text" style="min-width: 300px;">
+			<div class="wrapper" id="iterator-custom-text">
 				<d2l-navigation-iterator previous-text="Back" next-text="Forward"></d2l-navigation-iterator>
 			</div>
 		</div>
 		<div class="visual-diff">
-			<div class="wrapper" id="iterator-slot" style="min-width: 300px;">
+			<div class="wrapper" id="iterator-slot">
 				<d2l-navigation-iterator>Hello</d2l-navigation-iterator>
 			</div>
 		</div>

diff --git a/...golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-custom-text.png b/...golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-custom-text.png
diff --git a/.../ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-default.png b/.../ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-default.png
diff --git a/...ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-disabled.png b/...ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-disabled.png
diff --git a/...i/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-hide-text.png b/...i/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-hide-text.png
diff --git a/...ots/ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-slot.png b/...ots/ci/golden/d2l-navigation-iterator/d2l-navigation-iterator-iterator-slot.png