diff --git a/eslint.config.js b/eslint.config.js index ece56c24c9d..9a112633e0c 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -48,6 +48,7 @@ module.exports = [ 'scripts/grafana-server/tmp', '!.betterer.eslint.config.js', 'packages/grafana-ui/src/graveyard', // deprecated UI components slated for removal + 'public/build-swagger', // swagger build output ], }, // Conditionally run the betterer rules if enabled in dev's config diff --git a/packages/grafana-eslint-rules/rules/no-border-radius-literal.cjs b/packages/grafana-eslint-rules/rules/no-border-radius-literal.cjs index d145bf970bb..27535a5e76c 100644 --- a/packages/grafana-eslint-rules/rules/no-border-radius-literal.cjs +++ b/packages/grafana-eslint-rules/rules/no-border-radius-literal.cjs @@ -1,4 +1,3 @@ -// @ts-check const { ESLintUtils, AST_NODE_TYPES } = require('@typescript-eslint/utils'); const createRule = ESLintUtils.RuleCreator( @@ -8,36 +7,17 @@ const createRule = ESLintUtils.RuleCreator( const borderRadiusRule = createRule({ create(context) { return { - CallExpression(node) { - if (node.callee.type === AST_NODE_TYPES.Identifier && node.callee.name === 'css') { - const cssObjects = node.arguments.flatMap((node) => { - switch (node.type) { - case AST_NODE_TYPES.ObjectExpression: - return [node]; - case AST_NODE_TYPES.ArrayExpression: - return node.elements.filter((v) => v?.type === AST_NODE_TYPES.ObjectExpression); - default: - return []; - } + [`${AST_NODE_TYPES.CallExpression}[callee.name="css"] ${AST_NODE_TYPES.Property}`]: function (node) { + if ( + node.type === AST_NODE_TYPES.Property && + node.key.type === AST_NODE_TYPES.Identifier && + node.key.name === 'borderRadius' && + node.value.type === AST_NODE_TYPES.Literal + ) { + context.report({ + node, + messageId: 'borderRadiusId', }); - - for (const cssObject of cssObjects) { - if (cssObject?.type === AST_NODE_TYPES.ObjectExpression) { - for (const property of cssObject.properties) { - if ( - property.type === AST_NODE_TYPES.Property && - property.key.type === AST_NODE_TYPES.Identifier && - property.key.name === 'borderRadius' && - property.value.type === AST_NODE_TYPES.Literal - ) { - context.report({ - node: property, - messageId: 'borderRadiusId', - }); - } - } - } - } } }, }; diff --git a/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js b/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js index a4a90c150c6..7410059db50 100644 --- a/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js +++ b/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js @@ -14,6 +14,10 @@ RuleTester.setDefaultConfig({ }, }); +const expectedError = { + messageId: 'borderRadiusId', +}; + const ruleTester = new RuleTester(); ruleTester.run('eslint no-border-radius-literal', noBorderRadiusLiteral, { @@ -32,27 +36,27 @@ ruleTester.run('eslint no-border-radius-literal', noBorderRadiusLiteral, { invalid: [ { code: `css({ borderRadius: '2px' })`, - errors: [ - { - message: 'Prefer using theme.shape.radius tokens instead of literal values.', - }, - ], + errors: [expectedError], }, { code: `css({ lineHeight: 1 }, { borderRadius: '2px' })`, - errors: [ - { - message: 'Prefer using theme.shape.radius tokens instead of literal values.', - }, - ], + errors: [expectedError], }, { code: `css([{ lineHeight: 1 }, { borderRadius: '2px' }])`, - errors: [ - { - message: 'Prefer using theme.shape.radius tokens instead of literal values.', - }, - ], + errors: [expectedError], + }, + { + name: 'nested classes', + code: ` +css({ + foo: { + nested: { + borderRadius: '100px', + }, + }, +})`, + errors: [expectedError], }, ], }); diff --git a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx index 8024dd68d8c..30ad99d8309 100644 --- a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx +++ b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx @@ -302,8 +302,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: 'inline-block', width: '10px', height: '10px', - // eslint-disable-next-line @grafana/no-border-radius-literal - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, }), colorDotDiff: css({ label: 'colorDotDiff', diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index e5e835dd188..6c3823b652e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx @@ -169,7 +169,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => { abbr: { backgroundColor: theme.colors.primary.main, - borderRadius: '100px', + borderRadius: theme.shape.radius.pill, display: 'block', paddingTop: '2px', height: '26px', diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index d130cd6e441..4b3b27fb074 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -1002,6 +1002,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ }, '::-webkit-scrollbar-thumb': { backgroundColor: 'rgba(204, 204, 220, 0.16)', + // eslint-disable-next-line @grafana/no-border-radius-literal borderRadius: '4px', }, '::-webkit-scrollbar-track': { diff --git a/packages/grafana-ui/src/themes/GlobalStyles/card.ts b/packages/grafana-ui/src/themes/GlobalStyles/card.ts index 97d236f2b41..e5eb15cae29 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/card.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/card.ts @@ -21,7 +21,7 @@ export function getCardStyles(theme: GrafanaTheme2) { background: theme.colors.background.secondary, boxShadow: 'none', padding: theme.spacing(2), - borderRadius: '4px', + borderRadius: theme.shape.radius.default, '&:hover': { background: theme.colors.emphasize(theme.colors.background.secondary, 0.03), @@ -158,7 +158,7 @@ export function getCardStyles(theme: GrafanaTheme2) { }, '.card-item': { - borderRadius: '2px', + borderRadius: theme.shape.radius.default, }, '.card-item-header': { diff --git a/packages/grafana-ui/src/themes/GlobalStyles/code.ts b/packages/grafana-ui/src/themes/GlobalStyles/code.ts index 78c45452a59..b22d6c84c24 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/code.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/code.ts @@ -10,7 +10,7 @@ export function getCodeStyles(theme: GrafanaTheme2) { backgroundColor: theme.colors.background.primary, color: theme.colors.text.primary, border: `1px solid ${theme.colors.border.medium}`, - borderRadius: '4px', + borderRadius: theme.shape.radius.default, }, code: { diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts index 60eb0a50adf..a5ef166844f 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts @@ -113,7 +113,7 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) { '&:is(:hover),&:not(:hover)': { outline: `2px solid ${theme.colors.primary.border}`, outlineOffset: '0px', - borderRadius: '2px', + borderRadius: theme.shape.radius.default, }, }, diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts index 8ffb3e250b0..df5ff83e056 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts @@ -142,7 +142,7 @@ export function getDashDiffStyles(theme: GrafanaTheme2) { '.diff-label': { backgroundColor: theme.colors.action.hover, - borderRadius: '3px', + borderRadius: theme.shape.radius.default, color: theme.colors.text.primary, display: 'inline', fontSize: `${theme.typography.fontSize}px`, diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index abe6ac1560a..c8409c1db46 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -276,6 +276,7 @@ export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?: // 2. Correct font properties not being inherited. // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 'button, input, optgroup, select, textarea': { + // eslint-disable-next-line @grafana/no-border-radius-literal borderRadius: 0, color: 'inherit', font: 'inherit', diff --git a/packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts b/packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts index 920b9bcb342..602d5d51496 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts @@ -66,7 +66,7 @@ export function getFilterTableStyles(theme: GrafanaTheme2) { '.filter-table__avatar': { width: '25px', height: '25px', - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, }, '&--hover': { diff --git a/public/app/features/alerting/unified/components/AlertStateDot.tsx b/public/app/features/alerting/unified/components/AlertStateDot.tsx index 67e20b5b555..ad6f8308f5e 100644 --- a/public/app/features/alerting/unified/components/AlertStateDot.tsx +++ b/public/app/features/alerting/unified/components/AlertStateDot.tsx @@ -32,8 +32,7 @@ const getDotStyles = (theme: GrafanaTheme2, props: DotStylesProps) => { width: size, height: size, - // eslint-disable-next-line @grafana/no-border-radius-literal - borderRadius: '100%', + borderRadius: theme.shape.radius.circle, backgroundColor: theme.colors.secondary.main, outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`, diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoint.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoint.tsx index dfe2d07589c..8b5ef02c827 100644 --- a/public/app/features/alerting/unified/components/contact-points/ContactPoint.tsx +++ b/public/app/features/alerting/unified/components/contact-points/ContactPoint.tsx @@ -273,7 +273,7 @@ const ContactPointReceiverMetadataRow = ({ diagnostics, sendingResolved }: Conta const getStyles = (theme: GrafanaTheme2) => ({ contactPointWrapper: css({ - borderRadius: `${theme.shape.radius.default}`, + borderRadius: theme.shape.radius.default, border: `solid 1px ${theme.colors.border.weak}`, borderBottom: 'none', }), diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx index f761bc684a6..5624830b261 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx @@ -86,35 +86,6 @@ export const TransformationEditor = ({ const getStyles = (theme: GrafanaTheme2) => { return { - title: css({ - display: 'flex', - padding: '4px 8px 4px 8px', - position: 'relative', - height: '35px', - // eslint-disable-next-line @grafana/no-border-radius-literal - borderRadius: '4px 4px 0 0', - flexWrap: 'nowrap', - justifyContent: 'space-between', - alignItems: 'center', - }), - name: css({ - fontWeight: theme.typography.fontWeightMedium, - color: theme.colors.primary.text, - }), - iconRow: css({ - display: 'flex', - }), - icon: css({ - background: 'transparent', - border: 'none', - boxShadow: 'none', - cursor: 'pointer', - color: theme.colors.text.secondary, - marginLeft: theme.spacing(1), - '&:hover': { - color: theme.colors.text.primary, - }, - }), debugWrapper: css({ display: 'flex', flexDirection: 'row', diff --git a/public/app/plugins/panel/canvas/globalStyles.ts b/public/app/plugins/panel/canvas/globalStyles.ts index a61d39d39d5..a40387c5b2a 100644 --- a/public/app/plugins/panel/canvas/globalStyles.ts +++ b/public/app/plugins/panel/canvas/globalStyles.ts @@ -157,7 +157,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) { '&.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled': { position: 'relative', background: '#ccc', - borderRadius: '3px', + borderRadius: theme.shape.radius.default, '&::after': { position: 'absolute', top: '5px', diff --git a/public/app/plugins/panel/datagrid/utils.ts b/public/app/plugins/panel/datagrid/utils.ts index a32c1df5383..2fb003578fb 100644 --- a/public/app/plugins/panel/datagrid/utils.ts +++ b/public/app/plugins/panel/datagrid/utils.ts @@ -263,6 +263,7 @@ export const getStyles = (theme: GrafanaTheme2, isResizeInProgress: boolean) => background: theme.colors.background.primary, }, '::-webkit-scrollbar-thumb': { + // eslint-disable-next-line @grafana/no-border-radius-literal borderRadius: '10px', }, '::-webkit-scrollbar-corner': {