Fixes liferay#1242 - (ClayCSS) SVG Icons added `.lexicon-icon-contain…

…er` to wrap svg icons so we can have the icon name spoken for screen readers at the bare minimum
pat270 · Nov 13, 2018 · dcf1be7 · dcf1be7
1 parent 55cd657
commit dcf1be7
Show file tree

Hide file tree

Showing 22 changed files with 88 additions and 8 deletions.
diff --git a/packages/clay-css/src/scss/components/_badges.scss b/packages/clay-css/src/scss/components/_badges.scss
@@ -88,6 +88,7 @@
 		@include clay-link($badge-close);
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		height: $badge-lexicon-icon-height;
 		margin-top: $badge-lexicon-icon-margin-top;

diff --git a/packages/clay-css/src/scss/components/_buttons.scss b/packages/clay-css/src/scss/components/_buttons.scss
@@ -180,8 +180,11 @@
 		}
 	}
 
-	&.btn .lexicon-icon {
-		margin-top: 0;
+	&.btn {
+		.lexicon-icon-container,
+		.lexicon-icon {
+			margin-top: 0;
+		}
 	}
 }
 

diff --git a/packages/clay-css/src/scss/components/_dropdowns.scss b/packages/clay-css/src/scss/components/_dropdowns.scss
@@ -228,6 +228,8 @@
 		}
 
 		.inline-item .lexicon-icon,
+		.inline-item .lexicon-icon-container,
+		.lexicon-icon-container,
 		.lexicon-icon {
 			margin-top: 0;
 		}

diff --git a/packages/clay-css/src/scss/components/_icons.scss b/packages/clay-css/src/scss/components/_icons.scss
@@ -1,9 +1,21 @@
+.lexicon-icon-container {
+	display: inline-block;
+	height: $lexicon-icon-size;
+	margin-top: -3px;
+	vertical-align: middle;
+	width: $lexicon-icon-size;
+
+	.lexicon-icon {
+		display: block;
+		margin-top: 0;
+	}
+}
+
 .lexicon-icon {
 	display: inline-block;
 	fill: currentColor;
 	height: $lexicon-icon-size;
 	margin-top: -3px;
-	pointer-events: none;
 	vertical-align: middle;
 	width: $lexicon-icon-size;
 }
@@ -43,6 +55,7 @@ a.collapse-icon {
 .collapse-icon-open {
 	.lexicon-icon {
 		display: block;
+		margin-top: 0;
 	}
 }
 
@@ -52,14 +65,11 @@ a.collapse-icon {
 		bottom: $collapse-icon-position-bottom;
 		height: 1em;
 		left: $collapse-icon-position-left;
+		line-height: 1;
 		position: absolute;
 		right: $collapse-icon-position-right;
 		top: $collapse-icon-position-top;
 		width: 1em;
-
-		.lexicon-icon {
-			margin-top: 0;
-		}
 	}
 
 	.collapse-icon-closed {

diff --git a/packages/clay-css/src/scss/components/_labels.scss b/packages/clay-css/src/scss/components/_labels.scss
@@ -110,6 +110,7 @@ a.label {
 		@include clay-link($label-close);
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		height: $label-lexicon-icon-height;
 		margin-top: $label-lexicon-icon-margin-top;

diff --git a/packages/clay-css/src/scss/components/_links.scss b/packages/clay-css/src/scss/components/_links.scss
@@ -45,7 +45,9 @@ button.link-outline {
 		text-decoration: none;
 	}
 
+	.inline-item .lexicon-icon-container,
 	.inline-item .lexicon-icon,
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}
@@ -73,7 +75,9 @@ button.link-outline {
 	vertical-align: middle;
 	width: $link-monospaced-size;
 
+	.inline-item .lexicon-icon-container,
 	.inline-item .lexicon-icon,
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}

diff --git a/packages/clay-css/src/scss/components/_multi-step-nav.scss b/packages/clay-css/src/scss/components/_multi-step-nav.scss
@@ -244,6 +244,7 @@ a.multi-step-icon {
 		vertical-align: baseline;
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		height: $multi-step-icon-font-size;
 		margin-top: 0;

diff --git a/packages/clay-css/src/scss/components/_navbar.scss b/packages/clay-css/src/scss/components/_navbar.scss
@@ -132,6 +132,10 @@
 	padding: $navbar-brand-padding-y $navbar-nav-link-padding-x;
 	position: relative;
 
+	.lexicon-icon-container {
+		margin-top: 0;
+	}
+
 	.lexicon-icon {
 		min-width: 1em;
 		margin-left: 3px;

diff --git a/packages/clay-css/src/scss/components/_navs.scss b/packages/clay-css/src/scss/components/_navs.scss
@@ -38,6 +38,7 @@
 		margin-right: 0;
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}
@@ -69,6 +70,7 @@
 	min-width: $nav-item-monospaced-size;
 	padding: 0;
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}

diff --git a/packages/clay-css/src/scss/components/_panels.scss b/packages/clay-css/src/scss/components/_panels.scss
@@ -47,6 +47,13 @@
 		right: $panel-header-collapse-icon-right;
 		top: $panel-header-collapse-icon-top;
 	}
+
+	&.collapse-icon-middle {
+		.collapse-icon-closed,
+		.collapse-icon-open {
+			top: 50%;
+		}
+	}
 }
 
 .panel-header-link {

diff --git a/packages/clay-css/src/scss/components/_quick-action.scss b/packages/clay-css/src/scss/components/_quick-action.scss
@@ -35,6 +35,7 @@
 		opacity: $quick-action-item-disabled-opacity;
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}

diff --git a/packages/clay-css/src/scss/components/_stickers.scss b/packages/clay-css/src/scss/components/_stickers.scss
@@ -28,6 +28,7 @@
 	> .inline-item {
 		font-size: $sticker-inline-item-font-size;
 
+		.lexicon-icon-container,
 		.lexicon-icon {
 			margin-top: 0;
 		}

diff --git a/packages/clay-css/src/scss/components/_tbar.scss b/packages/clay-css/src/scss/components/_tbar.scss
@@ -75,7 +75,9 @@
 	padding: 0;
 	text-align: center;
 
+	.inline-item .lexicon-icon-container,
 	.inline-item .lexicon-icon,
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: 0;
 	}

diff --git a/packages/clay-css/src/scss/components/_toggle-switch.scss b/packages/clay-css/src/scss/components/_toggle-switch.scss
@@ -13,6 +13,14 @@
 	.toggle-switch-icon {
 		font-size: $toggle-switch-bar-font-size;
 
+		.lexicon-icon-container {
+			margin-top: -0.2em;
+
+			.lexicon-icon {
+				margin-top: 0;
+			}
+		}
+
 		.lexicon-icon {
 			margin-top: -0.2em;
 		}

diff --git a/packages/clay-css/src/scss/components/_utilities.scss b/packages/clay-css/src/scss/components/_utilities.scss
@@ -268,9 +268,14 @@
 		display: inline;
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-top: $inline-item-lexicon-icon-margin-top;
 	}
+
+	.lexicon-icon-container .lexicon-icon {
+		margin-top: 0;
+	}
 }
 
 .inline-item-before {

diff --git a/packages/clay-css/src/scss/mixins/_background.scss b/packages/clay-css/src/scss/mixins/_background.scss
@@ -33,6 +33,7 @@
 	vertical-align: $indicator-vertical-align;
 	width: $indicator-width;
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		display: none;
 	}

diff --git a/packages/clay-css/src/scss/mixins/_badges.scss b/packages/clay-css/src/scss/mixins/_badges.scss
@@ -21,6 +21,9 @@
 	padding-right: $padding-x;
 	padding-top: $padding-y;
 
+
+	// Inline Item in Badges are deprecated in v2.0.0-rc.11 use .badge-item
+	// pattern instead
 	.inline-item {
 		a,
 		.btn-unstyled,
@@ -38,4 +41,13 @@
 			width: $lexicon-icon-width;
 		}
 	}
+
+	.badge-item {
+		.lexicon-icon-container,
+		.lexicon-icon {
+			height: $lexicon-icon-height;
+			margin-top: $lexicon-icon-margin-top;
+			width: $lexicon-icon-width;
+		}
+	}
 }
diff --git a/packages/clay-css/src/scss/mixins/_cards.scss b/packages/clay-css/src/scss/mixins/_cards.scss
@@ -59,6 +59,8 @@
 			color: $asset-icon-color;
 			width: $asset-icon-width;
 
+			> .lexicon-icon-container,
+			> .lexicon-icon-container .lexicon-icon,
 			> .lexicon-icon {
 				height: 100%;
 				width: 100%;

diff --git a/packages/clay-css/src/scss/mixins/_labels.scss b/packages/clay-css/src/scss/mixins/_labels.scss
@@ -30,6 +30,8 @@
 	padding-top: $padding-y;
 	text-transform: $text-transform;
 
+	// Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
+	// pattern instead
 	.inline-item {
 		a,
 		.btn-unstyled,
@@ -43,6 +45,15 @@
 			width: $lexicon-icon-width;
 		}
 	}
+
+	.label-item {
+		.lexicon-icon-container,
+		.lexicon-icon {
+			height: $lexicon-icon-height;
+			margin-top: $lexicon-icon-margin-top;
+			width: $lexicon-icon-width;
+		}
+	}
 }
 
 @mixin clay-label-variant($map) {

diff --git a/packages/clay-css/src/scss/mixins/_links.scss b/packages/clay-css/src/scss/mixins/_links.scss
@@ -135,6 +135,7 @@
 		text-decoration: $disabled-text-decoration;
 	}
 
+	.lexicon-icon-container,
 	.lexicon-icon {
 		margin-bottom: $lexicon-icon-margin-bottom;
 		margin-right: $lexicon-icon-margin-right;

diff --git a/packages/clay-css/src/scss/mixins/_menubar.scss b/packages/clay-css/src/scss/mixins/_menubar.scss
@@ -110,6 +110,7 @@
 				padding-right: $toggler-padding-x-mobile;
 				padding-top: $toggler-padding-y-mobile;
 
+				.lexicon-icon-container,
 				.lexicon-icon {
 					margin-top: 0;
 				}

diff --git a/packages/clay-css/src/scss/variables/_icons.scss b/packages/clay-css/src/scss/variables/_icons.scss
@@ -4,7 +4,7 @@ $collapse-icon-padding-right: 2.28125rem !default; // 45px
 $collapse-icon-position-bottom: null !default;
 $collapse-icon-position-left: null !default;
 $collapse-icon-position-right: 0.9375rem !default; // 15px
-$collapse-icon-position-top: clay-collapse-icon-align($nav-link-padding-y, 0.0625rem, $font-size-base) !default;
+$collapse-icon-position-top: clay-collapse-icon-align($nav-link-padding-y, 0.0625rem, 1em) !default;
 
 $lexicon-icon-size: 1em !default; // 16px