Merge pull request #4973 from pat270/clay-4937

fix(@clayui/css): Utilities update inline-scroller focus ring
liferay · Jul 6, 2022 · 04cf8b6 · 04cf8b6
2 parents 2dd76aa + 50e3800
commit 04cf8b6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_utilities.scss b/packages/clay-css/src/scss/cadmin/components/_utilities.scss
@@ -272,14 +272,15 @@
 // Inline Scroller
 
 .inline-scroller {
-	list-style: none;
-	margin: 0;
-	max-height: $cadmin-inline-scroller-max-height;
-	overflow: auto;
+	@include clay-css($cadmin-inline-scroller);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus {
+		@include clay-css(map-get($cadmin-inline-scroller, focus));
+	}
 
-	padding: 0;
+	&:focus-visible {
+		@include clay-css(map-get($cadmin-inline-scroller, focus-visible));
+	}
 }
 
 // Inline Item

diff --git a/packages/clay-css/src/scss/cadmin/variables/_utilities.scss b/packages/clay-css/src/scss/cadmin/variables/_utilities.scss
@@ -1,6 +1,28 @@
 $cadmin-bg-checkered-fg: $cadmin-gray-300 !default;
+
+// .inline-scroller
+
 $cadmin-inline-scroller-max-height: 125px !default;
 
+$cadmin-inline-scroller: () !default;
+$cadmin-inline-scroller: map-deep-merge(
+	(
+		list-style: none,
+		margin: 0,
+		max-height: $cadmin-inline-scroller-max-height,
+		overflow: auto,
+		-webkit-overflow-scrolling: touch,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+		),
+	),
+	$cadmin-inline-scroller
+);
+
 // Autofit Row
 
 $cadmin-autofit-col-expand-min-width: 50px !default; // 50px

diff --git a/packages/clay-css/src/scss/components/_utilities.scss b/packages/clay-css/src/scss/components/_utilities.scss
@@ -272,14 +272,15 @@
 // Inline Scroller
 
 .inline-scroller {
-	list-style: none;
-	margin: 0;
-	max-height: $inline-scroller-max-height;
-	overflow: auto;
+	@include clay-css($inline-scroller);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus {
+		@include clay-css(map-get($inline-scroller, focus));
+	}
 
-	padding: 0;
+	&:focus-visible {
+		@include clay-css(map-get($inline-scroller, focus-visible));
+	}
 }
 
 // Inline Item

diff --git a/packages/clay-css/src/scss/variables/_utilities.scss b/packages/clay-css/src/scss/variables/_utilities.scss
@@ -1,6 +1,28 @@
 $bg-checkered-fg: $gray-200 !default;
+
+// .inline-scroller
+
 $inline-scroller-max-height: 125px !default;
 
+$inline-scroller: () !default;
+$inline-scroller: map-deep-merge(
+	(
+		-webkit-overflow-scrolling: touch,
+		list-style: none,
+		margin: 0,
+		max-height: $inline-scroller-max-height,
+		overflow: auto,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $component-focus-box-shadow,
+		)
+	),
+	$inline-scroller
+);
+
 // Autofit Row
 
 $autofit-col-expand-min-width: 3.125rem !default; // 50px