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

Navigation: Vertically align section nav icon at the top when the text wraps (#66860)

Browse Source 
* vertically align section nav icon at the top

* use theme for img width
This commit is contained in:
Ashley Harrison
2023-04-19 15:27:34 +01:00
committed by GitHub
parent 3c937741b8
commit 772ddbc3c0
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
View File

@@ -32,7 +32,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
if (item.img) {
icon = <img data-testid="section-image" className={styles.sectionImg} src={item.img} alt="" />;
} else if (item.icon) {
icon = <Icon data-testid="section-icon" name={item.icon} />;
icon = <Icon data-testid="section-icon" className={styles.sectionImg} name={item.icon} />;
}
const onItemClicked = () => {
@@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
link: css`
padding: ${theme.spacing(1, 0, 1, 1.5)};
display: flex;
align-items: center;
align-items: flex-start;
border-radius: ${theme.shape.radius.default};
gap: ${theme.spacing(1)};
height: 100%;
@@ -103,7 +103,8 @@ const getStyles = (theme: GrafanaTheme2) => {
margin-left: ${theme.spacing(1)};
`,
sectionImg: css({
width: 18,
margin: '6px 0',
width: theme.spacing(2),
}),
isSectionRoot: css({
fontSize: theme.typography.h4.fontSize,