Merge pull request #5710 from pat270/LPS-197645-focus

fix(@clayui/css): Adds .table-focus for focus outline around table row
liferay · Nov 8, 2023 · c851f49 · c851f49
2 parents 2a46962 + 5121443
commit c851f49
Show file tree

Hide file tree

Showing 5 changed files with 285 additions and 153 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -31,22 +31,10 @@ $table-head-link: map-deep-merge(
 // Table Body
 
 $c-table-tbody: () !default;
-$c-table-tbody: map-merge(
-	(
-		background-color: $white,
-	),
-	$c-table-tbody
-);
 
 // Table Footer
 
 $c-table-tfoot: () !default;
-$c-table-tfoot: map-merge(
-	(
-		background-color: $table-bg,
-	),
-	$c-table-tfoot
-);
 
 $table-caption-color: $gray-900 !default;
 
@@ -134,6 +122,41 @@ $table-link: map-deep-merge(
 	$table-link
 );
 
+// .table-focus
+
+$c-tr-table-focus: () !default;
+$c-tr-table-focus: map-deep-merge(
+	(
+		td: (
+			before: (
+				box-shadow: (
+					inset 0 0.125rem 0 0 $primary-l0,
+					inset 0 0.25rem 0 0 $white,
+					inset 0 -0.125rem 0 0 $primary-l0,
+					inset 0 -0.25rem 0 0 $white,
+				),
+			),
+			first-child: (
+				after: (
+					box-shadow: (
+						inset 0.125rem 0 0 0 $primary-l0,
+						inset 0.25rem 0 0 0 $white,
+					),
+				),
+			),
+			last-child: (
+				after: (
+					box-shadow: (
+						inset -0.125rem 0 0 0 $primary-l0,
+						inset -0.25rem 0 0 0 $white,
+					),
+				),
+			),
+		),
+	),
+	$c-tr-table-focus
+);
+
 // Table List
 
 $table-list-border-color: $gray-300 !default;

diff --git a/packages/clay-css/src/scss/cadmin/components/_tables.scss b/packages/clay-css/src/scss/cadmin/components/_tables.scss
@@ -75,6 +75,58 @@ caption {
 	@include clay-table-variant($cadmin-c-table-hover);
 }
 
+// Table Focus
+
+tr.table-focus {
+	@include clay-css($cadmin-c-tr-table-focus);
+
+	td {
+		$_td: setter(map-get($cadmin-c-tr-table-focus, td), ());
+
+		@include clay-css($_td);
+
+		&::before {
+			@include clay-css(map-get($_td, before));
+		}
+
+		&::after {
+			@include clay-css(map-get($_td, after));
+		}
+
+		&:first-child {
+			$_first-child: setter(map-get($_td, first-child), ());
+
+			@include clay-css($_first-child);
+
+			&::before {
+				@include clay-css(map-get($_first-child, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($_first-child, after));
+			}
+		}
+
+		&:last-child {
+			$_last-child: setter(map-get($_td, last-child), ());
+
+			@include clay-css($_last-child);
+
+			&::before {
+				@include clay-css(map-get($_last-child, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($_last-child, after));
+			}
+		}
+	}
+}
+
+td.table-focus {
+	@include clay-css($cadmin-c-td-table-focus);
+}
+
 // Table Row Backgrounds
 
 .table-striped {