chore: add ref to AsideHeader story

gravity-ui · Oct 4, 2023 · c67bed4 · c67bed4
1 parent f6c2942
commit c67bed4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -27,10 +27,14 @@ body {
         }
     }
 
-    &__settings-ul {
+    &__settings {
         padding-right: 30px;
     }
 
+    &__settings-ul {
+        margin: 0;
+    }
+
     &__panel {
         width: 300px;
         height: 100%;

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -35,6 +35,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
 }) => {
+    const ref = React.useRef<HTMLDivElement>(null);
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
@@ -73,6 +74,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 </div>
             </Modal>
             <AsideHeader
+                ref={ref}
                 logo={{
                     text: 'Service',
                     icon: logoIcon,
@@ -93,12 +95,15 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                                 setSubheaderPopupVisible(!subheaderPopupVisible);
                             },
                         },
+                        popupAnchor: ref,
+                        popupPlacement: ['right-start'],
+                        popupOffset: [10, 10],
                         popupVisible: subheaderPopupVisible,
                         onClosePopup: () => setSubheaderPopupVisible(false),
                         renderPopupContent: () => {
                             return (
-                                <div className={b('settings-ul')}>
-                                    <ul>
+                                <div className={b('settings')}>
+                                    <ul className={b('settings-ul')}>
                                         <li>Set 1</li>
                                         <li>Set 2</li>
                                         <li>Set 3</li>