Chore: Migrate some more deprecated SCSS (#89160)

* migrate pull-right/pull-left

* remove fa-rotate and fa-flip

* remove _stacked

* remove font-awesome _list

* remove font-awesome _larger

* remove fa fixed-width

.betterer.results

@@ -1490,33 +1490,16 @@ exports[`better eslint`] = {
     "public/app/features/admin/UserOrgs.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"],
-      [0, 0, 0, "Styles should be written using objects.", "18"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "19"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "20"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "21"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "22"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "23"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "24"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "25"],
-      [0, 0, 0, "Styles should be written using objects.", "26"],
-      [0, 0, 0, "Styles should be written using objects.", "27"],
-      [0, 0, 0, "Styles should be written using objects.", "28"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"]
     ],
     "public/app/features/admin/UserPermissions.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -5417,9 +5400,7 @@ exports[`better eslint`] = {
     ],
     "public/app/features/storage/RootView.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/storage/StorageFolderPage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]

public/app/features/admin/UserOrgs.tsx

@@ -99,30 +99,30 @@ export class UserOrgs extends PureComponent<Props, State> {
 
 const getOrgRowStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    removeButton: css`
-      margin-right: 0.6rem;
-      text-decoration: underline;
-      color: ${theme.v1.palette.blue95};
-    `,
-    label: css`
-      font-weight: 500;
-    `,
-    disabledTooltip: css`
-      display: flex;
-    `,
-    tooltipItem: css`
-      margin-left: 5px;
-    `,
-    tooltipItemLink: css`
-      color: ${theme.v1.palette.blue95};
-    `,
-    rolePickerWrapper: css`
-      display: flex;
-    `,
-    rolePicker: css`
-      flex: auto;
-      margin-right: ${theme.spacing(1)};
-    `,
+    removeButton: css({
+      marginRight: '0.6rem',
+      textDecoration: 'underline',
+      color: theme.v1.palette.blue95,
+    }),
+    label: css({
+      fontWeight: 500,
+    }),
+    disabledTooltip: css({
+      display: 'flex',
+    }),
+    tooltipItem: css({
+      marginLeft: '5px',
+    }),
+    tooltipItemLink: css({
+      color: theme.v1.palette.blue95,
+    }),
+    rolePickerWrapper: css({
+      display: 'flex',
+    }),
+    rolePicker: css({
+      flex: 'auto',
+      marginRight: theme.spacing(1),
+    }),
   };
 });
 
@@ -222,33 +222,29 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps> {
               <td className="width-25">{org.role}</td>
             )}
             <td colSpan={1}>
-              <div className="pull-right">
-                {canChangeRole && (
-                  <ChangeOrgButton
-                    lockMessage={lockMessage}
-                    isExternalUser={isExternalUser}
-                    onChangeRoleClick={this.onChangeRoleClick}
-                    onCancelClick={this.onCancelClick}
-                    onOrgRoleSave={this.onOrgRoleSave}
-                  />
-                )}
-              </div>
+              {canChangeRole && (
+                <ChangeOrgButton
+                  lockMessage={lockMessage}
+                  isExternalUser={isExternalUser}
+                  onChangeRoleClick={this.onChangeRoleClick}
+                  onCancelClick={this.onCancelClick}
+                  onOrgRoleSave={this.onOrgRoleSave}
+                />
+              )}
             </td>
           </>
         )}
         <td colSpan={1}>
-          <div className="pull-right">
-            {canRemoveFromOrg && (
-              <ConfirmButton
-                confirmText="Confirm removal"
-                confirmVariant="destructive"
-                onCancel={this.onCancelClick}
-                onConfirm={this.onOrgRemove}
-              >
-                Remove from organization
-              </ConfirmButton>
-            )}
-          </div>
+          {canRemoveFromOrg && (
+            <ConfirmButton
+              confirmText="Confirm removal"
+              confirmVariant="destructive"
+              onCancel={this.onCancelClick}
+              onConfirm={this.onOrgRemove}
+            >
+              Remove from organization
+            </ConfirmButton>
+          )}
         </td>
       </tr>
     );
