IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: Change border-radius to common 2px (#64502)

Browse Source 
* Change border-radius to common 2px

* Add new radius options

* Deprecate radiusBorder function
This commit is contained in:
Tobias Skarhed
2023-03-20 15:39:30 +01:00
committed by GitHub
parent 489500b5a7
commit 1332b0d844
25 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-data/src/themes/createShape.ts
View File

@@ -1,6 +1,13 @@
/** @beta */ /** @beta */
export interface ThemeShape { export interface ThemeShape {
borderRadius: (amount?: number) => string; borderRadius: (amount?: number) => string;
radius: Radii;
}
interface Radii {
default: string;
pill: string;
circle: string;
} }
/** @internal */ /** @internal */
@@ -11,12 +18,23 @@ export interface ThemeShapeInput {
export function createShape(options: ThemeShapeInput): ThemeShape { export function createShape(options: ThemeShapeInput): ThemeShape {
const baseBorderRadius = options.borderRadius ?? 2; const baseBorderRadius = options.borderRadius ?? 2;
const radius = {
default: '2px',
pill: '9999px',
circle: '100%',
};
/**
* @deprecated Use `theme.shape.radius.default`, `theme.shape.radius.pill` or `theme.shape.radius.circle`instead
* @param amount
*/
const borderRadius = (amount?: number) => { const borderRadius = (amount?: number) => {
const value = (amount ?? 1) * baseBorderRadius; const value = (amount ?? 1) * baseBorderRadius;
return `${value}px`; return `${value}px`;
}; };
return { return {
radius,
borderRadius, borderRadius,
}; };
} }

2
packages/grafana-ui/src/components/Badge/Badge.tsx
View File

@@ -62,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
display: inline-flex; display: inline-flex;
padding: 1px 4px; padding: 1px 4px;
border-radius: 3px; border-radius: ${theme.shape.radius.default};
background: ${bgColor}; background: ${bgColor};
border: 1px solid ${borderColor}; border: 1px solid ${borderColor};
color: ${textColor}; color: ${textColor};

20
packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
View File

@@ -132,8 +132,18 @@ export class BarGauge extends PureComponent<Props> {
} }
renderRetroBars(): ReactNode { renderRetroBars(): ReactNode {
const { display, field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth, text, valueDisplayMode } = const {
this.props; display,
field,
value,
itemSpacing,
alignmentFactors,
orientation,
lcdCellWidth,
text,
valueDisplayMode,
theme,
} = this.props;
const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } = const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =
calculateBarAndValueDimensions(this.props); calculateBarAndValueDimensions(this.props);
const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM; const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
@@ -171,7 +181,7 @@ export class BarGauge extends PureComponent<Props> {
const currentValue = minValue + (valueRange / cellCount) * i; const currentValue = minValue + (valueRange / cellCount) * i;
const cellColor = getCellColor(currentValue, value, display); const cellColor = getCellColor(currentValue, value, display);
const cellStyles: CSSProperties = { const cellStyles: CSSProperties = {
borderRadius: '2px', borderRadius: theme.shape.radius.default,
}; };
if (cellColor.isLit) { if (cellColor.isLit) {
@@ -478,7 +488,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
}; };
const barStyles: CSSProperties = { const barStyles: CSSProperties = {
borderRadius: '3px', borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
zIndex: 1, zIndex: 1,
}; };
@@ -487,7 +497,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
borderRadius: '3px', borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
}; };

2
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
View File

@@ -123,7 +123,7 @@ export abstract class BigValueLayout {
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
padding: `${this.panelPadding}px`, padding: `${this.panelPadding}px`,
borderRadius: '3px', borderRadius: theme.shape.borderRadius(),
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
}; };

2
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
View File

@@ -29,7 +29,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
label: call-to-action-card; label: call-to-action-card;
padding: ${theme.spacing(3)}; padding: ${theme.spacing(3)};
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

2
packages/grafana-ui/src/components/Collapse/Collapse.tsx
View File

@@ -14,7 +14,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
background-color: ${theme.colors.background.primary}; background-color: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
position: relative; position: relative;
border-radius: 3px; border-radius: ${theme.shape.radius.default};
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
View File

@@ -268,7 +268,7 @@ const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme
z-index: ${theme.zIndex.modal}; z-index: ${theme.zIndex.modal};
width: 500px; width: 500px;
top: 100%; top: 100%;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
left: 0; left: 0;
white-space: normal; white-space: normal;

