fix(Popover): no left-side overflow due to negative margins (#736)

gravity-ui · Jun 23, 2023 · c113920 · c113920
1 parent 24cfc5b
commit c113920
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
@@ -26,8 +26,6 @@ $block: '.#{variables.$ns}popover';
         min-height: 40px;
         max-width: var(--yc-popover-max-width);
         padding: var(--yc-popover-padding);
-        display: flex;
-        flex-direction: column;
         cursor: default;
 
         &-title {
@@ -37,10 +35,8 @@ $block: '.#{variables.$ns}popover';
         }
 
         &-buttons {
-            align-self: center;
-            display: inline-flex;
+            display: flex;
             flex-wrap: wrap;
-            width: 100%;
             // giving additional -5 margin
             // this is taking into account the margins of buttons
             // to imitate the `gap` property for flexbox
@@ -114,10 +110,6 @@ $block: '.#{variables.$ns}popover';
                     --yc-popup-background-color: var(--yc-color-base-simple-hover-solid);
                     --yc-popup-border-color: var(--yc-color-base-simple-hover-solid);
                 }
-
-                #{$class}__tooltip-buttons {
-                    width: auto;
-                }
             }
 
             &_special {

diff --git a/src/components/Popover/__stories__/Popover.stories.tsx b/src/components/Popover/__stories__/Popover.stories.tsx
@@ -143,10 +143,6 @@ FullFeatured.args = {
         text: 'Action',
         onClick: () => alert('Action button was clicked'),
     },
-    tooltipCancelButton: {
-        text: 'Cancel',
-        onClick: () => alert('Cancel button was clicked'),
-    },
     links: [
         {
             text: 'Link with a href',
@@ -183,6 +179,24 @@ WithLongActionItems.args = {
     theme: 'info',
 };
 
+export const WithAlmostLongActionItems = FullFeaturedTemplate.bind({});
+WithAlmostLongActionItems.args = {
+    autoclosable: false,
+    content: 'There are two actions',
+    tooltipActionButton: {
+        text: 'Action with more',
+        onClick: () => alert('Action button was clicked'),
+    },
+    tooltipCancelButton: {
+        text: 'Action with',
+        onClick: () => alert('Cancel button was clicked'),
+    },
+    className: 'demo-icon-tooltip',
+    openOnHover: false,
+    behavior: PopoverBehavior.Delayed,
+    theme: 'info',
+};
+
 const WithCustomAnchorTemplate: StoryFn = () => <WithCustomAnchorExample />;
 export const WithCustomAnchor = WithCustomAnchorTemplate.bind({});
 WithCustomAnchor.args = {