Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use smaller and compressed varients of buttons and form components #2079

Merged
merged 15 commits into from
Aug 6, 2024
Merged

Use smaller and compressed varients of buttons and form components #2079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ea08605
Use EuiSmallButton
AMoo-Miki Jul 11, 2024
a7c70c8
Use EuiSmallButton
AMoo-Miki Jul 11, 2024
2dd3a94
Use EuiSmallButtonIcon
AMoo-Miki Jul 11, 2024
d1b56d1
Use EuiSmallButtonEmpty
AMoo-Miki Jul 11, 2024
bd59200
Use EuiSmallButtonEmpty
AMoo-Miki Jul 11, 2024
8b08492
Use EuiCompressedFormRow
AMoo-Miki Jul 11, 2024
79d48fa
Use EuiCompressedField*
AMoo-Miki Jul 11, 2024
142f483
Use EuiCompressedField*
AMoo-Miki Jul 11, 2024
5336de4
Use EuiCompressedSelect and EuiCompressedSuperSelect
AMoo-Miki Jul 11, 2024
d75adba
Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup
AMoo-Miki Jul 11, 2024
bd2cec1
Use EuiCompressedRadio and EuiCompressedRadioGroup
AMoo-Miki Jul 11, 2024
fd193d1
Use EuiCompressedSwitch
AMoo-Miki Jul 11, 2024
4115d74
Use EuiCompressedEuiTextArea
AMoo-Miki Jul 11, 2024
69a0f0d
Use EuiCompressedComboBox
AMoo-Miki Jul 11, 2024
8a0573e
Update snapshots and tests
AMoo-Miki Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions public/apps/account/password-reset-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@

import React from 'react';
import {
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiCallOut,
EuiFieldPassword,
EuiCompressedFieldPassword,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiCompressedFormRow,
EuiModal,
EuiModalBody,
EuiModalFooter,
Expand Down Expand Up @@ -116,7 +116,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
isInvalid={isCurrentPasswordInvalid}
error={currentPasswordError}
>
<EuiFieldPassword
<EuiCompressedFieldPassword
data-test-subj="current-password"
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
setCurrentPassword(e.target.value);
Expand All @@ -135,7 +135,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
helpText={passwordHelpText}
isInvalid={isNewPasswordInvalid}
>
<EuiFieldPassword
<EuiCompressedFieldPassword
data-test-subj="new-password"
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
setNewPassword(e.target.value);
Expand All @@ -146,17 +146,17 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
isInvalid={isNewPasswordInvalid}
/>
</FormRow>
<EuiFormRow>
<EuiCompressedFormRow>
<PasswordStrengthBar password={newPassword} />
</EuiFormRow>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>

<FormRow
headerText="Re-enter new password"
helpText="The password must be identical to what you entered above."
>
<EuiFieldPassword
<EuiCompressedFieldPassword
data-test-subj="reenter-new-password"
isInvalid={isRepeatNewPasswordInvalid}
onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
Expand All @@ -177,18 +177,18 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
)}
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
<EuiSmallButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
Cancel
</EuiButtonEmpty>
</EuiSmallButtonEmpty>

<EuiButton
<EuiSmallButton
data-test-subj="reset"
fill
disabled={isRepeatNewPasswordInvalid}
onClick={handleReset}
>
Reset
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down
18 changes: 9 additions & 9 deletions public/apps/account/tenant-switch-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
*/

