@syncfusion/ej2-filemanager 20.4.54 → 21.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.54
+*  version : 21.1.35
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@20.4.53",
+  "_id": "@syncfusion/ej2-filemanager@18.20.1",
   "_inBundle": false,
-  "_integrity": "sha512-hRxbOu4llryPixV5VYWcvxotmZQJdr5+jPu1I9YOcbs8vL5jtlQRXXr6ABEf2X6mnEzFcFWVHgmGAuj2VVzP2Q==",
+  "_integrity": "sha512-aWF002IK3S7gXmugPv1V7vnx88KCzVk1ndOj7yJyj8cu11Q/4Lk4B8azq2R8+1Mlyra1qHCFRFoS+RB38D6oIg==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -25,10 +25,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-20.4.53.tgz",
-  "_shasum": "52c0ddcdc7618c33ef391280a7517ecbe4dcc876",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.20.1.tgz",
+  "_shasum": "6115759f03937e73d38d4967b9e9ce8507850442",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -37,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-buttons": "~20.4.53",
-    "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-grids": "~20.4.54",
-    "@syncfusion/ej2-inputs": "~20.4.54",
-    "@syncfusion/ej2-layouts": "~20.4.53",
-    "@syncfusion/ej2-lists": "~20.4.50",
-    "@syncfusion/ej2-navigations": "~20.4.53",
-    "@syncfusion/ej2-popups": "~20.4.53",
-    "@syncfusion/ej2-splitbuttons": "~20.4.50"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-buttons": "~21.1.35",
+    "@syncfusion/ej2-data": "~21.1.35",
+    "@syncfusion/ej2-grids": "~21.1.35",
+    "@syncfusion/ej2-inputs": "~21.1.35",
+    "@syncfusion/ej2-layouts": "~21.1.35",
+    "@syncfusion/ej2-lists": "~21.1.35",
+    "@syncfusion/ej2-navigations": "~21.1.35",
+    "@syncfusion/ej2-popups": "~21.1.35",
+    "@syncfusion/ej2-splitbuttons": "~21.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -76,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.54",
+  "version": "21.1.35",
   "sideEffects": false
 }

package/src/file-manager/base/file-manager.js

@@ -659,8 +659,10 @@ var FileManager = /** @class */ (function (_super) {
                 break;
             case 'ctrlU':
                 e.preventDefault();
-                uploadEle = select('#' + this.element.id + CLS.UPLOAD_ID, this.element);
-                uploadEle.click();
+                if (this.toolbarSettings.items.indexOf('Upload') != -1) {
+                    uploadEle = select('#' + this.element.id + CLS.UPLOAD_ID, this.element);
+                    uploadEle.click();
+                }
                 break;
         }
     };

package/src/file-manager/base/interface.d.ts

@@ -16,19 +16,144 @@ import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
 /**
  * Defines the view type of the FileManager.
  */
-export declare type ViewType = 'LargeIcons' | 'Details';
+export declare type ViewType = 
+/**
+* Displays the files and folders as large icons.
+*/
+'LargeIcons' | 
+/**
+* Displays the files and folders in a list format.
+*/
+'Details';
 /**
  * Defines the files sorting order in FileManager.
  */
-export declare type SortOrder = 'Ascending' | 'Descending' | 'None';
+export declare type SortOrder = 
+/**
+* Indicates that the folders and files are sorted in the descending order.
+*/
+'Ascending' | 
+/**
+*  Indicates that the folders and files are sorted in the ascending order
+*/
+'Descending' | 
+/**
+* Indicates that the folders and files are not sorted.
+*/
+'None';
 /**
  * Defines the Toolbar items of the FileManager.
  */
