Chore: Migrate some more scss styles (#88484)

* migrate some more styles

* migrate typeahead styles

* migrate tagsinput styles

.betterer.results

@@ -1232,10 +1232,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "5"],
       [0, 0, 0, "Styles should be written using objects.", "6"]
     ],
-    "public/app/core/components/TagFilter/TagOption.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/TimeSeries/utils.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],

packages/grafana-ui/src/components/Typeahead/Typeahead.tsx

@@ -1,9 +1,10 @@
+import { css } from '@emotion/css';
 import { isEqual } from 'lodash';
 import React, { createRef, PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import { FixedSizeList } from 'react-window';
 
-import { ThemeContext } from '@grafana/data';
+import { GrafanaTheme2, ThemeContext } from '@grafana/data';
 
 import { CompletionItem, CompletionItemGroup, CompletionItemKind } from '../../types/completion';
 import { flattenGroupItems, calculateLongestLabel, calculateListSizes } from '../../utils/typeahead';
@@ -157,13 +158,14 @@ export class Typeahead extends PureComponent<Props, State> {
   render() {
     const { prefix, isOpen = false, origin } = this.props;
     const { allItems, listWidth, listHeight, itemHeight, hoveredItem, typeaheadIndex } = this.state;
+    const styles = getStyles(this.context);
 
     const showDocumentation = hoveredItem || typeaheadIndex;
     const documentationItem = allItems[hoveredItem ? hoveredItem : typeaheadIndex || 0];
 
     return (
       <Portal origin={origin} isOpen={isOpen} style={this.menuPosition}>
-        <ul role="menu" className="typeahead" data-testid="typeahead">
+        <ul role="menu" className={styles.typeahead} data-testid="typeahead">
           <FixedSizeList
             ref={this.listRef}
             itemCount={allItems.length}
@@ -238,3 +240,14 @@ class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
     return null;
   }
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  typeahead: css({
+    maxHeight: 300,
+    overflowY: 'auto',
+
+    strong: {
+      color: theme.v1.palette.yellow,
+    },
+  }),
+});

public/app/core/components/Footer/Footer.tsx

@@ -1,8 +1,9 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { LinkTarget } from '@grafana/data';
+import { GrafanaTheme2, LinkTarget } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Icon, IconName } from '@grafana/ui';
+import { Icon, IconName, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 export interface FooterLink {
@@ -100,13 +101,14 @@ export interface Props {
 
 export const Footer = React.memo(({ customLinks, hideEdition }: Props) => {
   const links = (customLinks || getFooterLinks()).concat(getVersionLinks(hideEdition));
+  const styles = useStyles2(getStyles);
 
   return (
-    <footer className="footer">
+    <footer className={styles.footer}>
       <div className="text-center">
-        <ul>
+        <ul className={styles.list}>
           {links.map((link, index) => (
-            <li key={index}>
+            <li className={styles.listItem} key={index}>
               <FooterItem item={link} />
             </li>
           ))}
@@ -133,3 +135,37 @@ function FooterItem({ item }: { item: FooterLink }) {
     </>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  footer: css({
+    ...theme.typography.bodySmall,
+    color: theme.colors.text.primary,
+    display: 'block',
+    padding: theme.spacing(2, 0),
+    position: 'relative',
+    width: '98%',
+
+    'a:hover': {
+      color: theme.colors.text.maxContrast,
+      textDecoration: 'underline',
+    },
+
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+  }),
+  list: css({
+    listStyle: 'none',
+  }),
+  listItem: css({
+    display: 'inline-block',
+    '&:after': {
+      content: "' | '",
+      padding: theme.spacing(0, 1),
+    },
+    '&:last-child:after': {
+      content: "''",
+      paddingLeft: 0,
+    },
+  }),
+});

public/app/core/components/TagFilter/TagBadge.tsx

@@ -22,7 +22,7 @@ export class TagBadge extends React.Component<Props> {
       backgroundColor: color,
     };
 
-    const countLabel = count !== 0 && <span className="tag-count-label">{`(${count})`}</span>;
+    const countLabel = count !== 0 && <span style={{ marginLeft: '3px' }}>{`(${count})`}</span>;
 
     return (
       <span className={`label label-tag`} style={tagStyle}>

public/app/core/components/TagFilter/TagOption.tsx

@@ -18,7 +18,7 @@ export const TagOption = ({ data, className, label, isFocused, innerProps }: Opt
 
   return (
     <div className={cx(styles.option, isFocused && styles.optionFocused)} aria-label="Tag option" {...innerProps}>
-      <div className={`tag-filter-option ${className || ''}`}>
+      <div className={cx(styles.optionInner, className)}>
         {typeof label === 'string' ? <TagBadge label={label} removeIcon={false} count={data.count ?? 0} /> : label}
       </div>
     </div>
@@ -27,22 +27,30 @@ export const TagOption = ({ data, className, label, isFocused, innerProps }: Opt
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    option: css`
+    option: css({
-      padding: 8px;
+      padding: theme.spacing(1),
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-      cursor: pointer;
+      cursor: 'pointer',
-      border-left: 2px solid transparent;
+      borderLeft: '2px solid transparent',
-      &:hover {
+      '&:hover': {
-        background: ${theme.colors.background.secondary};
+        background: theme.colors.background.secondary,
-      }
+      },
-    `,
+    }),
-    optionFocused: css`
+    optionFocused: css({
-      background: ${theme.colors.background.secondary};
+      background: theme.colors.background.secondary,
-      border-style: solid;
+      borderStyle: 'solid',
-      border-top: 0;
+      borderTop: 0,
-      border-right: 0;
+      borderRight: 0,
-      border-bottom: 0;
+      borderBottom: 0,
-      border-left-width: 2px;
+      borderLeftWidth: '2px',
-    `,
+    }),
+    optionInner: css({
+      position: 'relative',
+      textAlign: 'left',
+      width: '100%',
+      display: 'block',
+      cursor: 'pointer',
+      padding: '2px 0',
+    }),
   };
 };

public/sass/_angular.scss

@@ -961,3 +961,204 @@ div.editor-option {
 div.editor-option label {
   display: block;
 }
+
+@font-face {
+  font-family: 'grafana-icons';
+  src: url('../fonts/grafana-icons.eot?okx5td');
+  src:
+    url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
+    url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
+    url('../fonts/grafana-icons.woff?okx5td') format('woff'),
+    url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon-gf {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'grafana-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  vertical-align: middle;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-gf-fw {
+  width: 1.2857142857em;
+  text-align: center;
+}
+.inline-icon-gf {
+  vertical-align: middle;
+}
+.icon-gf-raintank_wordmark:before {
+  content: '\e600';
+}
+.micon-gf-raintank_icn:before {
+  content: '\e601';
+}
+.icon-gf-raintank_r-icn:before {
+  content: '\e905';
+}
+.icon-gf-check-alt:before {
+  content: '\e603';
+}
+.icon-gf-check:before {
+  content: '\e604';
+}
+.icon-gf-collector:before {
+  content: '\e605';
+}
+.icon-gf-dashboard:before {
+  content: '\e606';
+}
+.icon-gf-panel:before {
+  content: '\e904';
+}
+.icon-gf-endpoint-tiny:before {
+  content: '\e608';
+}
+.icon-gf-critical:before {
+  content: '\e610';
+}
+.icon-gf-online:before {
+  content: '\e611';
+}
+.icon-gf-event-error:before {
+  content: '\e623';
+}
+.icon-gf-event:before {
+  content: '\e624';
+}
+.icon-gf-sadface:before {
+  content: '\e907';
+}
+.icon-gf-private-collector:before {
+  content: '\e612';
+}
+.icon-gf-alert:before {
+  content: '\e61f';
+}
+.icon-gf-alert-disabled:before {
+  content: '\e621';
+}
+.icon-gf-refresh:before {
+  content: '\e613';
+}
+.icon-gf-save:before {
+  content: '\e614';
+}
+.icon-gf-share:before {
+  content: '\e616';
+}
+.icon-gf-star:before {
+  content: '\e617';
+}
+.icon-gf-search:before {
+  content: '\e618';
+}
+.icon-gf-settings:before {
+  content: '\e615';
+}
+.icon-gf-add:before {
+  content: '\e619';
+}
+.icon-gf-remove:before {
+  content: '\e61a';
+}
+.icon-gf-video:before {
+  content: '\e61b';
+}
+.icon-gf-bulk_action:before {
+  content: '\e61c';
+}
+.icon-gf-grabber:before {
+  content: '\e90b';
+}
+.icon-gf-users:before {
+  content: '\e622';
+}
+.icon-gf-globe:before {
+  content: '\e61d';
+}
+.icon-gf-snapshot:before {
+  content: '\e61e';
+}
+.icon-gf-play-grafana-icon:before {
+  content: '\e629';
+}
+.icon-gf-grafana-icon:before {
+  content: '\e625';
+}
+.icon-gf-email:before {
+  content: '\e628';
+}
+.icon-gf-stopwatch:before {
+  content: '\e626';
+}
+.icon-gf-skull:before {
+  content: '\e900';
+}
+.icon-gf-probe:before {
+  content: '\e901';
+}
+.icon-gf-apps:before {
+  content: '\e902';
+}
+
+.bootstrap-tagsinput {
+  display: inline-block;
+  padding: 0 0 0 6px;
+  vertical-align: middle;
+  max-width: 100%;
+  line-height: 22px;
+  background-color: $input-bg;
+  border: 1px solid $input-border-color;
+
+  input {
+    display: inline-block;
+    border: none;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    width: 70px;
+    box-sizing: border-box;
+
+    &.gf-form-input--has-help-icon {
+      padding-right: $space-xl;
+    }
+  }
+
+  .tag {
+    margin-right: 2px;
+    color: $white;
+
+    [data-role='remove'] {
+      margin-left: 8px;
+      cursor: pointer;
+
+      &::after {
+        content: 'x';
+        padding: 0px 2px;
+      }
+
+      &:hover {
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.2),
+          0 1px 2px rgba(0, 0, 0, 0.05);
+
+        &:active {
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+        }
+      }
+    }
+  }
+}

public/sass/_grafana.scss

@@ -30,14 +30,11 @@
 @import 'components/switch';
 @import 'components/tags';
 @import 'components/submenu';
-@import 'components/tagsinput';
 @import 'components/gf-form';
 @import 'components/filter-table';
 @import 'components/slate_editor';
-@import 'components/typeahead';
 @import 'components/modals';
 @import 'components/dropdown';
-@import 'components/footer';
 @import 'components/infobox';
 @import 'components/drop';
 @import 'components/query_editor';

public/sass/base/_fonts.scss

@@ -1,5 +1,4 @@
 @import 'font_awesome';
-@import 'grafana_icons';
 
 /* latin */
 @font-face {

public/sass/base/_grafana_icons.scss

@@ -1,150 +0,0 @@
-@font-face {
-  font-family: 'grafana-icons';
-  src: url('../fonts/grafana-icons.eot?okx5td');
-  src:
-    url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
-    url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
-    url('../fonts/grafana-icons.woff?okx5td') format('woff'),
-    url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.icon-gf {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'grafana-icons' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  display: inline-block;
-  vertical-align: middle;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-gf-fw {
-  width: 1.2857142857em;
-  text-align: center;
-}
-.inline-icon-gf {
-  vertical-align: middle;
-}
-.icon-gf-raintank_wordmark:before {
-  content: '\e600';
-}
-.micon-gf-raintank_icn:before {
-  content: '\e601';
-}
-.icon-gf-raintank_r-icn:before {
-  content: '\e905';
-}
-.icon-gf-check-alt:before {
-  content: '\e603';
-}
-.icon-gf-check:before {
-  content: '\e604';
-}
-.icon-gf-collector:before {
-  content: '\e605';
-}
-.icon-gf-dashboard:before {
-  content: '\e606';
-}
-.icon-gf-panel:before {
-  content: '\e904';
-}
-.icon-gf-endpoint-tiny:before {
-  content: '\e608';
-}
-.icon-gf-critical:before {
-  content: '\e610';
-}
-.icon-gf-online:before {
-  content: '\e611';
-}
-.icon-gf-event-error:before {
-  content: '\e623';
-}
-.icon-gf-event:before {
-  content: '\e624';
-}
-.icon-gf-sadface:before {
-  content: '\e907';
-}
-.icon-gf-private-collector:before {
-  content: '\e612';
-}
-.icon-gf-alert:before {
-  content: '\e61f';
-}
-.icon-gf-alert-disabled:before {
-  content: '\e621';
-}
-.icon-gf-refresh:before {
-  content: '\e613';
-}
-.icon-gf-save:before {
-  content: '\e614';
-}
-.icon-gf-share:before {
-  content: '\e616';
-}
-.icon-gf-star:before {
-  content: '\e617';
-}
-.icon-gf-search:before {
-  content: '\e618';
-}
-.icon-gf-settings:before {
-  content: '\e615';
-}
-.icon-gf-add:before {
-  content: '\e619';
-}
-.icon-gf-remove:before {
-  content: '\e61a';
-}
-.icon-gf-video:before {
-  content: '\e61b';
-}
-.icon-gf-bulk_action:before {
-  content: '\e61c';
-}
-.icon-gf-grabber:before {
-  content: '\e90b';
-}
-.icon-gf-users:before {
-  content: '\e622';
-}
-.icon-gf-globe:before {
-  content: '\e61d';
-}
-.icon-gf-snapshot:before {
-  content: '\e61e';
-}
-.icon-gf-play-grafana-icon:before {
-  content: '\e629';
-}
-.icon-gf-grafana-icon:before {
-  content: '\e625';
-}
-.icon-gf-email:before {
-  content: '\e628';
-}
-.icon-gf-stopwatch:before {
-  content: '\e626';
-}
-.icon-gf-skull:before {
-  content: '\e900';
-}
-.icon-gf-probe:before {
-  content: '\e901';
-}
-.icon-gf-apps:before {
-  content: '\e902';
-}

public/sass/components/_footer.scss

@@ -1,69 +0,0 @@
-.page-dashboard .footer {
-  display: none;
-}
-
-.footer {
-  color: $footer-link-color;
-  padding: $space-md 0 $space-md 0;
-  font-size: $font-size-sm;
-  position: relative;
-  width: 98%; /* was causing horiz scrollbars - need to examine */
-
-  a {
-    color: $footer-link-color;
-
-    &:hover {
-      color: $footer-link-hover;
-      text-decoration: underline;
-    }
-
-    i {
-      display: inline-block;
-      padding-right: $space-xxs;
-    }
-  }
-
-  ul {
-    list-style: none;
-  }
-
-  li {
-    display: inline-block;
-
-    &::after {
-      content: ' | ';
-      padding: 0 $space-sm;
-    }
-  }
-
-  li:last-child {
-    &::after {
-      padding-left: 0;
-      content: '';
-    }
-  }
-}
-
-.login-page {
-  .footer {
-    display: block;
-    padding: $space-md 0 $space-md 0;
-    color: $text-color;
-
-    a {
-      color: $text-color;
-
-      &:hover {
-        color: $text-color-strong;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .login-page {
-    .footer {
-      display: none;
-    }
-  }
-}

public/sass/components/_tagsinput.scss

@@ -1,90 +0,0 @@
-.bootstrap-tagsinput {
-  display: inline-block;
-  padding: 0 0 0 6px;
-  vertical-align: middle;
-  max-width: 100%;
-  line-height: 22px;
-  background-color: $input-bg;
-  border: 1px solid $input-border-color;
-
-  input {
-    display: inline-block;
-    border: none;
-    margin: 0px;
-    border-radius: 0;
-    padding: 8px 6px;
-    height: 100%;
-    width: 70px;
-    box-sizing: border-box;
-
-    &.gf-form-input--has-help-icon {
-      padding-right: $space-xl;
-    }
-  }
-
-  .tag {
-    margin-right: 2px;
-    color: $white;
-
-    [data-role='remove'] {
-      margin-left: 8px;
-      cursor: pointer;
-
-      &::after {
-        content: 'x';
-        padding: 0px 2px;
-      }
-
-      &:hover {
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.2),
-          0 1px 2px rgba(0, 0, 0, 0.05);
-
-        &:active {
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        }
-      }
-    }
-  }
-}
-
-.tag-filter {
-  flex-grow: 1;
-
-  .label-tag {
-    margin-left: 6px;
-    cursor: pointer;
-
-    .fa.fa-remove {
-      margin-right: 3px;
-    }
-  }
-}
-
-.tag-filter-option {
-  position: relative;
-  text-align: left;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  cursor: pointer;
-  padding: 2px 0;
-}
-
-.tag-count-label {
-  margin-left: 3px;
-}
-
-.tag-filter-values {
-  display: inline;
-
-  .label-tag {
-    margin: 6px 6px 0px 0px;
-    font-size: 11px;
-    cursor: pointer;
-
-    .fa.fa-remove {
-      margin-right: 3px;
-    }
-  }
-}

public/sass/components/_typeahead.scss

@@ -1,9 +0,0 @@
-// typeahead max height
-.typeahead {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.typeahead strong {
-  color: $yellow;
-}

public/sass/fonts.scss

@@ -1 +0,0 @@
-@import 'base/fonts';