removed mixins for sass size calculations from uui package

epam · Dec 4, 2024 · a114c50 · a114c50
1 parent 62a1b97
commit a114c50
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 243 deletions.
diff --git a/app/src/data/propsOverride_4px.ts b/app/src/data/propsOverride_4px.ts
@@ -27,6 +27,14 @@ const propsOverride: TPropEditorTypeOverride = {
             },
         },
     },
+    '@epam/uui:IconButtonProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['20', '24'],
+            },
+        },
+    },
     '@epam/uui:BadgeProps': {
         size: {
             editor: {
@@ -170,7 +178,27 @@ const propsOverride: TPropEditorTypeOverride = {
             },
         },
     },
-
+    '@epam/uui:RangeDatePickerProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['40', '48'],
+            },
+        },
+    },
+    '@epam/uui:RatingProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['20', '24'],
+            },
+            comment: {
+                tags: {
+                    '@default': '20',
+                },
+            },
+        },
+    },
 };
 
 export default propsOverride;
diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss
@@ -324,4 +324,11 @@
             --uui-alert-caption-gap-h: 9px;
         }
     }
+
+    .uui-filters-panel-item-toggler {
+        &.uui-size-24 {
+            --uui-horizontal-padding: 3px;
+            --uui-horizontal-gap: 3px;
+        }
+    }
 }
diff --git a/uui/assets/styles/buttonLayout.scss b/uui/assets/styles/buttonLayout.scss
diff --git a/uui/assets/styles/controlLayout.scss b/uui/assets/styles/controlLayout.scss
diff --git a/uui/assets/styles/icons.scss b/uui/assets/styles/icons.scss
diff --git a/uui/assets/styles/index.scss b/uui/assets/styles/index.scss
@@ -1,9 +1,5 @@
-@forward 'buttonLayout';
 @forward 'clickable';
-@forward 'controlLayout';
 @forward 'effects';
-@forward 'icons';
 @forward 'inputs';
-@forward 'text-size';
 @forward 'typography';
 @forward 'dnd';
diff --git a/uui/assets/styles/text-size.scss b/uui/assets/styles/text-size.scss
diff --git a/uui/components/fileUpload/FileCard.module.scss b/uui/components/fileUpload/FileCard.module.scss
@@ -12,9 +12,11 @@
     --uui-file_card-icon-mov: #5214CC;
     --uui-file_card-icon-img: #E67E17;
 
+    --uui-file_card-font-error: var(--uui-font);
+
     --uui-file_card-border-radius: var(--uui-border-radius);
+    --uui-file_card-icon-size: 18px;
 
-    --uui-file_card-font-error: var(--uui-font);
 
     &:global(.uui-file_card) {
         box-sizing: border-box;
@@ -87,6 +89,11 @@
         min-width: 18px;
         flex-basis: 0;
 
-        @include icon-size(18);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-file_card-icon-size);
+                width: inherit;
+            }
+        }
     }
 }
diff --git a/uui/components/filters/FilterPanelItemToggler.module.scss b/uui/components/filters/FilterPanelItemToggler.module.scss
@@ -15,18 +15,25 @@
     --uui-filters_toggler-font: var(--uui-font);
     --uui-filters_toggler-font-weight: 400;
 
+    --uui-filters_toggler-min-height: var(--uui-size);
+    --uui-filters_toggler-border-width: var(--uui-border-width);
+    --uui-filters_toggler-horizontal-padding: calc(var(--uui-horizontal-padding) - var(--uui-filters_toggler-border-width));
+    --uui-filters_toggler-caption-horizontal-padding: var(--uui-horizontal-gap);
+    --uui-filters_toggler-icon-size: var(--uui-icon-size);
+
     &:global(.uui-input-box) {
         box-sizing: border-box;
         min-width: 40px;
+        min-height: var(--uui-filters_toggler-min-height);
         position: relative;
         display: flex;
         outline: none;
-        border: 1px solid var(--uui-filters_toggler-border);
+        border: var(--uui-filters_toggler-border-width) solid var(--uui-filters_toggler-border);
         border-radius: var(--uui-filters_toggler-border-radius);
         background-color: var(--uui-filters_toggler-bg);
         box-shadow: var(--uui-filters_toggler-shadow);
-        padding-left: 6px;
-        padding-right: 6px;
+        padding-left: var(--uui-filters_toggler-horizontal-padding);
+        padding-right: var(--uui-filters_toggler-horizontal-padding);
 
         &:global(.-clickable):hover {
             cursor: pointer;
@@ -107,36 +114,11 @@
             }
         }
 
-        @mixin filterTogglerSize($size) {
-            &:global(.size-#{$size}) {
-                @if $size == 24 {
-                    padding-left: 2px;
-                    padding-right: 2px;
-
-                    .title-wrapper {
-                        padding-left: 3px;
-                        padding-right: 3px;
-                    }
-                } @else if $size == 42 {
-                    padding-left: 11px;
-                    padding-right: 11px;
-                } @else if $size == 48 {
-                    padding-left: 11px;
-                    padding-right: 11px;
-                } @else {
-                    padding-left: 5px;
-                    padding-right: 5px;
-                }
-
-                @include control-vertical-layout(#{$size}px, 1px);
-                @include scalable-icon-size($size);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-filters_toggler-icon-size);
+                width: inherit;
             }
         }
-
-        @include filterTogglerSize(24);
-        @include filterTogglerSize(30);
-        @include filterTogglerSize(36);
-        @include filterTogglerSize(42);
-        @include filterTogglerSize(48);
     }
 }
diff --git a/uui/components/filters/FilterPanelItemToggler.tsx b/uui/components/filters/FilterPanelItemToggler.tsx
@@ -63,7 +63,7 @@ export const FilterPanelItemToggler = React.forwardRef<HTMLDivElement, FilterToo
                 uuiElement.inputBox,
                 uuiMarkers.clickable,
                 props.isOpen && uuiMod.opened,
-                `size-${props.size || defaultSize}`,
+                `uui-size-${props.size || defaultSize}`,
                 props.cx,
             ) }
             onClick={ togglerPickerOpened }