Merge pull request #4116 from pat270/clay-4109

fix(@clayui/css): Panel adjust spacing for `panel-unstyled` to preven…
liferay · Jun 9, 2021 · d94779f · d94779f
2 parents e123536 + ea4bffb
commit d94779f
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 55 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_panels.scss b/packages/clay-css/src/scss/atlas/variables/_panels.scss
@@ -10,8 +10,10 @@ $panel-header-link: () !default;
 $panel-header-link: map-deep-merge(
 	(
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$panel-header-link
 );
@@ -44,7 +46,9 @@ $panel-title-small-margin-left: 0.375rem !default; // 6px
 $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
-		title-font-size: 0.75rem,
+		title: (
+			font-size: 0.75rem,
+		),
 	),
 	$panel-group-sm
 );
@@ -56,10 +60,14 @@ $panel-secondary: map-deep-merge(
 	(
 		border-color: $gray-300,
 		color: $gray-600,
-		header-bg: null,
-		header-border-color: $gray-300,
-		footer-bg: null,
-		footer-border-color: $gray-300,
+		header: (
+			background-color: null,
+			border-color: $gray-300,
+		),
+		footer: (
+			background-color: null,
+			border-color: $gray-300,
+		),
 	),
 	$panel-secondary
 );
@@ -70,7 +78,10 @@ $panel-unstyled-header-link: () !default;
 $panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		focus-box-shadow: 0 0 0 0.25rem $body-bg#{','} 0 0 0 0.375rem $primary-l1,
+		focus: (
+			box-shadow: #{0 0 0 0.25rem $body-bg,
+			0 0 0 0.375rem $primary-l1},
+		),
 	),
 	$panel-unstyled-header-link
 );
diff --git a/packages/clay-css/src/scss/cadmin/components/_panels.scss b/packages/clay-css/src/scss/cadmin/components/_panels.scss
@@ -152,6 +152,10 @@
 				transparent;
 		}
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($cadmin-panel-group-panel-unstyled);
+	}
 }
 
 // Panel Group Fluid
@@ -181,6 +185,10 @@
 			}
 		}
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($cadmin-panel-group-flush-panel-unstyled);
+	}
 }
 
 .panel-group-fluid-first {
@@ -311,6 +319,10 @@
 	.panel {
 		@include clay-panel-variant($cadmin-panel-group-sm);
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($cadmin-panel-group-sm-panel-unstyled);
+	}
 }
 
 // Panel Variants

diff --git a/packages/clay-css/src/scss/cadmin/variables/_panels.scss b/packages/clay-css/src/scss/cadmin/variables/_panels.scss
@@ -51,11 +51,15 @@ $cadmin-panel-header-link: map-deep-merge(
 		display: block,
 		text-decoration: $cadmin-panel-header-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: inherit,
-		hover-text-decoration: $cadmin-panel-header-link-hover-text-decoration,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
-		focus-z-index: $cadmin-zindex-panel-header-link-focus,
+		hover: (
+			color: inherit,
+			text-decoration: $cadmin-panel-header-link-hover-text-decoration,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+			z-index: $cadmin-zindex-panel-header-link-focus,
+		),
 	),
 	$cadmin-panel-header-link
 );
@@ -93,20 +97,42 @@ $cadmin-panel-title-small-margin-left: 6px !default; // 6px
 
 $cadmin-panel-group-panel-margin-bottom: -$cadmin-panel-border-bottom-width !default;
 
+$cadmin-panel-group-panel-unstyled: () !default;
+$cadmin-panel-group-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: 24px,
+	),
+	$cadmin-panel-group-panel-unstyled
+);
+
 // Panel Group Sm
 
 $cadmin-panel-group-sm: () !default;
 $cadmin-panel-group-sm: map-deep-merge(
 	(
 		font-size: 14px,
-		header-padding-bottom: 8px,
-		header-padding-top: 8px,
-		title-font-size: 12px,
-		collapse-icon-top: 11px,
+		header: (
+			padding-bottom: 8px,
+			padding-top: 8px,
+		),
+		title: (
+			font-size: 12px,
+		),
+		collapse-icon: (
+			top: 11px,
+		),
 	),
 	$cadmin-panel-group-sm
 );
 
+$cadmin-panel-group-sm-panel-unstyled: () !default;
+$cadmin-panel-group-sm-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: 16px,
+	),
+	$cadmin-panel-group-sm-panel-unstyled
+);
+
 // Panel Group Flush
 
 $cadmin-panel-group-flush-body-margin-bottom: 24px !default;
@@ -117,6 +143,17 @@ $cadmin-panel-group-flush-collapse-icon-right: 0 !default;
 $cadmin-panel-group-flush-collapse-icon-padding-left: null !default;
 $cadmin-panel-group-flush-collapse-icon-padding-right: 24px !default;
 
