Fluent: Theme Builder - Add properties to change DataGrid/TreeList/Sc…

…heduler's border radius (#25782)
DevExpress · Nov 3, 2023 · 7ccaca0 · 7ccaca0
1 parent 64afad1
commit 7ccaca0
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss
@@ -81,6 +81,5 @@ $fluent-base-border-width: 1px !default;
 * $type text
 */
 $base-border-radius: $fluent-base-border-radius !default;
-$fluent-grid-base-border-radius: 0 !default;
 
 $fluent-base-standard-texteditor-input-horizontal-padding: 0 !default;
diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
@@ -45,13 +45,13 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
   .dx-#{$widget-name},
   .dx-#{$widget-name}-container {
     .dx-bordered-top-view {
-      border-top-left-radius: $fluent-grid-base-border-radius;
-      border-top-right-radius: $fluent-grid-base-border-radius;
+      border-top-left-radius: $datagrid-border-radius;
+      border-top-right-radius: $datagrid-border-radius;
     }
 
     .dx-bordered-bottom-view {
-      border-bottom-left-radius: $fluent-grid-base-border-radius;
-      border-bottom-right-radius: $fluent-grid-base-border-radius;
+      border-bottom-left-radius: $datagrid-border-radius;
+      border-bottom-right-radius: $datagrid-border-radius;
     }
 
     .dx-menu {
@@ -267,11 +267,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       padding-bottom: $fluent-grid-base-header-cell-vertical-padding;
 
       &:first-child {
-        border-top-left-radius: $fluent-grid-base-border-radius;
+        border-top-left-radius: $datagrid-border-radius;
       }
 
       &:last-child {
-        border-top-right-radius: $fluent-grid-base-border-radius;
+        border-top-right-radius: $datagrid-border-radius;
       }
     }
 
@@ -1253,10 +1253,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
   }
 
   .dx-#{$widget-name}-dragview {
-    border-radius: $fluent-grid-base-border-radius;
+    border-radius: $datagrid-border-radius;
 
     .dx-#{$widget-name}-borders {
-      border-radius: $fluent-grid-base-border-radius;
+      border-radius: $datagrid-border-radius;
     }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss
@@ -2,6 +2,12 @@
 
 // adduse
 
+/**
+* $name 15. Border radius
+* $type text
+*/
+$datagrid-border-radius: 12px !default;
+
 $fluent-grid-base-cell-height: null !default;
 $fluent-grid-base-header-height: null !default;
 $fluent-grid-base-cell-line-height: null !default;

diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
@@ -72,7 +72,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-container {
-  border-radius: $fluent-scheduler-border-radius;
+  border-radius: $scheduler-border-radius;
 }
 
 .dx-scheduler-time-panel-cell {
@@ -411,8 +411,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   }
 
   background-color: $scheduler-header-bg;
-  border-top-right-radius: $fluent-scheduler-border-radius;
-  border-top-left-radius: $fluent-scheduler-border-radius;
+  border-top-right-radius: $scheduler-border-radius;
+  border-top-left-radius: $scheduler-border-radius;
 }
 
 .dx-scheduler-group-row {
@@ -472,8 +472,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
-  border-bottom-right-radius: $fluent-scheduler-border-radius;
-  border-bottom-left-radius: $fluent-scheduler-border-radius;
+  border-bottom-right-radius: $scheduler-border-radius;
+  border-bottom-left-radius: $scheduler-border-radius;
 
   &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
     .dx-scheduler-header-panel,

diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss
@@ -22,7 +22,13 @@ $fluent-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
 $scheduler-left-column-width: 65px !default;
 $fluent-scheduler-timeline-date-table-cell-height: 50px !default;
-$fluent-scheduler-border-radius: 0 !default;
+
+/**
+* $name 15. Border radius
+* $type text
+*/
+$scheduler-border-radius: 12px !default;
+
 $fluent-scheduler-navigator-border-radius: $button-border-radius !default;
 $fluent-scheduler-navigation-buttons-padding: 6px !default;
 $fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size;