@@ -258,15 +254,15 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps> {
 const OrgRow = withTheme2(UnThemedOrgRow);
 
 const getAddToOrgModalStyles = stylesFactory(() => ({
-  modal: css`
-    width: 500px;
-  `,
-  buttonRow: css`
-    text-align: center;
-  `,
-  modalContent: css`
-    overflow: visible;
-  `,
+  modal: css({
+    width: '500px',
+  }),
+  buttonRow: css({
+    textAlign: 'center',
+  }),
+  modalContent: css({
+    overflow: 'visible',
+  }),
 }));
 
 interface AddToOrgModalProps {
@@ -408,20 +404,20 @@ interface ChangeOrgButtonProps {
 }
 
 const getChangeOrgButtonTheme = (theme: GrafanaTheme2) => ({
-  disabledTooltip: css`
-    display: flex;
-  `,
-  tooltipItemLink: css`
-    color: ${theme.v1.palette.blue95};
-  `,
-  lockMessageClass: css`
-    font-style: italic;
-    margin-left: 1.8rem;
-    margin-right: 0.6rem;
-  `,
-  icon: css`
-    line-height: 2;
-  `,
+  disabledTooltip: css({
+    display: 'flex',
+  }),
+  tooltipItemLink: css({
+    color: theme.v1.palette.blue95,
+  }),
+  lockMessageClass: css({
+    fontStyle: 'italic',
+    marginLeft: '1.8rem',
+    marginRight: '0.6rem',
+  }),
+  icon: css({
+    lineHeight: 2,
+  }),
 });
 
 export function ChangeOrgButton({
@@ -511,15 +507,15 @@ export const ExternalUserTooltip = ({ lockMessage }: ExternalUserTooltipProps) =
 };
 
 const getTooltipStyles = (theme: GrafanaTheme2) => ({
-  disabledTooltip: css`
-    display: flex;
-  `,
-  tooltipItemLink: css`
-    color: ${theme.v1.palette.blue95};
-  `,
-  lockMessageClass: css`
-    font-style: italic;
-    margin-left: 1.8rem;
-    margin-right: 0.6rem;
-  `,
+  disabledTooltip: css({
+    display: 'flex',
+  }),
+  tooltipItemLink: css({
+    color: theme.v1.palette.blue95,
+  }),
+  lockMessageClass: css({
+    fontStyle: 'italic',
+    marginLeft: '1.8rem',
+    marginRight: '0.6rem',
+  }),
 });

public/app/features/admin/UserSessions.tsx

@@ -72,17 +72,15 @@ class BaseUserSessions extends PureComponent<Props, State> {
                       <td>{session.clientIp}</td>
                       <td>{`${session.browser} on ${session.os} ${session.osVersion}`}</td>
                       <td>
-                        <div className="pull-right">
-                          {canLogout && (
-                            <ConfirmButton
-                              confirmText="Confirm logout"
-                              confirmVariant="destructive"
-                              onConfirm={this.onSessionRevoke(session.id)}
-                            >
-                              Force logout
-                            </ConfirmButton>
-                          )}
-                        </div>
+                        {canLogout && (
+                          <ConfirmButton
+                            confirmText="Confirm logout"
+                            confirmVariant="destructive"
+                            onConfirm={this.onSessionRevoke(session.id)}
+                          >
+                            Force logout
+                          </ConfirmButton>
+                        )}
                       </td>
                     </tr>
                   ))}

public/app/features/admin/ldap/LdapConnectionStatus.tsx

@@ -32,7 +32,7 @@ export const LdapConnectionStatus = ({ ldapConnectionInfo }: Props) => {
           return serverInfo.cell.value ? (
             <Stack justifyContent="end">
               <Tooltip content="Connection is available">
-                <Icon name="check" className="pull-right" />
+                <Icon name="check" />
               </Tooltip>
             </Stack>
           ) : (

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

@@ -5,7 +5,7 @@ import { SelectableValue } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { getBackendSrv } from '@grafana/runtime';
 import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
-import { Button, ClipboardButton, Field, Input, Modal, RadioButtonGroup } from '@grafana/ui';
+import { Button, ClipboardButton, Field, Input, Modal, RadioButtonGroup, Stack } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { getTrackingSource, shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
 import { getDashboardSnapshotSrv, SnapshotSharingOptions } from 'app/features/dashboard/services/SnapshotSrv';
@@ -231,7 +231,7 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps<ShareSnapshotTab
 
       {/* When snapshot has been created - show link and allow copy/deletion */}
       {snapshotResult.value && (
-        <>
+        <Stack direction="column" gap={0}>
           <Field label={t('share-modal.snapshot.url-label', 'Snapshot URL')}>
             <Input
               data-testid={selectors.CopyUrlInput}
@@ -251,7 +251,7 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps<ShareSnapshotTab
             />
           </Field>
 
-          <div className="pull-right" style={{ padding: '5px' }}>
+          <div style={{ alignSelf: 'flex-end', padding: '5px' }}>
             <Trans i18nKey="share-modal.snapshot.mistake-message">Did you make a mistake? </Trans>&nbsp;
             <Button
               fill="outline"
@@ -264,7 +264,7 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps<ShareSnapshotTab
               <Trans i18nKey="share-modal.snapshot.delete-button">Delete snapshot.</Trans>
             </Button>
           </div>
-        </>
+        </Stack>
       )}
     </>
   );

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 
 import { isEmptyObject, SelectableValue, VariableRefresh } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Button, ClipboardButton, Field, Input, LinkButton, Modal, Select, Spinner } from '@grafana/ui';
+import { Button, ClipboardButton, Field, Input, LinkButton, Modal, Select, Spinner, Stack } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -290,7 +290,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
     const { snapshotUrl } = this.state;
 
     return (
-      <>
+      <Stack direction="column" gap={0}>
         <Field label={t('share-modal.snapshot.url-label', 'Snapshot URL')}>
           <Input
             id="snapshot-url-input"
@@ -304,13 +304,13 @@ export class ShareSnapshot extends PureComponent<Props, State> {
           />
         </Field>
 
-        <div className="pull-right" style={{ padding: '5px' }}>
+        <div style={{ alignSelf: 'flex-end', padding: '5px' }}>
           <Trans i18nKey="share-modal.snapshot.mistake-message">Did you make a mistake? </Trans>&nbsp;
           <LinkButton fill="text" target="_blank" onClick={this.deleteSnapshot}>
             <Trans i18nKey="share-modal.snapshot.delete-button">Delete snapshot.</Trans>
           </LinkButton>
         </div>
-      </>
+      </Stack>
     );
   }
 

public/app/features/storage/RootView.tsx

@@ -83,9 +83,8 @@ export function RootView({ root, onPathChange }: Props) {
         <InlineField grow>
           <FilterInput placeholder="Search Storage" value={searchQuery} onChange={setSearchQuery} />
         </InlineField>
-        <Button className="pull-right" onClick={() => onPathChange('', StorageView.AddRoot)}>
-          Add Root
-        </Button>
+        <div className="page-action-bar__spacer" />
+        <Button onClick={() => onPathChange('', StorageView.AddRoot)}>Add Root</Button>
       </div>
 
       <div>{renderRoots('', roots.base)}</div>
@@ -100,12 +99,12 @@ export function RootView({ root, onPathChange }: Props) {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    secondaryTextColor: css`
-      color: ${theme.colors.text.secondary};
-    `,
-    clickable: css`
-      pointer-events: none;
-    `,
+    secondaryTextColor: css({
+      color: theme.colors.text.secondary,
+    }),
+    clickable: css({
+      pointerEvents: 'none',
+    }),
   };
 }
 

public/app/features/teams/TeamGroupSync.tsx

@@ -121,7 +121,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           )}
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
-            <Button className="pull-right" onClick={this.onToggleAdding} disabled={isReadOnly}>
+            <Button onClick={this.onToggleAdding} disabled={isReadOnly}>
               <Icon name="plus" /> Add group
             </Button>
           )}

