From 59b8dff7e4529767f583ddcb4d2e2c5f7ebe02b1 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Thu, 25 Sep 2025 17:06:47 +0100 Subject: [PATCH] Theme: Border radius nit fixes (#111625) * increase border radius on login box * increase command palette border radius * decrease TagBadge border radius * increase border radius for alerting homepage containers * increase border radius of EnterpriseAuthFeaturesCard * increase border radius on cloud migration containers * fix border-radius on edit alert rule page * fix overflow on notification templates page * add border radius to EmptyArea * add border radius to image preview in Carousel component * add border radius to PluginDetailsPanel * add border radius to licensechrome * add border radius to empty alerts state * apply container styles on top of default styles --- .../src/components/Carousel/Carousel.tsx | 1 + .../src/components/Monaco/CodeEditor.tsx | 5 +++-- .../app/core/components/Login/LoginLayout.tsx | 2 +- .../core/components/TagFilter/TagBadge.tsx | 2 +- .../admin/EnterpriseAuthFeaturesCard.tsx | 2 +- public/app/features/admin/LicenseChrome.tsx | 2 ++ .../alerting/unified/AlertsFolderView.tsx | 1 + .../alerting/unified/components/EmptyArea.tsx | 1 + .../components/expressions/Expression.tsx | 1 + .../rule-editor/RuleEditorSection.tsx | 2 +- .../features/alerting/unified/home/AdCard.tsx | 2 +- .../alerting/unified/home/GettingStarted.tsx | 2 +- .../features/alerting/unified/styles/table.ts | 1 + .../commandPalette/CommandPalette.tsx | 2 +- .../features/migrate-to-cloud/cloud/Page.tsx | 2 +- .../onprem/EmptyState/EmptyState.tsx | 2 +- .../onprem/MigrationSummary.tsx | 1 + .../admin/components/PluginDetailsPanel.tsx | 20 +++++++++++++++---- 18 files changed, 36 insertions(+), 15 deletions(-) diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx index d33f2ae06ca..f3cc7892293 100644 --- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx +++ b/packages/grafana-ui/src/components/Carousel/Carousel.tsx @@ -183,6 +183,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ flex: 1, }), imagePreview: css({ + borderRadius: theme.shape.radius.lg, maxWidth: '100%', maxHeight: '80vh', objectFit: 'contain', diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index 0d525d5b4a5..276520b873d 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api'; import { PureComponent } from 'react'; @@ -136,7 +136,7 @@ class UnthemedCodeEditor extends PureComponent { const value = this.props.value ?? ''; const longText = value.length > 100; - const containerStyles = this.props.containerStyles ?? getStyles(theme).container; + const containerStyles = cx(getStyles(theme).container, this.props.containerStyles); const options: MonacoOptions = { wordWrap: wordWrap ? 'on' : 'off', @@ -203,6 +203,7 @@ const getStyles = (theme: GrafanaTheme2) => { container: css({ borderRadius: theme.shape.radius.default, border: `1px solid ${theme.components.input.borderColor}`, + overflow: 'hidden', }), }; }; diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx index 2b68fb94a97..00e0e63b21e 100644 --- a/public/app/core/components/Login/LoginLayout.tsx +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -150,7 +150,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { justifyContent: 'flex-start', zIndex: 1, minHeight: 320, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, padding: theme.spacing(2, 0), opacity: 0, [theme.transitions.handleMotion('no-preference', 'reduce')]: { diff --git a/public/app/core/components/TagFilter/TagBadge.tsx b/public/app/core/components/TagFilter/TagBadge.tsx index d5cdce494b5..9dcb8912358 100644 --- a/public/app/core/components/TagFilter/TagBadge.tsx +++ b/public/app/core/components/TagFilter/TagBadge.tsx @@ -34,7 +34,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ badge: css({ ...theme.typography.bodySmall, backgroundColor: theme.v1.palette.gray1, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, color: theme.v1.palette.white, display: 'inline-block', height: '20px', diff --git a/public/app/features/admin/EnterpriseAuthFeaturesCard.tsx b/public/app/features/admin/EnterpriseAuthFeaturesCard.tsx index f52e2726b3c..d3387d46528 100644 --- a/public/app/features/admin/EnterpriseAuthFeaturesCard.tsx +++ b/public/app/features/admin/EnterpriseAuthFeaturesCard.tsx @@ -91,7 +91,7 @@ function getStyles(theme: GrafanaTheme2) { display: 'flex', flexDirection: 'column', gap: theme.spacing(1.5), - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, marginTop: theme.spacing(3), strong: { color: theme.colors.text.primary, diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx index 2c83c6b99b4..fe0868730a1 100644 --- a/public/app/features/admin/LicenseChrome.tsx +++ b/public/app/features/admin/LicenseChrome.tsx @@ -22,12 +22,14 @@ const getStyles = (theme: GrafanaTheme2) => { textAlign: 'center', padding: theme.spacing(2), background: footerBg, + borderRadius: theme.shape.radius.lg, }), header: css({ height: '137px', padding: theme.spacing(4, 0, 0, 4), position: 'relative', background: `url('${backgroundUrl}') right`, + borderRadius: theme.shape.radius.lg, }), }; }; diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx index ec39dcdde18..01841e51364 100644 --- a/public/app/features/alerting/unified/AlertsFolderView.tsx +++ b/public/app/features/alerting/unified/AlertsFolderView.tsx @@ -213,6 +213,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ noResults: css({ padding: theme.spacing(2), backgroundColor: theme.colors.background.secondary, + borderRadius: theme.shape.radius.lg, fontStyle: 'italic', }), }); diff --git a/public/app/features/alerting/unified/components/EmptyArea.tsx b/public/app/features/alerting/unified/components/EmptyArea.tsx index d3a90d42acf..69f03939dd6 100644 --- a/public/app/features/alerting/unified/components/EmptyArea.tsx +++ b/public/app/features/alerting/unified/components/EmptyArea.tsx @@ -13,6 +13,7 @@ export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => { const getStyles = (theme: GrafanaTheme2) => { return { container: css({ + borderRadius: theme.shape.radius.lg, backgroundColor: theme.colors.background.secondary, color: theme.colors.text.secondary, padding: theme.spacing(4), diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx index 032feeabd5d..173bca42a4c 100644 --- a/public/app/features/alerting/unified/components/expressions/Expression.tsx +++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx @@ -541,6 +541,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ flex: 1, flexBasis: '400px', borderRadius: theme.shape.radius.default, + overflow: 'hidden', }), stack: css({ display: 'flex', diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 1f4b7dfa30d..13777d4036a 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -70,7 +70,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: 'flex', flexDirection: 'row', border: `solid 1px ${theme.colors.border.weak}`, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, padding: `${theme.spacing(2)} ${theme.spacing(3)}`, }), description: css({ diff --git a/public/app/features/alerting/unified/home/AdCard.tsx b/public/app/features/alerting/unified/home/AdCard.tsx index 01577b83150..f70efc67b87 100644 --- a/public/app/features/alerting/unified/home/AdCard.tsx +++ b/public/app/features/alerting/unified/home/AdCard.tsx @@ -133,7 +133,7 @@ const getAddCardStyles = (theme: GrafanaTheme2) => ({ cardBody: css({ padding: `${theme.spacing(3)} ${theme.spacing(4)} ${theme.spacing(2.25)} ${theme.spacing(4)}`, backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, border: `1px solid ${theme.colors.border.weak}`, flex: 1, }), diff --git a/public/app/features/alerting/unified/home/GettingStarted.tsx b/public/app/features/alerting/unified/home/GettingStarted.tsx index b45fe9d764a..e25e3da07e8 100644 --- a/public/app/features/alerting/unified/home/GettingStarted.tsx +++ b/public/app/features/alerting/unified/home/GettingStarted.tsx @@ -241,6 +241,6 @@ const getContentBoxStyles = (theme: GrafanaTheme2) => ({ box: css({ padding: theme.spacing(2), backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, }), }); diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts index 82bde70af85..7594b36e5b8 100644 --- a/public/app/features/alerting/unified/styles/table.ts +++ b/public/app/features/alerting/unified/styles/table.ts @@ -8,6 +8,7 @@ export const getAlertTableStyles = (theme: GrafanaTheme2) => ({ borderRadius: theme.shape.radius.default, border: `solid 1px ${theme.colors.border.weak}`, backgroundColor: theme.colors.background.secondary, + overflow: 'hidden', th: { padding: theme.spacing(1), diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx index b84716ba7f5..1bd1634546c 100644 --- a/public/app/features/commandPalette/CommandPalette.tsx +++ b/public/app/features/commandPalette/CommandPalette.tsx @@ -230,7 +230,7 @@ const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => { maxWidth: theme.breakpoints.values.md, background: theme.colors.background.primary, color: theme.colors.text.primary, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.lg, border: `1px solid ${theme.colors.border.weak}`, overflow: 'hidden', boxShadow: theme.shadows.z3, diff --git a/public/app/features/migrate-to-cloud/cloud/Page.tsx b/public/app/features/migrate-to-cloud/cloud/Page.tsx index e08bd91e8cb..4f1a77240fd 100644 --- a/public/app/features/migrate-to-cloud/cloud/Page.tsx +++ b/public/app/features/migrate-to-cloud/cloud/Page.tsx @@ -6,7 +6,7 @@ import { MigrationTokenPane } from './MigrationTokenPane/MigrationTokenPane'; export const Page = () => { return ( - + diff --git a/public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx b/public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx index ee5a399b954..18bdd0279e1 100644 --- a/public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx +++ b/public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx @@ -6,7 +6,7 @@ import { InfoPaneRight } from './InfoPaneRight'; export const EmptyState = () => { return ( - + diff --git a/public/app/features/migrate-to-cloud/onprem/MigrationSummary.tsx b/public/app/features/migrate-to-cloud/onprem/MigrationSummary.tsx index 623ea12520b..34cfd410e4c 100644 --- a/public/app/features/migrate-to-cloud/onprem/MigrationSummary.tsx +++ b/public/app/features/migrate-to-cloud/onprem/MigrationSummary.tsx @@ -60,6 +60,7 @@ export function MigrationSummary(props: MigrationSummaryProps) { return ( - + {pluginExtentionsInfo.map((infoItem, index) => { return ( @@ -97,7 +97,13 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { {shouldRenderLinks && ( <> - + {plugin.details?.repositoryUrl && ( )} {customLinks && customLinks?.length > 0 && ( - + )} {!plugin?.isCore && ( - +