From 6758105cec4bb20c2a487174def16b2e5b827a72 Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Wed, 12 Jun 2024 10:07:03 +0300
Subject: [PATCH] chore(fluent): add utils to components

---
 packages/fluent/scss/action-sheet/index.scss      | 4 ++++
 packages/fluent/scss/badge/index.scss             | 3 +++
 packages/fluent/scss/bottom-navigation/index.scss | 3 +++
 packages/fluent/scss/breadcrumb/index.scss        | 4 ++++
 packages/fluent/scss/calendar/index.scss          | 4 ++++
 packages/fluent/scss/captcha/index.scss           | 4 ++++
 packages/fluent/scss/card/index.scss              | 4 ++++
 packages/fluent/scss/colorgradient/index.scss     | 4 ++++
 packages/fluent/scss/dropdowntree/index.scss      | 3 +++
 packages/fluent/scss/expansion-panel/index.scss   | 3 +++
 packages/fluent/scss/fab/index.scss               | 7 +++++++
 packages/fluent/scss/forms/index.scss             | 6 ++++++
 packages/fluent/scss/gantt/index.scss             | 4 ++++
 packages/fluent/scss/grid/index.scss              | 3 +++
 packages/fluent/scss/icon/index.scss              | 5 +++++
 packages/fluent/scss/listview/index.scss          | 6 ++++++
 packages/fluent/scss/loader/index.scss            | 3 +++
 packages/fluent/scss/map/index.scss               | 3 +++
 packages/fluent/scss/orgchart/index.scss          | 6 ++++++
 packages/fluent/scss/pdf-viewer/index.scss        | 5 +++++
 packages/fluent/scss/pivotgrid/index.scss         | 6 ++++++
 packages/fluent/scss/prompt/index.scss            | 3 +++
 packages/fluent/scss/tabstrip/index.scss          | 4 ++++
 packages/fluent/scss/taskboard/index.scss         | 3 +++
 packages/fluent/scss/textarea/index.scss          | 7 +++++++
 packages/fluent/scss/tilelayout/index.scss        | 3 +++
 packages/fluent/scss/toolbar/index.scss           | 3 +++
 packages/fluent/scss/tooltip/index.scss           | 3 +++
 28 files changed, 116 insertions(+)

diff --git a/packages/fluent/scss/action-sheet/index.scss b/packages/fluent/scss/action-sheet/index.scss
index 46809f51691..944da21afcb 100644
--- a/packages/fluent/scss/action-sheet/index.scss
+++ b/packages/fluent/scss/action-sheet/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "action-sheet",
@@ -24,5 +26,7 @@ $_kendo-module-meta: (
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--layout-jq();
         @include kendo-action-sheet--theme();
+        @include utils--layout--overflow();
+        @include utils--typography--text-align();
     }
 }
diff --git a/packages/fluent/scss/badge/index.scss b/packages/fluent/scss/badge/index.scss
index 1a528594822..30f2ce73480 100644
--- a/packages/fluent/scss/badge/index.scss
+++ b/packages/fluent/scss/badge/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "badge",
@@ -19,5 +21,6 @@ $_kendo-module-meta: (
     @include module.render( "badge" ) {
         @include kendo-badge--layout();
         @include kendo-badge--theme();
+        @include utils--layout--placement();
     }
 }
diff --git a/packages/fluent/scss/bottom-navigation/index.scss b/packages/fluent/scss/bottom-navigation/index.scss
index 2e5079d26c6..3e7cae729d4 100644
--- a/packages/fluent/scss/bottom-navigation/index.scss
+++ b/packages/fluent/scss/bottom-navigation/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "bottom-navigation",
@@ -21,5 +23,6 @@ $_kendo-module-meta: (
     @include module.render( "bottom-navigation" ) {
         @include kendo-bottom-navigation--layout();
         @include kendo-bottom-navigation--theme();
+        @include utils--layout--position();
     }
 }
diff --git a/packages/fluent/scss/breadcrumb/index.scss b/packages/fluent/scss/breadcrumb/index.scss
index 515cea53c98..aa3f7c3cb1e 100644
--- a/packages/fluent/scss/breadcrumb/index.scss
+++ b/packages/fluent/scss/breadcrumb/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "breadcrumb",
@@ -22,5 +24,7 @@ $_kendo-module-meta: (
     @include module.render( "breadcrumb" ) {
         @include kendo-breadcrumb--layout();
         @include kendo-breadcrumb--theme();
+        @include utils--flex-grid--flex();
+        @include utils--flex-grid--flex-wrap();
     }
 }