public/sass/_angular.scss

@@ -1832,3 +1832,17 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
     }
   }
 }
+
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: calc(4em / 3);
+  line-height: calc(3em / 4);
+  vertical-align: -15%;
+}

public/sass/base/_font_awesome.scss

@@ -7,12 +7,6 @@
 @import './font-awesome/mixins';
 @import './font-awesome/path';
 @import './font-awesome/core';
-@import './font-awesome/larger';
-@import './font-awesome/fixed-width';
-@import './font-awesome/list';
-@import './font-awesome/bordered-pulled';
 @import './font-awesome/animated';
-@import './font-awesome/rotated-flipped';
-@import './font-awesome/stacked';
 @import './font-awesome/icons';
 @import './font-awesome/screen-reader';

public/sass/base/font-awesome/_bordered-pulled.scss

@@ -1,41 +0,0 @@
-// Bordered & Pulled
-// -------------------------
-
-.#{$fa-css-prefix}-border {
-  padding: 0.2em 0.25em 0.15em;
-  border: solid 0.08em $fa-border-color;
-  border-radius: 0.1em;
-}
-
-.#{$fa-css-prefix}-pull-left {
-  float: left;
-}
-.#{$fa-css-prefix}-pull-right {
-  float: right;
-}
-
-.#{$fa-css-prefix} {
-  &.#{$fa-css-prefix}-pull-left {
-    margin-right: 0.3em;
-  }
-  &.#{$fa-css-prefix}-pull-right {
-    margin-left: 0.3em;
-  }
-}
-
-/* Deprecated as of 4.4.0 */
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
-
-.#{$fa-css-prefix} {
-  &.pull-left {
-    margin-right: 0.3em;
-  }
-  &.pull-right {
-    margin-left: 0.3em;
-  }
-}

