IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 00:25:46 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 20 additions and 20 deletions
Show Stats 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;
top: 0px;
justify-content: center;
border-radius: 20px;
border-radius: ${theme.shape.radius.circle};
width: 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%;
cursor: pointer;
border: none;
border-radius: 50px;
border-radius: ${theme.shape.radius.pill};
background: ${theme.components.input.background};
border: 1px solid ${theme.components.input.borderColor};
transition: all 0.3s ease;
@ -133,7 +133,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
content: '';
width: 12px;
height: 12px;
border-radius: 6px;
border-radius: ${theme.shape.radius.circle};
background: ${theme.colors.text.secondary};
box-shadow: ${theme.shadows.z1};
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)};
}
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)};
}
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};
max-width: 800px;
padding: ${theme.spacing(1)};
border-radius: ${theme.shape.borderRadius()};
border-radius: ${theme.shape.radius.default};
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)};
display: flex;
align-items: center;
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
gap: ${theme.spacing(1)};
height: 100%;
position: relative;
@ -95,7 +95,7 @@ const getStyles = (theme: GrafanaTheme2) => {
width: 4px;
bottom: 2px;
top: 2px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
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;
right: 2px;
height: 3px;
border-radius: 2px;
border-radius: ${theme.shape.radius.default};
bottom: -8px;
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%;
transition: 0.2s background ease-in-out;
transform: translate(-50%, -50%);
border-radius: 4px;
border-radius: ${theme.shape.radius.default};
}
&:hover {

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

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

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

@ -79,7 +79,7 @@ const getResultItemStyles = (theme: GrafanaTheme2) => {
justifyContent: 'space-between',
cursor: 'pointer',
position: 'relative',
borderRadius: theme.shape.borderRadius(2),
borderRadius: theme.shape.radius.default,
margin: theme.spacing(0, 1),
}),
activeRow: css({
@ -93,7 +93,7 @@ const getResultItemStyles = (theme: GrafanaTheme2) => {
top: 0,
bottom: 0,
width: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(2),
borderRadius: theme.shape.radius.default,
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};
${theme.breakpoints.up('md')} {
border-radius: ${theme.shape.borderRadius(2)};
border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3};
left: 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`
background-color: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.border.medium};
border-radius: 4px;
border-radius: ${theme.shape.radius.default};
display: flex;
flex-direction: column;
@ -241,8 +241,8 @@ const getStyles = (theme: GrafanaTheme2, markerWidth = 0, popperWidth = 0) => {
info: css`
align-items: center;
background-color: ${theme.colors.background.canvas};
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: ${theme.shape.radius.default};
border-bottom-right-radius: ${theme.shape.radius.default};
display: flex;
height: ${theme.spacing(7)};
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)};
> img {
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`
@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin-bottom: 0;
> img {
width: 250px;
border-radius: ${theme.shape.borderRadius()};
border-radius: ${theme.shape.radius.default};
}
`,
link: css`
@ -106,7 +106,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
date: css`
margin-bottom: ${theme.spacing(0.5)};
font-weight: 500;
border-radius: 0 0 0 3px;
border-radius: 0 0 0 ${theme.shape.radius.default};
color: ${theme.colors.text.secondary};
`,
});