Skip to content

Commit 716d910

Browse files
brionmariobrionmario
committed
chore(react): use BEM
1 parent 95e9b3c commit 716d910

File tree

15 files changed

+955
-1369
lines changed

15 files changed

+955
-1369
lines changed

‎packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts‎

Lines changed: 125 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
import {css} from '@emotion/css';
2020
import {useMemo} from 'react';
21-
import {bem, Theme} from '@asgardeo/browser';
21+
import {Theme} from '@asgardeo/browser';
2222

2323
/**
2424
* Creates styles for the BaseCreateOrganization component using BEM methodology
@@ -28,143 +28,152 @@ import {bem, Theme} from '@asgardeo/browser';
2828
*/
2929
const useStyles = (theme: Theme, colorScheme: string) => {
3030
return useMemo(() => {
31-
const cssCreateOrganization = css`
31+
const root = css`
3232
padding: calc(${theme.vars.spacing.unit} * 4);
3333
min-width: 600px;
3434
margin: 0 auto;
35+
`;
3536

36-
&--card {
37-
background: ${theme.vars.colors.background.surface};
38-
border-radius: ${theme.vars.borderRadius.large};
39-
padding: calc(${theme.vars.spacing.unit} * 4);
40-
}
37+
const card = css`
38+
background: ${theme.vars.colors.background.surface};
39+
border-radius: ${theme.vars.borderRadius.large};
40+
padding: calc(${theme.vars.spacing.unit} * 4);
41+
`;
4142

42-
&__content {
43-
display: flex;
44-
flex-direction: column;
45-
gap: calc(${theme.vars.spacing.unit} * 2);
46-
}
43+
const content = css`
44+
display: flex;
45+
flex-direction: column;
46+
gap: calc(${theme.vars.spacing.unit} * 2);
47+
`;
4748

48-
&__form {
49-
display: flex;
50-
flex-direction: column;
51-
gap: calc(${theme.vars.spacing.unit} * 2);
52-
width: 100%;
53-
}
49+
const form = css`
50+
display: flex;
51+
flex-direction: column;
52+
gap: calc(${theme.vars.spacing.unit} * 2);
53+
width: 100%;
54+
`;
5455

55-
&__header {
56-
display: flex;
57-
align-items: center;
58-
gap: calc(${theme.vars.spacing.unit} * 1.5);
59-
margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
60-
}
56+
const header = css`
57+
display: flex;
58+
align-items: center;
59+
gap: calc(${theme.vars.spacing.unit} * 1.5);
60+
margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
61+
`;
6162

62-
&__field {
63-
display: flex;
64-
align-items: center;
65-
padding: ${theme.vars.spacing.unit} 0;
66-
border-bottom: 1px solid ${theme.vars.colors.border};
67-
min-height: 32px;
68-
}
63+
const field = css`
64+
display: flex;
65+
align-items: center;
66+
padding: ${theme.vars.spacing.unit} 0;
67+
border-bottom: 1px solid ${theme.vars.colors.border};
68+
min-height: 32px;
69+
`;
6970

70-
&__field-group {
71-
display: flex;
72-
flex-direction: column;
73-
gap: calc(${theme.vars.spacing.unit} * 0.5);
74-
}
71+
const fieldGroup = css`
72+
display: flex;
73+
flex-direction: column;
74+
gap: calc(${theme.vars.spacing.unit} * 0.5);
75+
`;
7576

76-
&__textarea {
77-
width: 100%;
78-
padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
79-
border: 1px solid ${theme.vars.colors.border};
80-
border-radius: ${theme.vars.borderRadius.medium};
81-
font-size: ${theme.vars.typography.fontSizes.md};
82-
color: ${theme.vars.colors.text.primary};
83-
background-color: ${theme.vars.colors.background.surface};
84-
font-family: inherit;
85-
min-height: 80px;
86-
resize: vertical;
87-
outline: none;
88-
89-
&:focus {
90-
border-color: ${theme.vars.colors.primary.main};
91-
box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
92-
}
93-
94-
&:disabled {
95-
background-color: ${theme.vars.colors.background.disabled};
96-
color: ${theme.vars.colors.text.secondary};
97-
cursor: not-allowed;
98-
}
99-
100-
&--error {
101-
border-color: ${theme.vars.colors.error.main};
102-
}
77+
const textarea = css`
78+
width: 100%;
79+
padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
80+
border: 1px solid ${theme.vars.colors.border};
81+
border-radius: ${theme.vars.borderRadius.medium};
82+
font-size: ${theme.vars.typography.fontSizes.md};
83+
color: ${theme.vars.colors.text.primary};
84+
background-color: ${theme.vars.colors.background.surface};
85+
font-family: inherit;
86+
min-height: 80px;
87+
resize: vertical;
88+
outline: none;
89+
&:focus {
90+
border-color: ${theme.vars.colors.primary.main};
91+
box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
10392
}
104-
105-
&__input {
106-
/* Base input styles will be handled by TextField component */
93+
&:disabled {
94+
background-color: ${theme.vars.colors.background.disabled};
95+
color: ${theme.vars.colors.text.secondary};
96+
cursor: not-allowed;
10797
}
98+
`;
10899

109-
&__avatar-container {
110-
align-items: flex-start;
111-
display: flex;
112-
gap: calc(${theme.vars.spacing.unit} * 2);
113-
margin-bottom: ${theme.vars.spacing.unit};
114-
}
100+
const textareaError = css`
101+
border-color: ${theme.vars.colors.error.main};
102+
`;
115103

116-
&__actions {
117-
display: flex;
118-
gap: ${theme.vars.spacing.unit};
119-
justify-content: flex-end;
120-
padding-top: calc(${theme.vars.spacing.unit} * 2);
121-
}
104+
const input = css``;
122105

123-
&__info-container {
124-
display: flex;
125-
flex-direction: column;
126-
gap: ${theme.vars.spacing.unit};
127-
}
106+
const avatarContainer = css`
107+
align-items: flex-start;
108+
display: flex;
109+
gap: calc(${theme.vars.spacing.unit} * 2);
110+
margin-bottom: ${theme.vars.spacing.unit};
111+
`;
128112

129-
&__value {
130-
color: ${theme.vars.colors.text.primary};
131-
flex: 1;
132-
display: flex;
133-
align-items: center;
134-
gap: ${theme.vars.spacing.unit};
135-
overflow: hidden;
136-
min-height: 32px;
137-
line-height: 32px;
138-
}
113+
const actions = css`
114+
display: flex;
115+
gap: ${theme.vars.spacing.unit};
116+
justify-content: flex-end;
117+
padding-top: calc(${theme.vars.spacing.unit} * 2);
118+
`;
139119

140-
&__popup {
141-
padding: calc(${theme.vars.spacing.unit} * 2);
142-
}
120+
const infoContainer = css`
121+
display: flex;
122+
flex-direction: column;
123+
gap: ${theme.vars.spacing.unit};
124+
`;
143125

144-
&__error-alert {
145-
margin-bottom: calc(${theme.vars.spacing.unit} * 2);
146-
}
126+
const value = css`
127+
color: ${theme.vars.colors.text.primary};
128+
flex: 1;
129+
display: flex;
130+
align-items: center;
131+
gap: ${theme.vars.spacing.unit};
132+
overflow: hidden;
133+
min-height: 32px;
134+
line-height: 32px;
135+
`;
136+
137+
const popup = css`
138+
padding: calc(${theme.vars.spacing.unit} * 2);
139+
`;
140+
141+
const errorAlert = css`
142+
margin-bottom: calc(${theme.vars.spacing.unit} * 2);
147143
`;
148144

149145
return {
150-
createOrganization: cssCreateOrganization,
151-
'createOrganization--card': bem(cssCreateOrganization, null, 'card'),
152-
createOrganization__content: bem(cssCreateOrganization, 'content'),
153-
createOrganization__form: bem(cssCreateOrganization, 'form'),
154-
createOrganization__header: bem(cssCreateOrganization, 'header'),
155-
createOrganization__field: bem(cssCreateOrganization, 'field'),
156-
createOrganization__fieldGroup: bem(cssCreateOrganization, 'field-group'),
157-
createOrganization__textarea: bem(cssCreateOrganization, 'textarea'),
158-
'createOrganization__textarea--error': bem(cssCreateOrganization, 'textarea', 'error'),
159-
createOrganization__input: bem(cssCreateOrganization, 'input'),
160-
createOrganization__avatarContainer: bem(cssCreateOrganization, 'avatar-container'),
161-
createOrganization__actions: bem(cssCreateOrganization, 'actions'),
162-
createOrganization__infoContainer: bem(cssCreateOrganization, 'info-container'),
163-
createOrganization__value: bem(cssCreateOrganization, 'value'),
164-
createOrganization__popup: bem(cssCreateOrganization, 'popup'),
165-
createOrganization__errorAlert: bem(cssCreateOrganization, 'error-alert'),
146+
root,
147+
card,
148+
content,
149+
form,
150+
header,
151+
field,
152+
fieldGroup,
153+
textarea,
154+
textareaError,
155+
input,
156+
avatarContainer,
157+
actions,
158+
infoContainer,
159+
value,
160+
popup,
161+
errorAlert,
166162
};
167-
}, [theme, colorScheme]);
163+
}, [
164+
theme.vars.spacing.unit,
165+
theme.vars.colors.background.surface,
166+
theme.vars.colors.border,
167+
theme.vars.borderRadius.large,
168+
theme.vars.borderRadius.medium,
169+
theme.vars.typography.fontSizes.md,
170+
theme.vars.colors.text.primary,
171+
theme.vars.colors.primary.main,
172+
theme.vars.colors.background.disabled,
173+
theme.vars.colors.text.secondary,
174+
theme.vars.colors.error.main,
175+
colorScheme,
176+
]);
168177
};
169178

170179
export default useStyles;

0 commit comments

Comments
 (0)