refactor: icon margins and aligned icons margins CSS variables

mfranzke · mfranzke · commit 2e6ec878efdf · 2022-07-13T17:09:02.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -80,6 +80,15 @@ In general we've introduced the possibility to control variants and configuratio
 - The DB Webfonts files have been updated -->
 
 ## [Unreleased]
+## [2.0.0-46] - 2022-07-13
+
+### Changed
+
+#### Package consumption
+
+-   **BREAKING CHANGE** / Icons: Changed undocumented CSS Variables `--icon-margin-left` and `--icon-margin-right` to `--icon-margin-before` and `--icon-margin-after`
+-   refactor: icon margins
+
 ## [2.0.0-45] - 2022-07-07
 
 ### Fixed
diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc
@@ -55,6 +55,8 @@ The already deprecated enterprise specific as well as the seperate transporation
 
 And we've moved all icon assets from `dist/images/icons` to `dist/icons` and even a better subfolder structure in there, and as well retrieving those by [DB UI Base](https://db-ui.github.io/base/?p=viewall-icons-all) package, path `node_modules/@db-ui/base/build/assets/icons/`.
 
+If you've used the undocumented `--icon-margin-left` and `--icon-margin-right` CSS Variables: They now became `--icon-margin-before` and `--icon-margin-after` for easier i18n.
+
 === Buttons
 
 Some variants have changed or been removed:
diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -7,14 +7,18 @@
 	$partial: false
 ) {
 	&::#{$position} {
-		--icon-font-family: "#{"icons-" + $size + "-" + $style}", "missing-icons" !important;
+		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
+			"missing-icons" !important;
 		--icon-font-size: #{to-rem($pxValue: $size)};
 
 		@if $position == "before" {
-			--icon-margin-right: #{$icon-content-space};
+			margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
 		}
 		@if $position == "after" {
-			--icon-margin-left: #{$icon-content-space};
+			margin-inline-start: var(
+				--icon-margin-before,
+				#{$icon-content-space}
+			);
 		}
 
 		@if $glyph != "" {
@@ -40,9 +44,6 @@
 
 			display: inline-block;
 
-			margin-right: var(--icon-margin-right);
-			margin-left: var(--icon-margin-left);
-
 			// * Better Font Rendering ===========
 			-webkit-font-smoothing: antialiased;
 			-moz-osx-font-smoothing: grayscale;
@@ -72,11 +73,11 @@
 
 	@if $position == "before" {
 		&::before {
-			--icon-margin-right: 0;
+			--icon-margin-after: 0;
 		}
 	} @else {
 		&::after {
-			--icon-margin-left: 0;
+			--icon-margin-before: 0;
 		}
 	}
 }
@@ -89,7 +90,8 @@
 // Icon meta data mixin
 @mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") {
 	&::#{$position} {
-		--icon-font-family: "#{"icons-" + $size + "-" + $style}", "missing-icons" !important;
+		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
+			"missing-icons" !important;
 		--icon-font-size: #{to-rem($pxValue: $size)};
 	}
 }
diff --git a/source/_patterns/00-base/icons/_icons.placeholder.scss b/source/_patterns/00-base/icons/_icons.placeholder.scss
@@ -18,9 +18,6 @@
 
 	display: inline-block;
 
-	margin-right: var(--icon-margin-right);
-	margin-left: var(--icon-margin-left);
-
 	// * Better Font Rendering ===========
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
diff --git a/source/_patterns/00-base/icons/_icons.scss b/source/_patterns/00-base/icons/_icons.scss
@@ -9,13 +9,13 @@
 [data-icon],
 [data-icon-before] {
 	&::before {
-		--icon-margin-right: #{$icon-content-space};
+		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
 		@extend %icon;
 	}
 }
 [data-icon-after] {
 	&::after {
-		--icon-margin-left: #{$icon-content-space};
+		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
 		@extend %icon;
 	}
 }
