Skip to content

Commit 9cfce04

Browse files
gcornutgcornut
committed
fix(navigation-item): fix border left & right impacting the width
1 parent 8e90b31 commit 9cfce04

File tree

8 files changed

+130
-121
lines changed

8 files changed

+130
-121
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515

1616
### Fixed
1717

18-
- `Navigation`: fix focus outline in dark theme
18+
- `NavigationItem`: fix focus outline in dark theme
1919
- `NavigationSection`: fix props forwarding
20+
- `NavigationItem`: fix border left & right impacting the width
2021

2122
### Documentation
2223

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
/* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern */
1+
/* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern, length-zero-no-unit */
22

33
/**
44
* Do not edit directly
5-
* Generated on Fri, 29 Nov 2024 10:16:26 GMT
5+
* Generated on Wed, 04 Dec 2024 10:53:03 GMT
66
*/
77

88
:root {
@@ -157,10 +157,10 @@
157157
--lumx-navigation-item-padding-horizontal: var(--lumx-spacing-unit-regular);
158158
--lumx-navigation-item-min-height: 36px;
159159
--lumx-navigation-item-border-radius: var(--lumx-border-radius);
160-
--lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
161-
--lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
162-
--lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0;
163-
--lumx-navigation-item-emphasis-low-state-default-border-left-width: 0;
160+
--lumx-navigation-item-emphasis-low-state-default-border-top-width: 0px;
161+
--lumx-navigation-item-emphasis-low-state-default-border-right-width: 0px;
162+
--lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0px;
163+
--lumx-navigation-item-emphasis-low-state-default-border-left-width: 0px;
164164
--lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
165165
--lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4);
166166
--lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -173,10 +173,10 @@
173173
--lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
174174
--lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
175175
--lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-L1);
176-
--lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0;
177-
--lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0;
178-
--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0;
179-
--lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0;
176+
--lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0px;
177+
--lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0px;
178+
--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0px;
179+
--lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0px;
180180
--lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
181181
--lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4);
182182
--lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -189,10 +189,10 @@
189189
--lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
190190
--lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
191191
--lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-L1);
192-
--lumx-navigation-item-emphasis-low-state-active-border-top-width: 0;
193-
--lumx-navigation-item-emphasis-low-state-active-border-right-width: 0;
194-
--lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0;
195-
--lumx-navigation-item-emphasis-low-state-active-border-left-width: 0;
192+
--lumx-navigation-item-emphasis-low-state-active-border-top-width: 0px;
193+
--lumx-navigation-item-emphasis-low-state-active-border-right-width: 0px;
194+
--lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0px;
195+
--lumx-navigation-item-emphasis-low-state-active-border-left-width: 0px;
196196
--lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
197197
--lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4);
198198
--lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
@@ -205,10 +205,10 @@
205205
--lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
206206
--lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
207207
--lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1);
208-
--lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0;
209-
--lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0;
210-
--lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0;
211-
--lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0;
208+
--lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0px;
209+
--lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0px;
210+
--lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0px;
211+
--lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0px;
212212
--lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
213213
--lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
214214
--lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
@@ -221,10 +221,10 @@
221221
--lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
222222
--lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
223223
--lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
224-
--lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0;
225-
--lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0;
226-
--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0;
227-
--lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0;
224+
--lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0px;
225+
--lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0px;
226+
--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0px;
227+
--lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0px;
228228
--lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
229229
--lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
230230
--lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
@@ -237,10 +237,10 @@
237237
--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
238238
--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
239239
--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
240-
--lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0;
241-
--lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0;
242-
--lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0;
243-
--lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0;
240+
--lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0px;
241+
--lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0px;
242+
--lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0px;
243+
--lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0px;
244244
--lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
245245
--lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
246246
--lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);

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

Lines changed: 25 additions & 25 deletions
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 10:16:26 GMT
3+
* Generated on Wed, 04 Dec 2024 10:53:03 GMT
44
*/
55

66
export const DESIGN_TOKENS = {
@@ -500,10 +500,10 @@ export const DESIGN_TOKENS = {
500500
'emphasis-low': {
501501
'state-default': {
502502
border: {
503-
top: { width: { value: '0' } },
504-
right: { width: { value: '0' } },
505-
bottom: { width: { value: '0' } },
506-
left: { width: { value: '0' } },
503+
top: { width: { value: '0px' } },
504+
right: { width: { value: '0px' } },
505+
bottom: { width: { value: '0px' } },
506+
left: { width: { value: '0px' } },
507507
},
508508
'theme-light': {
509509
'background-color': { value: 'transparent' },
@@ -556,10 +556,10 @@ export const DESIGN_TOKENS = {
556556
},
557557
'state-hover': {
558558
border: {
559-
top: { width: { value: '0' } },
560-
right: { width: { value: '0' } },
561-
bottom: { width: { value: '0' } },
562-
left: { width: { value: '0' } },
559+
top: { width: { value: '0px' } },
560+
right: { width: { value: '0px' } },
561+
bottom: { width: { value: '0px' } },
562+
left: { width: { value: '0px' } },
563563
},
564564
'theme-light': {
565565
'background-color': {
@@ -628,10 +628,10 @@ export const DESIGN_TOKENS = {
628628
},
629629
'state-active': {
630630
border: {
631-
top: { width: { value: '0' } },
632-
right: { width: { value: '0' } },
633-
bottom: { width: { value: '0' } },
634-
left: { width: { value: '0' } },
631+
top: { width: { value: '0px' } },
632+
right: { width: { value: '0px' } },
633+
bottom: { width: { value: '0px' } },
634+
left: { width: { value: '0px' } },
635635
},
636636
'theme-light': {
637637
'background-color': {
@@ -702,10 +702,10 @@ export const DESIGN_TOKENS = {
702702
'emphasis-selected': {
703703
'state-default': {
704704
border: {
705-
top: { width: { value: '0' } },
706-
right: { width: { value: '0' } },
707-
bottom: { width: { value: '0' } },
708-
left: { width: { value: '0' } },
705+
top: { width: { value: '0px' } },
706+
right: { width: { value: '0px' } },
707+
bottom: { width: { value: '0px' } },
708+
left: { width: { value: '0px' } },
709709
},
710710
'theme-light': {
711711
'background-color': {
@@ -766,10 +766,10 @@ export const DESIGN_TOKENS = {
766766
},
767767
'state-hover': {
768768
border: {
769-
top: { width: { value: '0' } },
770-
right: { width: { value: '0' } },
771-
bottom: { width: { value: '0' } },
772-
left: { width: { value: '0' } },
769+
top: { width: { value: '0px' } },
770+
right: { width: { value: '0px' } },
771+
bottom: { width: { value: '0px' } },
772+
left: { width: { value: '0px' } },
773773
},
774774
'theme-light': {
775775
'background-color': {
@@ -838,10 +838,10 @@ export const DESIGN_TOKENS = {
838838
},
839839
'state-active': {
840840
border: {
841-
top: { width: { value: '0' } },
842-
right: { width: { value: '0' } },
843-
bottom: { width: { value: '0' } },
844-
left: { width: { value: '0' } },
841+
top: { width: { value: '0px' } },
842+
right: { width: { value: '0px' } },
843+
bottom: { width: { value: '0px' } },
844+
left: { width: { value: '0px' } },
845845
},
846846
'theme-light': {
847847
'background-color': {

0 commit comments

Comments
 (0)