Chore: cleanup util SCSS styles (#92078)

migrate SCSS util classes

.betterer.results

@@ -7810,7 +7810,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/features/variables/adhoc/picker/AdHocFilter.tsx:5381": [

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -23,6 +23,7 @@ import { getRcTimePickerStyles } from './rcTimePicker';
 import { getSkeletonStyles } from './skeletonStyles';
 import { getSlateStyles } from './slate';
 import { getUplotStyles } from './uPlot';
+import { getUtilityClassStyles } from './utilityClasses';
 
 /** @internal */
 export function GlobalStyles() {
@@ -51,6 +52,7 @@ export function GlobalStyles() {
         getSkeletonStyles(theme),
         getSlateStyles(theme),
         getUplotStyles(theme),
+        getUtilityClassStyles(theme),
         getLegacySelectStyles(theme),
       ]}
     />

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

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getUtilityClassStyles(theme: GrafanaTheme2) {
+  return css({
+    '.highlight-word': {
+      color: theme.v1.palette.orange,
+    },
+    '.hide': {
+      display: 'none',
+    },
+    '.show': {
+      display: 'block',
+    },
+    '.invisible': {
+      // can't avoid type assertion here due to !important
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      visibility: 'hidden !important' as 'hidden',
+    },
+    '.absolute': {
+      position: 'absolute',
+    },
+    '.flex-grow-1': {
+      flexGrow: 1,
+    },
+    '.flex-shrink-1': {
+      flexShrink: 1,
+    },
+    '.flex-shrink-0': {
+      flexShrink: 0,
+    },
+    '.center-vh': {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      justifyItems: 'center',
+    },
+  });
+}

public/app/core/components/Login/LoginServiceButtons.tsx

@@ -108,20 +108,17 @@ const getServiceStyles = (theme: GrafanaTheme2) => {
 const LoginDivider = () => {
   const styles = useStyles2(getServiceStyles);
   return (
-    <>
-      <div className={styles.divider.base}>
-        <div>
-          <div className={styles.divider.line} />
-        </div>
-        <div>
-          <span>{!config.disableLoginForm && <span>or</span>}</span>
-        </div>
-        <div>
-          <div className={styles.divider.line} />
-        </div>
+    <div className={styles.divider.base}>
+      <div>
+        <div className={styles.divider.line} />
       </div>
-      <div className="clearfix" />
-    </>
+      <div>
+        <span>{!config.disableLoginForm && <span>or</span>}</span>
+      </div>
+      <div>
+        <div className={styles.divider.line} />
+      </div>
+    </div>
   );
 };
 

public/app/features/query/components/QueryGroupOptions.tsx

@@ -3,7 +3,7 @@ import { PureComponent, ChangeEvent, FocusEvent } from 'react';
 import * as React from 'react';
 
 import { rangeUtil, PanelData, DataSourceApi } from '@grafana/data';
-import { Switch, Input, InlineFormLabel, stylesFactory } from '@grafana/ui';
+import { Input, InlineFormLabel, stylesFactory, InlineFieldRow, InlineSwitch } from '@grafana/ui';
 import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import { config } from 'app/core/config';
 import { QueryGroupOptions } from 'app/types';
@@ -408,10 +408,10 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
           />
         </div>
         {(timeShift || relativeTime) && (
-          <div className="gf-form-inline align-items-center">
+          <InlineFieldRow>
             <InlineFormLabel width={9}>Hide time info</InlineFormLabel>
-            <Switch value={hideTimeOverride} onChange={this.onToggleTimeOverride} />
-          </div>
+            <InlineSwitch value={hideTimeOverride} onChange={this.onToggleTimeOverride} />
+          </InlineFieldRow>
         )}
       </QueryOperationRow>
     );

public/sass/_angular.scss

@@ -2312,3 +2312,42 @@ div.flot-text {
     color: $text-color;
   }
 }
+
+.clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// Close icons
+// --------------------------------------------------
+.close {
+  opacity: 0.2;
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: $line-height-base;
+  color: $black;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+
+  &:hover,
+  &:focus {
+    color: $black;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.4;
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}

public/sass/_grafana.scss

@@ -5,7 +5,6 @@
 @import 'base/font_awesome';
 
 // UTILS
-@import 'utils/utils';
 @import 'utils/widths';
 
 // COMPONENTS

public/sass/utils/_utils.scss

@@ -1,119 +0,0 @@
-.clearfix {
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-.highlight-word {
-  color: $brand-primary;
-}
-
-.emphasis-word {
-  font-weight: $font-weight-semi-bold;
-  color: $text-color-emphasis;
-}
-
-// Close icons
-// --------------------------------------------------
-.close {
-  opacity: 0.2;
-  float: right;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: $line-height-base;
-  color: $black;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-
-  &:hover,
-  &:focus {
-    color: $black;
-    text-decoration: none;
-    cursor: pointer;
-    opacity: 0.4;
-  }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
-
-//
-// Utility classes
-// --------------------------------------------------
-
-// Quick floats
-.pull-right {
-  float: right !important;
-}
-
-.pull-left {
-  float: left !important;
-}
-
-// Toggling content
-.hide {
-  display: none;
-}
-
-.show {
-  display: block;
-}
-
-// Visibility
-.invisible {
-  visibility: hidden !important;
-}
-
-// For Affix plugin
-.affix {
-  position: fixed;
-}
-
-.d-inline-block {
-  display: inline-block;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.flex-grow-1 {
-  flex-grow: 1;
-}
-
-.flex-shrink-1 {
-  flex-shrink: 1;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-.flex-flow-column-nowrap {
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-.center-vh {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  justify-items: center;
-}
-
-.align-items-center {
-  display: flex;
-  flex-direction: row nowrap;
-  align-items: center;
-}