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

…2079) * Use EuiSmallButton Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButton Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButtonIcon Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButtonEmpty Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButtonEmpty Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedFormRow Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedField* Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedField* Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedSelect and EuiCompressedSuperSelect Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedRadio and EuiCompressedRadioGroup Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedSwitch Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedEuiTextArea Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedComboBox Signed-off-by: Miki <miki@amazon.com> * Update snapshots and tests Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Aug 6, 2024 · 76c176a · 76c176a
1 parent 54955ff
commit 76c176a
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>