Skip to content

Commit aa4847a

Browse files
dharmadeveloper108dharmadeveloper108
authored
chore: introduce 2 more sizes to controls
Inputs and selects previously had effectively one size. This PR adds the design-system v2 **control scale** to them (from [the original PR](Unleash#12425) by UX, Claude generated), so inputs/selects/autocompletes can be sized `small` (24px), `medium` (30px), or `large` (36px) and line up with buttons and icon-buttons. - This updates the wrappers (`Input`, `GeneralSelect`, `SelectField`, `PasswordField`, `DateTimePicker`) to default to `large`. - Updates the ~94 existing input/select call-sites that were explicitly `size='small'`, and moves to `size='large'` (the bulk of the 69 component files) so they keep their current height. `medium` and `small` are now opt-in sizes. From the look around I had, controls look pretty similar to production (except they are a tiny bit smaller, but barely). ## Screenshots Flag on this branch vs sandbox <img width="611" height="593" alt="Screenshot 2026-07-27 at 18 11 08" src="https://github.com/user-attachments/assets/1223ba9b-456b-49bf-bb1f-8cb67c3cdcc1" /> <img width="611" height="593" alt="Screenshot 2026-07-27 at 18 11 13" src="https://github.com/user-attachments/assets/626dda31-e1f2-4b3e-a73f-b2480030cf8a" /> Flag off this branch vs hosted <img width="611" height="593" alt="Screenshot 2026-07-27 at 18 16 26" src="https://github.com/user-attachments/assets/e38921d5-4ffe-4f52-b2c7-621b2059a481" /> <img width="611" height="593" alt="Screenshot 2026-07-27 at 18 16 31" src="https://github.com/user-attachments/assets/3d41f77b-870f-46ad-a67d-30bc69b627b9" />
1 parent 06a70e9 commit aa4847a

73 files changed

Lines changed: 326 additions & 118 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const AutoCreateForm = ({
116116
placeholder='@company.com, @anotherCompany.com'
117117
style={{ width: '400px' }}
118118
rows={2}
119-
size='small'
119+
size='large'
120120
/>
121121
</Grid>
122122
</Grid>

‎frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export const OidcAuth = () => {
179179
value={data.discoverUrl}
180180
disabled={!data.enabled || oidcConfiguredThroughEnv}
181181
style={{ width: '400px' }}
182-
size='small'
182+
size='large'
183183
/>
184184
</Grid>
185185
</Grid>
@@ -196,7 +196,7 @@ export const OidcAuth = () => {
196196
value={data.clientId}
197197
disabled={!data.enabled || oidcConfiguredThroughEnv}
198198
style={{ width: '400px' }}
199-
size='small'
199+
size='large'
200200
required
201201
/>
202202
</Grid>
@@ -216,7 +216,7 @@ export const OidcAuth = () => {
216216
value={data.secret}
217217
disabled={!data.enabled || oidcConfiguredThroughEnv}
218218
style={{ width: '400px' }}
219-
size='small'
219+
size='large'
220220
required
221221
/>
222222
</Grid>
@@ -310,7 +310,7 @@ export const OidcAuth = () => {
310310
value={data.acrValues}
311311
disabled={!data.enabled || oidcConfiguredThroughEnv}
312312
style={{ width: '400px' }}
313-
size='small'
313+
size='large'
314314
/>
315315
</Grid>
316316
</Grid>
@@ -332,7 +332,7 @@ export const OidcAuth = () => {
332332
value={data.extraScopes}
333333
disabled={!data.enabled}
334334
style={{ width: '400px' }}
335-
size='small'
335+
size='large'
336336
placeholder='custom_scope1 custom_scope2'
337337
/>
338338
</Grid>

‎frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export const SamlAuth = () => {
165165
value={data.entityId}
166166
disabled={!data.enabled || samlConfiguredThroughEnv}
167167
style={{ width: '400px' }}
168-
size='small'
168+
size='large'
169169
required
170170
/>
171171
</Grid>
@@ -186,7 +186,7 @@ export const SamlAuth = () => {
186186
value={data.signOnUrl}
187187
disabled={!data.enabled || samlConfiguredThroughEnv}
188188
style={{ width: '400px' }}
189-
size='small'
189+
size='large'
190190
required
191191
/>
192192
</Grid>
@@ -210,7 +210,7 @@ export const SamlAuth = () => {
210210
multiline
211211
rows={14}
212212
maxRows={14}
213-
size='small'
213+
size='large'
214214
required
215215
slotProps={{
216216
input: {
@@ -240,7 +240,7 @@ export const SamlAuth = () => {
240240
value={data.signOutUrl}
241241
disabled={!data.enabled || samlConfiguredThroughEnv}
242242
style={{ width: '400px' }}
243-
size='small'
243+
size='large'
244244
/>
245245
</Grid>
246246
</Grid>
@@ -265,7 +265,7 @@ export const SamlAuth = () => {
265265
multiline
266266
rows={14}
267267
maxRows={14}
268-
size='small'
268+
size='large'
269269
slotProps={{
270270
input: {
271271
style: {

‎frontend/src/component/admin/auth/SsoGroupSettings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const SsoGroupSettings = ({
7979
value={data.groupJsonPath}
8080
disabled={!data.enableGroupSyncing || disabled}
8181
style={{ width: '400px' }}
82-
size='small'
82+
size='large'
8383
required
8484
/>
8585
</Grid>

‎frontend/src/component/admin/banners/BannerModal/BannerForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ export const BannerForm = ({
294294
<StyledFieldGroup>
295295
<SelectField
296296
label='Banner action'
297-
size='small'
297+
size='large'
298298
value={linkOption}
299299
onChange={(linkOption) => {
300300
setLinkOption(linkOption as LinkOption);

‎frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const GroupFormUsersSelect: FC<IGroupFormUsersSelectProps> = ({
114114
label='Select users'
115115
description={description}
116116
data-testid={UG_USERS_ID}
117-
size='small'
117+
size='large'
118118
limitTags={1}
119119
openOnFocus
120120
multiple

‎frontend/src/component/admin/impact-metrics/ImpactMetricsAdmin.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ const ImpactMetricsPage = () => {
277277
}
278278
disabled={loading || saving}
279279
fullWidth
280-
size='small'
280+
size='large'
281281
type={hasCredentials && !showUrl ? 'password' : 'text'}
282282
slotProps={{
283283
input: {

‎frontend/src/component/admin/license/LicenseForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export const LicenseForm = () => {
148148
name='licenseKey'
149149
value={token}
150150
style={{ width: '100%' }}
151-
size='small'
151+
size='large'
152152
multiline
153153
rows={6}
154154
required

‎frontend/src/component/admin/users/AccessOverview/ProjectAccess/ProjectAccessSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const ProjectAccessSection = ({
9898
setSelectedProjectIds(e.target.value as string[])
9999
}
100100
renderValue={() => projectSelectorLabel}
101-
size='small'
101+
size='large'
102102
sx={{ minWidth: 150, maxWidth: 200, flexShrink: 0 }}
103103
displayEmpty
104104
MenuProps={{
@@ -138,7 +138,7 @@ export const ProjectAccessSection = ({
138138
}
139139
}}
140140
renderValue={() => environmentSelectorLabel}
141-
size='small'
141+
size='large'
142142
sx={{ minWidth: 150, maxWidth: 200, flexShrink: 0 }}
143143
displayEmpty
144144
MenuProps={{

‎frontend/src/component/admin/users/UsersList/AccessRequestsTable/RoleSelectCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const RoleSelectCell = ({
2121
}: IRoleSelectCellProps) => (
2222
<TextCell>
2323
<StyledSelect
24-
size='small'
24+
size='large'
2525
value={selectedRoleId}
2626
onChange={(e) => onChange(e.target.value as number)}
2727
variant='outlined'

0 commit comments

Comments
 (0)