Skip to content

Commit 8e90b31

Browse files
gcornutgcornut
committed
feat(side-navigation): add border CSS theming variable on selected state
1 parent 1b3a17c commit 8e90b31

File tree

8 files changed

+262
-10
lines changed

8 files changed

+262
-10
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- `DatePicker`: update day buttons to use standard button styles
1313
- `Chip`: add border and background color CSS variable theming on selected state.
14+
- `SideNavigationItem`: add border CSS variable theming on selected state.
1415

1516
### Fixed
1617

@@ -29,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2930
- Storybook `DatePicker`: add theming story
3031
- Storybook `Chip`: add theming story
3132
- Storybook `Navigation`: add variants & theming stories
33+
- Storybook `SideNavigationItem`: add variant and theming stories
3234

3335
## [3.9.5][] - 2024-11-06
3436

‎packages/lumx-core/src/css/design-tokens.css

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* Do not edit directly
5-
* Generated on Fri, 29 Nov 2024 08:57:50 GMT
5+
* Generated on Fri, 29 Nov 2024 10:16:26 GMT
66
*/
77

88
:root {
@@ -253,6 +253,15 @@
253253
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
254254
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
255255
--lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
256+
--lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0;
257+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent;
258+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
259+
--lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0;
260+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent;
261+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
262+
--lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0;
263+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent;
264+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
256265
--lumx-tabs-link-height: 48px;
257266
--lumx-tabs-link-border-radius: 0;
258267
--lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;

‎packages/lumx-core/src/js/constants/design-tokens.ts

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 29 Nov 2024 08:57:51 GMT
3+
* Generated on Fri, 29 Nov 2024 10:16:26 GMT
44
*/
55

66
export const DESIGN_TOKENS = {
@@ -911,6 +911,45 @@ export const DESIGN_TOKENS = {
911911
},
912912
},
913913
},
914+
'side-navigation': {
915+
item: {
916+
'emphasis-selected': {
917+
'state-default': {
918+
'border-width': { value: '0' },
919+
'theme-light': {
920+
'border-color': { value: 'transparent' },
921+
'background-color': {
922+
value: 'var(--lumx-color-primary-L5)',
923+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
924+
$aliasedFrom: 'color.primary.L5',
925+
},
926+
},
927+
},
928+
'state-hover': {
929+
'border-width': { value: '0' },
930+
'theme-light': {
931+
'border-color': { value: 'transparent' },
932+
'background-color': {
933+
value: 'var(--lumx-color-primary-L4)',
934+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
935+
$aliasedFrom: 'color.primary.L4',
936+
},
937+
},
938+
},
939+
'state-active': {
940+
'border-width': { value: '0' },
941+
'theme-light': {
942+
'border-color': { value: 'transparent' },
943+
'background-color': {
944+
value: 'var(--lumx-color-primary-L3)',
945+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
946+
$aliasedFrom: 'color.primary.L3',
947+
},
948+
},
949+
},
950+
},
951+
},
952+
},
914953
tabs: {
915954
link: {
916955
height: { value: '48px' },

‎packages/lumx-core/src/scss/_design-tokens.scss

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* Do not edit directly
5-
* Generated on Fri, 29 Nov 2024 08:57:50 GMT
5+
* Generated on Fri, 29 Nov 2024 10:16:26 GMT
66
*/
77

88
$lumx-button-height: 36px !default;
@@ -252,6 +252,15 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(
252252
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
253253
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
254254
$lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
255+
$lumx-side-navigation-item-emphasis-selected-state-default-border-width: 0 !default;
256+
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: transparent !default;
257+
$lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
258+
$lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 0 !default;
259+
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
260+
$lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
261+
$lumx-side-navigation-item-emphasis-selected-state-active-border-width: 0 !default;
262+
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: transparent !default;
263+
$lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
255264
$lumx-tabs-link-height: 48px !default;
256265
$lumx-tabs-link-border-radius: 0 !default;
257266
$lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
@@ -1078,6 +1087,33 @@ $lumx-design-tokens: (
10781087
)
10791088
)
10801089
),
1090+
"side-navigation": (
1091+
"item": (
1092+
"emphasis-selected": (
1093+
"state-default": (
1094+
"border-width": $lumx-side-navigation-item-emphasis-selected-state-default-border-width,
1095+
"theme-light": (
1096+
"border-color": $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color,
1097+
"background-color": $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color
1098+
)
1099+
),
1100+
"state-hover": (
1101+
"border-width": $lumx-side-navigation-item-emphasis-selected-state-hover-border-width,
1102+
"theme-light": (
1103+
"border-color": $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
1104+
"background-color": $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color
1105+
)
1106+
),
1107+
"state-active": (
1108+
"border-width": $lumx-side-navigation-item-emphasis-selected-state-active-border-width,
1109+
"theme-light": (
1110+
"border-color": $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1111+
"background-color": $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color
1112+
)
1113+
)
1114+
)
1115+
)
1116+
),
10811117
"tabs": (
10821118
"link": (
10831119
"height": $lumx-tabs-link-height,

‎packages/lumx-core/src/scss/components/list/_mixins.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,13 @@
3535
}
3636

3737
&:hover,
38+
&[data-lumx-hover],
3839
&[data-focus-visible-added] {
3940
@include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
4041
}
4142

42-
&:active {
43+
&:active,
44+
&[data-lumx-active], {
4345
@include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
4446
}
4547
}
@@ -54,16 +56,18 @@
5456
}
5557
}
5658