-export declare type ToolBarItems = 'NewFolder' | 'Upload' | 'Cut' | 'Copy' | 'Paste' | 'Delete' | 'Download' | 'Rename' | 'SortBy' | 'Refresh' | 'Selection' | 'View' | 'Details';
+export declare type ToolBarItems = 
+/**
+ * Allows you to quickly create a new folder
+ */
+'NewFolder' | 
+/**
+ * Allows you to quickly and easily upload files from your local computer.
+ */
+'Upload' | 
+/**
+ * Allows you to remove a file or folder from its current location and move it to a different location.
+ */
+'Cut' | 
+/**
+ * Allows you to create a duplicate of a file or folder and place it in a different location.
+ */
+'Copy' | 
+/**
+ * Allows you to place a previously cut or copied file or folder in a new location.
+ */
+'Paste' | 
+/**
+ * Allows you to remove a file or folder permanently.
+ */
+'Delete' | 
+/**
+ * Allows you to quickly and easily download files to your local computer.
+ */
+'Download' | 
+/**
+ * Allows you to change the name of a file or folder.
+ */
+'Rename' | 
+/**
+ * Allows you to sort files and folder by different criteria such as name, date, size, etc.
+ */
+'SortBy' | 
+/**
+ * Allows you to refresh the current folder's content, showing the changes made on the folder.
+ */
+'Refresh' | 
+/**
+ * Allows you to select one or more files or folders.
+ */
+'Selection' | 
+/**
+ * Allows you to change the way files and folders are displayed.
+ */
+'View' | 
+/**
+ * Allows you to see additional information about the files and folders, such as the size and date modified.
+ */
+'Details';
+export declare type MenuItems = 
+/**
+ * Allows you to quickly create a new folder
+ */
+'NewFolder' | 
+/**
+ * Allows you to quickly and easily upload files from your local computer.
+ */
+'Upload' | 
+/**
+ * Allows you to remove a file or folder from its current location and move it to a different location.
+ */
+'Cut' | 
+/**
+ * Allows you to create a duplicate of a file or folder and place it in a different location.
+ */
+'Copy' | 
+/**
+ * Allows you to place a previously cut or copied file or folder in a new location.
+ */
+'Paste' | 
+/**
+ * Allows you to remove a file or folder permanently.
+ */
+'Delete' | 
+/**
+ * Allows you to quickly and easily download files to your local computer.
+ */
+'Download' | 
+/**
+ * Allows you to change the name of a file or folder.
+ */
+'Rename' | 
+/**
+ * Allows you to sort files and folder by different criteria such as name, date, size, etc.
+ */
+'SortBy' | 
+/**
+ * Allows you to refresh the current folder's content, showing the changes made on the folder.
+ */
+'Refresh' | 
+/**
+ * Allows you to select all the files and folders in the current folder.
+ */
+'SelectAll' | 
+/**
+ * Allows you to change the way files and folders are displayed.
+ */
+'View' | 
+/**
+ * Allows you to see additional information about the files and folders, such as the size and date modified.
+ */
+'Details' | 
 /**
- * Defines the Context menu items for the FileManager.
+ * Allows you to open the selected file or folder.
  */
-export declare type MenuItems = 'NewFolder' | 'Upload' | 'Cut' | 'Copy' | 'Paste' | 'Delete' | 'Download' | 'Rename' | 'SortBy' | 'Refresh' | 'SelectAll' | 'View' | 'Details' | 'Open';
+'Open';
 /**
  * Interfaces for File Manager Toolbar items.
  */

package/src/file-manager/layout/details-view.js

