From ce3d66d5b7325e9e8e79a36d823fc542a71dd604 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Mon, 8 Jul 2024 19:48:31 +0000
Subject: [PATCH] [Look&Feel] Update sementic header to use correct size

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
---
 .../utils/get_no_items_message.tsx            | 30 +++++++++++--------
 .../loading_spinner/loading_spinner.tsx       |  2 +-
 .../inspector_panel.test.tsx.snap             |  8 ++---
 .../inspector/public/ui/inspector_panel.tsx   |  4 +--
 .../public/components/landing/landing.tsx     |  2 +-
 .../__snapshots__/add_data.test.tsx.snap      |  2 +-
 .../public/components/add_data/add_data.tsx   |  2 +-
 .../__snapshots__/manage_data.test.tsx.snap   |  2 +-
 .../components/manage_data/manage_data.tsx    |  2 +-
 .../overview_page_header.test.tsx.snap        |  2 +-
 .../overview_page_header.tsx                  |  2 +-
 .../object_view/components/header.tsx         | 18 ++++++-----
 .../__snapshots__/header.test.tsx.snap        |  4 ++-
 .../objects_table/components/header.tsx       |  2 +-
 .../components/sidebar/sidebar_title.tsx      |  4 +--
 .../public/markdown_options.tsx               |  2 +-
 .../__snapshots__/new_vis_modal.test.tsx.snap | 12 ++++----
 .../wizard/type_selection/type_selection.tsx  |  2 +-
 .../wizard/type_selection/vis_help_text.tsx   |  2 +-
 .../application/utils/get_table_columns.tsx   | 24 ++++++++++-----
 20 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx b/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx
index 175cafdc7a5c..f0ac40f28edf 100644
--- a/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx
+++ b/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx
@@ -5,7 +5,7 @@
 
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiLink, EuiTitle } from '@elastic/eui';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 
 export const getNoItemsMessage = (
@@ -18,12 +18,14 @@ export const getNoItemsMessage = (
       <EuiEmptyPrompt
         iconType="dashboardApp"
         title={
-          <h1 id="dashboardListingHeading">
-            <FormattedMessage
-              id="dashboard.listing.noItemsMessage"
-              defaultMessage="Looks like you don't have any dashboards."
-            />
-          </h1>
+          <EuiTitle size="l">
+            <h1 id="dashboardListingHeading">
+              <FormattedMessage
+                id="dashboard.listing.noItemsMessage"
+                defaultMessage="Looks like you don't have any dashboards."
+              />
+            </h1>
+          </EuiTitle>
         }
       />
     );
@@ -33,12 +35,14 @@ export const getNoItemsMessage = (
     <EuiEmptyPrompt
       iconType="dashboardApp"
       title={
-        <h1 id="dashboardListingHeading">
-          <FormattedMessage
-            id="dashboard.listing.createNewDashboard.title"
-            defaultMessage="Create your first dashboard"
-          />
-        </h1>
+        <EuiTitle size="l">
+          <h1 id="dashboardListingHeading">
+            <FormattedMessage
+              id="dashboard.listing.createNewDashboard.title"
+              defaultMessage="Create your first dashboard"
+            />
+          </h1>
+        </EuiTitle>
       }
       body={
         <Fragment>
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
index dc12ba4581fc..c388aecc5439 100644
--- a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
@@ -39,7 +39,7 @@ export function LoadingSpinner() {
       <EuiEmptyPrompt
         icon={<EuiLoadingSpinner data-test-subj="loadingSpinner" size="xl" />}
         title={
-          <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+          <EuiTitle size="m" data-test-subj="loadingSpinnerText">
             <h2>
               <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
             </h2>
diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
index 827cd95a0cf4..b5156b0c4268 100644
--- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
+++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
@@ -155,13 +155,13 @@ exports[`InspectorPanel should render as expected 1`] = `
               className="euiFlexItem"
             >
               <EuiTitle
-                size="s"
+                size="m"
               >
-                <h1
-                  className="euiTitle euiTitle--small"
+                <h2
+                  className="euiTitle euiTitle--medium"
                 >
                   Inspector
-                </h1>
+                </h2>
               </EuiTitle>
             </div>
           </EuiFlexItem>
diff --git a/src/plugins/inspector/public/ui/inspector_panel.tsx b/src/plugins/inspector/public/ui/inspector_panel.tsx
index 83426c7d5e0a..a01cf5069845 100644
--- a/src/plugins/inspector/public/ui/inspector_panel.tsx
+++ b/src/plugins/inspector/public/ui/inspector_panel.tsx
@@ -122,8 +122,8 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
             <EuiFlexItem grow={true}>
-              <EuiTitle size="s">
-                <h1>{title}</h1>
+              <EuiTitle size="m">
+                <h2>{title}</h2>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
diff --git a/src/plugins/management/public/components/landing/landing.tsx b/src/plugins/management/public/components/landing/landing.tsx
index 5557eb7e9019..6236ff011b78 100644
--- a/src/plugins/management/public/components/landing/landing.tsx
+++ b/src/plugins/management/public/components/landing/landing.tsx
@@ -57,7 +57,7 @@ export const ManagementLandingPage = ({ setBreadcrumbs }: ManagementLandingPageP
         <div className="eui-textCenter">
           <EuiIcon type="managementApp" size="xxl" />
           <EuiSpacer />
-          <EuiTitle>
+          <EuiTitle size="l">
             <h1>
               <FormattedMessage
                 id="management.landing.header"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/opensearch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
index 5d6b64e48148..091ceb98f068 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AddData render 1`] = `
       grow={1}
     >
       <EuiTitle
-        size="s"
+        size="m"
       >
         <h2
           id="osdOverviewDataAdd__title"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/add_data/add_data.tsx b/src/plugins/opensearch_dashboards_overview/public/components/add_data/add_data.tsx
index ae2ce848045b..e46da9618ebd 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/add_data/add_data.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/add_data/add_data.tsx
@@ -55,7 +55,7 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => {
     <section className="osdOverviewDataAdd" aria-labelledby="osdOverviewDataAdd__title">
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem grow={1}>
-          <EuiTitle size="s">
+          <EuiTitle size="m">
             <h2 id="osdOverviewDataAdd__title">
               <FormattedMessage
                 id="opensearchDashboardsOverview.addData.sectionTitle"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap b/src/plugins/opensearch_dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap
index f55df46e65d8..40429fc34e62 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ManageData render 1`] = `
     data-test-subj="osdOverviewDataManage"
   >
     <EuiTitle
-      size="s"
+      size="m"
     >
       <h2
         id="osdOverviewDataManage__title"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/manage_data/manage_data.tsx b/src/plugins/opensearch_dashboards_overview/public/components/manage_data/manage_data.tsx
index 0a37ef26312a..f8d68ba2b32e 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/manage_data/manage_data.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/manage_data/manage_data.tsx
@@ -60,7 +60,7 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => {
           aria-labelledby="osdOverviewDataManage__title"
           data-test-subj="osdOverviewDataManage"
         >
-          <EuiTitle size="s">
+          <EuiTitle size="m">
             <h2 id="osdOverviewDataManage__title">
               <FormattedMessage
                 id="opensearchDashboardsOverview.manageData.sectionTitle"
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
index 326a5b51718e..7b8eeb858d24 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`OverviewPageHeader  renders with the toolbar by default 1`] = `
         >
           <EuiFlexItem>
             <EuiTitle
-              size="m"
+              size="l"
             >
               <h1
                 id="osdOverviewPageHeader__title"
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
index a636f7ecdb7d..a7276cab6949 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
@@ -101,7 +101,7 @@ export const OverviewPageHeader: FC<Props> = ({
               )}
 
               <EuiFlexItem>
-                <EuiTitle size="m">
+                <EuiTitle size="l">
                   <h1 id="osdOverviewPageHeader__title">{title}</h1>
                 </EuiTitle>
               </EuiFlexItem>
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
index ff76a268296a..f96cb48e2d22 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
@@ -61,6 +61,7 @@ export const Header = ({
       <EuiPageContentHeaderSection>
         <EuiTitle>
           {canEdit ? (
+            // <EuiTitle size="l">
             <h1>
               <FormattedMessage
                 id="savedObjectsManagement.view.editItemTitle"
@@ -69,13 +70,16 @@ export const Header = ({
               />
             </h1>
           ) : (
-            <h1>
-              <FormattedMessage
-                id="savedObjectsManagement.view.viewItemTitle"
-                defaultMessage="View {title}"
-                values={{ title: type }}
-              />
-            </h1>
+            // </EuiTitle>
+            <EuiTitle size="l">
+              <h1>
+                <FormattedMessage
+                  id="savedObjectsManagement.view.viewItemTitle"
+                  defaultMessage="View {title}"
+                  values={{ title: type }}
+                />
+              </h1>
+            </EuiTitle>
           )}
         </EuiTitle>
       </EuiPageContentHeaderSection>
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
index 038e1aaf2d8f..406a4fb63d69 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
@@ -9,7 +9,9 @@ exports[`Header should render normally 1`] = `
     <EuiFlexItem
       grow={false}
     >
-      <EuiTitle>
+      <EuiTitle
+        size="l"
+      >
         <h1>
           <FormattedMessage
             defaultMessage="Saved Objects"
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
index a22e349d5240..2db77e91464e 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
@@ -54,7 +54,7 @@ export const Header = ({
   <Fragment>
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
       <EuiFlexItem grow={false}>
-        <EuiTitle>
+        <EuiTitle size="l">
           <h1>
             <FormattedMessage
               id="savedObjectsManagement.objectsTable.header.savedObjectsTitle"
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
index 40769ca5a9e5..d48b94f87640 100644
--- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
+++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
@@ -100,7 +100,7 @@ export function LinkedSearch({ savedSearch, eventEmitter }: LinkedSearchProps) {
       </EuiFlexItem>
 
       <EuiFlexItem grow={false} className="eui-textTruncate">
-        <EuiTitle size="xs" className="eui-textTruncate">
+        <EuiTitle size="m" className="eui-textTruncate">
           <h2
             title={i18n.translate('visDefaultEditor.sidebar.savedSearch.titleAriaLabel', {
               defaultMessage: 'Saved search: {title}',
@@ -184,7 +184,7 @@ function SidebarTitle({ savedSearch, vis, isLinkedSearch, eventEmitter }: Sideba
   return isLinkedSearch && savedSearch ? (
     <LinkedSearch savedSearch={savedSearch} eventEmitter={eventEmitter} />
   ) : vis.type.options.showIndexSelection ? (
-    <EuiTitle size="xs" className="visEditorSidebar__titleContainer eui-textTruncate">
+    <EuiTitle size="m" className="visEditorSidebar__titleContainer eui-textTruncate">
       <h2
         title={i18n.translate('visDefaultEditor.sidebar.indexPatternAriaLabel', {
           defaultMessage: 'Index pattern: {title}',
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.tsx b/src/plugins/vis_type_markdown/public/markdown_options.tsx
index 4c038d2c4a8c..00b215d4f8bf 100644
--- a/src/plugins/vis_type_markdown/public/markdown_options.tsx
+++ b/src/plugins/vis_type_markdown/public/markdown_options.tsx
@@ -56,7 +56,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
             <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
+              <EuiTitle size="m">
                 <h2>
                   <label htmlFor="markdownVisInput">Markdown</label>
                 </h2>
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 2685e7cc8d21..8b52d04524e3 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
@@ -383,7 +383,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                         class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                       >
                         <h2
-                          class="euiTitle euiTitle--small"
+                          class="euiTitle euiTitle--medium"
                         >
                           Select a visualization type
                         </h2>
@@ -977,10 +977,10 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                             className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                           >
                             <EuiTitle
-                              size="s"
+                              size="m"
                             >
                               <h2
-                                className="euiTitle euiTitle--small"
+                                className="euiTitle euiTitle--medium"
                               >
                                 <FormattedMessage
                                   defaultMessage="Select a visualization type"
@@ -1485,7 +1485,7 @@ exports[`NewVisModal should render as expected 1`] = `
                         class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                       >
                         <h2
-                          class="euiTitle euiTitle--small"
+                          class="euiTitle euiTitle--medium"
                         >
                           Select a visualization type
                         </h2>
@@ -2027,10 +2027,10 @@ exports[`NewVisModal should render as expected 1`] = `
                             className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                           >
                             <EuiTitle
-                              size="s"
+                              size="m"
                             >
                               <h2
-                                className="euiTitle euiTitle--small"
+                                className="euiTitle euiTitle--medium"
                               >
                                 <FormattedMessage
                                   defaultMessage="Select a visualization type"
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..420e103eb675 100644
--- a/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
+++ b/src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx
@@ -157,7 +157,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
                 <VisHelpText {...highlightedType} />
               ) : (
                 <React.Fragment>
-                  <EuiTitle size="s">
+                  <EuiTitle size="m">
                     <h2>
                       <FormattedMessage
                         id="visualizations.newVisWizard.selectVisType"
diff --git a/src/plugins/visualizations/public/wizard/type_selection/vis_help_text.tsx b/src/plugins/visualizations/public/wizard/type_selection/vis_help_text.tsx
index 1616cc415b51..b02492006f88 100644
--- a/src/plugins/visualizations/public/wizard/type_selection/vis_help_text.tsx
+++ b/src/plugins/visualizations/public/wizard/type_selection/vis_help_text.tsx
@@ -42,7 +42,7 @@ interface VisHelpTextProps {
 export const VisHelpText = ({ name, title, description, highlightMsg }: VisHelpTextProps) => {
   return (
     <React.Fragment>
-      <EuiTitle size="s">
+      <EuiTitle size="m">
         <h2>{title}</h2>
       </EuiTitle>
       <EuiSpacer size="s" />
diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
index 02917cf2b903..279ea2a4a331 100644
--- a/src/plugins/visualize/public/application/utils/get_table_columns.tsx
+++ b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -30,7 +30,15 @@
 
 import React from 'react';
 import { History } from 'history';
-import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink, EuiBadge } from '@elastic/eui';
+import {
+  EuiBetaBadge,
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiIcon,
+  EuiLink,
+  EuiBadge,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 
@@ -167,12 +175,14 @@ export const getNoItemsMessage = (createItem: () => void) => (
   <EuiEmptyPrompt
     iconType="visualizeApp"
     title={
-      <h1 id="visualizeListingHeading">
-        <FormattedMessage
-          id="visualize.listing.createNew.title"
-          defaultMessage="Create your first visualization"
-        />
-      </h1>
+      <EuiTitle size="l">
+        <h1 id="visualizeListingHeading">
+          <FormattedMessage
+            id="visualize.listing.createNew.title"
+            defaultMessage="Create your first visualization"
+          />
+        </h1>
+      </EuiTitle>
     }
     body={
       <p>