Chore: Migrate Modal SCSS styles to emotion (#91569)

migrate modal scss styles to emotion

packages/grafana-sql/src/components/ConfirmModal.tsx

@@ -25,7 +25,7 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
   return (
     <Modal
       title={
-        <div className="modal-header-title">
+        <div className={styles.modalHeaderTitle}>
           <Icon name="exclamation-triangle" size="lg" />
           <span className={styles.titleText}>Warning</span>
         </div>
@@ -57,4 +57,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   titleText: css({
     paddingLeft: theme.spacing(2),
   }),
+  modalHeaderTitle: css({
+    fontSize: theme.typography.size.lg,
+    float: 'left',
+    paddingTop: theme.spacing(1),
+    margin: theme.spacing(0, 2),
+  }),
 });

packages/grafana-ui/src/components/Modal/ModalTabContent.tsx

@@ -1,5 +1,9 @@
+import { css } from '@emotion/css';
 import * as React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
 import { IconName } from '../../types';
 
 interface Props {
@@ -11,11 +15,23 @@ interface Props {
 
 /** @internal */
 export const ModalTabContent = ({ children }: React.PropsWithChildren<Props>) => {
+  const styles = useStyles2(getStyles);
+
   return (
-    <div className="share-modal-body">
-      <div className="share-modal-header">
-        <div className="share-modal-content">{children}</div>
+    <div>
+      <div className={styles.header}>
+        <div className={styles.content}>{children}</div>
       </div>
     </div>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  header: css({
+    display: 'flex',
+    margin: theme.spacing(0, 0, 3, 0),
+  }),
+  content: css({
+    flexGrow: 1,
+  }),
+});

packages/grafana-ui/src/themes/GlobalStyles/elements.ts

@@ -337,6 +337,13 @@ export function getElementStyles(theme: GrafanaTheme2) {
     '.template-variable': {
       color: theme.colors.primary.text,
     },
+
+    '.modal-header-title': {
+      fontSize: theme.typography.size.lg,
+      float: 'left',
+      paddingTop: theme.spacing(1),
+      margin: theme.spacing(0, 2),
+    },
   });
 }
 

public/app/features/dashboard-scene/sharing/ShareExportTab.tsx

@@ -111,7 +111,7 @@ function ShareExportTabRenderer({ model }: SceneComponentProps<ShareExportTab>)
     <>
       {!isViewingJSON && (
         <>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.export.info-text">Export this dashboard.</Trans>
           </p>
           <Stack gap={2} direction="column">

public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx

@@ -156,7 +156,7 @@ function ShareLinkTabRenderer({ model }: SceneComponentProps<ShareLinkTab>) {
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.link.info-text">
           Create a direct link to this dashboard or panel, customized with the options below.
         </Trans>

public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx

@@ -185,14 +185,14 @@ function ShareSnapshotTabRenderer({ model }: SceneComponentProps<ShareSnapshotTa
       {!Boolean(snapshotResult.value) && (
         <>
           <div>
-            <p className="share-modal-info-text">
+            <p>
               <Trans i18nKey="share-modal.snapshot.info-text-1">
                 A snapshot is an instant way to share an interactive dashboard publicly. When created, we strip
                 sensitive data like queries (metric, template, and annotation) and panel links, leaving only the visible
                 metric data and series names embedded in your dashboard.
               </Trans>
             </p>
-            <p className="share-modal-info-text">
+            <p>
               <Trans i18nKey="share-modal.snapshot.info-text-2">
                 Keep in mind, your snapshot <em>can be viewed by anyone</em> that has the link and can access the URL.
                 Share wisely.

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -54,7 +54,7 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
       </p>
       <Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>

public/app/features/dashboard/components/ShareModal/ShareExport.tsx

@@ -101,7 +101,7 @@ export class ShareExport extends PureComponent<Props, State> {
 
     return (
       <>
-        <p className="share-modal-info-text">
+        <p>
           <Trans i18nKey="share-modal.export.info-text">Export this dashboard.</Trans>
         </p>
         <Field label={exportExternallyTranslation}>

public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx

@@ -22,7 +22,7 @@ export const ShareLibraryPanel = ({ panel, initialFolderUid, onCreateLibraryPane
 
   return (
     <>
-      <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.library.info">Create library panel.</Trans>
       </p>
       <AddLibraryPanelContents

public/app/features/dashboard/components/ShareModal/ShareLink.tsx

@@ -102,7 +102,7 @@ export class ShareLink extends PureComponent<Props, State> {
 
     return (
       <>
-        <p className="share-modal-info-text">
+        <p>
           <Trans i18nKey="share-modal.link.info-text">
             Create a direct link to this dashboard or panel, customized with the options below.
           </Trans>

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

@@ -240,14 +240,14 @@ export class ShareSnapshot extends PureComponent<Props, State> {
     return (
       <>
         <div>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.snapshot.info-text-1">
               A snapshot is an instant way to share an interactive dashboard publicly. When created, we strip sensitive
               data like queries (metric, template, and annotation) and panel links, leaving only the visible metric data
               and series names embedded in your dashboard.
             </Trans>
           </p>
-          <p className="share-modal-info-text">
+          <p>
             <Trans i18nKey="share-modal.snapshot.info-text-2">
               Keep in mind, your snapshot <em>can be viewed by anyone</em> that has the link and can access the URL.
               Share wisely.
@@ -317,14 +317,12 @@ export class ShareSnapshot extends PureComponent<Props, State> {
 
   renderStep3() {
     return (
-      <div className="share-modal-header">
-        <p className="share-modal-info-text">
+      <p>
         <Trans i18nKey="share-modal.snapshot.deleted-message">
           The snapshot has been deleted. If you have already accessed it once, then it might take up to an hour before
           before it is removed from browser caches or CDN caches.
         </Trans>
       </p>
-      </div>
     );
   }
 

public/sass/_angular.scss

@@ -2171,3 +2171,82 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
 div.flot-text {
   color: $text-color !important;
 }
+
+.modal-header {
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-header-close {
+  float: right;
+  padding: 9px $spacer;
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+}
+
+.modal-content {
+  padding: $spacer * 2;
+
+  &--has-scroll {
+    max-height: calc(100vh - 400px);
+    position: relative;
+  }
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 14px 15px 15px;
+  border-top: 1px solid $panel-bg;
+  background-color: $panel-bg;
+  text-align: right; // right align buttons
+  // clear it in case folks use .pull-* classes on buttons
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.confirm-modal {
+  max-width: 500px;
+
+  .confirm-modal-icon {
+    padding-top: 41px;
+    font-size: 280%;
+    color: $green-base;
+    padding-bottom: 20px;
+  }
+
+  .confirm-modal-text {
+    font-size: $font-size-h4;
+    color: $link-color;
+    margin-bottom: $spacer * 2;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-text2 {
+    font-size: $font-size-base;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-buttons {
+    margin-bottom: $spacer;
+    button {
+      margin-right: calc($spacer/2);
+    }
+  }
+
+  .modal-content-confirm-text {
+    margin-bottom: $space-xl;
+    span {
+      text-align: center;
+    }
+  }
+}

public/sass/_grafana.scss

@@ -14,7 +14,6 @@
 // COMPONENTS
 @import 'components/buttons';
 @import 'components/gf-form';
-@import 'components/modals';
 @import 'components/dropdown';
 @import 'components/dashboard_grid';
 

public/sass/components/_modals.scss

@@ -1,169 +0,0 @@
-//
-// Modals
-// --------------------------------------------------
-
-// Background
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  background-color: $modal-backdrop-bg;
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  opacity: 0.7;
-}
-
-// Base modal
-.modal {
-  position: fixed;
-  z-index: $zindex-modal;
-  width: 100%;
-  background: $page-bg;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  background-clip: padding-box;
-  outline: none;
-
-  max-width: 750px;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  top: 10%;
-}
-
-.modal-header {
-  background: $page-header-bg;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.modal-header-title {
-  font-size: $font-size-lg;
-  float: left;
-  padding-top: $space-sm;
-  margin: 0 $space-md;
-}
-
-.modal-header-close {
-  float: right;
-  padding: 9px $spacer;
-}
-
-// Body (where all modal content resides)
-.modal-body {
-  position: relative;
-}
-
-.modal-content {
-  padding: $spacer * 2;
-
-  &--has-scroll {
-    max-height: calc(100vh - 400px);
-    position: relative;
-  }
-}
-
-// Remove bottom margin if need be
-.modal-form {
-  margin-bottom: 0;
-}
-
-// Footer (for actions)
-.modal-footer {
-  padding: 14px 15px 15px;
-  border-top: 1px solid $panel-bg;
-  background-color: $panel-bg;
-  text-align: right; // right align buttons
-  // clear it in case folks use .pull-* classes on buttons
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-.modal--narrow {
-  max-width: 500px;
-}
-
-.confirm-modal {
-  max-width: 500px;
-
-  .confirm-modal-icon {
-    padding-top: 41px;
-    font-size: 280%;
-    color: $green-base;
-    padding-bottom: 20px;
-  }
-
-  .confirm-modal-text {
-    font-size: $font-size-h4;
-    color: $link-color;
-    margin-bottom: $spacer * 2;
-    padding-top: $spacer;
-  }
-
-  .confirm-modal-text2 {
-    font-size: $font-size-base;
-    padding-top: $spacer;
-  }
-
-  .confirm-modal-buttons {
-    margin-bottom: $spacer;
-    button {
-      margin-right: calc($spacer/2);
-    }
-  }
-
-  .modal-content-confirm-text {
-    margin-bottom: $space-xl;
-    span {
-      text-align: center;
-    }
-  }
-}
-
-.share-modal-body {
-  .share-modal-options {
-    margin: 11px 0px 33px 0px;
-    display: inline-block;
-  }
-
-  .share-modal-big-icon {
-    margin-right: 8px;
-    margin-top: -7px;
-  }
-
-  .share-modal-info-text {
-    margin-top: 5px;
-    strong {
-      color: $text-color-emphasis;
-      font-weight: $font-weight-semi-bold;
-    }
-  }
-
-  .share-modal-header {
-    display: flex;
-    margin: 0px 0 22px 0;
-  }
-
-  .share-modal-content {
-    flex-grow: 1;
-  }
-
-  .share-modal-link {
-    max-width: 716px;
-    white-space: nowrap;
-    overflow: hidden;
-    display: block;
-    text-overflow: ellipsis;
-  }
-}