@@ -282,7 +282,17 @@ var DetailsView = /** @class */ (function () {
             else {
                 var sizeValue = getValue('size', args.data);
                 var intl = new Internationalization(this.parent.locale);
-                var value = intl.formatNumber((sizeValue / 1024), { format: 'n' });
+                var sizeFormat = void 0;
+                var columns = this.parent.detailsViewSettings.columns;
+                for (var i = 0; i < columns.length; i++) {
+                    if (columns[i].field === 'size') {
+                        sizeFormat = columns[i].format.toString();
+                        break;
+                    }
+                }
+                var value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
+                var num = Number(value.replace(/,/g, ''));
+                value = num.toLocaleString(intl.culture);
                 modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
             }
             sizeEle.innerHTML = modifiedSize;

package/src/file-manager/models/details-view-settings.js

@@ -31,7 +31,7 @@ export var columnArray = [
         format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'
     },
     {
-        field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '<span class="e-fe-size">${size}</span>'
+        field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '<span class="e-fe-size">${size}</span>', format: 'n2'
     }
 ];
 /**

package/src/file-manager/models/search-settings.d.ts

@@ -2,7 +2,19 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 /**
  * Specifies the filter type for Search settings of the File Manager.
  */
-export declare type FilterType = 'contains' | 'startsWith' | 'endsWith';
+export declare type FilterType = 
+/**
+ * It will only show files and folders whose names contain the entered word.
+ */
+'contains' | 
+/**
+ * It will only show files and folders whose names start with entered word.
+ */
+'startsWith' | 
+/**
+ * It will only show files and folders whose names end with entered word.
+ */
+'endsWith';
 /**
  * Specifies the Search settings of the File Manager.
  */

package/styles/bootstrap-dark.css

@@ -444,9 +444,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 13px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #0070f0 inset;
 }
@@ -1492,11 +1489,11 @@ ejs-filemanager {
   background-color: #1a1a1a;
   color: #f0f0f0;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row]:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: #393939;
   color: #acacac;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/bootstrap.css

@@ -445,9 +445,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 13px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #317ab9 inset;
 }
@@ -1479,7 +1476,7 @@ ejs-filemanager {
   background-color: #317ab9;
   color: #fff;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/bootstrap4.css

@@ -444,9 +444,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 13px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #007bff inset;
 }
@@ -1504,7 +1501,7 @@ ejs-filemanager {
   background-color: #fff;
   color: #212529;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/bootstrap5-dark.css

@@ -359,6 +359,7 @@ ejs-filemanager {
   margin: 5px;
   margin-right: 4px;
   padding: 3px;
+  padding: 5px;
   position: absolute;
   z-index: 1;
 }
@@ -459,9 +460,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 14px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #0d6efd inset;
 }
