Use smaller and compressed varients of buttons and form components (#…

…2079) (#2080) * Use EuiSmallButton * Use EuiSmallButton * Use EuiSmallButtonIcon * Use EuiSmallButtonEmpty * Use EuiSmallButtonEmpty * Use EuiCompressedFormRow * Use EuiCompressedField* * Use EuiCompressedField* * Use EuiCompressedSelect and EuiCompressedSuperSelect * Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup * Use EuiCompressedRadio and EuiCompressedRadioGroup * Use EuiCompressedSwitch * Use EuiCompressedEuiTextArea * Use EuiCompressedComboBox * Update snapshots and tests --------- (cherry picked from commit 76c176a) Signed-off-by: Miki <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Aug 6, 2024 · f70ab36 · f70ab36
1 parent 6f0b637
commit f70ab36
Show file tree

Hide file tree

Showing 64 changed files with 652 additions and 666 deletions.
diff --git a/public/apps/account/password-reset-panel.tsx b/public/apps/account/password-reset-panel.tsx
@@ -15,13 +15,13 @@
 
 import React from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiFieldPassword,
+  EuiCompressedFieldPassword,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -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);
@@ -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);
@@ -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>) {
@@ -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>

diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
@@ -14,16 +14,16 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiOverlayMask,
-  EuiRadioGroup,
+  EuiCompressedRadioGroup,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -247,7 +247,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
   if (isMultiTenancyEnabled) {
     content = (
       <>
-        <EuiRadioGroup
+        <EuiCompressedRadioGroup
           data-test-subj="tenant-switch-radios"
           options={tenantSwitchRadios}
           idSelected={tenantSwitchRadioIdSelected}
@@ -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 }}
@@ -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>

diff --git a/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
@@ -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]}
@@ -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]}
@@ -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>
@@ -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]}
@@ -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]}
@@ -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>
@@ -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]}
@@ -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]}
@@ -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>
@@ -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]}
@@ -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]}
@@ -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>
@@ -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]}
@@ -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]}
@@ -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>