diff --git a/source/_patterns/01-elements/tags/tag.scss b/source/_patterns/01-elements/tags/tag.scss
@@ -86,14 +86,14 @@
 		@include iconMeta(20);
 
 		&::before {
-			--icon-margin-right: #{to-rem($pxValue: 2)};
+			--icon-margin-after: #{to-rem($pxValue: 2)};
 		}
 	}
 	&[data-icon-after] {
 		@include iconMeta($size: 20, $position: "after");
 
 		&::after {
-			--icon-margin-left: #{to-rem($pxValue: 2)};
+			--icon-margin-before: #{to-rem($pxValue: 2)};
 		}
 	}
 }
diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss
@@ -30,8 +30,8 @@
 
 		// Icon horizontal space
 		&::before {
-			--icon-margin-left: #{to-rem($pxValue: 14)};
-			--icon-margin-right: #{to-rem($pxValue: 8)};
+			margin-left: #{to-rem($pxValue: 14)};
+			--icon-margin-after: #{to-rem($pxValue: 8)};
 		}
 
 		& + p {
@@ -79,8 +79,8 @@
 
 			&::before {
 				--icon-font-size: #{to-rem($pxValue: 20)};
-				--icon-margin-left: #{to-rem($pxValue: 6)};
-				--icon-margin-right: #{to-rem($pxValue: 6)};
+				margin-left: #{to-rem($pxValue: 6)};
+				--icon-margin-after: #{to-rem($pxValue: 6)};
 			}
 		}
 	}
diff --git a/source/_patterns/02-components/breadcrumb/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/breadcrumb.scss
@@ -26,8 +26,8 @@
 			.elm-link {
 				text-decoration: none;
 
-				padding: to-rem($pxValue: 1) to-rem($pxValue: 3) to-rem($pxValue: 1)
-					to-rem($pxValue: 4);
+				padding: to-rem($pxValue: 1) to-rem($pxValue: 3)
+					to-rem($pxValue: 1) to-rem($pxValue: 4);
 
 				border-radius: to-rem($pxValue: 4);
 
@@ -42,7 +42,7 @@
 			&:first-child {
 				@include icon(glyph(home), $size: 20, $partial: $partial);
 				&::before {
-					--icon-margin-right: #{to-rem($pxValue: 3)};
+					--icon-margin-after: #{to-rem($pxValue: 3)};
 				}
 			}
 
@@ -55,8 +55,8 @@
 
 				&::before {
 					--icon-font-size: #{to-rem($pxValue: 14)};
-					--icon-margin-right: 0;
-					--icon-margin-left: -#{to-rem($pxValue: 2)};
+					--icon-margin-after: 0;
+					margin-left: -#{to-rem($pxValue: 2)};
 					color: $db-color-cool-gray-400;
 				}
 			}
