Fluent: update popup paddings (#25828)

Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Oct 18, 2023 · 1c80639 · 1c80639
1 parent a3a7c07
commit 1c80639
Show file tree

Hide file tree

Showing 28 changed files with 6 additions and 4 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
@@ -1209,8 +1209,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
   .dx-header-filter-menu {
     .dx-popup-content {
-      padding: 12px 8px 0 8px;
-      border-bottom: 1px solid $fluent-grid-base-border-color;
+      padding: 8px 8px 0 8px;
     }
   }
 
@@ -1231,7 +1230,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
     .dx-icon-filter {
       color: $datagrid-filter-panel-color;
-      
+
       @include dx-icon-sizing($fluent-filter-panel-icon-size);
     }
   }

diff --git a/packages/devextreme/scss/widgets/fluent/popup/_index.scss b/packages/devextreme/scss/widgets/fluent/popup/_index.scss
@@ -67,7 +67,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
   &.dx-toolbar {
     @include dx-toolbar-sizing(
       $fluent-popup-bottom-toolbar-height,
-      0 $fluent-popup-content-withtitle-top-padding,
+      0 $fluent-popup-content-withtitle-top-padding $fluent-popup-content-withtitle-bottom-padding,
       $fluent-popup-toolbar-label-font-size,
       $fluent-popup-toolbar-item-spacing
     );

diff --git a/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss b/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss
@@ -4,6 +4,7 @@
 
 $fluent-popup-content-padding: null !default;
 $fluent-popup-content-withtitle-top-padding: null !default;
+$fluent-popup-content-withtitle-bottom-padding: null !default;
 $fluent-popup-toolbar-horizontal-padding: null !default;
 $fluent-popup-bottom-toolbar-height: null !default;
 $fluent-popup-toolbar-height: null !default;
@@ -14,6 +15,7 @@ $fluent-popup-toolbar-item-spacing: 8px !default;
 @if $size == "default" {
   $fluent-popup-content-padding: 24px !default;
   $fluent-popup-content-withtitle-top-padding: 24px !default;
+  $fluent-popup-content-withtitle-bottom-padding: 16px !default;
 
   $fluent-popup-toolbar-horizontal-padding: 24px !default;
   $fluent-popup-bottom-toolbar-height: 48px !default;
@@ -23,6 +25,7 @@ $fluent-popup-toolbar-item-spacing: 8px !default;
 @else if $size == "compact" {
   $fluent-popup-content-padding: 16px !default;
   $fluent-popup-content-withtitle-top-padding: 16px !default;
+  $fluent-popup-content-withtitle-bottom-padding: 12px !default;
 
   $fluent-popup-toolbar-horizontal-padding: 16px !default;
   $fluent-popup-bottom-toolbar-height: 36px !default;

diff --git a/...afe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png b/...afe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png
diff --git a/...eBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png b/...eBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png
diff --git a/.../dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png b/.../dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png
diff --git a/...testcafe/tests/editors/lookup/etalons/Lookup in loading (fluent-blue-light).png b/...testcafe/tests/editors/lookup/etalons/Lookup in loading (fluent-blue-light).png
diff --git a/...s/Lookup label with labelMode=floating-styleMode=filled (fluent-blue-light).png b/...s/Lookup label with labelMode=floating-styleMode=filled (fluent-blue-light).png
diff --git a/...Lookup label with labelMode=floating-styleMode=outlined (fluent-blue-light).png b/...Lookup label with labelMode=floating-styleMode=outlined (fluent-blue-light).png
diff --git a/...okup label with labelMode=floating-styleMode=underlined (fluent-blue-light).png b/...okup label with labelMode=floating-styleMode=underlined (fluent-blue-light).png
diff --git a/...ns/Lookup label with labelMode=outside-styleMode=filled (fluent-blue-light).png b/...ns/Lookup label with labelMode=outside-styleMode=filled (fluent-blue-light).png
diff --git a/.../Lookup label with labelMode=outside-styleMode=outlined (fluent-blue-light).png b/.../Lookup label with labelMode=outside-styleMode=outlined (fluent-blue-light).png
diff --git a/...ookup label with labelMode=outside-styleMode=underlined (fluent-blue-light).png b/...ookup label with labelMode=outside-styleMode=underlined (fluent-blue-light).png
diff --git a/...ons/Lookup label with labelMode=static-styleMode=filled (fluent-blue-light).png b/...ons/Lookup label with labelMode=static-styleMode=filled (fluent-blue-light).png
diff --git a/...s/Lookup label with labelMode=static-styleMode=outlined (fluent-blue-light).png b/...s/Lookup label with labelMode=static-styleMode=outlined (fluent-blue-light).png
diff --git a/...Lookup label with labelMode=static-styleMode=underlined (fluent-blue-light).png b/...Lookup label with labelMode=static-styleMode=underlined (fluent-blue-light).png
diff --git a/.../tests/editors/lookup/etalons/Lookup with no found data (fluent-blue-light).png b/.../tests/editors/lookup/etalons/Lookup with no found data (fluent-blue-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/...lays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=false (fluent-blue-light).png b/...lays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=false (fluent-blue-light).png
diff --git a/...rlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=true (fluent-blue-light).png b/...rlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=true (fluent-blue-light).png
diff --git a/...verlays/etalons/Popup_top_toolbar_menu,rtlEnabled=false (fluent-blue-light).png b/...verlays/etalons/Popup_top_toolbar_menu,rtlEnabled=false (fluent-blue-light).png
diff --git a/...overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=true (fluent-blue-light).png b/...overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=true (fluent-blue-light).png
diff --git a/...e/etalons/editor-before-click-add-button-and-validation (fluent-blue-light).png b/...e/etalons/editor-before-click-add-button-and-validation (fluent-blue-light).png
diff --git a/...mage/etalons/editor-before-click-add-button-from-device (fluent-blue-light).png b/...mage/etalons/editor-before-click-add-button-from-device (fluent-blue-light).png
diff --git a/...lEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-blue-light).png b/...lEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-blue-light).png