diff --git a/.betterer.results b/.betterer.results index 2cdb78262b7..0266d833b36 100644 --- a/.betterer.results +++ b/.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 ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "2"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "6"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "7"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "8"], [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "13"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "19"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "20"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "21"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "22"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "23"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "24"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "10"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "11"] ], "public/app/features/admin/UserPermissions.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -5417,9 +5400,7 @@ exports[`better eslint`] = { ], "public/app/features/storage/RootView.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "1"] ], "public/app/features/storage/StorageFolderPage.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx index 644d42d7eb7..2cfa498ebfd 100644 --- a/public/app/features/admin/UserOrgs.tsx +++ b/public/app/features/admin/UserOrgs.tsx @@ -99,30 +99,30 @@ export class UserOrgs extends PureComponent { 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 { {org.role} )} -
- {canChangeRole && ( - - )} -
+ {canChangeRole && ( + + )} )} -
- {canRemoveFromOrg && ( - - Remove from organization - - )} -
+ {canRemoveFromOrg && ( + + Remove from organization + + )} ); @@ -258,15 +254,15 @@ class UnThemedOrgRow extends PureComponent { 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', + }), }); diff --git a/public/app/features/admin/UserSessions.tsx b/public/app/features/admin/UserSessions.tsx index 1129dc7201f..465072ba34d 100644 --- a/public/app/features/admin/UserSessions.tsx +++ b/public/app/features/admin/UserSessions.tsx @@ -72,17 +72,15 @@ class BaseUserSessions extends PureComponent { {session.clientIp} {`${session.browser} on ${session.os} ${session.osVersion}`} -
- {canLogout && ( - - Force logout - - )} -
+ {canLogout && ( + + Force logout + + )} ))} diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx index bf4fc842fc8..2616a50436f 100644 --- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx +++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx @@ -32,7 +32,7 @@ export const LdapConnectionStatus = ({ ldapConnectionInfo }: Props) => { return serverInfo.cell.value ? ( - + ) : ( diff --git a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx index a039db09064..5331b22a93b 100644 --- a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx +++ b/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 + -
+
Did you make a mistake?  
- + )} ); diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx index e3309e2547e..9ef4546c674 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx +++ b/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 { const { snapshotUrl } = this.state; return ( - <> + { /> -
+
Did you make a mistake?   Delete snapshot.
- + ); } diff --git a/public/app/features/storage/RootView.tsx b/public/app/features/storage/RootView.tsx index c6f855a7024..332f2e503da 100644 --- a/public/app/features/storage/RootView.tsx +++ b/public/app/features/storage/RootView.tsx @@ -83,9 +83,8 @@ export function RootView({ root, onPathChange }: Props) { - +
+
{renderRoots('', roots.base)}
@@ -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', + }), }; } diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index 5dd0e5f8e8d..3d8b2bbca30 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -121,7 +121,7 @@ export class TeamGroupSync extends PureComponent { )}
{groups.length > 0 && ( - )} diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index d5b8abf0bcd..dbe49f7b96d 100644 --- a/public/sass/_angular.scss +++ b/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%; +} diff --git a/public/sass/base/_font_awesome.scss b/public/sass/base/_font_awesome.scss index c3521338143..59bf17154fa 100644 --- a/public/sass/base/_font_awesome.scss +++ b/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'; diff --git a/public/sass/base/font-awesome/_bordered-pulled.scss b/public/sass/base/font-awesome/_bordered-pulled.scss deleted file mode 100644 index c9b6b38ea6f..00000000000 --- a/public/sass/base/font-awesome/_bordered-pulled.scss +++ /dev/null @@ -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; - } -} diff --git a/public/sass/base/font-awesome/_fixed-width.scss b/public/sass/base/font-awesome/_fixed-width.scss deleted file mode 100644 index 7102bbac0ca..00000000000 --- a/public/sass/base/font-awesome/_fixed-width.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Fixed Width Icons -// ------------------------- -.#{$fa-css-prefix}-fw { - width: calc(18em / 14); - text-align: center; -} diff --git a/public/sass/base/font-awesome/_larger.scss b/public/sass/base/font-awesome/_larger.scss deleted file mode 100644 index 9e47f7720bb..00000000000 --- a/public/sass/base/font-awesome/_larger.scss +++ /dev/null @@ -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; -} diff --git a/public/sass/base/font-awesome/_list.scss b/public/sass/base/font-awesome/_list.scss deleted file mode 100644 index 728bc3fe678..00000000000 --- a/public/sass/base/font-awesome/_list.scss +++ /dev/null @@ -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); - } -} diff --git a/public/sass/base/font-awesome/_rotated-flipped.scss b/public/sass/base/font-awesome/_rotated-flipped.scss deleted file mode 100644 index 07c11a8b299..00000000000 --- a/public/sass/base/font-awesome/_rotated-flipped.scss +++ /dev/null @@ -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; -} diff --git a/public/sass/base/font-awesome/_stacked.scss b/public/sass/base/font-awesome/_stacked.scss deleted file mode 100644 index 33fbe76979c..00000000000 --- a/public/sass/base/font-awesome/_stacked.scss +++ /dev/null @@ -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; -}