diff --git a/source/_patterns/02-components/notifications/notification.scss b/source/_patterns/02-components/notifications/notification.scss
@@ -64,13 +64,13 @@
 	&[data-icon],
 	&[data-icon-before] {
 		&::before {
-			--icon-margin-right: #{to-rem($pxValue: 10)};
+			--icon-margin-after: #{to-rem($pxValue: 10)};
 		}
 	}
 	&[data-icon-after] {
 		justify-content: space-between;
 		&::after {
-			--icon-margin-left: #{to-rem($pxValue: 10)};
+			--icon-margin-before: #{to-rem($pxValue: 10)};
 		}
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -9,13 +9,13 @@`
`9`	`9`	`[data-icon],`
`10`	`10`	`[data-icon-before] {`
`11`	`11`	`&::before {`
`12`		`- --icon-margin-right: #{$icon-content-space};`
	`12`	`+ margin-inline-end: var(--icon-margin-after, #{$icon-content-space});`
`13`	`13`	`@extend %icon;`
`14`	`14`	`}`
`15`	`15`	`}`
`16`	`16`	`[data-icon-after] {`
`17`	`17`	`&::after {`
`18`		`- --icon-margin-left: #{$icon-content-space};`
	`18`	`+ margin-inline-start: var(--icon-margin-before, #{$icon-content-space});`
`19`	`19`	`@extend %icon;`
`20`	`20`	`}`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -86,14 +86,14 @@`
`86`	`86`	`@include iconMeta(20);`
`87`	`87`
`88`	`88`	`&::before {`
`89`		`- --icon-margin-right: #{to-rem($pxValue: 2)};`
	`89`	`+ --icon-margin-after: #{to-rem($pxValue: 2)};`
`90`	`90`	`}`
`91`	`91`	`}`
`92`	`92`	`&[data-icon-after] {`
`93`	`93`	`@include iconMeta($size: 20, $position: "after");`
`94`	`94`
`95`	`95`	`&::after {`
`96`		`- --icon-margin-left: #{to-rem($pxValue: 2)};`
	`96`	`+ --icon-margin-before: #{to-rem($pxValue: 2)};`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,8 +30,8 @@`
`30`	`30`
`31`	`31`	`// Icon horizontal space`
`32`	`32`	`&::before {`
`33`		`- --icon-margin-left: #{to-rem($pxValue: 14)};`
`34`		`- --icon-margin-right: #{to-rem($pxValue: 8)};`
	`33`	`+ margin-left: #{to-rem($pxValue: 14)};`
	`34`	`+ --icon-margin-after: #{to-rem($pxValue: 8)};`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`& + p {`
`@@ -79,8 +79,8 @@`
`79`	`79`
`80`	`80`	`&::before {`
`81`	`81`	`--icon-font-size: #{to-rem($pxValue: 20)};`
`82`		`- --icon-margin-left: #{to-rem($pxValue: 6)};`
`83`		`- --icon-margin-right: #{to-rem($pxValue: 6)};`
	`82`	`+ margin-left: #{to-rem($pxValue: 6)};`
	`83`	`+ --icon-margin-after: #{to-rem($pxValue: 6)};`
`84`	`84`	`}`
`85`	`85`	`}`
`86`	`86`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,8 @@`
`26`	`26`	`.elm-link {`
`27`	`27`	`text-decoration: none;`
`28`	`28`
`29`		`- padding: to-rem($pxValue: 1) to-rem($pxValue: 3) to-rem($pxValue: 1)`
`30`		`- to-rem($pxValue: 4);`
	`29`	`+ padding: to-rem($pxValue: 1) to-rem($pxValue: 3)`
	`30`	`+ to-rem($pxValue: 1) to-rem($pxValue: 4);`
`31`	`31`
`32`	`32`	`border-radius: to-rem($pxValue: 4);`
`33`	`33`
`@@ -42,7 +42,7 @@`
`42`	`42`	`&:first-child {`
`43`	`43`	`@include icon(glyph(home), $size: 20, $partial: $partial);`
`44`	`44`	`&::before {`
`45`		`- --icon-margin-right: #{to-rem($pxValue: 3)};`
	`45`	`+ --icon-margin-after: #{to-rem($pxValue: 3)};`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`
`@@ -55,8 +55,8 @@`
`55`	`55`
`56`	`56`	`&::before {`
`57`	`57`	`--icon-font-size: #{to-rem($pxValue: 14)};`
`58`		`- --icon-margin-right: 0;`
`59`		`- --icon-margin-left: -#{to-rem($pxValue: 2)};`
	`58`	`+ --icon-margin-after: 0;`
	`59`	`+ margin-left: -#{to-rem($pxValue: 2)};`
`60`	`60`	`color: $db-color-cool-gray-400;`
`61`	`61`	`}`
`62`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,13 +64,13 @@`
`64`	`64`	`&[data-icon],`
`65`	`65`	`&[data-icon-before] {`
`66`	`66`	`&::before {`
`67`		`- --icon-margin-right: #{to-rem($pxValue: 10)};`
	`67`	`+ --icon-margin-after: #{to-rem($pxValue: 10)};`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`	`&[data-icon-after] {`
`71`	`71`	`justify-content: space-between;`
`72`	`72`	`&::after {`
`73`		`- --icon-margin-left: #{to-rem($pxValue: 10)};`
	`73`	`+ --icon-margin-before: #{to-rem($pxValue: 10)};`
`74`	`74`	`}`
`75`	`75`	`}`
`76`	`76`	`}`