diff --git a/packages/fluent/scss/calendar/index.scss b/packages/fluent/scss/calendar/index.scss
index 0d239202a19..143b055ddba 100644
--- a/packages/fluent/scss/calendar/index.scss
+++ b/packages/fluent/scss/calendar/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "button",
@@ -21,5 +23,7 @@ $_kendo-module-meta: (
     @include module.render( "calendar" ) {
         @include kendo-calendar--layout();
         @include kendo-calendar--theme();
+        @include utils--flex-grid--align-items();
+        @include utils--flex-grid--justify-content();
     }
 }
diff --git a/packages/fluent/scss/captcha/index.scss b/packages/fluent/scss/captcha/index.scss
index 59352d8e178..324ce9ce4ff 100644
--- a/packages/fluent/scss/captcha/index.scss
+++ b/packages/fluent/scss/captcha/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "captcha",
@@ -25,5 +27,7 @@ $_kendo-module-meta: (
     @include module.render( "captcha" ) {
         @include kendo-captcha--layout();
         @include kendo-captcha--theme();
+        @include utils--typography--text-color();
+        @include utils--layout--position();
     }
 }
diff --git a/packages/fluent/scss/card/index.scss b/packages/fluent/scss/card/index.scss
index 458ae06ba68..0880a10e9eb 100644
--- a/packages/fluent/scss/card/index.scss
+++ b/packages/fluent/scss/card/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "card",
@@ -25,5 +27,7 @@ $_kendo-module-meta: (
     @include module.render( "card" ) {
         @include kendo-card--layout();
         @include kendo-card--theme();
+        @include utils--typography--text-overflow();
+        @include utils--layout--display();
     }
 }
diff --git a/packages/fluent/scss/colorgradient/index.scss b/packages/fluent/scss/colorgradient/index.scss
index 0a1b1fbcc55..96fbc74f8ee 100644
--- a/packages/fluent/scss/colorgradient/index.scss
+++ b/packages/fluent/scss/colorgradient/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "colorgradient",
@@ -25,5 +27,7 @@ $_kendo-module-meta: (
     @include module.render( "colorgradient" ) {
         @include kendo-color-gradient--layout();
         @include kendo-color-gradient--theme();
+        @include utils--flex-grid--flex();
+        @include utils--typography--text-color();
     }
 }
diff --git a/packages/fluent/scss/dropdowntree/index.scss b/packages/fluent/scss/dropdowntree/index.scss
index 0eece455da0..910283afc8a 100644
--- a/packages/fluent/scss/dropdowntree/index.scss
+++ b/packages/fluent/scss/dropdowntree/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "dropdowntree",
@@ -24,5 +26,6 @@ $_kendo-module-meta: (
     @include module.render( "dropdowntree" ) {
         @include kendo-dropdowntree--layout();
         @include kendo-dropdowntree--theme();
+        @include utils--typography--text-align();
     }
 }
diff --git a/packages/fluent/scss/expansion-panel/index.scss b/packages/fluent/scss/expansion-panel/index.scss
index 310f2c6b8a7..8a71666ed02 100644
--- a/packages/fluent/scss/expansion-panel/index.scss
+++ b/packages/fluent/scss/expansion-panel/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "expansion-panel",
@@ -20,5 +22,6 @@ $_kendo-module-meta: (
     @include module.render( "expansion-panel" ) {
         @include kendo-expansion-panel--layout();
         @include kendo-expansion-panel--theme();
+        @include utils--layout--display();
     }
 }
diff --git a/packages/fluent/scss/fab/index.scss b/packages/fluent/scss/fab/index.scss
index 94ffb52de1a..e635209c7fb 100644
--- a/packages/fluent/scss/fab/index.scss
+++ b/packages/fluent/scss/fab/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "fab",
@@ -24,5 +26,10 @@ $_kendo-module-meta: (
     @include module.render( "fab" ) {
         @include kendo-fab--layout();
         @include kendo-fab--theme();
+        @include utils--layout--position();
+        @include utils--layout--placement();
+        @include utils--typography--text-align();
+
+        @include utils--layout--overflow();
     }
 }
diff --git a/packages/fluent/scss/forms/index.scss b/packages/fluent/scss/forms/index.scss
index 23bb8cf6ca7..dcde91397dd 100644
--- a/packages/fluent/scss/forms/index.scss
+++ b/packages/fluent/scss/forms/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "forms",
@@ -26,5 +28,9 @@ $_kendo-module-meta: (
     @include module.render( "forms" ) {
         @include kendo-forms--layout();
         @include kendo-forms--theme();
+        @include utils--layout--display();
+        @include utils--flex-grid--gap();
+        @include utils--flex-grid--grid-template-columns();
+        @include utils--flex-grid--grid-column-start-end();
     }
 }
