Skip to content

Commit 1a65771

Browse files
brionmariobrionmario
committed
chore(react): implement BaseUserDropdown styles using Emotion for improved styling and maintainability
1 parent 33125c6 commit 1a65771

File tree

2 files changed

+225
-151
lines changed

2 files changed

+225
-151
lines changed

‎packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
/**
2+
* Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
*/
18+
19+
import {css} from '@emotion/css';
20+
import {useMemo} from 'react';
21+
import {Theme} from '@asgardeo/browser';
22+
23+
/**
24+
* Creates styles for the BaseUserDropdown component
25+
* @param theme - The theme object containing design tokens
26+
* @param colorScheme - The current color scheme (used for memoization)
27+
* @returns Object containing CSS class names for component styling
28+
*/
29+
const useStyles = (theme: Theme, colorScheme: string) => {
30+
return useMemo(() => {
31+
const trigger = css`
32+
display: inline-flex;
33+
align-items: center;
34+
gap: calc(${theme.vars.spacing.unit} * 0.75);
35+
padding: calc(${theme.vars.spacing.unit} * 0.5);
36+
background: none;
37+
border: none;
38+
cursor: pointer;
39+
border-radius: ${theme.vars.borderRadius.medium};
40+
transition: background-color 0.15s ease-in-out;
41+
42+
&:hover {
43+
background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};
44+
}
45+
46+
&:focus {
47+
outline: 2px solid ${theme.vars.colors.primary};
48+
outline-offset: 2px;
49+
}
50+
`;
51+
52+
const userName = css`
53+
color: ${theme.vars.colors.text.primary};
54+
font-size: 0.875rem;
55+
font-weight: 500;
56+
max-width: 150px;
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
white-space: nowrap;
60+
`;
61+
62+
const dropdownContent = css`
63+
background: ${theme.vars.colors.background.surface};
64+
border-radius: ${theme.vars.borderRadius.large};
65+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
66+
border: 1px solid ${theme.vars.colors.border};
67+
min-width: 250px;
68+
max-width: 600px;
69+
z-index: 1000;
70+
overflow: hidden;
71+
`;
72+
73+
const dropdownMenu = css`
74+
display: flex;
75+
flex-direction: column;
76+
width: 100%;
77+
`;
78+
79+
const menuItem = css`
80+
display: flex;
81+
align-items: center;
82+
justify-content: flex-start;
83+
gap: ${theme.vars.spacing.unit};
84+
padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);
85+
width: 100%;
86+
color: ${theme.vars.colors.text.primary};
87+
text-decoration: none;
88+
border: none;
89+
background: none;
90+
cursor: pointer;
91+
font-size: 0.875rem;
92+
text-align: left;
93+
border-radius: ${theme.vars.borderRadius.medium};
94+
transition: background-color 0.15s ease-in-out;
95+
96+
&:hover {
97+
background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};
98+
}
99+
`;
100+
101+
const menuItemAnchor = css`
102+
display: flex;
103+
align-items: center;
104+
justify-content: flex-start;
105+
gap: ${theme.vars.spacing.unit};
106+
padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);
107+
width: 100%;
108+
color: ${theme.vars.colors.text.primary};
109+
text-decoration: none;
110+
border: none;
111+
background: none;
112+
cursor: pointer;
113+
font-size: 0.875rem;
114+
text-align: left;
115+
border-radius: ${theme.vars.borderRadius.medium};
116+
transition: background-color 0.15s ease-in-out;
117+
118+
&:hover {
119+
background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};
120+
}
121+
`;
122+
123+
const divider = css`
124+
margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
125+
border-bottom: 1px solid ${theme.vars.colors.border};
126+
`;
127+
128+
const dropdownHeader = css`
129+
display: flex;
130+
align-items: center;
131+
gap: ${theme.vars.spacing.unit};
132+
padding: calc(${theme.vars.spacing.unit} * 1.5);
133+
border-bottom: 1px solid ${theme.vars.colors.border};
134+
`;
135+
136+
const headerInfo = css`
137+
display: flex;
138+
flex-direction: column;
139+
gap: calc(${theme.vars.spacing.unit} / 4);
140+
flex: 1;
141+
min-width: 0;
142+
overflow: hidden;
143+
text-overflow: ellipsis;
144+
white-space: nowrap;
145+
`;
146+
147+
const headerName = css`
148+
color: ${theme.vars.colors.text.primary};
149+
font-size: 1rem;
150+
font-weight: 500;
151+
margin: 0;
152+
overflow: hidden;
153+
text-overflow: ellipsis;
154+
white-space: nowrap;
155+
`;
156+
157+
const headerEmail = css`
158+
color: ${theme.vars.colors.text.secondary};
159+
font-size: 0.875rem;
160+
margin: 0;
161+
overflow: hidden;
162+
text-overflow: ellipsis;
163+
white-space: nowrap;
164+
`;
165+
166+
const loadingContainer = css`
167+
display: flex;
168+
align-items: center;
169+
justify-content: center;
170+
min-height: 80px;
171+
gap: ${theme.vars.spacing.unit};
172+
`;
173+
174+
const loadingText = css`
175+
color: ${theme.vars.colors.text.secondary};
176+
font-size: 0.875rem;
177+
`;
178+
179+
return {
180+
trigger,
181+
userName,
182+
dropdownContent,
183+
dropdownMenu,
184+
menuItem,
185+
menuItemAnchor,
186+
divider,
187+
dropdownHeader,
188+
headerInfo,
189+
headerName,
190+
headerEmail,
191+
loadingContainer,
192+
loadingText,
193+
};
194+
}, [
195+
theme.vars.colors.background.surface,
196+
theme.vars.colors.text.primary,
197+
theme.vars.colors.text.secondary,
198+
theme.vars.colors.border,
199+
theme.vars.colors.primary,
200+
theme.vars.colors.action?.hover,
201+
theme.vars.borderRadius.medium,
202+
theme.vars.borderRadius.large,
203+
theme.vars.spacing.unit,
204+
colorScheme,
205+
]);
206+
};
207+
208+
export default useStyles;

0 commit comments

Comments
 (0)