+$cadmin-panel-group-flush-panel-unstyled: () !default;
+$cadmin-panel-group-flush-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: 24px,
+		body: (
+			margin-bottom: 0,
+		),
+	),
+	$cadmin-panel-group-flush-panel-unstyled
+);
+
 // Panel Variants
 
 $cadmin-panel-secondary-header-link: () !default;
@@ -126,9 +163,13 @@ $cadmin-panel-secondary: map-deep-merge(
 	(
 		border-color: $cadmin-gray-300,
 		color: $cadmin-gray-600,
-		header-border-color: $cadmin-gray-300,
-		header-link: $cadmin-panel-secondary-header-link,
-		footer-border-color: $cadmin-gray-300,
+		header: (
+			border-color: $cadmin-gray-300,
+			link: $cadmin-panel-secondary-header-link,
+		),
+		footer: (
+			border-color: $cadmin-gray-300,
+		),
 	),
 	$cadmin-panel-secondary
 );
@@ -139,26 +180,41 @@ $cadmin-panel-unstyled-header-link: () !default;
 $cadmin-panel-unstyled-header-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		focus-box-shadow: #{0 0 0 4px $cadmin-body-bg,
-		0 0 0 6px $cadmin-primary-l1},
+		focus: (
+			box-shadow: #{0 0 0 4px $cadmin-body-bg,
+			0 0 0 6px $cadmin-primary-l1},
+		),
 	),
 	$cadmin-panel-unstyled-header-link
 );
 
 $cadmin-panel-unstyled: () !default;
 $cadmin-panel-unstyled: map-deep-merge(
 	(
-		bg: transparent,
+		background-color: transparent,
 		border-radius: 0,
 		border-width: 0,
-		header-border-color: $cadmin-gray-500,
-		header-border-style: solid,
-		header-border-width: 0 0 1px 0,
-		header-margin-bottom: 16px,
-		header-collapsed-border-color: $cadmin-gray-500,
-		header-link: $cadmin-panel-unstyled-header-link,
-		body-margin-bottom: 16px,
-		body-padding-top: 0,
+		margin-bottom: 24px,
+		header: (
+			border-color: $cadmin-gray-500,
+			border-radius: 0,
+			border-style: solid,
+			border-width: 0 0 1px 0,
+			padding-left: 0,
+			collapsed: (
+				border-color: $cadmin-gray-500,
+			),
+			link: $cadmin-panel-unstyled-header-link,
+		),
+		collapse-icon: (
+			right: 0,
+		),
+		body: (
+			padding: 16px 0 0.1px 0,
+		),
+		footer: (
+			padding: 16px 0 0.1px 0,
+		),
 	),
 	$cadmin-panel-unstyled
 );
diff --git a/packages/clay-css/src/scss/components/_panels.scss b/packages/clay-css/src/scss/components/_panels.scss
@@ -147,6 +147,10 @@
 			border-top: $panel-header-border-bottom-width solid transparent;
 		}
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($panel-group-panel-unstyled);
+	}
 }
 
 // Panel Group Fluid
@@ -298,6 +302,10 @@
 		left: $panel-group-flush-collapse-icon-left;
 		right: $panel-group-flush-collapse-icon-right;
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($panel-group-flush-panel-unstyled);
+	}
 }
 
 // Panel Group Sizes
@@ -306,6 +314,10 @@
 	.panel {
 		@include clay-panel-variant($panel-group-sm);
 	}
+
+	.panel-unstyled {
+		@include clay-panel-variant($panel-group-sm-panel-unstyled);
+	}
 }
 
 // Panel Variants

diff --git a/packages/clay-css/src/scss/mixins/_panels.scss b/packages/clay-css/src/scss/mixins/_panels.scss
@@ -139,7 +139,9 @@
 		)
 	);
 
-	$header-collapsed: setter(map-get($map, header-collapsed), ());
+	$old-header-collapsed: setter(map-get($map, header-collapsed), ());
+	$header-collapsed: setter(map-get($header, collapsed), ());
+	$header-collapsed: map-merge($header-collapsed, $old-header-collapsed);
 	$header-collapsed: map-merge(
 		$header-collapsed,
 		(
@@ -151,7 +153,8 @@
 		)
 	);
 
-	$header-c-inner: setter(map-get($map, header-c-inner), ());
+	$old-header-c-inner: setter(map-get($map, header-c-inner), ());
+	$header-c-inner: setter(map-get($header, c-inner), ());
 	$header-c-inner: map-merge(
 		(
 			enabled:
@@ -171,7 +174,9 @@
 		$header-c-inner
 	);
 
-	$header-link: setter(map-get($map, header-link), ());
+	$old-header-link: setter(map-get($map, header-link), ());
+	$header-link: setter(map-get($header, link), ());
+	$header-link: map-deep-merge($header-link, $old-header-link);
 
 	$title: setter(map-get($map, title), ());
 	$title: map-merge(