57-
@mixin lumx-list-item-selected() {
58-
@include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"));
59+
@mixin lumx-list-item-selected($component: null) {
60+
@include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"), $component);
5961

6062
&:hover,
63+
&[data-lumx-hover],
6164
&[data-focus-visible-added] {
62-
@include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
65+
@include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"), $component);
6366
}
6467

65-
&:active {
66-
@include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"));
68+
&:active,
69+
&[data-lumx-active], {
70+
@include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"), $component);
6771
}
6872
}
6973

‎packages/lumx-core/src/scss/components/side-navigation/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,5 @@
6565
}
6666

6767
.#{$lumx-base-prefix}-side-navigation-item--is-selected .#{$lumx-base-prefix}-side-navigation-item__link {
68-
@include lumx-list-item-selected;
68+
@include lumx-list-item-selected('side-navigation-item');
6969
}

‎packages/lumx-core/style-dictionary/properties/components/side-navigation.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"side-navigation": {
3+
"item": {
4+
"emphasis-selected": {
5+
"state-default": {
6+
"border-width": { "value": "0" },
7+
"theme-light": {
8+
"border-color": { "value": "transparent" },
9+
"background-color": "{color.primary.L5}"
10+
}
11+
},
12+
"state-hover": {
13+
"border-width": { "value": "0" },
14+
"theme-light": {
15+
"border-color": { "value": "transparent" },
16+
"background-color": "{color.primary.L4}"
17+
}
18+
},
19+
"state-active": {
20+
"border-width": { "value": "0" },
21+
"theme-light": {
22+
"border-color": { "value": "transparent" },
23+
"background-color": "{color.primary.L3}"
24+
}
25+
}
26+
}
27+
}
28+
}
29+
}