public/sass/base/font-awesome/_fixed-width.scss

@@ -1,6 +0,0 @@
-// Fixed Width Icons
-// -------------------------
-.#{$fa-css-prefix}-fw {
-  width: calc(18em / 14);
-  text-align: center;
-}

public/sass/base/font-awesome/_larger.scss

@@ -1,21 +0,0 @@
-// Icon Sizes
-// -------------------------
-
-/* makes the font 33% larger relative to the icon container */
-.#{$fa-css-prefix}-lg {
-  font-size: calc(4em / 3);
-  line-height: calc(3em / 4);
-  vertical-align: -15%;
-}
-.#{$fa-css-prefix}-2x {
-  font-size: 2em !important;
-}
-.#{$fa-css-prefix}-3x {
-  font-size: 3em;
-}
-.#{$fa-css-prefix}-4x {
-  font-size: 4em;
-}
-.#{$fa-css-prefix}-5x {
-  font-size: 5em;
-}

public/sass/base/font-awesome/_list.scss

@@ -1,21 +0,0 @@
-// List Icons
-// -------------------------
-
-.#{$fa-css-prefix}-ul {
-  padding-left: 0;
-  margin-left: $fa-li-width;
-  list-style-type: none;
-  > li {
-    position: relative;
-  }
-}
-.#{$fa-css-prefix}-li {
-  position: absolute;
-  left: -$fa-li-width;
-  width: $fa-li-width;
-  top: calc(2em / 14);
-  text-align: center;
-  &.#{$fa-css-prefix}-lg {
-    left: -$fa-li-width + calc(4em / 14);
-  }
-}

public/sass/base/font-awesome/_rotated-flipped.scss

@@ -1,30 +0,0 @@
-// Rotated & Flipped Icons
-// -------------------------
-
-.#{$fa-css-prefix}-rotate-90 {
-  @include fa-icon-rotate(90deg, 1);
-}
-.#{$fa-css-prefix}-rotate-180 {
-  @include fa-icon-rotate(180deg, 2);
-}
-.#{$fa-css-prefix}-rotate-270 {
-  @include fa-icon-rotate(270deg, 3);
-}
-
-.#{$fa-css-prefix}-flip-horizontal {
-  @include fa-icon-flip(-1, 1, 0);
-}
-.#{$fa-css-prefix}-flip-vertical {
-  @include fa-icon-flip(1, -1, 2);
-}
-
-// Hook for IE8-9
-// -------------------------
-
-:root .#{$fa-css-prefix}-rotate-90,
-:root .#{$fa-css-prefix}-rotate-180,
-:root .#{$fa-css-prefix}-rotate-270,
-:root .#{$fa-css-prefix}-flip-horizontal,
-:root .#{$fa-css-prefix}-flip-vertical {
-  filter: none;
-}

public/sass/base/font-awesome/_stacked.scss

@@ -1,27 +0,0 @@
-// Stacked Icons
-// -------------------------
-
-.#{$fa-css-prefix}-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-.#{$fa-css-prefix}-stack-1x,
-.#{$fa-css-prefix}-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-.#{$fa-css-prefix}-stack-1x {
-  line-height: inherit;
-}
-.#{$fa-css-prefix}-stack-2x {
-  font-size: 2em;
-}
-.#{$fa-css-prefix}-inverse {
-  color: $fa-inverse;
-}