fix(@clayui/css): Mixins Menubar update to use media query pattern

- Deprecated keys `breakpoint-up` and `breakpoint-down`, use `media-breakpoint-down: (sm:(), md:(), lg:())` instead - To get the older keys to work declare `breakpoint-down: sm` or `breakpoint-down: md` and `media-breakpoint-down: ()` in your Sass maps
liferay · Mar 7, 2023 · c6d9c16 · c6d9c16
1 parent a8a02e2
commit c6d9c16
Showing 1 changed file with 131 additions and 10 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_menubar.scss b/packages/clay-css/src/scss/mixins/_menubar.scss
@@ -46,11 +46,16 @@
 @mixin clay-menubar-vertical-expand($map) {
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
-		$breakpoint-up: setter(map-get($map, breakpoint-up), md);
-		$breakpoint-down: setter(
-			map-get($map, breakpoint-down),
-			clay-breakpoint-prev($breakpoint-up)
-		);
+		$breakpoint-up: map-get($map, breakpoint-up);
+		$breakpoint-down: setter(map-get($map, breakpoint-down), c-unset);
+
+		@if ($breakpoint-up) and ($breakpoint-up != c-unset) {
+			@warn "`breakpoint-up` is deprecated in the mixin `clay-menubar-vertical-expand`, use the key `media-breakpoint-down: (sm: ())` instead.";
+		}
+
+		@if ($breakpoint-down) and ($breakpoint-down != c-unset) {
+			@warn "`breakpoint-down` is deprecated in the mixin `clay-menubar-vertical-expand`, use the key `media-breakpoint-down: (sm: ())` instead.";
+		}
 
 		// .menubar-vertical-expand-{md}
 
@@ -312,7 +317,13 @@
 			}
 
 			.menubar-collapse {
-				@include clay-css(map-get($map, collapse));
+				$_menubar-collapse: setter(map-get($map, collapse), ());
+				$_menubar-collapse: map-deep-merge(
+					setter(map-get($map, menubar-collapse), ()),
+					$_menubar-collapse
+				);
+
+				@include clay-css($_menubar-collapse);
 
 				@include media-breakpoint-down($breakpoint-down) {
 					@include clay-css($collapse-mobile);
@@ -367,6 +378,46 @@
 					}
 				}
 			}
+
+			@if (map-get($map, media-breakpoint-down)) {
+				@each $breakpoint
+					in map-keys(map-get($map, media-breakpoint-down))
+				{
+					$media-breakpoint-down: map-deep-get(
+						$map,
+						media-breakpoint-down,
+						$breakpoint
+					);
+
+					@if ($breakpoint) {
+						@include media-breakpoint-down($breakpoint) {
+							@include clay-menubar-vertical-variant(
+								$media-breakpoint-down
+							);
+						}
+					}
+				}
+			}
+
+			@if (map-get($map, media-breakpoint-up)) {
+				@each $breakpoint
+					in map-keys(map-get($map, media-breakpoint-up))
+				{
+					$media-breakpoint-up: map-deep-get(
+						$map,
+						media-breakpoint-up,
+						$breakpoint
+					);
+
+					@if ($breakpoint) {
+						@include media-breakpoint-up($breakpoint) {
+							@include clay-menubar-vertical-variant(
+								$media-breakpoint-up
+							);
+						}
+					}
+				}
+			}
 		} @else {
 			.menubar-collapse {
 				display: block;
@@ -462,8 +513,16 @@
 
 @mixin clay-menubar-vertical-variant($map) {
 	$enable: setter(map-get($map, enable), true);
-	$breakpoint-up: setter(map-get($map, breakpoint-up), md);
-	$breakpoint-down: clay-breakpoint-prev($breakpoint-up);
+	$breakpoint-up: map-get($map, breakpoint-up);
+	$breakpoint-down: setter(map-get($map, breakpoint-down), c-unset);
+
+	@if ($breakpoint-up) and ($breakpoint-up != c-unset) {
+		@warn "`breakpoint-up` is deprecated in the mixin `clay-menubar-vertical-variant`, use the key `media-breakpoint-down: (sm: ())` instead.";
+	}
+
+	@if ($breakpoint-down) and ($breakpoint-down != c-unset) {
+		@warn "`breakpoint-down` is deprecated in the mixin `clay-menubar-vertical-variant`, use the key `media-breakpoint-down: (sm: ())` instead.";
+	}
 
 	// .menubar-vertical-expand-{md}.menubar-{variant}
 
@@ -855,19 +914,41 @@
 		}
 
 		.menubar-collapse {
-			@include clay-css(map-get($map, collapse));
+			$_menubar-collapse: setter(map-get($map, collapse), ());
+			$_menubar-collapse: map-merge(
+				setter(map-get($map, menubar-collapse), ()),
+				$_menubar-collapse
+			);
+
+			@include clay-css($_menubar-collapse);
 
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-css($collapse-mobile);
 			}
 		}
 
 		.menubar-toggler {
+			$_menubar-toggler: setter(map-get($map, menubar-toggler), ());
+
+			@include clay-css($_menubar-toggler);
+
+			.c-inner {
+				@include clay-css(map-get($_menubar-toggler, c-inner));
+			}
+
+			.lexicon-icon {
+				@include clay-css(map-get($_menubar-toggler, lexicon-icon));
+			}
+
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-button-variant($toggler-mobile);
 			}
 		}
 
+		.nav-nested {
+			@include clay-css(map-get($map, nav-nested));
+		}
+
 		.nav-nested-margins {
 			> li .nav > li {
 				@include clay-css(map-get($map, nav-nested-margins-item));
@@ -881,11 +962,51 @@
 		}
 
 		.nav-link {
-			@include clay-link($link);
+			$_nav-link: setter(map-get($map, nav-link), ());
+			$_nav-link: map-deep-merge($link, $_nav-link);
+
+			@include clay-link($_nav-link);
 
 			@include media-breakpoint-down($breakpoint-down) {
 				@include clay-link($link-mobile);
 			}
 		}
+
+		@if (map-get($map, media-breakpoint-down)) {
+			@each $breakpoint in map-keys(map-get($map, media-breakpoint-down))
+			{
+				$media-breakpoint-down: map-deep-get(
+					$map,
+					media-breakpoint-down,
+					$breakpoint
+				);
+
+				@if ($breakpoint) {
+					@include media-breakpoint-down($breakpoint) {
+						@include clay-menubar-vertical-variant(
+							$media-breakpoint-down
+						);
+					}
+				}
+			}
+		}
+
+		@if (map-get($map, media-breakpoint-up)) {
+			@each $breakpoint in map-keys(map-get($map, media-breakpoint-up)) {
+				$media-breakpoint-up: map-deep-get(
+					$map,
+					media-breakpoint-up,
+					$breakpoint
+				);
+
+				@if ($breakpoint) {
+					@include media-breakpoint-up($breakpoint) {
+						@include clay-menubar-vertical-variant(
+							$media-breakpoint-up
+						);
+					}
+				}
+			}
+		}
 	}
 }