From 6d6ffaab14970c147651186957aa962cee9be06c Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Wed, 17 Jul 2024 09:27:56 -0700
Subject: [PATCH] [Look&Feel] apply pattern guidance to Dashboards (#7277)

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
---
 .../add_panel/add_panel_flyout.tsx            |  6 +-
 .../panel/panel_header/panel_options_menu.tsx |  1 +
 .../__snapshots__/indices_list.test.tsx.snap  |  5 ++
 .../share_context_menu.test.tsx.snap          |  6 +-
 .../__snapshots__/new_vis_modal.test.tsx.snap | 60 ++++++++++++++-----
 .../wizard/type_selection/type_selection.tsx  | 13 ++--
 6 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
index 473424984c2f..1b1aa65225b1 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
@@ -33,7 +33,7 @@ import { FormattedMessage } from '@osd/i18n/react';
 import React, { ReactElement } from 'react';
 import { CoreSetup } from 'src/core/public';
 
-import { EuiContextMenuItem, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import { EuiContextMenuItem, EuiFlyoutBody, EuiFlyoutHeader, EuiText } from '@elastic/eui';
 
 import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { IContainer } from '../../../../containers';
@@ -163,11 +163,11 @@ export class AddPanelFlyout extends React.Component<Props, State> {
     return (
       <>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
+          <EuiText size="s">
             <h2>
               <FormattedMessage id="embeddableApi.addPanel.Title" defaultMessage="Add panels" />
             </h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{savedObjectsFinder}</EuiFlyoutBody>
       </>
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
index 66dd676e8040..d9582214034e 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
@@ -128,6 +128,7 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
         <EuiContextMenu
           initialPanelId="mainMenu"
           panels={this.state.actionContextMenuPanel || []}
+          size="s"
         />
       </EuiPopover>
     );
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
index aaba80f050c7..5eef8fd09f9c 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
@@ -94,6 +94,7 @@ exports[`IndicesList should change pages 1`] = `
               </EuiContextMenuItem>,
             ]
           }
+          size="s"
         />
       </EuiPopover>
     </EuiFlexItem>
@@ -187,6 +188,7 @@ exports[`IndicesList should change per page 1`] = `
               </EuiContextMenuItem>,
             ]
           }
+          size="s"
         />
       </EuiPopover>
     </EuiFlexItem>
@@ -297,6 +299,7 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
               </EuiContextMenuItem>,
             ]
           }
+          size="s"
         />
       </EuiPopover>
     </EuiFlexItem>
@@ -398,6 +401,7 @@ exports[`IndicesList should render normally 1`] = `
               </EuiContextMenuItem>,
             ]
           }
+          size="s"
         />
       </EuiPopover>
     </EuiFlexItem>
@@ -563,6 +567,7 @@ exports[`IndicesList updating props should render all new indices 1`] = `
               </EuiContextMenuItem>,
             ]
           }
+          size="s"
         />
       </EuiPopover>
     </EuiFlexItem>
diff --git a/src/plugins/share/public/components/__snapshots__/share_context_menu.test.tsx.snap b/src/plugins/share/public/components/__snapshots__/share_context_menu.test.tsx.snap
index 95d3026f66d3..32cef3fcec57 100644
--- a/src/plugins/share/public/components/__snapshots__/share_context_menu.test.tsx.snap
+++ b/src/plugins/share/public/components/__snapshots__/share_context_menu.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`shareContextMenuExtensions should sort ascending on sort order first an
         },
       ]
     }
-    size="m"
+    size="s"
   />
 </I18nProvider>
 `;
@@ -79,7 +79,7 @@ exports[`should only render permalink panel when there are no other panels 1`] =
         },
       ]
     }
-    size="m"
+    size="s"
   />
 </I18nProvider>
 `;
@@ -132,7 +132,7 @@ exports[`should render context menu panel when there are more than one panel 1`]
         },
       ]
     }
-    size="m"
+    size="s"
   />
 </I18nProvider>
 `;
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index d3501fc655ac..6b40556c74cf 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -175,7 +175,13 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                     <div
                       class="euiModalHeader__title"
                     >
-                      New Visualization
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h2>
+                          New Visualization
+                        </h2>
+                      </div>
                     </div>
                   </div>
                   <div
@@ -498,13 +504,23 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                         <div
                           className="euiModalHeader__title"
                         >
-                          <FormattedMessage
-                            defaultMessage="New Visualization"
-                            id="visualizations.newVisWizard.title"
-                            values={Object {}}
+                          <EuiText
+                            size="s"
                           >
-                            New Visualization
-                          </FormattedMessage>
+                            <div
+                              className="euiText euiText--small"
+                            >
+                              <h2>
+                                <FormattedMessage
+                                  defaultMessage="New Visualization"
+                                  id="visualizations.newVisWizard.title"
+                                  values={Object {}}
+                                >
+                                  New Visualization
+                                </FormattedMessage>
+                              </h2>
+                            </div>
+                          </EuiText>
                         </div>
                       </EuiModalHeaderTitle>
                     </div>
@@ -1296,7 +1312,13 @@ exports[`NewVisModal should render as expected 1`] = `
                     <div
                       class="euiModalHeader__title"
                     >
-                      New Visualization
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h2>
+                          New Visualization
+                        </h2>
+                      </div>
                     </div>
                   </div>
                   <div
@@ -1602,13 +1624,23 @@ exports[`NewVisModal should render as expected 1`] = `
                         <div
                           className="euiModalHeader__title"
                         >
-                          <FormattedMessage
-                            defaultMessage="New Visualization"
-                            id="visualizations.newVisWizard.title"
-                            values={Object {}}
+                          <EuiText
+                            size="s"
                           >
-                            New Visualization
-                          </FormattedMessage>
+                            <div
+                              className="euiText euiText--small"
+                            >
+                              <h2>
+                                <FormattedMessage
+                                  defaultMessage="New Visualization"
+                                  id="visualizations.newVisWizard.title"
+                                  values={Object {}}
+                                >
+                                  New Visualization
+                                </FormattedMessage>
+                              </h2>
+                            </div>
+                          </EuiText>
                         </div>
                       </EuiModalHeaderTitle>
                     </div>
diff --git a/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx b/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
index 6c5449e0e1ac..9f4e5f66e6c2 100644
--- a/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
+++ b/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
@@ -43,6 +43,7 @@ import {
   EuiModalHeaderTitle,
   EuiScreenReaderOnly,
   EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -96,10 +97,14 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
       <React.Fragment>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="visualizations.newVisWizard.title"
-              defaultMessage="New Visualization"
-            />
+            <EuiText size="s">
+              <h2>
+                <FormattedMessage
+                  id="visualizations.newVisWizard.title"
+                  defaultMessage="New Visualization"
+                />
+              </h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
         <div className="visNewVisDialog__body">