[Look&Feel] Update sementic header to use correct size

Signed-off-by: Zhongnan Su <[email protected]>
opensearch-project · Jul 8, 2024 · ce3d66d · ce3d66d
1 parent 20cefab
commit ce3d66d
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 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
@@ -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
@@ -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
diff --git 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
@@ -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/...earch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap b/...earch_dashboards_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
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
@@ -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/...dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap b/...dashboards_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap
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
@@ -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/...ublic/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap b/...ublic/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
diff --git a/...earch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx b/...earch_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/...gins/saved_objects_management/public/management_section/object_view/components/header.tsx b/...gins/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/...ent/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap b/...ent/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
diff --git a/...ns/saved_objects_management/public/management_section/objects_table/components/header.tsx b/...ns/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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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>