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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 61 additions and 33 deletions
Show Stats 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 */
export interface ThemeShape {
borderRadius: (amount?: number) => string;
radius: Radii;
}
interface Radii {
default: string;
pill: string;
circle: string;
}
/** @internal */
@ -11,12 +18,23 @@ export interface ThemeShapeInput {
export function createShape(options: ThemeShapeInput): ThemeShape {
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 value = (amount ?? 1) * baseBorderRadius;
return `${value}px`;
};
return {
radius,
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};
display: inline-flex;
padding: 1px 4px;
border-radius: 3px;
border-radius: ${theme.shape.radius.default};
background: ${bgColor};
border: 1px solid ${borderColor};
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 {
const { display, field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth, text, valueDisplayMode } =
this.props;
const {
display,
field,
value,
itemSpacing,
alignmentFactors,
orientation,
lcdCellWidth,
text,
valueDisplayMode,
theme,
} = this.props;
const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =
calculateBarAndValueDimensions(this.props);
const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
@ -171,7 +181,7 @@ export class BarGauge extends PureComponent<Props> {
const currentValue = minValue + (valueRange / cellCount) * i;
const cellColor = getCellColor(currentValue, value, display);
const cellStyles: CSSProperties = {
borderRadius: '2px',
borderRadius: theme.shape.radius.default,
};
if (cellColor.isLit) {
@ -478,7 +488,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
};
const barStyles: CSSProperties = {
borderRadius: '3px',
borderRadius: theme.shape.radius.default,
position: 'relative',
zIndex: 1,
};
@ -487,7 +497,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
background: theme.colors.background.secondary,
flexGrow: 1,
display: 'flex',
borderRadius: '3px',
borderRadius: theme.shape.radius.default,
position: 'relative',
};

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

@ -123,7 +123,7 @@ export abstract class BigValueLayout {
width: `${width}px`,
height: `${height}px`,
padding: `${this.panelPadding}px`,
borderRadius: '3px',
borderRadius: theme.shape.borderRadius(),
position: 'relative',
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;
padding: ${theme.spacing(3)};
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
display: flex;
flex-direction: column;
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};
border: 1px solid ${theme.colors.border.medium};
position: relative;
border-radius: 3px;
border-radius: ${theme.shape.radius.default};
width: 100%;
display: flex;
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};
width: 500px;
top: 100%;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.colors.border.weak};
left: 0;
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};
padding: ${theme.spacing(2)};
min-width: 350px;
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
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};
`,
progressBar: css`
border-radius: ${theme.spacing(1)};
border-radius: ${theme.shape.radius.default};
height: 4px;
::-webkit-progress-bar {
background-color: ${theme.colors.border.weak};
border-radius: ${theme.spacing(1)};
border-radius: ${theme.shape.radius.default};
}
::-webkit-progress-value {
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)};
line-height: ${theme.spacing(theme.components.height.md)};
margin-right: ${theme.spacing(0.5)};
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
border: none;
width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'};
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};
box-shadow: 0 0 10px ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.borderRadius()};
width: 100%;
`,
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;
border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: 3px;
border-radius: ${theme.shape.radius.default};
margin: 20px 8px 20px 16px;
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};
margin: 0;
max-width: 300px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
`,
titleLink: css`
&: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,
color: theme.colors.text.primary,
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: '1px',
borderRadius: theme.shape.radius.default,
height: theme.spacing(4),
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),
width: 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`
background-color: ${theme.components.panel.background};
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)};
margin: ${theme.spacing(1)} 0;
box-shadow: 0px 0px 20px ${theme.v1.palette.black};
border-radius: ${theme.spacing(0.5)};
border-radius: ${theme.shape.radius.default};
`,
listDivider: css`
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%;
position: absolute;
right: -4px;
border-radius: 3px;
border-radius: ${theme.shape.radius.default};
top: 0;
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;
right: 0;
height: 4px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
bottom: 0px;
background: ${theme.colors.action.hover};
}
@ -118,7 +118,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
left: 0;
right: 0;
height: 4px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
bottom: 0px;
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;
bottom: 2px;
top: 2px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
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;
text-shadow: none;
padding: 3px 6px;
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
`,
hover: css`
&:hover {

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

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

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

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

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

@ -37,7 +37,7 @@ export function buildTooltipTheme(
`,
container: css`
background-color: ${tooltipBg};
border-radius: 3px;
border-radius: ${theme.shape.radius.default};
border: 1px solid ${toggletipBorder};
box-shadow: ${theme.shadows.z2};
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};
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()};
border-radius: ${theme.shape.radius.default};
font-family: ${theme.typography.fontFamily};
`,
header: css`
@ -107,7 +107,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
background: ${theme.colors.background.canvas};
`,
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};
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;
background: ${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};
clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
font-family: ${theme.typography.fontFamily};