Skip to content

Commit 76c176a

Browse files
AMoo-MikiAMoo-Miki
authored
Use smaller and compressed varients of buttons and form components (#2079)
* Use EuiSmallButton Signed-off-by: Miki <[email protected]> * Use EuiSmallButton Signed-off-by: Miki <[email protected]> * Use EuiSmallButtonIcon Signed-off-by: Miki <[email protected]> * Use EuiSmallButtonEmpty Signed-off-by: Miki <[email protected]> * Use EuiSmallButtonEmpty Signed-off-by: Miki <[email protected]> * Use EuiCompressedFormRow Signed-off-by: Miki <[email protected]> * Use EuiCompressedField* Signed-off-by: Miki <[email protected]> * Use EuiCompressedField* Signed-off-by: Miki <[email protected]> * Use EuiCompressedSelect and EuiCompressedSuperSelect Signed-off-by: Miki <[email protected]> * Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup Signed-off-by: Miki <[email protected]> * Use EuiCompressedRadio and EuiCompressedRadioGroup Signed-off-by: Miki <[email protected]> * Use EuiCompressedSwitch Signed-off-by: Miki <[email protected]> * Use EuiCompressedEuiTextArea Signed-off-by: Miki <[email protected]> * Use EuiCompressedComboBox Signed-off-by: Miki <[email protected]> * Update snapshots and tests Signed-off-by: Miki <[email protected]> --------- Signed-off-by: Miki <[email protected]>
1 parent 54955ff commit 76c176a

File tree

64 files changed

+652
-666
lines changed

Some content is hidden

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

64 files changed

+652
-666
lines changed

‎public/apps/account/password-reset-panel.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515

1616
import React from 'react';
1717
import {
18-
EuiButton,
19-
EuiButtonEmpty,
18+
EuiSmallButton,
19+
EuiSmallButtonEmpty,
2020
EuiCallOut,
21-
EuiFieldPassword,
21+
EuiCompressedFieldPassword,
2222
EuiFlexGroup,
2323
EuiFlexItem,
24-
EuiFormRow,
24+
EuiCompressedFormRow,
2525
EuiModal,
2626
EuiModalBody,
2727
EuiModalFooter,
@@ -116,7 +116,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
116116
isInvalid={isCurrentPasswordInvalid}
117117
error={currentPasswordError}
118118
>
119-
<EuiFieldPassword
119+
<EuiCompressedFieldPassword
120120
data-test-subj="current-password"
121121
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
122122
setCurrentPassword(e.target.value);
@@ -135,7 +135,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
135135
helpText={passwordHelpText}
136136
isInvalid={isNewPasswordInvalid}
137137
>
138-
<EuiFieldPassword
138+
<EuiCompressedFieldPassword
139139
data-test-subj="new-password"
140140
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
141141
setNewPassword(e.target.value);
@@ -146,17 +146,17 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
146146
isInvalid={isNewPasswordInvalid}
147147
/>
148148
</FormRow>
149-
<EuiFormRow>
149+
<EuiCompressedFormRow>
150150
<PasswordStrengthBar password={newPassword} />
151-
</EuiFormRow>
151+
</EuiCompressedFormRow>
152152
</EuiFlexItem>
153153
</EuiFlexGroup>
154154

155155
<FormRow
156156
headerText="Re-enter new password"
157157
helpText="The password must be identical to what you entered above."
158158
>
159-
<EuiFieldPassword
159+
<EuiCompressedFieldPassword
160160
data-test-subj="reenter-new-password"
161161
isInvalid={isRepeatNewPasswordInvalid}
162162
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
@@ -177,18 +177,18 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
177177
)}
178178
</EuiModalBody>
179179
<EuiModalFooter>
180-
<EuiButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
180+
<EuiSmallButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
181181
Cancel
182-
</EuiButtonEmpty>
182+
</EuiSmallButtonEmpty>
183183

184-
<EuiButton
184+
<EuiSmallButton
185185
data-test-subj="reset"
186186
fill
187187
disabled={isRepeatNewPasswordInvalid}
188188
onClick={handleReset}
189189
>
190190
Reset
191-
</EuiButton>
191+
</EuiSmallButton>
192192
</EuiModalFooter>
193193
</EuiModal>
194194
</EuiOverlayMask>

‎public/apps/account/tenant-switch-panel.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
*/
1515

