Skip to content

Commit bef5854

Browse files
AltefrohneGaelleAltefrohneGaelle
authored
feat(sidebar): CLIN-5055 add divider (Ferlab-Ste-Justine#628)
1 parent c1d0c56 commit bef5854

File tree

6 files changed

+104
-94
lines changed

6 files changed

+104
-94
lines changed

‎packages/ui/Release.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
### 10.25.15 2025-08-25
2+
- feat: CLIN-5055 add divider in sidebar
3+
14
### 10.25.14 2025-08-22
25
- feat: CLIN-5051 managed no data value in custom pill edition
36

‎packages/ui/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ferlab/ui",
3-
"version": "10.25.14",
3+
"version": "10.25.15",
44
"description": "Core components for scientific research data portals",
55
"publishConfig": {
66
"access": "public"

‎packages/ui/src/components/SidebarMenu/index.module.css‎

Lines changed: 87 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,127 @@
11
:root {
2-
--input-prefix: "ant-input";
3-
--input-wrapper-prefix: var(--input-prefix) + "-affix-wrapper";
4-
--menu-prefix: "ant-menu";
5-
--menu-inline-prefix: "ant-menu-inline";
6-
--menu-item-prefix: var(--menu-prefix) + "-item";
7-
--select-prefix: "ant-select";
2+
--input-prefix: 'ant-input';
3+
--input-wrapper-prefix: var(--input-prefix) + '-affix-wrapper';
4+
--menu-prefix: 'ant-menu';
5+
--menu-inline-prefix: 'ant-menu-inline';
6+
--menu-item-prefix: var(--menu-prefix) + '-item';
7+
--select-prefix: 'ant-select';
88
}
99

1010
.siderContainer {
11-
display: flex;
12-
flex-direction: row;
11+
display: flex;
12+
flex-direction: row;
1313
}
1414
.siderContainer .sider {
15-
z-index: 5;
16-
width: var(--sidebar-menu-width);
17-
min-width: var(--sidebar-menu-width);
18-
background-color: var(--sidebar-menu-background-color);
19-
transition: width 0.2s, min-width 0.2s;
15+
z-index: 5;
16+
width: var(--sidebar-menu-width);
17+
min-width: var(--sidebar-menu-width);
18+
background-color: var(--sidebar-menu-background-color);
19+
transition: width 0.2s, min-width 0.2s;
2020
}
2121
.siderContainer .sider :global(.ant-menu-item-collapsed) {
22-
width: var(--sidebar-menu-collapsed-width);
23-
min-width: var(--sidebar-menu-collapsed-width);
22+
width: var(--sidebar-menu-collapsed-width);
23+
min-width: var(--sidebar-menu-collapsed-width);
2424
}
2525
.siderContainer .sider :global(.ant-menu-item-collapsed) .sidebarMenuItem {
26-
width: 100%;
26+
width: 100%;
2727
}
2828
.siderContainer .sider :global(.ant-menu-item-icon) {
29-
min-height: var(--sidebar-menu-item-icon-size);
30-
max-height: var(--sidebar-menu-item-icon-size);
31-
min-width: var(--sidebar-menu-item-icon-size);
32-
max-width: var(--sidebar-menu-item-icon-size);
33-
font-size: var(--sidebar-menu-item-icon-size) !important;
34-
line-height: var(--sidebar-menu-item-icon-size);
35-
margin: 0;
36-
}
37-
.siderContainer .sider[data-collapsed=true] {
38-
width: var(--sidebar-menu-collapsed-width);
39-
min-width: var(--sidebar-menu-collapsed-width);
40-
}
41-
.siderContainer .sider[data-collapsed=true] .sidebarToggleIconContainer,
42-
.siderContainer .sider[data-collapsed=true] .sidebarToggleIconContainer > div {
43-
text-align: center;
44-
align-items: center;
45-
}
46-
.siderContainer .sider[data-collapsed=true] .sidebarMenu .searchMenuItem {
47-
padding: 0 10px;
48-
margin-bottom: 10px;
49-
}
50-
.siderContainer .sider[data-collapsed=true] .sidebarMenu .sidebarMenuItem .sidebarMenuItemTitle {
51-
display: none;
52-
}
53-
.siderContainer .sider[data-collapsed=true] .sidebarMenu .sidebarMenuItem img,
54-
.siderContainer .sider[data-collapsed=true] .sidebarMenu .sidebarMenuItem span[role=img],
55-
.siderContainer .sider[data-collapsed=true] .sidebarMenu .sidebarMenuItem svg {
56-
margin-right: 0;
57-
display: flex;
29+
min-height: var(--sidebar-menu-item-icon-size);
30+
max-height: var(--sidebar-menu-item-icon-size);
31+
min-width: var(--sidebar-menu-item-icon-size);
32+
max-width: var(--sidebar-menu-item-icon-size);
33+
font-size: var(--sidebar-menu-item-icon-size) !important;
34+
line-height: var(--sidebar-menu-item-icon-size);
35+
margin: 0;
36+
}
37+
.siderContainer .sider[data-collapsed='true'] {
38+
width: var(--sidebar-menu-collapsed-width);
39+
min-width: var(--sidebar-menu-collapsed-width);
40+
}
41+
.siderContainer .sider[data-collapsed='true'] .sidebarToggleIconContainer,
42+
.siderContainer .sider[data-collapsed='true'] .sidebarToggleIconContainer > div {
43+
text-align: center;
44+
align-items: center;
45+
}
46+
.siderContainer .sider[data-collapsed='true'] .sidebarMenu .searchMenuItem {
47+
padding: 0 10px;
48+
margin-bottom: 10px;
49+
}
50+
.siderContainer .sider[data-collapsed='true'] .sidebarMenu .sidebarMenuItem .sidebarMenuItemTitle {
51+
display: none;
52+
}
53+
.siderContainer .sider[data-collapsed='true'] .sidebarMenu .sidebarMenuItem img,
54+
.siderContainer .sider[data-collapsed='true'] .sidebarMenu .sidebarMenuItem span[role='img'],
55+
.siderContainer .sider[data-collapsed='true'] .sidebarMenu .sidebarMenuItem svg {
56+
margin-right: 0;
57+
display: flex;
5858
}
5959
.siderContainer .sider .sidebarToggleIconContainer {
60-
margin: 10px 14px 10px 14px;
60+
margin: 10px 14px 10px 14px;
6161
}
6262
.siderContainer .sider .sidebarToggleIconContainer,
6363
.siderContainer .sider .sidebarToggleIconContainer > div {
64-
display: flex;
64+
display: flex;
6565
}
6666
.siderContainer .sider .sidebarToggleIconContainer .sidebarToggleIcon:hover {
67-
cursor: pointer;
67+
cursor: pointer;
6868
}
6969
.siderContainer .sider .sidebarToggleIconContainer .sidebarToggleIcon * {
70-
min-height: var(--sidebar-menu-toggle-icon-size);
71-
max-height: var(--sidebar-menu-toggle-icon-size);
72-
min-width: var(--sidebar-menu-toggle-icon-size);
73-
max-width: var(--sidebar-menu-toggle-icon-size);
74-
font-size: var(--sidebar-menu-toggle-icon-size);
75-
line-height: var(--sidebar-menu-toggle-icon-size);
76-
color: white;
70+
min-height: var(--sidebar-menu-toggle-icon-size);
71+
max-height: var(--sidebar-menu-toggle-icon-size);
72+
min-width: var(--sidebar-menu-toggle-icon-size);
73+
max-width: var(--sidebar-menu-toggle-icon-size);
74+
font-size: var(--sidebar-menu-toggle-icon-size);
75+
line-height: var(--sidebar-menu-toggle-icon-size);
76+
color: white;
7777
}
7878
.siderContainer .sider .sidebarMenu {
79-
transition: background 0s;
80-
background-color: transparent;
81-
border: none;
82-
color: var(--sidebar-menu-item-text-color);
83-
font-weight: var(--font-weight-semibold);
84-
font-size: 14px;
79+
transition: background 0s;
80+
background-color: transparent;
81+
border: none;
82+
color: var(--sidebar-menu-item-text-color);
83+
font-weight: var(--font-weight-semibold);
84+
font-size: 14px;
8585
}
8686
.siderContainer .sider .sidebarMenu .sidebarMenuItem {
87-
margin: 0;
88-
height: var(--sidebar-menu-item-height);
89-
line-height: var(--sidebar-menu-item-height);
90-
display: flex;
91-
width: 100%;
92-
align-items: center;
93-
padding: 0 13px !important;
87+
margin: 0;
88+
height: var(--sidebar-menu-item-height);
89+
line-height: var(--sidebar-menu-item-height);
90+
display: flex;
91+
width: 100%;
92+
align-items: center;
93+
padding: 0 13px !important;
94+
}
95+
.siderContainer .sider .sidebarMenu .withDivider {
96+
border-color: var(--sidebar-menu-item-divider-color);
9497
}
9598
.siderContainer .sider .sidebarMenu .sidebarMenuItem .sidebarMenuItemTitle {
96-
margin-left: 15px;
97-
text-overflow: ellipsis;
98-
overflow: hidden;
99+
margin-left: 15px;
100+
text-overflow: ellipsis;
101+
overflow: hidden;
99102
}
100103
.siderContainer .sider .sidebarMenu .sidebarMenuItem:focus-visible {
101-
outline: none;
102-
box-shadow: inset 0 0 0pt 2px var(--sidebar-menu-item-border-focus-color);
104+
outline: none;
105+
box-shadow: inset 0 0 0pt 2px var(--sidebar-menu-item-border-focus-color);
103106
}
104107
.siderContainer .sider .sidebarMenu .sidebarMenuItem:hover {
105-
color: var(--sidebar-menu-item-hover-color);
106-
opacity: var(--sidebar-menu-item-hover-opacity);
108+
color: var(--sidebar-menu-item-hover-color);
109+
opacity: var(--sidebar-menu-item-hover-opacity);
107110
}
108111
.siderContainer .sider .sidebarMenu .sidebarMenuItem::after {
109-
border-right: none;
112+
border-right: none;
110113
}
111114
.siderContainer .sider .sidebarMenu .sidebarMenuItem:active {
112-
opacity: 1;
113-
color: var(--sidebar-menu-item-active-color);
114-
background-color: var(--sidebar-menu-item-active-background-color);
115+
opacity: 1;
116+
color: var(--sidebar-menu-item-active-color);
117+
background-color: var(--sidebar-menu-item-active-background-color);
115118
}
116119
.siderContainer .sider .sidebarMenu :global(.ant-menu-item-selected) {
117-
opacity: 1 !important;
118-
color: var(--sidebar-menu-item-active-color);
119-
background-color: var(--sidebar-menu-item-active-background-color);
120+
opacity: 1 !important;
121+
color: var(--sidebar-menu-item-active-color);
122+
background-color: var(--sidebar-menu-item-active-background-color);
120123
}
121124

122125
.siderContainer.ghost .sider {
123-
background-color: transparent;
124-
}
126+
background-color: transparent;
127+
}

‎packages/ui/src/components/SidebarMenu/index.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
22
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
33
import { InputRef, Menu } from 'antd';
4-
import { ItemType } from 'antd/lib/menu/hooks/useItems';
54
import cx from 'classnames';
65
import { get } from 'lodash';
76

@@ -19,6 +18,7 @@ export interface ISidebarMenuItem {
1918
title: string | ReactNode;
2019
icon: ReactNode;
2120
panelContent: (() => ReactNode) | ReactNode;
21+
followedByDivider?: boolean;
2222
}
2323

2424
export interface ISidebarMenuProps {
@@ -79,7 +79,7 @@ const Sidebar = ({
7979
};
8080

8181
const getMenuItems = () => {
82-
const items: ItemType[] = [];
82+
const items = [];
8383

8484
if (enableQuickFilter && collapsed) {
8585
items.push({
@@ -94,16 +94,19 @@ const Sidebar = ({
9494
});
9595
}
9696

97-
items.push(
98-
...menuItems.map((menuItem) => ({
97+
menuItems.forEach((menuItem) => {
98+
items.push({
9999
className: styles.sidebarMenuItem,
100100
'data-cy': `SidebarMenuItem_${menuItem.title}`,
101101
'data-key': menuItem.key,
102102
icon: menuItem.icon,
103-
key: menuItem.key,
103+
key: menuItem.key.toString(),
104104
label: <span className={styles.sidebarMenuItemTitle}>{menuItem.title}</span>,
105-
})),
106-
);
105+
});
106+
if (menuItem.followedByDivider) {
107+
items.push({ className: styles.withDivider, type: 'divider' });
108+
}
109+
});
107110

108111
return items;
109112
};

‎packages/ui/themes/default/theme.template.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
--sidebar-menu-item-hover-color: #fff;
104104
--sidebar-menu-item-hover-opacity: 0.8;
105105
--sidebar-menu-item-border-focus-color: #003447;
106+
--sidebar-menu-item-divider-color: #063c65;
106107
--sidebar-quick-filter-input-box-shadow-hover: 0 0 0 2px #00546e;
107108
--sidebar-quick-filter-input-box-shadow-focus: 0 0 0 2px #007694, 0 0 0 3px white;
108109
--sidebar-quick-filter-input-box-shadow-focus-error: 0 0 0 2px var(--red-7), 0 0 0 3px white;

0 commit comments

Comments
 (0)