Skip to content

Commit bafacf2

Browse files
dougfabrisdougfabris
authored
fix(fuselage): SidebarV2Item padding (#1744)
1 parent ecab95f commit bafacf2

File tree

6 files changed

+33
-25
lines changed

6 files changed

+33
-25
lines changed

‎.changeset/four-baboons-float.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': patch
3+
---
4+
5+
fix(fuselage): SidebarV2Item padding

‎packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.styles.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ $sidebar-color-font-active: theme(
7070
text-decoration: none;
7171
gap: lengths.padding(4);
7272

73+
&--level-2 {
74+
padding-block: calc(lengths.padding(8) - lengths.border-width('default'));
75+
}
76+
7377
&:active {
7478
color: $sidebar-color-font-active;
7579
}

‎packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@ import type { AllHTMLAttributes } from 'react';
22

33
export const SidebarItem = ({
44
selected,
5+
level = 1,
56
className,
67
children,
78
is: Tag = 'a',
89
...props
910
}: {
1011
selected?: boolean;
12+
level?: number;
1113
is?: React.ElementType;
1214
} & AllHTMLAttributes<HTMLAnchorElement>) => (
1315
<Tag
1416
className={[
1517
'rcx-box rcx-box--full rcx-sidebar-v2-item',
1618
selected && 'rcx-sidebar-v2-item--selected',
19+
level && `rcx-sidebar-v2-item--level-${level}`,
1720
className,
1821
]
1922
.filter(Boolean)

‎packages/fuselage/src/components/Sidepanel/Sidepanel.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Template: StoryFn<typeof Sidepanel> = (args) => (
6161
{new Array(20).fill(null).map((_, index) => {
6262
return (
6363
<SidepanelListItem key={index}>
64-
<SidebarV2Item href='#'>
64+
<SidebarV2Item level={2} href='#'>
6565
<SidebarV2ItemCol>
6666
<SidebarV2ItemRow>
6767
<SidebarItemAvatarWrapper>

‎packages/fuselage/src/components/Sidepanel/Sidepanel.styles.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,5 @@ $sidepanel-color-default: colors.font(default);
4848

4949
&-list {
5050
padding-block: lengths.padding(8);
51-
52-
&__item {
53-
padding-block: lengths.padding(4);
54-
}
5551
}
5652
}

‎packages/fuselage/src/components/Sidepanel/__snapshots__/Sidepanel.spec.tsx.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ exports[`renders Default without crashing 1`] = `
7373
role="listitem"
7474
>
7575
<a
76-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
76+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
7777
href="#"
7878
>
7979
<div
@@ -179,7 +179,7 @@ exports[`renders Default without crashing 1`] = `
179179
role="listitem"
180180
>
181181
<a
182-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
182+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
183183
href="#"
184184
>
185185
<div
@@ -285,7 +285,7 @@ exports[`renders Default without crashing 1`] = `
285285
role="listitem"
286286
>
287287
<a
288-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
288+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
289289
href="#"
290290
>
291291
<div
@@ -391,7 +391,7 @@ exports[`renders Default without crashing 1`] = `
391391
role="listitem"
392392
>
393393
<a
394-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
394+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
395395
href="#"
396396
>
397397
<div
@@ -497,7 +497,7 @@ exports[`renders Default without crashing 1`] = `
497497
role="listitem"
498498
>
499499
<a
500-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
500+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
501501
href="#"
502502
>
503503
<div
@@ -603,7 +603,7 @@ exports[`renders Default without crashing 1`] = `
603603
role="listitem"
604604
>
605605
<a
606-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
606+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
607607
href="#"
608608
>
609609
<div
@@ -709,7 +709,7 @@ exports[`renders Default without crashing 1`] = `
709709
role="listitem"
710710
>
711711
<a
712-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
712+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
713713
href="#"
714714
>
715715
<div
@@ -815,7 +815,7 @@ exports[`renders Default without crashing 1`] = `
815815
role="listitem"
816816
>
817817
<a
818-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
818+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
819819
href="#"
820820
>
821821
<div
@@ -921,7 +921,7 @@ exports[`renders Default without crashing 1`] = `
921921
role="listitem"
922922
>
923923
<a
924-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
924+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
925925
href="#"
926926
>
927927
<div
@@ -1027,7 +1027,7 @@ exports[`renders Default without crashing 1`] = `
10271027
role="listitem"
10281028
>
10291029
<a
1030-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1030+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
10311031
href="#"
10321032
>
10331033
<div
@@ -1133,7 +1133,7 @@ exports[`renders Default without crashing 1`] = `
11331133
role="listitem"
11341134
>
11351135
<a
1136-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1136+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
11371137
href="#"
11381138
>
11391139
<div
@@ -1239,7 +1239,7 @@ exports[`renders Default without crashing 1`] = `
12391239
role="listitem"
12401240
>
12411241
<a
1242-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1242+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
12431243
href="#"
12441244
>
12451245
<div
@@ -1345,7 +1345,7 @@ exports[`renders Default without crashing 1`] = `
13451345
role="listitem"
13461346
>
13471347
<a
1348-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1348+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
13491349
href="#"
13501350
>
13511351
<div
@@ -1451,7 +1451,7 @@ exports[`renders Default without crashing 1`] = `
14511451
role="listitem"
14521452
>
14531453
<a
1454-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1454+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
14551455
href="#"
14561456
>
14571457
<div
@@ -1557,7 +1557,7 @@ exports[`renders Default without crashing 1`] = `
15571557
role="listitem"
15581558
>
15591559
<a
1560-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1560+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
15611561
href="#"
15621562
>
15631563
<div
@@ -1663,7 +1663,7 @@ exports[`renders Default without crashing 1`] = `
16631663
role="listitem"
16641664
>
16651665
<a
1666-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1666+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
16671667
href="#"
16681668
>
16691669
<div
@@ -1769,7 +1769,7 @@ exports[`renders Default without crashing 1`] = `
17691769
role="listitem"
17701770
>
17711771
<a
1772-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1772+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
17731773
href="#"
17741774
>
17751775
<div
@@ -1875,7 +1875,7 @@ exports[`renders Default without crashing 1`] = `
18751875
role="listitem"
18761876
>
18771877
<a
1878-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1878+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
18791879
href="#"
18801880
>
18811881
<div
@@ -1981,7 +1981,7 @@ exports[`renders Default without crashing 1`] = `
19811981
role="listitem"
19821982
>
19831983
<a
1984-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
1984+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
19851985
href="#"
19861986
>
19871987
<div
@@ -2087,7 +2087,7 @@ exports[`renders Default without crashing 1`] = `
20872087
role="listitem"
20882088
>
20892089
<a
2090-
class="rcx-box rcx-box--full rcx-sidebar-v2-item"
2090+
class="rcx-box rcx-box--full rcx-sidebar-v2-item rcx-sidebar-v2-item--level-2"
20912091
href="#"
20922092
>
20932093
<div

0 commit comments

Comments
 (0)