Chore: migrate `_grid` SCSS styles to emotion globals (#92986)

migrate _grid styles to emotion globals

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

@@ -163,5 +163,29 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
       zIndex: theme.zIndex.typeahead,
     },
     ...widthMixin(theme, 30),
+    '.row': {
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginLeft: `calc(${theme.spacing(4)} / -2)`,
+      marginRight: `calc(${theme.spacing(4)} / -2)`,
+    },
+    '.container': {
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      paddingLeft: `calc(${theme.spacing(4)} / 2)`,
+      paddingRight: `calc(${theme.spacing(4)} / 2)`,
+      [theme.breakpoints.up('sm')]: {
+        maxWidth: theme.breakpoints.values.sm,
+      },
+      [theme.breakpoints.up('md')]: {
+        maxWidth: theme.breakpoints.values.md,
+      },
+      [theme.breakpoints.up('lg')]: {
+        maxWidth: theme.breakpoints.values.lg,
+      },
+      [theme.breakpoints.up('xl')]: {
+        maxWidth: theme.breakpoints.values.xl,
+      },
+    },
   });
 }

public/sass/_angular.scss

@@ -4,6 +4,7 @@
 @use 'sass:map';
 @use 'sass:color';
 @use 'sass:list';
+@use 'sass:math';
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
@@ -29,6 +30,24 @@
   font-family: $font-family-monospace;
 }
 
+@mixin make-col($size, $columns: $grid-columns) {
+  position: relative;
+  min-height: 1px;
+  padding-right: calc($grid-gutter-width / 2);
+  padding-left: calc($grid-gutter-width / 2);
+
+  @if $enable-flex {
+    flex: 0 0 math.percentage(calc($size / $columns));
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: math.percentage(calc($size / $columns));
+  } @else {
+    float: left;
+    width: math.percentage(calc($size / $columns));
+  }
+}
+
 .edit-tab-content {
   flex-grow: 1;
   min-width: 0;
@@ -2606,3 +2625,13 @@ input[type='checkbox'].cr1:checked + label {
 .max-width {
   width: 100%;
 }
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @for $i from 1 through $grid-columns {
+      .col-#{$breakpoint}-#{$i} {
+        @include make-col($i, $grid-columns);
+      }
+    }
+  }
+}

public/sass/_grafana.scss

@@ -18,7 +18,6 @@ body {
 }
 
 // BASE
-@import 'base/grid';
 @import 'base/font_awesome';
 
 // ANGULAR

public/sass/base/_grid.scss

@@ -1,174 +0,0 @@
-@use 'sass:math';
-@use 'sass:map';
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  $min: if(map.get($breakpoints, $name) != 0, map.get($breakpoints, $name), null);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-container($gutter: $grid-gutter-width) {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: calc($gutter / 2);
-  padding-right: calc($gutter / 2);
-  @if not $enable-flex {
-    &::after {
-      content: '';
-      display: table;
-      clear: both;
-    }
-  }
-}
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
-    }
-  }
-}
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: wrap;
-  } @else {
-    &::after {
-      content: '';
-      display: table;
-      clear: both;
-    }
-  }
-  margin-left: calc($gutter / -2);
-  margin-right: calc($gutter / -2);
-}
-
-@mixin make-col($size, $columns: $grid-columns) {
-  position: relative;
-  min-height: 1px;
-  padding-right: calc($grid-gutter-width / 2);
-  padding-left: calc($grid-gutter-width / 2);
-
-  @if $enable-flex {
-    flex: 0 0 math.percentage(calc($size / $columns));
-    // Add a `max-width` to ensure content within each column does not blow out
-    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-    // do not appear to require this.
-    max-width: math.percentage(calc($size / $columns));
-  } @else {
-    float: left;
-    width: math.percentage(calc($size / $columns));
-  }
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: math.percentage(calc($size / $columns));
-}
-
-@mixin make-col-push($size, $columns: $grid-columns) {
-  left: if($size > 0, math.percentage(calc($size / $columns)), auto);
-}
-
-@mixin make-col-pull($size, $columns: $grid-columns) {
-  right: if($size > 0, math.percentage(calc($size / $columns)), auto);
-}
-
-@mixin make-col-modifier($type, $size, $columns) {
-  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
-  @if $type == push {
-    @include make-col-push($size, $columns);
-  } @else if $type == pull {
-    @include make-col-pull($size, $columns);
-  } @else if $type == offset {
-    @include make-col-offset($size, $columns);
-  }
-}
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  $breakpoint-counter: 0;
-  @each $breakpoint in map-keys($breakpoints) {
-    $breakpoint-counter: ($breakpoint-counter + 1);
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $enable-flex {
-        .col-#{$breakpoint} {
-          position: relative;
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-          min-height: 1px;
-          padding-right: calc($grid-gutter-width / 2);
-          padding-left: calc($grid-gutter-width / 2);
-        }
-      }
-
-      @for $i from 1 through $columns {
-        .col-#{$breakpoint}-#{$i} {
-          @include make-col($i, $columns);
-        }
-      }
-
-      @each $modifier in (pull, push) {
-        @for $i from 0 through $columns {
-          .#{$modifier}-#{$breakpoint}-#{$i} {
-            @include make-col-modifier($modifier, $i, $columns);
-          }
-        }
-      }
-
-      // `$columns - 1` because offsetting by the width of an entire row isn't possible
-      @for $i from 0 through ($columns - 1) {
-        @if $breakpoint-counter != 1 or $i != 0 {
-          // Avoid emitting useless .col-xs-offset-0
-          .offset-#{$breakpoint}-#{$i} {
-            @include make-col-modifier(offset, $i, $columns);
-          }
-        }
-      }
-    }
-  }
-}
-
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-.container {
-  @include make-container();
-  @include make-container-max-widths();
-}
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
-
-.container-fluid {
-  @include make-container();
-}
-
-// Row
-//
-// Rows contain and clear the floats of your columns.
-
-.row {
-  @include make-row();
-}
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@include make-grid-columns();