2
packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
View File

@@ -21,7 +21,7 @@ const getStyles = (theme: GrafanaTheme2) => {
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(2)}; padding: ${theme.spacing(2)};
min-width: 350px; min-width: 350px;
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
margin-bottom: ${theme.spacing(4)}; margin-bottom: ${theme.spacing(4)};
`, `,
}; };

6
packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
View File

@@ -124,15 +124,15 @@ function getStyles(theme: GrafanaTheme2) {
color: ${theme.colors.error.text}; color: ${theme.colors.error.text};
`, `,
progressBar: css` progressBar: css`
border-radius: ${theme.spacing(1)}; border-radius: ${theme.shape.radius.default};
height: 4px; height: 4px;
::-webkit-progress-bar { ::-webkit-progress-bar {
background-color: ${theme.colors.border.weak}; background-color: ${theme.colors.border.weak};
border-radius: ${theme.spacing(1)}; border-radius: ${theme.shape.radius.default};
} }
::-webkit-progress-value { ::-webkit-progress-value {
background-color: ${theme.colors.primary.main}; background-color: ${theme.colors.primary.main};
border-radius: ${theme.spacing(1)}; border-radius: ${theme.shape.radius.default};
} }
`, `,
}; };

2
packages/grafana-ui/src/components/Forms/InlineLabel.tsx
View File

@@ -64,7 +64,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false,
height: ${theme.spacing(theme.components.height.md)}; height: ${theme.spacing(theme.components.height.md)};
line-height: ${theme.spacing(theme.components.height.md)}; line-height: ${theme.spacing(theme.components.height.md)};
margin-right: ${theme.spacing(0.5)}; margin-right: ${theme.spacing(0.5)};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
border: none; border: none;
width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'}; width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'};
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};

2
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
View File

@@ -56,7 +56,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
box-shadow: 0 0 10px ${theme.v1.palette.black}; box-shadow: 0 0 10px ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.borderRadius()};
width: 100%; width: 100%;
`, `,
header: css` header: css`

2
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

@@ -141,7 +141,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
label: logs-row-details-table; label: logs-row-details-table;
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)}; padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: 3px; border-radius: ${theme.shape.radius.default};
margin: 20px 8px 20px 16px; margin: 20px 8px 20px 16px;
cursor: default; cursor: default;
`, `,

2
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
View File

@@ -213,7 +213,7 @@ const getStyles = (theme: GrafanaTheme2) => {
font-size: ${typography.size.lg}; font-size: ${typography.size.lg};
margin: 0; margin: 0;
max-width: 300px; max-width: 300px;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
`, `,
titleLink: css` titleLink: css`
&:focus-visible { &:focus-visible {

2
packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
View File

@@ -82,7 +82,7 @@ function getStyles(theme: GrafanaTheme2) {
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
color: theme.colors.text.primary, color: theme.colors.text.primary,
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
borderRadius: '1px', borderRadius: theme.shape.radius.default,
height: theme.spacing(4), height: theme.spacing(4),
boxShadow: theme.shadows.z1, boxShadow: theme.shadows.z1,
}), }),

2
packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
View File

@@ -40,7 +40,7 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: theme.spacing(padding), padding: theme.spacing(padding),
width: theme.spacing(headerHeight), width: theme.spacing(headerHeight),
height: theme.spacing(headerHeight), height: theme.spacing(headerHeight),
borderRadius: 0, borderRadius: theme.shape.radius.default,
}), }),
}; };
}; };

2
packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
View File

@@ -20,5 +20,5 @@ const getStyles = (theme: GrafanaTheme2) =>
css` css`
background-color: ${theme.components.panel.background}; background-color: ${theme.components.panel.background};
border: 1px solid ${theme.components.panel.borderColor}; border: 1px solid ${theme.components.panel.borderColor};
border-radius: 3px; border-radius: ${theme.shape.radius.default};
`; `;

2
packages/grafana-ui/src/components/Table/FilterPopup.tsx
View File

