refactor: remove popup wrapper class, use content classes - fix vars …

…level
gravity-ui · Jun 28, 2023 · 93e4089 · 93e4089
1 parent 1b386d9
commit 93e4089
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
@@ -94,7 +94,7 @@ $block: '.#{variables.$ns}popover';
             &_info,
             &_announcement {
                 // Increasing specificity for overrides
-                #{$class}__tooltip-popup-content {
+                &#{&} {
                     color: var(--g-color-text-primary);
                 }
 
@@ -112,15 +112,15 @@ $block: '.#{variables.$ns}popover';
 
             &_announcement {
                 // Increasing specificity for overrides
-                #{$class}__tooltip-popup-content {
+                &#{&} {
                     --yc-popup-background-color: var(--g-color-base-simple-hover-solid);
                     --yc-popup-border-color: var(--g-color-base-simple-hover-solid);
                 }
             }
 
             &_special {
                 // Increasing specificity for overrides
-                #{$class}__tooltip-popup-content {
+                &#{&} {
                     --yc-popup-background-color: var(--g-color-base-special);
                     --yc-popup-border-color: var(--g-color-base-special);
                     color: var(--g-color-text-light-primary);

diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
@@ -10,6 +10,11 @@ $arrow-circle-height: 30px;
 $transition-distance: 10px;
 
 #{$block} {
+    // Can be overridden, see Tooltip
+    --yc-popup-background-color: var(--g-color-base-float);
+    --yc-popup-border-color: var(--g-color-line-solid);
+    --yc-popup-border-width: 1px;
+
     z-index: 1000;
     visibility: hidden;
 
@@ -86,11 +91,6 @@ $transition-distance: 10px;
     }
 
     &__content {
-        // Can be overridden, see Tooltip
-        --yc-popup-background-color: var(--g-color-base-float);
-        --yc-popup-border-color: var(--g-color-line-solid);
-        --yc-popup-border-width: 1px;
-
         position: relative;
         animation-duration: 0.1s;
         animation-timing-function: ease-out;

diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -3,15 +3,15 @@
 $block: '.#{variables.$ns}tooltip';
 
 #{$block} {
+    // [class] for increasing specificity
+    &[class] {
+        --yc-popup-border-width: 0;
+        --yc-popup-background-color: var(--g-color-base-float-heavy);
+    }
+
     &__popup-content {
         // prevent glitch between two nearby tooltip refs
         pointer-events: none;
-
-        // [class] for increasing specificity
-        &[class] {
-            --yc-popup-border-width: 0;
-            --yc-popup-background-color: var(--g-color-base-float-heavy);
-        }
     }
 
     &__content {

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -15,7 +15,6 @@ export interface TooltipProps extends TooltipDelayProps {
     children: React.ReactElement;
     className?: string;
     contentClassName?: string;
-    popupContentClassName?: string;
 }
 
 interface TooltipDelayProps {
@@ -35,7 +34,6 @@ export const Tooltip = (props: TooltipProps) => {
         return (
             <Popup
                 className={b(null, props.className)}
-                contentClassName={b('popup-content', props.popupContentClassName)}
                 open={tooltipVisible && !disabled}
                 placement={placement}
                 anchorRef={{current: anchorElement}}