Grafana UI: Create Text component use case example (#68248)

public/app/features/dashboard/dashgrid/DashboardEmpty.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { locationService, reportInteraction } from '@grafana/runtime';
 import { Button, useStyles2 } from '@grafana/ui';
+import { H1, H3, P } from '@grafana/ui/src/unstable';
 import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard';
@@ -25,16 +26,20 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
     <div className={styles.centeredContent}>
       <div className={cx(styles.centeredContent, styles.wrapper)}>
         <div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}>
-          <h1 className={cx(styles.headerSection, styles.headerBig)}>
-            <Trans i18nKey="dashboard.empty.add-visualization-header">
-              Start your new dashboard by adding a visualization
-            </Trans>
-          </h1>
-          <div className={cx(styles.bodySection, styles.bodyBig)}>
-            <Trans i18nKey="dashboard.empty.add-visualization-body">
-              Select a data source and then query and visualize your data with charts, stats and tables or create lists,
-              markdowns and other widgets.
-            </Trans>
+          <div className={styles.headerBig}>
+            <H1 textAlignment="center" weight="medium">
+              <Trans i18nKey="dashboard.empty.add-visualization-header">
+                Start your new dashboard by adding a visualization
+              </Trans>
+            </H1>
+          </div>
+          <div className={styles.bodyBig}>
+            <P textAlignment="center" color="secondary">
+              <Trans i18nKey="dashboard.empty.add-visualization-body">
+                Select a data source and then query and visualize your data with charts, stats and tables or create
+                lists, markdowns and other widgets.
+              </Trans>
+            </P>
           </div>
           <Button
             size="lg"
@@ -53,11 +58,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
         </div>
         <div className={cx(styles.centeredContent, styles.others)}>
           <div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
-            <h3 className={cx(styles.headerSection, styles.headerSmall)}>
-              <Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
-            </h3>
-            <div className={cx(styles.bodySection, styles.bodySmall)}>
-              <Trans i18nKey="dashboard.empty.add-row-body">Group your visualizations into expandable sections.</Trans>
+            <div className={styles.headerSmall}>
+              <H3 textAlignment="center" weight="medium">
+                <Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
+              </H3>
+            </div>
+            <div className={styles.bodySmall}>
+              <P textAlignment="center" color="secondary">
+                <Trans i18nKey="dashboard.empty.add-row-body">
+                  Group your visualizations into expandable sections.
+                </Trans>
+              </P>
             </div>
             <Button
               icon="plus"
@@ -73,13 +84,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
             </Button>
           </div>
           <div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
-            <h3 className={cx(styles.headerSection, styles.headerSmall)}>
-              <Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
-            </h3>
-            <div className={cx(styles.bodySection, styles.bodySmall)}>
-              <Trans i18nKey="dashboard.empty.add-import-body">
-                Import visualizations that are shared with other dashboards.
-              </Trans>
+            <div className={styles.headerSmall}>
+              <H3 textAlignment="center" weight="medium">
+                <Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
+              </H3>
+            </div>
+            <div className={styles.bodySmall}>
+              <P textAlignment="center" color="secondary">
+                <Trans i18nKey="dashboard.empty.add-import-body">
+                  Import visualizations that are shared with other dashboards.
+                </Trans>
+              </P>
             </div>
             <Button
               icon="plus"
@@ -147,28 +162,12 @@ function getStyles(theme: GrafanaTheme2) {
       label: 'library-container',
       padding: theme.spacing.gridSize * 3,
     }),
-    visualizationContent: css({
-      gap: theme.spacing.gridSize * 2,
-    }),
-    headerSection: css({
-      label: 'header-section',
-      fontWeight: theme.typography.fontWeightMedium,
-      textAlign: 'center',
-    }),
     headerBig: css({
       marginBottom: theme.spacing.gridSize * 2,
     }),
     headerSmall: css({
       marginBottom: theme.spacing.gridSize,
     }),
-    bodySection: css({
-      label: 'body-section',
-      fontWeight: theme.typography.fontWeightRegular,
-      fontSize: theme.typography.body.fontSize,
-      lineHeight: theme.typography.body.lineHeight,
-      color: theme.colors.text.secondary,
-      textAlign: 'center',
-    }),
     bodyBig: css({
       maxWidth: '75%',
       marginBottom: theme.spacing.gridSize * 4,