@@ -104,7 +104,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding: ${theme.spacing(2)}; padding: ${theme.spacing(2)};
margin: ${theme.spacing(1)} 0; margin: ${theme.spacing(1)} 0;
box-shadow: 0px 0px 20px ${theme.v1.palette.black}; box-shadow: 0px 0px 20px ${theme.v1.palette.black};
border-radius: ${theme.spacing(0.5)}; border-radius: ${theme.shape.radius.default};
`, `,
listDivider: css` listDivider: css`
label: listDivider; label: listDivider;

2
packages/grafana-ui/src/components/Table/styles.ts
View File

@@ -260,7 +260,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
height: 100%; height: 100%;
position: absolute; position: absolute;
right: -4px; right: -4px;
border-radius: 3px; border-radius: ${theme.shape.radius.default};
top: 0; top: 0;
touch-action: none; touch-action: none;

4
packages/grafana-ui/src/components/Tabs/Tab.tsx
View File

@@ -95,7 +95,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
left: 0; left: 0;
right: 0; right: 0;
height: 4px; height: 4px;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
bottom: 0px; bottom: 0px;
background: ${theme.colors.action.hover}; background: ${theme.colors.action.hover};
} }
@@ -118,7 +118,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
left: 0; left: 0;
right: 0; right: 0;
height: 4px; height: 4px;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
bottom: 0px; bottom: 0px;
background-image: ${theme.colors.gradients.brandHorizontal} !important; background-image: ${theme.colors.gradients.brandHorizontal} !important;
} }

2
packages/grafana-ui/src/components/Tabs/VerticalTab.tsx
View File

@@ -77,7 +77,7 @@ const getTabStyles = (theme: GrafanaTheme2) => {
width: 4px; width: 4px;
bottom: 2px; bottom: 2px;
top: 2px; top: 2px;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
background-image: linear-gradient(0deg, #f05a28 30%, #fbca0a 99%); background-image: linear-gradient(0deg, #f05a28 30%, #fbca0a 99%);
} }
`, `,

2
packages/grafana-ui/src/components/Tags/Tag.tsx
View File

@@ -70,7 +70,7 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) =
white-space: nowrap; white-space: nowrap;
text-shadow: none; text-shadow: none;
padding: 3px 6px; padding: 3px 6px;
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
`, `,
hover: css` hover: css`
&:hover { &:hover {

2
packages/grafana-ui/src/components/TagsInput/TagItem.tsx
View File

@@ -50,7 +50,7 @@ const getStyles = (theme: GrafanaTheme2) => {
color: '#fff', color: '#fff',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderRadius: '3px', borderRadius: theme.shape.radius.default,
padding: `0 ${theme.spacing(0.5)}`, padding: `0 ${theme.spacing(0.5)}`,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textShadow: 'none', textShadow: 'none',

2
packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
View File

@@ -30,7 +30,7 @@ export const SeriesIcon = React.memo(
background: cssColor, background: cssColor,
width: '14px', width: '14px',
height: '4px', height: '4px',
borderRadius: '1px', borderRadius: theme.shape.radius.default,
display: 'inline-block', display: 'inline-block',
marginRight: '8px', marginRight: '8px',
}; };

2
packages/grafana-ui/src/utils/tooltipUtils.ts
View File

@@ -37,7 +37,7 @@ export function buildTooltipTheme(
`, `,
container: css` container: css`
background-color: ${tooltipBg}; background-color: ${tooltipBg};
border-radius: 3px; border-radius: ${theme.shape.radius.default};
border: 1px solid ${toggletipBorder}; border: 1px solid ${toggletipBorder};
box-shadow: ${theme.shadows.z2}; box-shadow: ${theme.shadows.z2};
color: ${tooltipText}; color: ${tooltipText};

6
public/app/features/logs/components/LogRowContext.tsx
View File

@@ -89,7 +89,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
font-family: ${theme.typography.fontFamily}; font-family: ${theme.typography.fontFamily};
`, `,
header: css` header: css`
@@ -107,7 +107,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
background: ${theme.colors.background.canvas}; background: ${theme.colors.background.canvas};
`, `,
top: css` top: css`
border-radius: 0 0 ${theme.shape.borderRadius()} ${theme.shape.borderRadius()}; border-radius: 0 0 ${theme.shape.radius.default} ${theme.shape.radius.default};
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)}); clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
`, `,
@@ -119,7 +119,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
height: ${headerHeight}px; height: ${headerHeight}px;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0; border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0;
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)}); clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
font-family: ${theme.typography.fontFamily}; font-family: ${theme.typography.fontFamily};