fix(CompositeBar): remove NaN warning (#171)

* fix(CompositeBar): remove NaN warning * chore: tune custom theme story * chore: fix width background --------- Co-authored-by: Angelina Gadzhieva <[email protected]>
gravity-ui · Dec 21, 2023 · 8b3857e · 8b3857e
1 parent ca242f9
commit 8b3857e
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 6 deletions.
diff --git a/.storybook/assets/custom-theme-background.png b/.storybook/assets/custom-theme-background.png
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,6 +1,7 @@
 import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
+    staticDirs: ['./assets'],
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/addon-links',

diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx
@@ -45,9 +45,7 @@ const CustomThemeTemplate: StoryFn = (args) => (
 export const CustomTheme = CustomThemeTemplate.bind({});
 CustomTheme.args = {
     headerDecoration: false,
-    customBackground: (
-        <img src="https://cdn.stocksnap.io/img-thumbs/960w/blue-night_DBUU6N5YUY.jpg" />
-    ),
+    customBackground: <img src="custom-theme-background.png" width="100%" />,
     customBackgroundClassName: 'aside-header-showcase__custom-background',
 };
 

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -85,7 +85,9 @@ body {
     }
 
     &__custom-background {
-        opacity: 75%;
+        width: 100%;
+
+        opacity: 70%;
     }
 }
 

diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
@@ -251,7 +251,10 @@ export const CompositeBar: FC<CompositeBarProps> = ({
             <div className={b({autosizer: true})} style={{minHeight}}>
                 {items.length !== 0 && (
                     <AutoSizer>
-                        {({width, height}: Size) => {
+                        {(size: Size) => {
+                            const width = Number.isNaN(size.width) ? 0 : size.width;
+                            const height = Number.isNaN(size.height) ? 0 : size.height;
+
                             const {listItems, collapseItems} = getAutosizeListItems(
                                 items,
                                 height,

diff --git a/src/components/FooterItem/__stories__/FooterItem.stories.tsx b/src/components/FooterItem/__stories__/FooterItem.stories.tsx
@@ -12,7 +12,7 @@ import {EMPTY_CONTEXT_VALUE} from '../../AsideHeader/__stories__/moc';
 import './FooterItemShowcase.scss';
 
 export default {
-    title: 'Components/AsideHeader/FooterItem',
+    title: 'Components/FooterItem',
     component: FooterItem,
     decorators: [
         (DecoratedStory, context) => {