MOON-459: Add Spacing pico and update some spacings components (#468)

Jahia · Dec 13, 2024 · ffc7c91 · ffc7c91
1 parent d6be266
commit ffc7c91
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 36 deletions.
diff --git a/src/components/Accordion/AccordionItem/AccordionItem.scss b/src/components/Accordion/AccordionItem/AccordionItem.scss
@@ -1,3 +1,5 @@
+@use "../../../tokens/spacings/spacings" as *;
+
 $accordionHeader_height: 48px;
 
 .moonstone-accordionItem {
@@ -82,7 +84,7 @@ $accordionHeader_height: 48px;
 }
 
 .moonstone-accordionItem_iconContainer {
-    margin-right: var(--spacing-small);
+    margin-right: $spacing-icon_big;
 }
 
 // ---

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,6 +1,7 @@
 @use "variants/default";
 @use "variants/ghost";
 @use "variants/outlined";
+@use "../../tokens/spacings/spacings" as *;
 
 $button-size_small: 16px;
 $button-size_medium: 24px;
@@ -73,10 +74,10 @@ $button-size_big: 32px;
     }
 
     &.moonstone-icon {
-        gap: var(--spacing-nano);
+        gap: $spacing-icon;
 
         &.moonstone-size_big {
-            gap: var(--spacing-small);
+            gap: $spacing-icon_big;
         }
     }
 

diff --git a/src/components/Chip/Chip.scss b/src/components/Chip/Chip.scss
@@ -1,3 +1,5 @@
+@use "../../tokens/spacings/spacings" as *;
+
 .moonstone-chip {
     display: inline-flex;
     flex-direction: row;
@@ -13,7 +15,7 @@
     }
 
     & > svg:not(:last-child) {
-        margin-right: 6px;
+        margin-right: $spacing-icon;
     }
 }
 

diff --git a/src/components/Collapsible/Collapsible.scss b/src/components/Collapsible/Collapsible.scss
@@ -1,3 +1,5 @@
+@use "../../tokens/spacings/spacings" as *;
+
 .moonstone-collapsible {
     position: relative;
 
@@ -43,7 +45,7 @@
 
 // Chevron icon animation
 .moonstone-collapsible_icon {
-    margin-right: var(--spacing-nano);
+    margin-right: $spacing-icon_big;
 
     transform: rotate(0);
 

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -1,4 +1,5 @@
 @use '../../utils/index' as *;
+@use "../../tokens/spacings/spacings" as *;
 
 $border-width: 1px;
 
@@ -9,11 +10,11 @@ $border-width: 1px;
 .moonstone-dropdown_icon {
     display: flex;
     flex: 0 0 auto;
-    margin-right: var(--spacing-nano);
 }
 
 .moonstone-dropdown_chevronDown {
     flex: 0 0 auto;
+    margin-left: var(--spacing-nano);
 }
 
 .moonstone-dropdown_tags {
@@ -33,6 +34,7 @@ $border-width: 1px;
 }
 
 .moonstone-dropdown {
+    gap: $spacing-icon;
     padding: var(--spacing-nano) var(--spacing-small);
 
     border-radius: 2px;
@@ -52,6 +54,7 @@ $border-width: 1px;
     // Manage sizes
     // ---
     &.moonstone-medium {
+        gap: $spacing-icon_big;
         min-height: 32px;
     }
 

diff --git a/src/components/IconTextIcon/IconTextIcon.scss b/src/components/IconTextIcon/IconTextIcon.scss
@@ -1,11 +1,6 @@
+@use "../../tokens/spacings/spacings" as *;
+
 .moonstone-IconTextIcon {
+    gap: $spacing-icon;
     width: 100%;
 }
-
-.moonstone-IconTextIcon_iconStart {
-    margin-right: var(--spacing-nano);
-}
-
-.moonstone-IconTextIcon_iconEnd {
-    margin-left: var(--spacing-nano);
-}
diff --git a/src/components/ListItem/ListItem.scss b/src/components/ListItem/ListItem.scss
@@ -1,11 +1,14 @@
 @use '../../utils/index' as *;
+@use "../../tokens/spacings/spacings" as *;
 
 $small-image-size: 56px;
 $big-image-size: 96px;
 
 .moonstone-listItem {
     @include truncate;
 
+    gap: $spacing-icon;
+
     width: 100%;
 
     list-style: none;
@@ -33,18 +36,9 @@ $big-image-size: 96px;
 .moonstone-listItem_iconEnd {
     display: flex;
     align-items: center;
-    min-width: 16px;
     height: 16px;
 }
 
-.moonstone-listItem_iconStart {
-    margin-right: var(--spacing-nano);
-}
-
-.moonstone-listItem_iconEnd {
-    margin-left: var(--spacing-nano);
-}
-
 .moonstone-listItem_description {
     display: -webkit-box;
 

diff --git a/src/components/Tab/TabItem/TabItem.scss b/src/components/Tab/TabItem/TabItem.scss
@@ -1,4 +1,5 @@
 @use 'variants/ghost' as *;
+@use "../../../tokens/spacings/spacings" as *;
 
 $big-tab-height: 32px;
 
@@ -42,21 +43,21 @@ $big-tab-height: 32px;
         border-radius: 40px;
 
         &.moonstone-size_small {
-            padding: var(--spacing-nano);
+            padding: $spacing-icon;
         }
 
         &.moonstone-size_default {
-            padding: var(--spacing-nano);
+            padding: $spacing-icon;
         }
     }
 
     &.moonstone-icon {
         svg {
-            margin-right: var(--spacing-nano);
+            margin-right: $spacing-icon;
         }
 
         &.moonstone-size_big svg {
-            margin-right: var(--spacing-small);
+            margin-right: $spacing-icon_big;
         }
     }
 

diff --git a/src/components/TreeView/TreeView.scss b/src/components/TreeView/TreeView.scss
@@ -1,3 +1,5 @@
+@use "../../tokens/spacings/spacings" as *;
+
 [role='treeitem'] {
     --treeItem-indent: calc((var(--spacing-medium) + var(--spacing-nano)) * var(--treeItem-depth, 0) + var(--spacing-medium));
     --treeItem-color: inherit;
@@ -71,28 +73,21 @@
     }
 }
 
-.moonstone-treeView_itemIconStart,
-.moonstone-treeView_itemToggle {
-    margin-right: var(--spacing-nano);
-}
-
 .moonstone-treeView_itemIconStart {
     min-width: 12px;
     min-height: 12px;
 }
 
-.moonstone-treeView_itemIconEnd {
-    margin-left: var(--spacing-nano);
-}
-
 .moonstone-treeView_itemToggle {
     width: 16px;
     height: 16px;
+    margin-right: var(--spacing-nano);
 
     cursor: pointer;
 }
 
 .moonstone-treeView_itemLabel {
+    gap: $spacing-icon;
     align-self: stretch;
     min-width: 0;
 

diff --git a/src/tokens/spacings/spacings.scss b/src/tokens/spacings/spacings.scss
@@ -1,4 +1,8 @@
+$spacing-icon: var(--spacing-pico);
+$spacing-icon_big: var(--spacing-nano);
+
 :root {
+    --spacing-pico: 2px;
     --spacing-nano: 4px;
     --spacing-small: 8px;
     --spacing-medium: 16px;

diff --git a/src/tokens/spacings/spacings.stories.scss b/src/tokens/spacings/spacings.stories.scss
@@ -1,4 +1,5 @@
 $spacings: (
+    "pico": var(--spacing-pico),
     "nano": var(--spacing-nano),
     "small": var(--spacing-small),
     "medium": var(--spacing-medium),