1616
import {
17-
EuiButton,
18-
EuiButtonEmpty,
17+
EuiSmallButton,
18+
EuiSmallButtonEmpty,
1919
EuiCallOut,
20-
EuiComboBox,
20+
EuiCompressedComboBox,
2121
EuiComboBoxOptionOption,
2222
EuiModal,
2323
EuiModalBody,
2424
EuiModalFooter,
2525
EuiOverlayMask,
26-
EuiRadioGroup,
26+
EuiCompressedRadioGroup,
2727
EuiSpacer,
2828
EuiText,
2929
EuiTitle,
@@ -247,7 +247,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
247247
if (isMultiTenancyEnabled) {
248248
content = (
249249
<>
250-
<EuiRadioGroup
250+
<EuiCompressedRadioGroup
251251
data-test-subj="tenant-switch-radios"
252252
options={tenantSwitchRadios}
253253
idSelected={tenantSwitchRadioIdSelected}
@@ -258,7 +258,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
258258
{/* This combo box has to be outside the radio group.
259259
In current EUI if put into the child of radio option, clicking in the combo box will not
260260
show the drop down list since the radio option consumes the click event. */}
261-
<EuiComboBox
261+
<EuiCompressedComboBox
262262
placeholder="Select a custom tenant"
263263
options={customTenantOptions}
264264
singleSelection={{ asPlainText: true }}
@@ -304,16 +304,16 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
304304
<EuiSpacer />
305305
</EuiModalBody>
306306
<EuiModalFooter>
307-
<EuiButtonEmpty onClick={props.handleClose}>Cancel</EuiButtonEmpty>
307+
<EuiSmallButtonEmpty onClick={props.handleClose}>Cancel</EuiSmallButtonEmpty>
308308

309-
<EuiButton
309+
<EuiSmallButton
310310
data-test-subj="confirm"
311311
fill={isMultiTenancyEnabled && !invalidCustomTenant}
312312
disabled={!isMultiTenancyEnabled || invalidCustomTenant}
313313
onClick={handleTenantConfirmation}
314314
>
315315
Confirm
316-
</EuiButton>
316+
</EuiSmallButton>
317317
</EuiModalFooter>
318318
</EuiModal>
319319
</EuiOverlayMask>

‎public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap

+35-35
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
2121
Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. You can switch your tenant anytime by clicking the user avatar on top right.
2222
</EuiText>
2323
<EuiSpacer />
24-
<EuiRadioGroup
24+
<EuiCompressedRadioGroup
2525
data-test-subj="tenant-switch-radios"
2626
name="tenantSwitchRadios"
2727
onChange={[Function]}
@@ -63,9 +63,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
6363
]
6464
}
6565
/>
66-
<EuiComboBox
66+
<EuiCompressedComboBox
6767
async={false}
68-
compressed={false}
68+
compressed={true}
6969
fullWidth={false}
7070
isClearable={true}
7171
onChange={[Function]}
@@ -94,19 +94,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
9494
<EuiSpacer />
9595
</EuiModalBody>
9696
<EuiModalFooter>
97-
<EuiButtonEmpty
97+
<EuiSmallButtonEmpty
9898
onClick={[MockFunction]}
9999
>
100100
Cancel
101-
</EuiButtonEmpty>
102-
<EuiButton
101+
</EuiSmallButtonEmpty>
102+
<EuiSmallButton
103103
data-test-subj="confirm"
104104
disabled={false}
105105
fill={true}
106106
onClick={[Function]}
107107
>
108108
Confirm
109-
</EuiButton>
109+
</EuiSmallButton>
110110
</EuiModalFooter>
111111
</EuiModal>
112112
</EuiOverlayMask>
@@ -133,7 +133,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
133133
Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. You can switch your tenant anytime by clicking the user avatar on top right.
134134
</EuiText>
135135
<EuiSpacer />
136-
<EuiRadioGroup
136+
<EuiCompressedRadioGroup
137137
data-test-subj="tenant-switch-radios"
138138
name="tenantSwitchRadios"
139139
onChange={[Function]}
@@ -178,9 +178,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
178178
]
179179
}
180180
/>
181-
<EuiComboBox
181+
<EuiCompressedComboBox
182182
async={false}
183-
compressed={false}
183+
compressed={true}
184184
fullWidth={false}
185185
isClearable={true}
186186
onChange={[Function]}
@@ -209,19 +209,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
209209
<EuiSpacer />
210210
</EuiModalBody>
211211
<EuiModalFooter>
212-
<EuiButtonEmpty
212+
<EuiSmallButtonEmpty
213213
onClick={[MockFunction]}
214214
>
215215
Cancel
216-
</EuiButtonEmpty>
217-
<EuiButton
216+
</EuiSmallButtonEmpty>
217+
<EuiSmallButton
218218
data-test-subj="confirm"
219219
disabled={false}
220220
fill={true}
221221
onClick={[Function]}
222222
>
223223
Confirm
224-
</EuiButton>
224+
</EuiSmallButton>
225225
</EuiModalFooter>
226226
</EuiModal>
227227
</EuiOverlayMask>
@@ -248,7 +248,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
248248
Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. You can switch your tenant anytime by clicking the user avatar on top right.
249249
</EuiText>
250250
<EuiSpacer />
251-
<EuiRadioGroup
251+
<EuiCompressedRadioGroup
252252
data-test-subj="tenant-switch-radios"
253253
name="tenantSwitchRadios"
254254
onChange={[Function]}
@@ -293,9 +293,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
293293
]
294294
}
295295
/>
296-
<EuiComboBox
296+
<EuiCompressedComboBox
297297
async={false}
298-
compressed={false}
298+
compressed={true}
299299
fullWidth={false}
300300
isClearable={true}
301301
onChange={[Function]}
@@ -324,19 +324,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
324324
<EuiSpacer />
325325
</EuiModalBody>
326326
<EuiModalFooter>
327-
<EuiButtonEmpty
327+
<EuiSmallButtonEmpty
328328
onClick={[MockFunction]}
329329
>
330330
Cancel
331-
</EuiButtonEmpty>
332-
<EuiButton
331+
</EuiSmallButtonEmpty>
332+
<EuiSmallButton
333333
data-test-subj="confirm"
334334
disabled={false}
335335
fill={true}
336336
onClick={[Function]}
337337
>
338338
Confirm
339-
</EuiButton>
339+
</EuiSmallButton>
340340
</EuiModalFooter>
341341
</EuiModal>
342342
</EuiOverlayMask>
@@ -363,7 +363,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
363363
Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. You can switch your tenant anytime by clicking the user avatar on top right.
364364
</EuiText>
365365
<EuiSpacer />
366-
<EuiRadioGroup
366+
<EuiCompressedRadioGroup
367367
data-test-subj="tenant-switch-radios"
368368
name="tenantSwitchRadios"
369369
onChange={[Function]}
@@ -408,9 +408,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
408408
]
409409
}
410410
/>
411-
<EuiComboBox
411+
<EuiCompressedComboBox
412412
async={false}
413-
compressed={false}
413+
compressed={true}
414414
fullWidth={false}
415415
isClearable={true}
416416
onChange={[Function]}
@@ -439,19 +439,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
439439
<EuiSpacer />
440440
</EuiModalBody>
441441
<EuiModalFooter>
442-
<EuiButtonEmpty
442+
<EuiSmallButtonEmpty
443443
onClick={[MockFunction]}
444444
>
445445
Cancel
446-
</EuiButtonEmpty>
447-
<EuiButton
446+
</EuiSmallButtonEmpty>
447+
<EuiSmallButton
448448
data-test-subj="confirm"
449449
disabled={false}
450450
fill={true}
451451
onClick={[Function]}
452452
>
453453
Confirm
454-
</EuiButton>
454+
</EuiSmallButton>
455455
</EuiModalFooter>
456456
</EuiModal>
457457
</EuiOverlayMask>
@@ -478,7 +478,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
478478
Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. You can switch your tenant anytime by clicking the user avatar on top right.
479479
</EuiText>
480480
<EuiSpacer />
481-
<EuiRadioGroup
481+
<EuiCompressedRadioGroup
482482
data-test-subj="tenant-switch-radios"
483483
name="tenantSwitchRadios"
484484
onChange={[Function]}
@@ -523,9 +523,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
523523
]
524524
}
525525
/>
526-
<EuiComboBox
526+
<EuiCompressedComboBox
527527
async={false}
528-
compressed={false}
528+
compressed={true}
529529
fullWidth={false}
530530
isClearable={true}
531531
onChange={[Function]}
@@ -554,19 +554,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
554554
<EuiSpacer />
555555
</EuiModalBody>
556556
<EuiModalFooter>
557-
<EuiButtonEmpty
557+
<EuiSmallButtonEmpty
558558
onClick={[MockFunction]}
559559
>
560560
Cancel
561-
</EuiButtonEmpty>
562-
<EuiButton
561+
</EuiSmallButtonEmpty>
562+
<EuiSmallButton
563563
data-test-subj="confirm"
564564
disabled={false}
565565
fill={true}
566566
onClick={[Function]}
567567
>
568568
Confirm
569-
</EuiButton>
569+
</EuiSmallButton>
570570
</EuiModalFooter>
571571
</EuiModal>
572572
</EuiOverlayMask>

0 commit comments

Comments
 (0)