diff --git a/packages/fluent/scss/gantt/index.scss b/packages/fluent/scss/gantt/index.scss
index bc0028c3952..fcfc0b8651e 100644
--- a/packages/fluent/scss/gantt/index.scss
+++ b/packages/fluent/scss/gantt/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "gantt",
@@ -31,5 +33,7 @@ $_kendo-module-meta: (
     @include module.render( "gantt" ) {
         @include kendo-gantt--layout();
         @include kendo-gantt--theme();
+        @include utils--typography--white-space();
+        @include utils--table--table-layout();
     }
 }
diff --git a/packages/fluent/scss/grid/index.scss b/packages/fluent/scss/grid/index.scss
index 14626c3721b..82c0647e039 100644
--- a/packages/fluent/scss/grid/index.scss
+++ b/packages/fluent/scss/grid/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "grid",
@@ -43,5 +45,6 @@ $_kendo-module-meta: (
     @include module.render( "grid" ) {
         @include kendo-grid--layout();
         @include kendo-grid--theme();
+        @include utils--interactivity--touch-action();
     }
 }
diff --git a/packages/fluent/scss/icon/index.scss b/packages/fluent/scss/icon/index.scss
index d9fad47ba06..47793abfbd1 100644
--- a/packages/fluent/scss/icon/index.scss
+++ b/packages/fluent/scss/icon/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "icon",
@@ -19,5 +21,8 @@ $_kendo-module-meta: (
     @include module.render( "icon" ) {
         @include kendo-icon--layout();
         @include kendo-icon--theme();
+        @include utils--transform--rotate();
+        @include utils--transform--flip();
+        @include utils--typography--text-color();
     }
 }
diff --git a/packages/fluent/scss/listview/index.scss b/packages/fluent/scss/listview/index.scss
index 4977092e977..0d1d0963604 100644
--- a/packages/fluent/scss/listview/index.scss
+++ b/packages/fluent/scss/listview/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "listview",
@@ -23,5 +25,9 @@ $_kendo-module-meta: (
     @include module.render( "listview" ) {
         @include kendo-listview--layout();
         @include kendo-listview--theme();
+        @include utils--layout--display();
+        @include utils--flex-grid--flex-direction();
+        @include utils--flex-grid--grid-template-columns();
+        @include utils--flex-grid--flex-wrap();
     }
 }
diff --git a/packages/fluent/scss/loader/index.scss b/packages/fluent/scss/loader/index.scss
index 056b078ca06..2ed53a3750a 100644
--- a/packages/fluent/scss/loader/index.scss
+++ b/packages/fluent/scss/loader/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "loader",
@@ -21,5 +23,6 @@ $_kendo-module-meta: (
     @include module.render( "loader" ) {
         @include kendo-loader--layout();
         @include kendo-loader--theme();
+        @include utils--typography--text-color();
     }
 }
diff --git a/packages/fluent/scss/map/index.scss b/packages/fluent/scss/map/index.scss
index d86fa185abf..951b1fc6e89 100644
--- a/packages/fluent/scss/map/index.scss
+++ b/packages/fluent/scss/map/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "map",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
     @include module.render( "map" ) {
         @include kendo-map--layout();
         @include kendo-map--theme();
+        @include utils--layout--placement();
     }
 }
diff --git a/packages/fluent/scss/orgchart/index.scss b/packages/fluent/scss/orgchart/index.scss
index 0abd6a7e645..6adbe8f752f 100644
--- a/packages/fluent/scss/orgchart/index.scss
+++ b/packages/fluent/scss/orgchart/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "orgchart",
@@ -30,5 +32,9 @@ $_kendo-module-meta: (
     @include module.render( "orgchart" ) {
         @include kendo-orgchart--layout();
         @include kendo-orgchart--theme();
+        @include utils--layout--overflow();
+        @include utils--layout--position();
+        @include utils--flex-grid--align-items();
+        @include utils--flex-grid--justify-content();
     }
 }
diff --git a/packages/fluent/scss/pdf-viewer/index.scss b/packages/fluent/scss/pdf-viewer/index.scss
index 747328d127a..2fad5749885 100644
--- a/packages/fluent/scss/pdf-viewer/index.scss
+++ b/packages/fluent/scss/pdf-viewer/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "pdf-viewer",
@@ -28,5 +30,8 @@ $_kendo-module-meta: (
     @include module.render( "pdf-viewer" ) {
         @include kendo-pdf-viewer--layout();
         @include kendo-pdf-viewer--theme();
+        @include utils--layout--overflow();
+        @include utils--layout--position();
+        @include utils--layout--placement();
     }
 }
