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

Jump to bottom

[Backport 2.x] Use smaller and compressed varients of buttons and form components #2080

Merged
merged 1 commit into from
Aug 6, 2024
Merged

[Backport 2.x] Use smaller and compressed varients of buttons and form components #2080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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