Skip to content

Commit c83579c

Browse files
JialeclJialecl
authored
Merge pull request #1599 from dxc-technology/gomezivann/sidenav-updates
Sidenav styles review
2 parents bf1a0c9 + f30e917 commit c83579c

File tree

7 files changed

+40
-44
lines changed

7 files changed

+40
-44
lines changed

‎lib/src/common/variables.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -721,11 +721,11 @@ export const componentTokens = {
721721
groupTitleFontWeight: CORE_TOKENS.type_semibold,
722722
groupTitleFontColor: CORE_TOKENS.color_black,
723723
groupTitleHoverBackgroundColor: CORE_TOKENS.color_grey_200,
724-
groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_300,
724+
groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_800,
725725
groupTitleSelectedFontColor: CORE_TOKENS.color_white,
726726
groupTitleSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
727727
groupTitleSelectedHoverFontColor: CORE_TOKENS.color_white,
728-
groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_600,
728+
groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
729729
groupTitleFontTextTransform: CORE_TOKENS.type_uppercase,
730730
groupTitleFontLetterSpacing: CORE_TOKENS.type_spacing_wide_02,
731731
linkFontFamily: CORE_TOKENS.type_sans,
@@ -737,7 +737,7 @@ export const componentTokens = {
737737
linkSelectedFontColor: CORE_TOKENS.color_white,
738738
linkSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
739739
linkSelectedHoverFontColor: CORE_TOKENS.color_white,
740-
linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_600,
740+
linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
741741
linkFontTextTransform: "none",
742742
linkFontLetterSpacing: CORE_TOKENS.type_spacing_wide_01,
743743
linkTextDecoration: CORE_TOKENS.type_no_line,

‎lib/src/sidenav/Sidenav.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,7 @@ const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => {
2323
<BackgroundColorProvider color={colorsTheme.sidenav.backgroundColor}>
2424
{title}
2525
<DxcFlex direction="column" gap="1rem">
26-
{React.Children.map(children, (child, index) => {
27-
return (
28-
<>
29-
{child}
30-
{index !== React.Children.count(children) - 1 && <Divider />}
31-
</>
32-
);
33-
})}
26+
{children}
3427
</DxcFlex>
3528
</BackgroundColorProvider>
3629
</SidenavContainer>
@@ -45,9 +38,12 @@ const Title = ({ children }: SidenavTitlePropsType): JSX.Element => (
4538
);
4639

4740
const Section = ({ children }: SidenavSectionPropsType): JSX.Element => (
48-
<DxcBleed horizontal="1rem">
49-
<DxcFlex direction="column">{children}</DxcFlex>
50-
</DxcBleed>
41+
<>
42+
<DxcBleed horizontal="1rem">
43+
<DxcFlex direction="column">{children}</DxcFlex>
44+
</DxcBleed>
45+
<Divider />
46+
</>
5147
);
5248

5349
const GroupContext = React.createContext<React.Dispatch<React.SetStateAction<boolean>> | null>(null);
@@ -124,13 +120,12 @@ const SidenavContainer = styled.div`
124120
box-sizing: border-box;
125121
display: flex;
126122
flex-direction: column;
127-
background-color: ${(props) => props.theme.backgroundColor};
128123
width: 280px;
129124
@media (max-width: ${responsiveSizes.medium}rem) {
130125
width: 100vw;
131126
}
132-
height: 100%;
133127
padding: 2rem 1rem;
128+
background-color: ${(props) => props.theme.backgroundColor};
134129
135130
overflow-y: auto;
136131
overflow-x: hidden;
@@ -156,18 +151,21 @@ const SidenavTitle = styled.div`
156151
font-weight: ${(props) => props.theme.titleFontWeight};
157152
font-size: ${(props) => props.theme.titleFontSize};
158153
color: ${(props) => props.theme.titleFontColor};
159-
text-transform: ${(props) => props.theme.titleFontTextTransform};
160154
letter-spacing: ${(props) => props.theme.titleFontLetterSpacing};
155+
text-transform: ${(props) => props.theme.titleFontTextTransform};
161156
`;
162157

163158
const Divider = styled.div`
164159
width: 100%;
165160
height: 1px;
166161
background-color: #999999;
162+
163+
&:last-child {
164+
display: none;
165+
}
167166
`;
168167

169168
const SidenavGroup = styled.div`
170-
width: 100%;
171169
a {
172170
padding: 0.5rem 1.2rem 0.5rem 2.25rem;
173171
}
@@ -221,8 +219,8 @@ const SidenavGroupTitleButton = styled.button<{ selectedGroup: boolean }>`
221219
: `color: ${props.theme.groupTitleFontColor}; background-color: ${props.theme.groupTitleHoverBackgroundColor};`}
222220
}
223221
&:active {
224-
background-color: ${(props) => props.theme.groupTitleActiveBackgroundColor};
225-
color: ${(props) => props.theme.groupTitleFontColor};
222+
color: #fff;
223+
background-color: ${(props) => (props.selectedGroup ? "#333" : props.theme.groupTitleActiveBackgroundColor)};
226224
}
227225
228226
img,
@@ -239,13 +237,13 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>`
239237
gap: 0.5rem;
240238
padding: 0.5rem 1.2rem;
241239
box-shadow: 0 0 0 2px transparent;
242-
letter-spacing: ${(props) => props.theme.linkFontLetterSpacing};
243-
text-transform: ${(props) => props.theme.linkFontTextTransform};
244-
text-decoration: ${(props) => props.theme.linkTextDecoration};
245240
font-family: ${(props) => props.theme.linkFontFamily};
246241
font-style: ${(props) => props.theme.linkFontStyle};
247242
font-weight: ${(props) => props.theme.linkFontWeight};
248243
font-size: ${(props) => props.theme.linkFontSize};
244+
letter-spacing: ${(props) => props.theme.linkFontLetterSpacing};
245+
text-transform: ${(props) => props.theme.linkFontTextTransform};
246+
text-decoration: ${(props) => props.theme.linkTextDecoration};
249247
cursor: pointer;
250248
251249
${(props) =>
@@ -264,8 +262,8 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>`
264262
: `color: ${props.theme.linkFontColor}; background-color: ${props.theme.linkHoverBackgroundColor};`}
265263
}
266264
&:active {
267-
color: #ffffff;
268-
background-color: #4d4d4d;
265+
color: #fff;
266+
background-color: ${(props) => (props.selected ? "#333" : "#4d4d4d")};
269267
outline: 2px solid #0095ff;
270268
outline-offset: -2px;
271269
}

‎website/screens/components/sidenav/code/SidenavCodePage.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ const sections = [
3232
<tr>
3333
<td>children: node</td>
3434
<td></td>
35-
<td>
36-
The area inside the sidenav. The content will be placed inside a
37-
stack with a divider between each element.
38-
</td>
35+
<td>The area inside the sidenav.</td>
3936
</tr>
4037
</DxcTable>
4138
),
@@ -78,6 +75,7 @@ const sections = [
7875
Sections must be defined as direct children of the{" "}
7976
<Code>DxcSidenav</Code> and serve to group links, groups and/or custom
8077
content into different and distinguishable parts of the component.
78+
Consecutive sections are separated by a divider.
8179
</DxcParagraph>
8280
),
8381
subSections: [
@@ -94,8 +92,8 @@ const sections = [
9492
<td>children: node</td>
9593
<td></td>
9694
<td>
97-
The area inside the sidenav section. This area can be used to
98-
render sidenav groups, links and custom content.
95+
The area inside the sidenav section. Child items will be stacked
96+
inside a flex container.
9997
</td>
10098
</tr>
10199
</DxcTable>

‎website/screens/components/sidenav/specs/SidenavSpecsPage.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ const sections = [
102102
</td>
103103
<td>Group title background:active</td>
104104
<td>
105-
<Code>color-grey-300</Code>
105+
<Code>color-grey-800</Code>
106106
</td>
107-
<td>#cccccc</td>
107+
<td>#4d4d4d</td>
108108
</tr>
109109
<tr>
110110
<td>
@@ -142,9 +142,9 @@ const sections = [
142142
</td>
143143
<td>Group title background:selected hover</td>
144144
<td>
145-
<Code>color-grey-600</Code>
145+
<Code>color-grey-900</Code>
146146
</td>
147-
<td>#808080</td>
147+
<td>#333333</td>
148148
</tr>
149149
<tr>
150150
<td>
@@ -202,9 +202,9 @@ const sections = [
202202
</td>
203203
<td>Link background:selected hover</td>
204204
<td>
205-
<Code>color-grey-600</Code>
205+
<Code>color-grey-900</Code>
206206
</td>
207-
<td>#808080</td>
207+
<td>#333333</td>
208208
</tr>
209209
<tr>
210210
<td>

‎website/screens/principles/themes/examples/defaultAdvancedTheme.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -719,11 +719,11 @@ export default {
719719
groupTitleFontWeight: "600",
720720
groupTitleFontColor: "#000000",
721721
groupTitleHoverBackgroundColor: "#e6e6e6",
722-
groupTitleActiveBackgroundColor: "#cccccc",
722+
groupTitleActiveBackgroundColor: "#4d4d4d",
723723
groupTitleSelectedFontColor: "#ffffff",
724724
groupTitleSelectedBackgroundColor: "#4d4d4d",
725725
groupTitleSelectedHoverFontColor: "#ffffff",
726-
groupTitleSelectedHoverBackgroundColor: "#808080",
726+
groupTitleSelectedHoverBackgroundColor: "#333333",
727727
groupTitleFontTextTransform: "uppercase",
728728
groupTitleFontLetterSpacing: "0.05em",
729729
linkFontFamily: "Open Sans, sans-serif",
@@ -735,7 +735,7 @@ export default {
735735
linkSelectedFontColor: "#ffffff",
736736
linkSelectedBackgroundColor: "#4d4d4d",
737737
linkSelectedHoverFontColor: "#ffffff",
738-
linkSelectedHoverBackgroundColor: "#808080",
738+
linkSelectedHoverBackgroundColor: "#333333",
739739
linkFontTextTransform: "none",
740740
linkFontLetterSpacing: "0.025em",
741741
linkTextDecoration: "none",

‎website/screens/theme-generator/components/previews/Sidenav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const Sidenav = () => (
3131
collapsable
3232
icon={icon}
3333
>
34-
<DxcApplicationLayout.SideNav.Link>
34+
<DxcApplicationLayout.SideNav.Link selected>
3535
Lorem ipsum
3636
</DxcApplicationLayout.SideNav.Link>
3737
<DxcApplicationLayout.SideNav.Link>

‎website/screens/theme-generator/themes/advanced-theme.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -719,11 +719,11 @@
719719
"groupTitleFontWeight": "600",
720720
"groupTitleFontColor": "#000000",
721721
"groupTitleHoverBackgroundColor": "#e6e6e6",
722-
"groupTitleActiveBackgroundColor": "#cccccc",
722+
"groupTitleActiveBackgroundColor": "#4d4d4d",
723723
"groupTitleSelectedFontColor": "#ffffff",
724724
"groupTitleSelectedBackgroundColor": "#4d4d4d",
725725
"groupTitleSelectedHoverFontColor": "#ffffff",
726-
"groupTitleSelectedHoverBackgroundColor": "#808080",
726+
"groupTitleSelectedHoverBackgroundColor": "#333333",
727727
"groupTitleFontTextTransform": "uppercase",
728728
"groupTitleFontLetterSpacing": "0.05em",
729729
"linkFontFamily": "Open Sans, sans-serif",
@@ -735,7 +735,7 @@
735735
"linkSelectedFontColor": "#ffffff",
736736
"linkSelectedBackgroundColor": "#4d4d4d",
737737
"linkSelectedHoverFontColor": "#ffffff",
738-
"linkSelectedHoverBackgroundColor": "#808080",
738+
"linkSelectedHoverBackgroundColor": "#333333",
739739
"linkFontTextTransform": "none",
740740
"linkFontLetterSpacing": "0.025em",
741741
"linkTextDecoration": "none",

0 commit comments

Comments
 (0)