import {
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiCallOut,
EuiComboBox,
EuiCompressedComboBox,
EuiComboBoxOptionOption,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiOverlayMask,
EuiRadioGroup,
EuiCompressedRadioGroup,
EuiSpacer,
EuiText,
EuiTitle,
Expand Down Expand Up @@ -247,7 +247,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
if (isMultiTenancyEnabled) {
content = (
<>
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
options={tenantSwitchRadios}
idSelected={tenantSwitchRadioIdSelected}
Expand All @@ -258,7 +258,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
{/* This combo box has to be outside the radio group.
In current EUI if put into the child of radio option, clicking in the combo box will not
show the drop down list since the radio option consumes the click event. */}
<EuiComboBox
<EuiCompressedComboBox
placeholder="Select a custom tenant"
options={customTenantOptions}
singleSelection={{ asPlainText: true }}
Expand Down Expand Up @@ -304,16 +304,16 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={props.handleClose}>Cancel</EuiButtonEmpty>
<EuiSmallButtonEmpty onClick={props.handleClose}>Cancel</EuiSmallButtonEmpty>

<EuiButton
<EuiSmallButton
data-test-subj="confirm"
fill={isMultiTenancyEnabled && !invalidCustomTenant}
disabled={!isMultiTenancyEnabled || invalidCustomTenant}
onClick={handleTenantConfirmation}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down
70 changes: 35 additions & 35 deletions public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
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.
</EuiText>
<EuiSpacer />
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
name="tenantSwitchRadios"
onChange={[Function]}
Expand Down Expand Up @@ -63,9 +63,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
]
}
/>
<EuiComboBox
<EuiCompressedComboBox
async={false}
compressed={false}
compressed={true}
fullWidth={false}
isClearable={true}
onChange={[Function]}
Expand Down Expand Up @@ -94,19 +94,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
<EuiButton
</EuiSmallButtonEmpty>
<EuiSmallButton
data-test-subj="confirm"
disabled={false}
fill={true}
onClick={[Function]}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand All @@ -133,7 +133,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
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.
</EuiText>
<EuiSpacer />
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
name="tenantSwitchRadios"
onChange={[Function]}
Expand Down Expand Up @@ -178,9 +178,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
]
}
/>
<EuiComboBox
<EuiCompressedComboBox
async={false}
compressed={false}
compressed={true}
fullWidth={false}
isClearable={true}
onChange={[Function]}
Expand Down Expand Up @@ -209,19 +209,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
<EuiButton
</EuiSmallButtonEmpty>
<EuiSmallButton
data-test-subj="confirm"
disabled={false}
fill={true}
onClick={[Function]}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand All @@ -248,7 +248,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
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.
</EuiText>
<EuiSpacer />
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
name="tenantSwitchRadios"
onChange={[Function]}
Expand Down Expand Up @@ -293,9 +293,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
]
}
/>
<EuiComboBox
<EuiCompressedComboBox
async={false}
compressed={false}
compressed={true}
fullWidth={false}
isClearable={true}
onChange={[Function]}
Expand Down Expand Up @@ -324,19 +324,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
<EuiButton
</EuiSmallButtonEmpty>
<EuiSmallButton
data-test-subj="confirm"
disabled={false}
fill={true}
onClick={[Function]}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand All @@ -363,7 +363,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
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.
</EuiText>
<EuiSpacer />
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
name="tenantSwitchRadios"
onChange={[Function]}
Expand Down Expand Up @@ -408,9 +408,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
]
}
/>
<EuiComboBox
<EuiCompressedComboBox
async={false}
compressed={false}
compressed={true}
fullWidth={false}
isClearable={true}
onChange={[Function]}
Expand Down Expand Up @@ -439,19 +439,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
<EuiButton
</EuiSmallButtonEmpty>
<EuiSmallButton
data-test-subj="confirm"
disabled={false}
fill={true}
onClick={[Function]}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand All @@ -478,7 +478,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
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.
</EuiText>
<EuiSpacer />
<EuiRadioGroup
<EuiCompressedRadioGroup
data-test-subj="tenant-switch-radios"
name="tenantSwitchRadios"
onChange={[Function]}
Expand Down Expand Up @@ -523,9 +523,9 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
]
}
/>
<EuiComboBox
<EuiCompressedComboBox
async={false}
compressed={false}
compressed={true}
fullWidth={false}
isClearable={true}
onChange={[Function]}
Expand Down Expand Up @@ -554,19 +554,19 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
<EuiSpacer />
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
<EuiButton
</EuiSmallButtonEmpty>
<EuiSmallButton
data-test-subj="confirm"
disabled={false}
fill={true}
onClick={[Function]}
>
Confirm
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down
Loading
Loading