Skip to content

Commit 5144840

Browse files
pat270pat270
committed
feat(@clayui/css): LPD-40160 Adds menubar-primary for CMS Product Menu variant
1 parent 619415a commit 5144840

File tree

6 files changed

+167
-2
lines changed

6 files changed

+167
-2
lines changed

‎packages/clay-css/src/scss/components/_icons.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
// Collapse Icon
3030

3131
a.collapse-icon,
32-
button.collapse-icon {
32+
button.collapse-icon,
33+
.collapse-icon[tabindex] {
3334
padding-left: $collapse-icon-padding-left;
3435
padding-right: $collapse-icon-padding-right;
3536

‎packages/clay-css/src/scss/components/_menubar.scss

+8
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
display: none;
99
}
1010

11+
.menubar-primary {
12+
@include clay-menubar-vertical-variant($menubar-primary);
13+
14+
.nav .nav .nav > li > .nav-link {
15+
margin-left: 1rem;
16+
}
17+
}
18+
1119
// Menubar Vertical MD
1220

1321
.menubar-vertical-expand-md {

‎packages/clay-css/src/scss/mixins/_links.scss

+34
Original file line numberDiff line numberDiff line change
@@ -938,6 +938,40 @@
938938
}
939939
}
940940

941+
&.collapse-icon {
942+
$_collapse-icon: setter(map-get($map, collapse-icon), ());
943+
944+
@include clay-css($_collapse-icon);
945+
946+
.collapse-icon-closed {
947+
@include clay-css(
948+
map-get($_collapse-icon, collapse-icon-closed)
949+
);
950+
}
951+
952+
.collapse-icon-open {
953+
@include clay-css(
954+
map-get($_collapse-icon, collapse-icon-open)
955+
);
956+
}
957+
}
958+
959+
.autofit-row {
960+
$_autofit-row: setter(map-get($map, autofit-row), ());
961+
962+
@include clay-css($_autofit-row);
963+
964+
.autofit-col {
965+
@include clay-css(map-get($_autofit-row, autofit-col));
966+
}
967+
968+
.autofit-col-expand {
969+
@include clay-css(
970+
map-get($_autofit-row, autofit-col-expand)
971+
);
972+
}
973+
}
974+
941975
@if (map-get($c-inner, enabled)) {
942976
> .c-inner {
943977
@include clay-css($c-inner);

‎packages/clay-css/src/scss/variables/_menubar.scss

+112
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,115 @@
1+
$menubar-primary: () !default;
2+
$menubar-primary: map-deep-merge(
3+
(
4+
nav-link: (
5+
border-radius: 0,
6+
color: $gray-900,
7+
line-height: 24px,
8+
transition: #{color 0.15s ease-in-out,
9+
background-color 0.15s ease-in-out,
10+
border-color 0.15s ease-in-out,
11+
box-shadow 0.15s ease-in-out},
12+
before: (
13+
bottom: 0,
14+
content: '',
15+
display: block,
16+
left: 0,
17+
position: absolute,
18+
top: 0,
19+
transition: $transition-base,
20+
),
21+
hover: (
22+
background-color: $primary-l3,
23+
color: $gray-900,
24+
letter-spacing: 0,
25+
before: (
26+
background: $secondary-l0,
27+
width: 0.125rem,
28+
),
29+
),
30+
focus: (
31+
background-color: c-unset,
32+
box-shadow: none,
33+
color: $gray-900,
34+
outline: 0,
35+
after: (
36+
bottom: 0,
37+
box-shadow: $component-focus-inset-box-shadow,
38+
content: '',
39+
display: block,
40+
left: 0,
41+
pointer-events: none,
42+
position: absolute,
43+
right: 0,
44+
top: 0,
45+
),
46+
),
47+
active-class: (
48+
background-color: $primary-l3,
49+
color: $gray-900,
50+
font-weight: $font-weight-semi-bold,
51+
before: (
52+
background-color: $primary,
53+
width: 0.375rem,
54+
),
55+
focus: (
56+
before: (
57+
display: none,
58+
),
59+
),
60+
),
61+
disabled: (
62+
background-color: transparent,
63+
box-shadow: none,
64+
font-weight: $font-weight-normal,
65+
letter-spacing: 0.016rem,
66+
before: (
67+
content: none,
68+
),
69+
after: (
70+
content: none,
71+
),
72+
),
73+
show: (
74+
background-color: c-unset,
75+
box-shadow: c-unset,
76+
color: $gray-900,
77+
before: (
78+
background-color: transparent,
79+
width: 0,
80+
),
81+
hover: (
82+
before: (
83+
background-color: $secondary-l0,
84+
width: 0.125rem,
85+
),
86+
),
87+
),
88+
autofit-row: (
89+
align-items: center,
90+
margin-left: -0.25rem,
91+
margin-right: -0.25rem,
92+
autofit-col: (
93+
padding-left: 0.25rem,
94+
padding-right: 0.25rem,
95+
),
96+
),
97+
collapse-icon: (
98+
font-size: 0.75rem,
99+
font-weight: $font-weight-semi-bold,
100+
text-transform: uppercase,
101+
collapse-icon-closed: (
102+
top: calc(22px - (1em / 2)),
103+
),
104+
collapse-icon-open: (
105+
top: calc(22px - (1em / 2)),
106+
),
107+
),
108+
),
109+
),
110+
$menubar-primary
111+
);
112+
1113
// Menubar Vertical MD
2114

3115
$menubar-vertical-expand-md: () !default;

‎packages/clay-css/src/scss/variables/_navs.scss

+2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ $nav-link-disabled-cursor: $disabled-cursor !default;
1111
$nav-link: () !default;
1212
$nav-link: map-deep-merge(
1313
(
14+
cursor: pointer,
1415
display: block,
1516
padding-bottom: $nav-link-padding-y,
1617
padding-left: $nav-link-padding-x,
1718
padding-right: $nav-link-padding-x,
1819
padding-top: $nav-link-padding-y,
1920
position: relative,
21+
user-select: none,
2022
hover: (
2123
text-decoration: none,
2224
),

‎packages/clay-nav/src/Vertical.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {Nav, VerticalNav} from '@clayui/core';
77
import React from 'react';
88
import warning from 'warning';
99

10+
export type DisplayType = null | 'primary';
11+
1012
interface IItem extends React.ComponentProps<typeof Nav.Item> {
1113
/**
1214
* Flag to indicate if item is active.
@@ -63,6 +65,11 @@ export interface IProps extends React.ComponentProps<typeof VerticalNav> {
6365
*/
6466
activeLabel?: string;
6567

68+
/**
69+
* Determines the Vertical Nav variant to use.
70+
*/
71+
displayType?: DisplayType;
72+
6673
/**
6774
* Flag to activate the Decorator variation.
6875
*/
@@ -102,6 +109,7 @@ function ClayVerticalNav(props: IProps): JSX.Element & {
102109
function ClayVerticalNav({
103110
activeLabel,
104111
children,
112+
displayType,
105113
triggerLabel = 'Menu',
106114
...otherProps
107115
}: IProps) {
@@ -110,7 +118,7 @@ function ClayVerticalNav({
110118
'ClayVerticalNav: The `activeLabel` API has been deprecated in favor of `triggerLabel` and will be removed in the next major release.'
111119
);
112120

113-
if (children) {
121+
if (children && !displayType) {
114122
return (
115123
<VerticalNav
116124
{...otherProps}

0 commit comments

Comments
 (0)