Skip to content

Commit

Permalink
Use smaller and compressed varients of buttons and form components (o…
Browse files Browse the repository at this point in the history 
…pensearch-project#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]>
  • Loading branch information
@AMoo-Miki
AMoo-Miki authored Aug 6, 2024
1 parent 54955ff commit 76c176a
Show file tree
Hide file tree
Showing 64 changed files with 652 additions and 666 deletions.
26 changes: 13 additions & 13 deletions public/apps/account/password-reset-panel.tsx
View file
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
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
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

0 comments on commit 76c176a

Please sign in to comment.