@@ -1167,7 +1165,7 @@ ejs-filemanager {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: 16px;
   max-width: 205px;
   min-width: 45px;
   padding: 8px 30px 8px 0;
@@ -1542,7 +1540,7 @@ ejs-filemanager {
   background-color: #fff;
   color: #0d6efd;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/bootstrap5.css

@@ -359,6 +359,7 @@ ejs-filemanager {
   margin: 5px;
   margin-right: 4px;
   padding: 3px;
+  padding: 5px;
   position: absolute;
   z-index: 1;
 }
@@ -459,9 +460,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 14px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #0d6efd inset;
 }
@@ -1167,7 +1165,7 @@ ejs-filemanager {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: 16px;
   max-width: 205px;
   min-width: 45px;
   padding: 8px 30px 8px 0;
@@ -1542,7 +1540,7 @@ ejs-filemanager {
   background-color: #fff;
   color: #0d6efd;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/fabric-dark.css

@@ -440,9 +440,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 13px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #0074cc inset;
 }
@@ -1473,7 +1470,7 @@ ejs-filemanager {
   background-color: #514f4f;
   color: #fff;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/fabric.css

@@ -441,9 +441,6 @@ ejs-filemanager {
   border: 0;
   font-size: 12px;
 }
-.e-filemanager .e-grid .e-content .e-rowcell .e-fe-text {
-  font-size: 13px;
-}
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
   box-shadow: 1px 0 0 1px #0078d6 inset;
 }
@@ -1474,7 +1471,7 @@ ejs-filemanager {
   background-color: #d1ebff;
   color: #333;
 }
-.e-filemanager .e-grid.e-gridhover tr[role=row].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+.e-filemanager .e-grid.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
   background-color: transparent;
 }
 .e-filemanager .e-large-icons .e-list-img {

package/styles/file-manager/_bootstrap-dark-definition.scss

@@ -63,6 +63,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -1px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_bootstrap-definition.scss

@@ -63,6 +63,7 @@ $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -1px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_bootstrap4-definition.scss

@@ -65,6 +65,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -96,6 +97,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_bootstrap5-definition.scss

@@ -8,10 +8,10 @@ $fe-lg-text-font-size: $text-xs !default;
 $fe-ddl-icon-font-size: $text-sm !default;
 
 $fe-big-bc-font-size: $text-sm !default;
-$fe-big-bc-icon-font-size: 10px !default;
+$fe-big-bc-icon-font-size: $text-xxs !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-font-size: 21px !default;
-$fe-big-dg-td-font-size: 15px !default;
+$fe-big-dg-td-font-size: $text-base !default;
 
 $fe-clone-box-shadow: $shadow !default;
 $fe-clone-border: none !default;
@@ -25,6 +25,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 3px 12px 2px 0 !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 5px !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 29px !default;
 $fe-bc-margin: 0 !default;
@@ -41,10 +42,10 @@ $fe-grid-icon-margin: 0 !default;
 $fe-dg-td-padding: 4px 24px 4px 0 !default;
 $fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
 $fe-grid-header-height: 32px !default;
-$fe-grid-header-font-size: 10px !default;
+$fe-grid-header-font-size: $text-xxs !default;
 $fe-grid-header-cb-padding-left: 12px !default;
-$fe-grid-content-font-size: 12px !default;
-$fe-grid-content-name-font-size: 14px !default;
+$fe-grid-content-font-size: $text-xs !default;
+$fe-grid-content-name-font-size: $text-sm !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 4px !default;
@@ -52,6 +53,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;
@@ -92,9 +94,9 @@ $fe-big-lg-icon-width: 52px !default;
 $fe-big-lg-icon-margin: 11px auto !default;
 $fe-big-lg-img-height: 79px !default;
 $fe-big-lg-text-padding: 4px 2px 2px !default;
-$fe-big-grid-header-font-size: 14px !default;
-$fe-big-grid-content-font-size: 14px !default;
-$fe-big-grid-content-name-font-size: 16px !default;
+$fe-big-grid-header-font-size: $text-sm !default;
+$fe-big-grid-content-font-size: $text-sm !default;
+$fe-big-grid-content-name-font-size: $text-base !default;
 $fe-big-cb-line-height: 14px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
@@ -108,7 +110,7 @@ $fe-mobile-lg-icon-width: 110px !default;
 $fe-mobile-lg-icon-margin: 11px auto 0 !default;
 $fe-mobile-lg-img-height: 110px !default;
 $fe-mobile-grid-icon-size: 35px !default;
-$fe-mobile-icon-font-size: 20px !default;
+$fe-mobile-icon-font-size: $text-xl !default;
 $fe-mobile-newfolder-padding-top: 0 !default;
 $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
@@ -140,7 +142,7 @@ $fe-big-lg-icon-empty-icon-height: 92px !default;
 $fe-big-lg-icon-empty-icon-margin: 0 auto !default;
 $fe-big-lg-icon-empty-icon-width: 92px !default;
 
-$fe-big-lg-icon-empty-inner-content-font-size: 14px !default;
+$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !default;
 $fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-big-lg-icon-empty-inner-content-padding: 4px !default;
@@ -157,7 +159,7 @@ $fe-big-grid-empty-icon-height: 92px !default;
 $fe-big-grid-empty-icon-margin: 0 auto !default;
 $fe-big-grid-empty-icon-width: 92px !default;
 
-$fe-big-grid-empty-inner-content-font-size: 14px !default;
+$fe-big-grid-empty-inner-content-font-size: $text-sm !default;
 $fe-big-grid-empty-inner-content-margin: 0 auto !default;
 $fe-big-grid-empty-inner-content-opacity: .5 !default;
 $fe-big-grid-empty-inner-content-padding: 6px !default;

package/styles/file-manager/_fabric-dark-definition.scss

@@ -61,6 +61,7 @@ $fe-search-padding: 2px 4px 2px 8px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 4px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -2px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -92,6 +93,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_fabric-definition.scss

@@ -63,6 +63,7 @@ $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 4px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -2px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;