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

Core: Update components to have standard radii (#65065)

Browse Source 
* Update core border radii

* Add non-default border-radius on some grafana-ui items
This commit is contained in:
Tobias Skarhed
2023-03-21 12:24:50 +01:00
committed by GitHub
parent d8e32cc929
commit 590b07539f
11 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,7 +58,7 @@ const getStyles = (theme: GrafanaTheme2) => {
position: absolute; position: absolute;
top: 0px; top: 0px;
justify-content: center; justify-content: center;
border-radius: 20px; border-radius: ${theme.shape.radius.circle};
width: 26px; width: 26px;
height: 26px; height: 26px;
`, `,

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

@@ -118,7 +118,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
border: none; border: none;
border-radius: 50px; border-radius: ${theme.shape.radius.pill};
background: ${theme.components.input.background}; background: ${theme.components.input.background};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -133,7 +133,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
content: ''; content: '';
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 6px; border-radius: ${theme.shape.radius.circle};
background: ${theme.colors.text.secondary}; background: ${theme.colors.text.secondary};
box-shadow: ${theme.shadows.z1}; box-shadow: ${theme.shadows.z1};
top: 50%; top: 50%;

6
packages/grafana-ui/src/themes/mixins.ts
View File

@@ -10,7 +10,7 @@ export function cardChrome(theme: GrafanaTheme2): string {
background: ${hoverColor(theme.colors.background.secondary, theme)}; background: ${hoverColor(theme.colors.background.secondary, theme)};
} }
box-shadow: ${theme.components.panel.boxShadow}; box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
`; `;
} }
@@ -25,7 +25,7 @@ export function listItem(theme: GrafanaTheme2): string {
background: ${hoverColor(theme.colors.background.secondary, theme)}; background: ${hoverColor(theme.colors.background.secondary, theme)};
} }
box-shadow: ${theme.components.panel.boxShadow}; box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
`; `;
} }
@@ -80,6 +80,6 @@ export const getTooltipContainerStyles = (theme: GrafanaTheme2) => `
box-shadow: ${theme.shadows.z2}; box-shadow: ${theme.shadows.z2};
max-width: 800px; max-width: 800px;
padding: ${theme.spacing(1)}; padding: ${theme.spacing(1)};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
z-index: ${theme.zIndex.tooltip}; z-index: ${theme.zIndex.tooltip};
`; `;

4
public/app/core/components/PageNew/SectionNavItem.tsx
View File

@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: ${theme.spacing(1, 0, 1, 1.5)}; padding: ${theme.spacing(1, 0, 1, 1.5)};
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
gap: ${theme.spacing(1)}; gap: ${theme.spacing(1)};
height: 100%; height: 100%;
position: relative; position: relative;
@@ -95,7 +95,7 @@ const getStyles = (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: ${theme.colors.gradients.brandVertical}; background-image: ${theme.colors.gradients.brandVertical};
} }
`, `,

2
public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
View File

@@ -48,7 +48,7 @@ const getStyles = (theme: GrafanaTheme2) => {
left: -1px; left: -1px;
right: 2px; right: 2px;
height: 3px; height: 3px;
border-radius: 2px; border-radius: ${theme.shape.radius.default};
bottom: -8px; bottom: -8px;
background-image: ${theme.colors.gradients.brandHorizontal} !important; background-image: ${theme.colors.gradients.brandHorizontal} !important;
} }

2
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@@ -126,7 +126,7 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
top: 50%; top: 50%;
transition: 0.2s background ease-in-out; transition: 0.2s background ease-in-out;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 4px; border-radius: ${theme.shape.radius.default};
} }
&:hover { &:hover {

2
public/app/features/commandPalette/CommandPalette.tsx
View File

@@ -156,7 +156,7 @@ const getSearchStyles = (theme: GrafanaTheme2) => {
width: '100%', width: '100%',
background: theme.colors.background.primary, background: theme.colors.background.primary,
color: theme.colors.text.primary, color: theme.colors.text.primary,
borderRadius: theme.shape.borderRadius(2), borderRadius: theme.shape.radius.default,
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
overflow: 'hidden', overflow: 'hidden',
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,

4
public/app/features/commandPalette/ResultItem.tsx
View File

@@ -79,7 +79,7 @@ const getResultItemStyles = (theme: GrafanaTheme2) => {
justifyContent: 'space-between', justifyContent: 'space-between',
cursor: 'pointer', cursor: 'pointer',
position: 'relative', position: 'relative',
borderRadius: theme.shape.borderRadius(2), borderRadius: theme.shape.radius.default,
margin: theme.spacing(0, 1), margin: theme.spacing(0, 1),
}), }),
activeRow: css({ activeRow: css({
@@ -93,7 +93,7 @@ const getResultItemStyles = (theme: GrafanaTheme2) => {
top: 0, top: 0,
bottom: 0, bottom: 0,
width: theme.spacing(0.5), width: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(2), borderRadius: theme.shape.radius.default,
backgroundImage: theme.colors.gradients.brandVertical, backgroundImage: theme.colors.gradients.brandVertical,
}, },
}), }),

2
public/app/features/search/components/DashboardSearchModal.tsx
View File

@@ -169,7 +169,7 @@ const getStyles = (theme: GrafanaTheme2) => {
z-index: ${theme.zIndex.modal}; z-index: ${theme.zIndex.modal};
${theme.breakpoints.up('md')} { ${theme.breakpoints.up('md')} {
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
left: 0; left: 0;
margin: ${theme.spacing(0.5, 'auto', 0)}; margin: ${theme.spacing(0.5, 'auto', 0)};

6
public/app/features/search/components/SearchCard.tsx
View File

@@ -181,7 +181,7 @@ const getStyles = (theme: GrafanaTheme2, markerWidth = 0, popperWidth = 0) => {
card: css` card: css`
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
border-radius: 4px; border-radius: ${theme.shape.radius.default};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -241,8 +241,8 @@ const getStyles = (theme: GrafanaTheme2, markerWidth = 0, popperWidth = 0) => {
info: css` info: css`
align-items: center; align-items: center;
background-color: ${theme.colors.background.canvas}; background-color: ${theme.colors.background.canvas};
border-bottom-left-radius: 4px; border-bottom-left-radius: ${theme.shape.radius.default};
border-bottom-right-radius: 4px; border-bottom-right-radius: ${theme.shape.radius.default};
display: flex; display: flex;
height: ${theme.spacing(7)}; height: ${theme.spacing(7)};
gap: ${theme.spacing(1)}; gap: ${theme.spacing(1)};

6
public/app/plugins/panel/news/component/News.tsx
View File

@@ -73,7 +73,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin-bottom: ${theme.spacing(1)}; margin-bottom: ${theme.spacing(1)};
> img { > img {
width: 100%; width: 100%;
border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0; border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0;
} }
`, `,
socialImageWide: css` socialImageWide: css`
@@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin-bottom: 0; margin-bottom: 0;
> img { > img {
width: 250px; width: 250px;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
} }
`, `,
link: css` link: css`
@@ -106,7 +106,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
date: css` date: css`
margin-bottom: ${theme.spacing(0.5)}; margin-bottom: ${theme.spacing(0.5)};
font-weight: 500; font-weight: 500;
border-radius: 0 0 0 3px; border-radius: 0 0 0 ${theme.shape.radius.default};
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
`, `,
}); });