feat(@clayui/css): LPD-40160 Adds menubar-primary for CMS Product Men…

…u variant
liferay · Dec 4, 2024 · 5144840 · 5144840
1 parent 619415a
commit 5144840
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/components/_icons.scss b/packages/clay-css/src/scss/components/_icons.scss
@@ -29,7 +29,8 @@
 // Collapse Icon
 
 a.collapse-icon,
-button.collapse-icon {
+button.collapse-icon,
+.collapse-icon[tabindex] {
 	padding-left: $collapse-icon-padding-left;
 	padding-right: $collapse-icon-padding-right;
 

diff --git a/packages/clay-css/src/scss/components/_menubar.scss b/packages/clay-css/src/scss/components/_menubar.scss
@@ -8,6 +8,14 @@
 	display: none;
 }
 
+.menubar-primary {
+	@include clay-menubar-vertical-variant($menubar-primary);
+
+	.nav .nav .nav > li > .nav-link {
+		margin-left: 1rem;
+	}
+}
+
 // Menubar Vertical MD
 
 .menubar-vertical-expand-md {

diff --git a/packages/clay-css/src/scss/mixins/_links.scss b/packages/clay-css/src/scss/mixins/_links.scss
@@ -938,6 +938,40 @@
 				}
 			}
 
+			&.collapse-icon {
+				$_collapse-icon: setter(map-get($map, collapse-icon), ());
+
+				@include clay-css($_collapse-icon);
+
+				.collapse-icon-closed {
+					@include clay-css(
+						map-get($_collapse-icon, collapse-icon-closed)
+					);
+				}
+
+				.collapse-icon-open {
+					@include clay-css(
+						map-get($_collapse-icon, collapse-icon-open)
+					);
+				}
+			}
+
+			.autofit-row {
+				$_autofit-row: setter(map-get($map, autofit-row), ());
+
+				@include clay-css($_autofit-row);
+
+				.autofit-col {
+					@include clay-css(map-get($_autofit-row, autofit-col));
+				}
+
+				.autofit-col-expand {
+					@include clay-css(
+						map-get($_autofit-row, autofit-col-expand)
+					);
+				}
+			}
+
 			@if (map-get($c-inner, enabled)) {
 				> .c-inner {
 					@include clay-css($c-inner);

diff --git a/packages/clay-css/src/scss/variables/_menubar.scss b/packages/clay-css/src/scss/variables/_menubar.scss
@@ -1,3 +1,115 @@
+$menubar-primary: () !default;
+$menubar-primary: map-deep-merge(
+	(
+		nav-link: (
+			border-radius: 0,
+			color: $gray-900,
+			line-height: 24px,
+			transition: #{color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out},
+			before: (
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				transition: $transition-base,
+			),
+			hover: (
+				background-color: $primary-l3,
+				color: $gray-900,
+				letter-spacing: 0,
+				before: (
+					background: $secondary-l0,
+					width: 0.125rem,
+				),
+			),
+			focus: (
+				background-color: c-unset,
+				box-shadow: none,
+				color: $gray-900,
+				outline: 0,
+				after: (
+					bottom: 0,
+					box-shadow: $component-focus-inset-box-shadow,
+					content: '',
+					display: block,
+					left: 0,
+					pointer-events: none,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
+			),
+			active-class: (
+				background-color: $primary-l3,
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				before: (
+					background-color: $primary,
+					width: 0.375rem,
+				),
+				focus: (
+					before: (
+						display: none,
+					),
+				),
+			),
+			disabled: (
+				background-color: transparent,
+				box-shadow: none,
+				font-weight: $font-weight-normal,
+				letter-spacing: 0.016rem,
+				before: (
+					content: none,
+				),
+				after: (
+					content: none,
+				),
+			),
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $gray-900,
+				before: (
+					background-color: transparent,
+					width: 0,
+				),
+				hover: (
+					before: (
+						background-color: $secondary-l0,
+						width: 0.125rem,
+					),
+				),
+			),
+			autofit-row: (
+				align-items: center,
+				margin-left: -0.25rem,
+				margin-right: -0.25rem,
+				autofit-col: (
+					padding-left: 0.25rem,
+					padding-right: 0.25rem,
+				),
+			),
+			collapse-icon: (
+				font-size: 0.75rem,
+				font-weight: $font-weight-semi-bold,
+				text-transform: uppercase,
+				collapse-icon-closed: (
+					top: calc(22px - (1em / 2)),
+				),
+				collapse-icon-open: (
+					top: calc(22px - (1em / 2)),
+				),
+			),
+		),
+	),
+	$menubar-primary
+);
+
 // Menubar Vertical MD
 
 $menubar-vertical-expand-md: () !default;

diff --git a/packages/clay-css/src/scss/variables/_navs.scss b/packages/clay-css/src/scss/variables/_navs.scss
@@ -11,12 +11,14 @@ $nav-link-disabled-cursor: $disabled-cursor !default;
 $nav-link: () !default;
 $nav-link: map-deep-merge(
 	(
+		cursor: pointer,
 		display: block,
 		padding-bottom: $nav-link-padding-y,
 		padding-left: $nav-link-padding-x,
 		padding-right: $nav-link-padding-x,
 		padding-top: $nav-link-padding-y,
 		position: relative,
+		user-select: none,
 		hover: (
 			text-decoration: none,
 		),

diff --git a/packages/clay-nav/src/Vertical.tsx b/packages/clay-nav/src/Vertical.tsx
@@ -7,6 +7,8 @@ import {Nav, VerticalNav} from '@clayui/core';
 import React from 'react';
 import warning from 'warning';
 
+export type DisplayType = null | 'primary';
+
 interface IItem extends React.ComponentProps<typeof Nav.Item> {
 	/**
 	 * Flag to indicate if item is active.
@@ -63,6 +65,11 @@ export interface IProps extends React.ComponentProps<typeof VerticalNav> {
 	 */
 	activeLabel?: string;
 
+	/**
+	 * Determines the Vertical Nav variant to use.
+	 */
+	displayType?: DisplayType;
+
 	/**
 	 * Flag to activate the Decorator variation.
 	 */
@@ -102,6 +109,7 @@ function ClayVerticalNav(props: IProps): JSX.Element & {
 function ClayVerticalNav({
 	activeLabel,
 	children,
+	displayType,
 	triggerLabel = 'Menu',
 	...otherProps
 }: IProps) {
@@ -110,7 +118,7 @@ function ClayVerticalNav({
 		'ClayVerticalNav: The `activeLabel` API has been deprecated in favor of `triggerLabel` and will be removed in the next major release.'
 	);
 
-	if (children) {
+	if (children && !displayType) {
 		return (
 			<VerticalNav
 				{...otherProps}