diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
index ff45f35a5eb7..3d08654da09b 100644
--- a/lib/ui/src/components/sidebar/Brand.tsx
+++ b/lib/ui/src/components/sidebar/Brand.tsx
@@ -31,41 +31,28 @@ export const LogoLink = styled.a(({ theme }) => ({
},
}));
-export const Brand = withTheme(
- ({
- theme: {
- brand: { title = 'Storybook', url = './', image },
- },
- }) => {
- const targetValue = url === './' ? '' : '_blank';
- if (image === undefined && url === null) {
- return ;
- }
- if (image === undefined && url) {
- return (
-
-
-
- );
- }
- if (image === null && url === null) {
- return title;
- }
- if (image === null && url) {
- return (
-
- );
- }
- if (image && url === null) {
- return ;
- }
- if (image && url) {
- return (
-
-
-
- );
- }
- return null;
+export const Brand = withTheme(({ theme }) => {
+ const { title = 'Storybook', url = './', image } = theme.brand;
+ const targetValue = url === './' ? '' : '_blank';
+
+ // When image is explicitly set to null, enable custom HTML support
+ if (image === null) {
+ if (title === null) return null;
+ // eslint-disable-next-line react/no-danger
+ if (!url) return
;
+ return ;
+ }
+
+ const logo = image ? : ;
+
+ if (url) {
+ return (
+
+ {logo}
+
+ );
}
-);
+
+ // The wrapper div serves to prevent image misalignment
+ return {logo}
;
+});
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index 66ec310d9f63..a0f2f1243a07 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -131,3 +131,57 @@ export const customBrandImage = () => {
);
};
+
+export const customBrandImageTall = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
+
+export const customBrandImageUnsizedSVG = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
+
+export const noBrand = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index b65585af8735..4aeb4c1dc11e 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -13,7 +13,7 @@ const BrandArea = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2,
fontWeight: theme.typography.weight.bold,
color: theme.color.defaultText,
- marginRight: 40,
+ marginRight: 20,
display: 'flex',
width: '100%',
alignItems: 'center',
@@ -22,8 +22,8 @@ const BrandArea = styled.div(({ theme }) => ({
'& > *': {
maxWidth: '100%',
height: 'auto',
- width: 'auto',
display: 'block',
+ flex: '1 1 auto',
},
}));