Use smaller and compressed varients of buttons and form components (#7304) (#7417)

* Bump OUI



* Use EuiSmallButton



* Use EuiSmallButtonIcon



* Use EuiSmallButtonEmpty



* Use EuiCompressedFormRow



* Use EuiCompressedField*



* Use EuiCompressedSelect and EuiCompressedSuperSelect



* Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup



* Use EuiCompressedFilePicker



* Use EuiCompressedRadio and EuiCompressedRadioGroup



* Use EuiCompressedSwitch



* Use EuiCompressedEuiTextArea



* Use EuiCompressedComboBox



* Use compressed ValidatedDualRange



* Use EuiSmallFilterButton



* Undo unnecessary EuiSmallButton* uses



* Revisit size and density changes in workspaces



* Fix unit tests



---------



(cherry picked from commit 6f28170)

Signed-off-by: Miki <miki@amazon.com>

Author: AMoo-Miki

package.json

@@ -140,7 +140,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.5.1",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.7.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@elastic/request-crypto": "2.0.0",

packages/osd-plugin-generator/template/public/components/app.tsx.ejs

@@ -4,7 +4,7 @@ import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import {
-EuiButton,
+EuiSmallButton,
 EuiHorizontalRule,
 EuiPage,
 EuiPageBody,

packages/osd-ui-framework/package.json

@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.5.1",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.7.0",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",

packages/osd-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.5.1",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.7.0",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",

src/core/public/fatal_errors/__snapshots__/fatal_errors_screen.test.tsx.snap

@@ -29,8 +29,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiCodeBlock,
   EuiEmptyPrompt,
@@ -125,7 +125,7 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
                 </EuiText>
               }
               actions={[
-                <EuiButton
+                <EuiSmallButton
                   color="primary"
                   fill
                   onClick={this.onClickClearSession}
@@ -135,13 +135,13 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
                     id="core.fatalErrors.clearYourSessionButtonLabel"
                     defaultMessage="Clear your session"
                   />
-                </EuiButton>,
-                <EuiButtonEmpty onClick={this.onClickGoBack} data-test-subj="goBack">
+                </EuiSmallButton>,
+                <EuiSmallButtonEmpty onClick={this.onClickGoBack} data-test-subj="goBack">
                   <FormattedMessage
                     id="core.fatalErrors.goBackButtonLabel"
                     defaultMessage="Go back"
                   />
-                </EuiButtonEmpty>,
+                </EuiSmallButtonEmpty>,
               ]}
             />
             {this.state.errors.map((error, i) => (

src/core/public/fatal_errors/fatal_errors_screen.tsx

@@ -32,6 +32,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {
+  EuiSmallButton,
   EuiButton,
   EuiCallOut,
   EuiCodeBlock,
@@ -107,12 +108,12 @@ function showErrorDialog({
             )}
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButton onClick={() => modal.close()} fill>
+            <EuiSmallButton onClick={() => modal.close()} fill>
               <FormattedMessage
                 id="core.notifications.errorToast.closeModal"
                 defaultMessage="Close"
               />
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </I18nContext>
       </React.Fragment>