Use smaller and compressed varients of buttons and form components

package.json

@@ -143,7 +143,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/[email protected]",
     "@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/[email protected]",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",

src/core/public/chrome/ui/header/header_help_menu.tsx

@@ -97,7 +97,7 @@ export type ChromeHelpExtensionMenuDocumentationLink = EuiButtonEmptyProps & {
 /** @public */
 export type ChromeHelpExtensionMenuCustomLink = EuiButtonEmptyProps & {
   /**
-   * Extend EuiButtonEmpty to provide extra functionality
+   * Extend EuiSmallButtonEmpty to provide extra functionality
    */
   linkType: 'custom';
   /**

src/core/public/fatal_errors/fatal_errors_screen.tsx

@@ -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/notifications/toasts/error_toast.tsx

@@ -32,6 +32,7 @@
 import ReactDOM from 'react-dom';
 
 import {
+  EuiSmallButton,
   EuiButton,
   EuiCallOut,
   EuiCodeBlock,
@@ -107,12 +108,12 @@
             )}
           </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>

src/plugins/advanced_settings/public/header_user_theme_menu.tsx

@@ -7,17 +7,17 @@ import React, { ChangeEvent, SyntheticEvent, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiHeaderSectionItemButton,
   EuiIcon,
   EuiLink,
   EuiPopover,
   EuiPopoverTitle,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
 } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
@@ -133,10 +133,10 @@ export const HeaderUserThemeMenu = () => {
   // TODO: fix focus behavior
   const appearanceContent = (
     <div style={{ maxWidth: 300 }}>
-      <EuiFormRow label="Theme version" helpText={`Default: ${defaultTheme}`}>
-        <EuiSelect options={themeOptions} value={theme} onChange={onThemeChange} />
-      </EuiFormRow>
-      <EuiFormRow
+      <EuiCompressedFormRow label="Theme version" helpText={`Default: ${defaultTheme}`}>
+        <EuiCompressedSelect options={themeOptions} value={theme} onChange={onThemeChange} />
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="Screen mode"
         helpText={`Default: ${
           screenModeOptions.find((t) => {
@@ -145,26 +145,30 @@ export const HeaderUserThemeMenu = () => {
           })?.text
         }`}
       >
-        <EuiSelect options={screenModeOptions} value={screenMode} onChange={onScreenModeChange} />
-      </EuiFormRow>
+        <EuiCompressedSelect
+          options={screenModeOptions}
+          value={screenMode}
+          onChange={onScreenModeChange}
+        />
+      </EuiCompressedFormRow>
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiFormRow hasEmptyLabelSpace>
+          <EuiCompressedFormRow hasEmptyLabelSpace>
             <EuiLink
               target="_blank"
               href="https://forum.opensearch.org/t/feedback-on-dark-mode-experience/15725"
             >
               Theme feedback
             </EuiLink>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow hasEmptyLabelSpace>
+          <EuiCompressedFormRow hasEmptyLabelSpace>
             {/* TODO: disable submit until changes */}
-            <EuiButton fill onClick={onAppearanceSubmit} type="submit">
+            <EuiSmallButton fill onClick={onAppearanceSubmit} type="submit">
               Apply
-            </EuiButton>
-          </EuiFormRow>
+            </EuiSmallButton>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>