feat: add indent4XS (#864)

* feat: add indent4XS * feat: fix in storybook
gravity-ui · Mar 21, 2024 · 9dd5136 · 9dd5136
1 parent 669925e
commit 9dd5136
Show file tree

Hide file tree

Showing 14 changed files with 18 additions and 15 deletions.
diff --git a/.storybook/stories/documentation/Indents.mdx b/.storybook/stories/documentation/Indents.mdx
@@ -4,6 +4,8 @@ import { Meta } from '@storybook/blocks';
 
 # Project dimensional grid:
 
+`4XS` - 4px
+
 `XXXS` - 8px
 
 `XXS` - 12px

diff --git a/src/blocks/Form/Form.scss b/src/blocks/Form/Form.scss
@@ -18,7 +18,7 @@ $largeBorderRadius: 32px;
         margin: 0 0 $indentSM $textPadding;
 
         &_mobile {
-            margin-left: 4px;
+            margin-left: $indent4XS;
         }
     }
 

diff --git a/src/components/Author/Author.scss b/src/components/Author/Author.scss
@@ -39,7 +39,7 @@ $authorBorderRadius: $indentXS;
         @include text-size(body-2);
 
         color: $secondary;
-        padding-top: 4px;
+        padding-top: $indent4XS;
     }
 
     &__label:not(:first-child) {

diff --git a/src/components/Media/DataLens/DataLens.scss b/src/components/Media/DataLens/DataLens.scss
@@ -16,8 +16,8 @@ $block: '.#{$ns}media-component-data-lens';
     }
 
     &__iframe {
-        width: calc(100% + 4px);
-        height: calc(100% + 4px);
+        width: calc(100% + $indent4XS);
+        height: calc(100% + $indent4XS);
         margin: -1px -2px 0;
     }
 

diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss
@@ -34,7 +34,7 @@ $block: '.#{$ns}title-item';
         }
 
         &_size_s {
-            margin-top: 4px;
+            margin-top: $indent4XS;
         }
     }
 

diff --git a/src/editor/components/EditBlock/EditBlock.scss b/src/editor/components/EditBlock/EditBlock.scss
@@ -64,7 +64,7 @@ $block: '.#{$ns}edit-block';
         background-color: var(--pc-editor-control-color);
 
         &:not(:first-child) {
-            margin-left: 4px;
+            margin-left: $indent4XS;
         }
     }
 }
diff --git a/src/editor/containers/Form/dynamic-form-custom.scss b/src/editor/containers/Form/dynamic-form-custom.scss
@@ -82,15 +82,15 @@
     }
 
     .df-use-search {
-        margin: 4px 0;
+        margin: $indent4XS 0;
     }
 
     .df-simple-vertical-accordeon__body,
     .df-group-indent > .df-use-search {
         margin-top: 0;
         margin-left: 1px;
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding-top: $indent4XS;
+        padding-bottom: $indent4XS;
         padding-left: $indentXXS;
         border-left: 1px solid var(--g-color-line-generic-accent);
     }

diff --git a/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.scss b/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.scss
@@ -22,7 +22,7 @@ $block: '.#{$ns}one-of-custom';
         & > .#{$df-ns}use-search {
             padding-top: 11px;
             padding-left: $indentXXS;
-            margin-top: 4px;
+            margin-top: $indent4XS;
             margin-bottom: $normalOffset;
             margin-left: 5px;
             border-left: 1px solid var(--g-color-line-generic-accent);

diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss
@@ -363,7 +363,7 @@ $block: '.#{$ns}hubspot-form';
         .hs-form-field,
         .hs_error_rollup.actions,
         .submitted-message {
-            padding: 0 4px;
+            padding: 0 $indent4XS;
         }
 
         .hs-form-field {

diff --git a/src/sub-blocks/ImageCard/ImageCard.scss b/src/sub-blocks/ImageCard/ImageCard.scss
@@ -25,7 +25,7 @@ $block: '.#{$ns}image-card';
 
         &_margins {
             &_s {
-                padding: 4px;
+                padding: $indent4XS;
 
                 #{$image}_inner {
                     border-radius: calc(#{$borderRadius} - #{$imagePadding});

diff --git a/src/sub-blocks/PriceCard/PriceCard.scss b/src/sub-blocks/PriceCard/PriceCard.scss
@@ -75,7 +75,7 @@ $block: '.#{$ns}price-card';
         }
 
         &-period {
-            margin-left: 4px;
+            margin-left: $indent4XS;
         }
 
         &-details {

diff --git a/src/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.scss b/src/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.scss
@@ -45,7 +45,7 @@ $block: '.#{$ns}price-description';
     }
 
     &__detailed-title {
-        margin-left: 4px;
+        margin-left: $indent4XS;
     }
 
     &__label {

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -170,7 +170,7 @@
 
         $label-height: 16px;
 
-        padding: 0 4px;
+        padding: 0 $indent4XS;
         height: $label-height;
         line-height: $label-height;
     }

diff --git a/styles/variables.scss b/styles/variables.scss
@@ -5,6 +5,7 @@ $borderRadius: var(--pc-border-radius);
 $imagePadding: var(--pc-image-padding);
 
 //indents
+$indent4XS: 4px;
 $indentXXXS: 8px;
 $indentXXS: 12px;
 $indentXS: 16px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ $block: '.#{$ns}title-item'; @@
             }
             &_size_s {
-                margin-top: 4px;
+                margin-top: $indent4XS;
             }
         }
@@ Expand Down @@