‎packages/lumx-react/src/components/side-navigation/SideNavigationItem.stories.tsx

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* eslint-disable react-hooks/rules-of-hooks,import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import pick from 'lodash/pick';
4+
5+
import { Emphasis, GridColumn, SideNavigation, SideNavigationItem } from '@lumx/react';
6+
import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
7+
import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
8+
import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
9+
import { withTheming } from '@lumx/react/stories/utils/theming';
10+
import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
11+
import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
12+
import { iconArgType } from '@lumx/react/stories/controls/icons';
13+
import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
14+
import { action } from '@storybook/addon-actions';
15+
16+
const EMPHASIS = [Emphasis.high, Emphasis.medium, Emphasis.low];
17+
18+
export default {
19+
title: 'LumX components/side-navigation/Side Navigation Item',
20+
component: SideNavigationItem,
21+
args: {
22+
label: 'Item',
23+
'toggleButtonProps.label': 'Toggle',
24+
},
25+
argTypes: {
26+
emphasis: getSelectArgType(EMPHASIS),
27+
icon: iconArgType,
28+
closeMode: { control: { type: 'inline-radio' }, if: { arg: 'children', exists: true } },
29+
isOpen: { if: { arg: 'children', exists: true } },
30+
onClick: { action: true, table: { disable: true } },
31+
...disableArgTypes(['ref', 'children', 'linkAs', 'linkProps', 'toggleButtonProps', 'onActionClick']),
32+
},
33+
render: (args: any) => {
34+
const [isOpen, setIsOpen] = React.useState<boolean | undefined>(undefined);
35+
36+
const toggleCallback = args.onActionClick ? 'onActionClick' : 'onClick';
37+
const toggle: React.MouseEventHandler = (event) => {
38+
args?.[toggleCallback]?.(event);
39+
setIsOpen((wasOpen) => !wasOpen);
40+
};
41+
return (
42+
<SideNavigation>
43+
<SideNavigationItem {...args} {...{ [toggleCallback]: toggle }} isOpen={isOpen} />
44+
</SideNavigation>
45+
);
46+
},
47+
};
48+
49+
const STATE_COMBINATIONS = withCombinations({
50+
combinations: {
51+
cols: {
52+
Default: {},
53+
Hover: { 'linkProps.data-lumx-hover': true },
54+
Active: { 'linkProps.data-lumx-active': true },
55+
},
56+
rows: {
57+
Default: {},
58+
Focused: { 'linkProps.data-focus-visible-added': true },
59+
Selected: { isSelected: true },
60+
'Selected & Focused': { isSelected: true, 'linkProps.data-focus-visible-added': true },
61+
},
62+
},
63+
});
64+
65+
/**
66+
* Demonstrate item & section variants
67+
*/
68+
export const ItemsAndSections = {
69+
argTypes: { ...disableArgTypes(['isSelected']) },
70+
decorators: [
71+
withNestedProps(),
72+
STATE_COMBINATIONS,
73+
withCombinations({
74+
combinations: {
75+
rows: {
76+
'': {},
77+
'With children': {
78+
children: <SideNavigationItem label="Item 1" toggleButtonProps={{ label: 'Open' }} />,
79+
},
80+
},
81+
cols: {
82+
'': {},
83+
'With action click': {
84+
onActionClick: action('onActionClick'),
85+
},
86+
},
87+
},
88+
}),
89+
],
90+
};
91+
92+
/**
93+
* Demonstrate emphasis variants
94+
*/
95+
export const EmphasisVariants = {
96+
argTypes: { ...disableArgTypes(['emphasis', 'isSelected']) },
97+
decorators: [
98+
withNestedProps(),
99+
STATE_COMBINATIONS,
100+
withCombinations({
101+
combinations: {
102+
sections: { key: 'emphasis', options: EMPHASIS },
103+
},
104+
}),
105+
withWrapper({ itemMinWidth: 300, maxColumns: 3 }, GridColumn),
106+
],
107+
};
108+
109+
/**
110+
* Test CSS variable theming
111+
*/
112+
export const Theming = {
113+
...ItemsAndSections,
114+
decorators: [
115+
...ItemsAndSections.decorators,
116+
withTheming({
117+
properties: pick(DESIGN_TOKENS, ['side-navigation']),
118+
values: `
119+
--lumx-side-navigation-item-emphasis-selected-state-default-border-width: 2px;
120+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
121+
--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
122+
123+
--lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 3px;
124+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
125+
--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: red;
126+
127+
--lumx-side-navigation-item-emphasis-selected-state-active-border-width: 4px;
128+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
129+
--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: violet;
130+
`,
131+
}),
132+
],
133+
};

0 commit comments

Comments
 (0)