diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 9bb991d11b..ed6664e9bb 100644 --- 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 index 88badc2db1..cc85ff5979 100644 --- 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 = () => ; export const WithCustomAnchor = WithCustomAnchorTemplate.bind({}); WithCustomAnchor.args = {