diff --git a/packages/fluent/scss/pivotgrid/index.scss b/packages/fluent/scss/pivotgrid/index.scss
index df8218f228f..5b74ff9652d 100644
--- a/packages/fluent/scss/pivotgrid/index.scss
+++ b/packages/fluent/scss/pivotgrid/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "pivotgrid",
@@ -32,5 +34,9 @@ $_kendo-module-meta: (
         @include kendo-pivotgrid--theme();
         @include kendo-pivotgrid-configurator--theme();
         @include kendo-pivotgrid-legacy--theme();
+
+        @include utils--layout--display();
+        @include utils--layout--position();
+        @include utils--flex-grid--flex-direction();
     }
 }
diff --git a/packages/fluent/scss/prompt/index.scss b/packages/fluent/scss/prompt/index.scss
index d83d5d5169c..fa8dd93aa8a 100644
--- a/packages/fluent/scss/prompt/index.scss
+++ b/packages/fluent/scss/prompt/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "prompt",
@@ -19,5 +21,6 @@ $_kendo-module-meta: (
     @include module.render( "prompt" ) {
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
+        @include utils--flex-grid--flex-direction();
     }
 }
diff --git a/packages/fluent/scss/tabstrip/index.scss b/packages/fluent/scss/tabstrip/index.scss
index 918ec23a939..e42a0d99fa1 100644
--- a/packages/fluent/scss/tabstrip/index.scss
+++ b/packages/fluent/scss/tabstrip/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tabstrip",
@@ -23,5 +25,7 @@ $_kendo-module-meta: (
     @include module.render( "tabstrip" ) {
         @include kendo-tabstrip--layout();
         @include kendo-tabstrip--theme();
+        @include utils--layout--overflow();
+        @include utils--layout--position();
     }
 }
diff --git a/packages/fluent/scss/taskboard/index.scss b/packages/fluent/scss/taskboard/index.scss
index 9395ef06fe3..bfc59a90a67 100644
--- a/packages/fluent/scss/taskboard/index.scss
+++ b/packages/fluent/scss/taskboard/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "taskboard",
@@ -27,5 +29,6 @@ $_kendo-module-meta: (
     @include module.render( "taskboard" ) {
         @include kendo-taskboard--layout();
         @include kendo-taskboard--theme();
+        @include utils--typography--text-overflow();
     }
 }
diff --git a/packages/fluent/scss/textarea/index.scss b/packages/fluent/scss/textarea/index.scss
index 40308422684..54b3d39a86a 100644
--- a/packages/fluent/scss/textarea/index.scss
+++ b/packages/fluent/scss/textarea/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "textarea",
@@ -21,5 +23,10 @@ $_kendo-module-meta: (
     @include module.render( "textarea" ) {
         @include kendo-textarea--layout();
         @include kendo-textarea--theme();
+        @include utils--flex-grid--align-items();
+        @include utils--flex-grid--flex-direction();
+        @include utils--flex-grid--flex();
+        @include utils--layout--overflow();
+        @include utils--interactivity--resize();
     }
 }
diff --git a/packages/fluent/scss/tilelayout/index.scss b/packages/fluent/scss/tilelayout/index.scss
index 011c26615eb..e78224e14c2 100644
--- a/packages/fluent/scss/tilelayout/index.scss
+++ b/packages/fluent/scss/tilelayout/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tilelayout",
@@ -21,5 +23,6 @@ $_kendo-module-meta: (
     @include module.render( "tilelayout" ) {
         @include kendo-tile-layout--layout();
         @include kendo-tile-layout--theme();
+        @include utils--interactivity--resize();
     }
 }
diff --git a/packages/fluent/scss/toolbar/index.scss b/packages/fluent/scss/toolbar/index.scss
index 37cf11537c5..a4c0fd96d1d 100644
--- a/packages/fluent/scss/toolbar/index.scss
+++ b/packages/fluent/scss/toolbar/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "toolbar",
@@ -24,5 +26,6 @@ $_kendo-module-meta: (
     @include module.render( "toolbar" ) {
         @include kendo-toolbar--layout();
         @include kendo-toolbar--theme();
+        @include utils--layout--overflow();
     }
 }
diff --git a/packages/fluent/scss/tooltip/index.scss b/packages/fluent/scss/tooltip/index.scss
index b079ae62215..ada29beda1e 100644
--- a/packages/fluent/scss/tooltip/index.scss
+++ b/packages/fluent/scss/tooltip/index.scss
@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tooltip",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
     @include module.render( "tooltip" ) {
         @include kendo-tooltip--layout();
         @include kendo-tooltip--theme();
+        @include utils--typography--text-color();
     }
 }