Popover and Tooltip restyle, add arrow (#25779)

Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Oct 12, 2023 · 64fb0b4 · 64fb0b4
1 parent c4ed197
commit 64fb0b4
Show file tree

Hide file tree

Showing 43 changed files with 25 additions and 15 deletions.
diff --git a/packages/devextreme/scss/widgets/base/popover/_mixins.scss b/packages/devextreme/scss/widgets/base/popover/_mixins.scss
@@ -1,9 +1,9 @@
 @use "sass:math";
 
-@mixin dx-popover-arrow-size($width) {
+@mixin dx-popover-arrow-size($width, $popover-arrow-offset: 0) {
   $sqrt-2: 1.4142;
   $popover-arrow-width: $width;
-  $popover-arrow-heiht: math.div($popover-arrow-width, 2);
+  $popover-arrow-height: math.div($popover-arrow-width, 2);
 
   .dx-popover-wrapper {
     .dx-popover-arrow::after {
@@ -15,14 +15,14 @@
     &.dx-position-bottom {
       .dx-popover-arrow {
         width: $popover-arrow-width;
-        height: $popover-arrow-heiht;
+        height: $popover-arrow-height + $popover-arrow-offset;
       }
     }
 
     &.dx-position-right,
     &.dx-position-left {
       .dx-popover-arrow {
-        width: $popover-arrow-heiht;
+        width: $popover-arrow-height + $popover-arrow-offset;
         height: $popover-arrow-width;
       }
     }

diff --git a/packages/devextreme/scss/widgets/fluent/popover/_index.scss b/packages/devextreme/scss/widgets/fluent/popover/_index.scss
@@ -15,8 +15,4 @@
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
   }
-
-  .dx-popover-arrow {
-    display: none;
-  }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_index.scss b/packages/devextreme/scss/widgets/fluent/slider/_index.scss
@@ -5,6 +5,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/slider";
+@use "../../base/popover/mixins" as *;
 
 // adduse
 
@@ -15,6 +16,8 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
 
 .dx-slider-wrapper {
   height: $fluent-slider-wrapper-height;
+
+  @include dx-popover-arrow-size(14px, 2px);
 }
 
 .dx-slider-bar {

diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_colors.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_colors.scss
@@ -17,15 +17,20 @@ $tooltip-color: null !default;
 * $type color
 */
 $tooltip-bg: null !default;
+
+$tooltip-shadow-color: null !default;
 $tooltip-border-radius: $base-border-radius !default;
+$overlay-content-shadow-color: null !default;
 
 @if $mode == "light" {
-  $tooltip-color: $base-inverted-text-color !default;
-  $tooltip-bg: #616161 !default;
+  $tooltip-color: $base-text-color !default;
+  $tooltip-bg: $base-bg !default;
+  $tooltip-shadow-color: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14) !default;
 }
 
 @if $mode == "dark" {
   $tooltip-color: $base-text-color !default;
-  $tooltip-bg: rgba(0, 0, 0, 1) !default;
+  $tooltip-bg: $base-neutral-background1-hover !default;
+  $tooltip-shadow-color: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.28) !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss
@@ -12,17 +12,20 @@
   .dx-overlay-content {
     background-color: $tooltip-bg;
     color: $tooltip-color;
-    box-shadow: none;
+    box-shadow: $tooltip-shadow-color;
     border-radius: $tooltip-border-radius;
     min-height: auto;
 
     .dx-popup-content {
       padding: $fluent-tooltip-padding;
-      font-size: 12px;
+      font-size: $fluent-tooltip-font-size;
     }
   }
 
   &.dx-popover-wrapper .dx-popover-arrow {
-    display: none;
+    &::after {
+      box-shadow: $tooltip-shadow-color;
+      background: $tooltip-bg;
+    }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss
@@ -3,11 +3,14 @@
 // adduse
 
 $fluent-tooltip-padding: null !default;
+$fluent-tooltip-font-size: null !default;
 
 @if $size == "default" {
-  $fluent-tooltip-padding: 6px 8px !default;
+  $fluent-tooltip-padding: 8px 12px !default;
+  $fluent-tooltip-font-size: 12px;
 }
 
 @else if $size == "compact" {
   $fluent-tooltip-padding: 4px 6px !default;
+  $fluent-tooltip-font-size: 12px;
 }
diff --git a/... speed dial action button,label='Add Row',icon='home' (material-blue-light).png b/... speed dial action button,label='Add Row',icon='home' (material-blue-light).png
diff --git a/...ing/testcafe/tests/editors/lookup/etalons/Lookup in loading (generic-light).png b/...ing/testcafe/tests/editors/lookup/etalons/Lookup in loading (generic-light).png
diff --git a/...alons/Lookup label with labelMode=floating-styleMode=filled (generic-light).png b/...alons/Lookup label with labelMode=floating-styleMode=filled (generic-light).png
diff --git a/...ons/Lookup label with labelMode=floating-styleMode=outlined (generic-light).png b/...ons/Lookup label with labelMode=floating-styleMode=outlined (generic-light).png
diff --git a/...s/Lookup label with labelMode=floating-styleMode=underlined (generic-light).png b/...s/Lookup label with labelMode=floating-styleMode=underlined (generic-light).png
diff --git a/...etalons/Lookup label with labelMode=static-styleMode=filled (generic-light).png b/...etalons/Lookup label with labelMode=static-styleMode=filled (generic-light).png
diff --git a/...cafe/tests/editors/lookup/etalons/Lookup with no found data (generic-light).png b/...cafe/tests/editors/lookup/etalons/Lookup with no found data (generic-light).png
diff --git a/...ys/etalons/Popover_bottom_toolbar_menu,rtlEnabled=false (fluent-blue-light).png b/...ys/etalons/Popover_bottom_toolbar_menu,rtlEnabled=false (fluent-blue-light).png
diff --git a/...ays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=true (fluent-blue-light).png b/...ays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=true (fluent-blue-light).png
diff --git a/...rlays/etalons/Popover_top_toolbar_menu,rtlEnabled=false (fluent-blue-light).png b/...rlays/etalons/Popover_top_toolbar_menu,rtlEnabled=false (fluent-blue-light).png
diff --git a/...erlays/etalons/Popover_top_toolbar_menu,rtlEnabled=true (fluent-blue-light).png b/...erlays/etalons/Popover_top_toolbar_menu,rtlEnabled=true (fluent-blue-light).png
diff --git a/...testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png b/...testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png
diff --git a/...ox label with stylingMode=underlined,labelMode=hidden (material-blue-light).png b/...ox label with stylingMode=underlined,labelMode=hidden (material-blue-light).png
diff --git a/...ler/layout/resources/base/etalons/generic-resource(view=day-resource=false).png b/...ler/layout/resources/base/etalons/generic-resource(view=day-resource=false).png
diff --git a/...r/layout/resources/base/etalons/generic-resource(view=month-resource=false).png b/...r/layout/resources/base/etalons/generic-resource(view=month-resource=false).png
diff --git a/...er/layout/resources/base/etalons/generic-resource(view=month-resource=true).png b/...er/layout/resources/base/etalons/generic-resource(view=month-resource=true).png
diff --git a/...ut/resources/base/etalons/generic-resource(view=timelineDay-resource=false).png b/...ut/resources/base/etalons/generic-resource(view=timelineDay-resource=false).png
diff --git a/...out/resources/base/etalons/generic-resource(view=timelineDay-resource=true).png b/...out/resources/base/etalons/generic-resource(view=timelineDay-resource=true).png
diff --git a/.../resources/base/etalons/generic-resource(view=timelineMonth-resource=false).png b/.../resources/base/etalons/generic-resource(view=timelineMonth-resource=false).png
diff --git a/...t/resources/base/etalons/generic-resource(view=timelineMonth-resource=true).png b/...t/resources/base/etalons/generic-resource(view=timelineMonth-resource=true).png
diff --git a/...ut/resources/base/etalons/generic-resource(view=timelineWeek-resource=true).png b/...ut/resources/base/etalons/generic-resource(view=timelineWeek-resource=true).png
diff --git a/...sources/base/etalons/generic-resource(view=timelineWorkWeek-resource=false).png b/...sources/base/etalons/generic-resource(view=timelineWorkWeek-resource=false).png
diff --git a/...er/layout/resources/base/etalons/generic-resource(view=week-resource=false).png b/...er/layout/resources/base/etalons/generic-resource(view=week-resource=false).png
diff --git a/...ler/layout/resources/base/etalons/generic-resource(view=week-resource=true).png b/...ler/layout/resources/base/etalons/generic-resource(view=week-resource=true).png
diff --git a/...ayout/resources/base/etalons/generic-resource(view=workWeek-resource=false).png b/...ayout/resources/base/etalons/generic-resource(view=workWeek-resource=false).png
diff --git a/...layout/resources/base/etalons/generic-resource(view=workWeek-resource=true).png b/...layout/resources/base/etalons/generic-resource(view=workWeek-resource=true).png
diff --git a/...layout/resources/base/etalons/material-resource(view=agenda-resource=false).png b/...layout/resources/base/etalons/material-resource(view=agenda-resource=false).png
diff --git a/.../layout/resources/base/etalons/material-resource(view=agenda-resource=true).png b/.../layout/resources/base/etalons/material-resource(view=agenda-resource=true).png
diff --git a/...er/layout/resources/base/etalons/material-resource(view=day-resource=false).png b/...er/layout/resources/base/etalons/material-resource(view=day-resource=false).png
diff --git a/...ler/layout/resources/base/etalons/material-resource(view=day-resource=true).png b/...ler/layout/resources/base/etalons/material-resource(view=day-resource=true).png
diff --git a/.../layout/resources/base/etalons/material-resource(view=month-resource=false).png b/.../layout/resources/base/etalons/material-resource(view=month-resource=false).png
diff --git a/...r/layout/resources/base/etalons/material-resource(view=month-resource=true).png b/...r/layout/resources/base/etalons/material-resource(view=month-resource=true).png
diff --git a/...r/layout/resources/base/etalons/material-resource(view=week-resource=false).png b/...r/layout/resources/base/etalons/material-resource(view=week-resource=false).png
diff --git a/...er/layout/resources/base/etalons/material-resource(view=week-resource=true).png b/...er/layout/resources/base/etalons/material-resource(view=week-resource=true).png
diff --git a/...yout/resources/base/etalons/material-resource(view=workWeek-resource=false).png b/...yout/resources/base/etalons/material-resource(view=workWeek-resource=false).png
diff --git a/...ayout/resources/base/etalons/material-resource(view=workWeek-resource=true).png b/...ayout/resources/base/etalons/material-resource(view=workWeek-resource=true).png
diff --git a/...tcafe/tests/scheduler/layout/templates/etalons/appointment-tooltip-template.png b/...tcafe/tests/scheduler/layout/templates/etalons/appointment-tooltip-template.png