Merge pull request #199 from BouyguesTelecom/update-autolayout

update autolayout rules + pagination style
BouyguesTelecom · Dec 5, 2024 · 629b208 · 629b208
2 parents 6df83f9 + 8a46e2d
commit 629b208
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 38 deletions.
diff --git a/packages/styles/framework/src/components/_autolayout.scss b/packages/styles/framework/src/components/_autolayout.scss
@@ -1,5 +1,8 @@
 body:not(.is-tight) {
-  .accordions:not(:last-child) {
+  .accordion:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .buttons:not(:last-child) {
     margin-bottom: 24px;
   }
   .card:not(:last-child) {
@@ -68,7 +71,10 @@ body:not(.is-tight) {
   .progress-radial:not(:last-child) {
     margin-bottom: 8px;
   }
-  .radio:not(:last-child) {
+  .radios:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  :not(.radios) >.radios:not(:last-child) {
     margin-bottom: 12px;
   }
   .checkbox:not(:last-child) {
@@ -77,10 +83,16 @@ body:not(.is-tight) {
   .switch:not(:last-child) {
     margin-bottom: 12px;
   }
-  .radio-tile:not(:last-child) {
+  .radio-tiles:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  :not(.radio-tiles) > .radio-tile:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .checkbox-tiles:not(:last-child) {
     margin-bottom: 24px;
   }
-  .checkbox-tile:not(:last-child) {
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
     margin-bottom: 24px;
   }
   .field:not(:last-child) {
@@ -104,7 +116,10 @@ body:not(.is-tight) {
   .sticker:not(:last-child) {
     margin-bottom: 8px;
   }
-  .tag:not(:last-child) {
+  .tags:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  :not(.tags) > .tag:not(:last-child) {
     margin-bottom: 8px;
   }
   .title.is-level-1:not(:last-child) {
@@ -153,7 +168,10 @@ body:not(.is-tight) {
 
 @include mobile() {
   body:not(.is-tight) {
-    .accordions:not(:last-child) {
+    .accordion:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  .buttons:not(:last-child) {
       margin-bottom: 16px;
     }
   .card:not(:last-child) {
@@ -222,7 +240,10 @@ body:not(.is-tight) {
   .progress-radial:not(:last-child) {
       margin-bottom: 8px;
     }
-  .radio:not(:last-child) {
+  .radios:not(:last-child) {
+      margin-bottom: 12px;
+    }
+  :not(.radios) >.radios:not(:last-child) {
       margin-bottom: 12px;
     }
   .checkbox:not(:last-child) {
@@ -231,10 +252,16 @@ body:not(.is-tight) {
   .switch:not(:last-child) {
       margin-bottom: 12px;
     }
-  .radio-tile:not(:last-child) {
+  .radio-tiles:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  :not(.radio-tiles) > .radio-tile:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  .checkbox-tiles:not(:last-child) {
       margin-bottom: 16px;
     }
-  .checkbox-tile:not(:last-child) {
+  :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) {
       margin-bottom: 16px;
     }
   .field:not(:last-child) {
@@ -258,7 +285,10 @@ body:not(.is-tight) {
   .sticker:not(:last-child) {
       margin-bottom: 8px;
     }
-  .tag:not(:last-child) {
+  .tags:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  :not(.tags) > .tag:not(:last-child) {
       margin-bottom: 8px;
     }
   .title.is-level-1:not(:last-child) {

diff --git a/packages/styles/framework/src/components/_pagination.scss b/packages/styles/framework/src/components/_pagination.scss
@@ -3,7 +3,7 @@
   margin: -2.5px;
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   text-align: center;
 
   .pagination-previous,
@@ -38,7 +38,6 @@
   .pagination-list {
     flex: 0 0 auto;
     flex-wrap: wrap;
-    flex-grow: 1;
     align-items: center;
     display: flex;
     justify-content: center;

diff --git a/packages/styles/framework/src/elements/_radio.scss b/packages/styles/framework/src/elements/_radio.scss
@@ -2,7 +2,8 @@
 
 .radios {
   width: 100%;
-  gap: 16px;
+  column-gap: $spacing-5;
+  row-gap: $spacing-3;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;

diff --git a/packages/styles/framework/src/elements/_tag.scss b/packages/styles/framework/src/elements/_tag.scss
@@ -6,23 +6,8 @@ $tag-delete-margin: 1px !default;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 16px;
-
-  // multi-tags : ajout d'une marge bottom, supprimable par facette
-  &:not(.is-gapless) {
-    &:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    .tag {
-      margin-bottom: 10px;
-    }
-  }
-
+  gap: $spacing-3;
   // multi-tags : ajout d'une marge à droite de chaque tag
-  .tag:not(:last-child) {
-    margin-right: 8px;
-  }
 
   // centrage des tags
   &.is-centered {
@@ -34,7 +19,6 @@ $tag-delete-margin: 1px !default;
     cursor: pointer;
 
     .tag {
-      margin-right: 0;
 
       &:not(:first-child) {
         border-bottom-left-radius: 0;

diff --git a/packages/styles/framework/src/utilities/_mixins.scss b/packages/styles/framework/src/utilities/_mixins.scss
@@ -451,7 +451,6 @@
   .#{$type} {
     display: flex;
     align-items: center;
-    margin: 6px 8px;
     width: fit-content;
 
     input:disabled,
@@ -462,8 +461,7 @@
     }
 
     label.#{$type}-label {
-      padding: 4px;
-      padding-left: 34px;
+      padding-left: 30px;
 
       &:before,
       &:after {

diff --git a/packages/styles/scripts/autolayout.ts b/packages/styles/scripts/autolayout.ts
@@ -14,7 +14,7 @@ const { THREE, FOUR, FIVE, TWO, ONE, SEVEN, ZERO, SIX } = SpacerSize
  * @mobile spacing: SpacerSize
  * */
 export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
-  [INSERT_SPACE_BETWEEN, '.accordions', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.accordion', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.buttons', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.card', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.columns', 'default', FIVE, FOUR],
@@ -38,19 +38,23 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
   [INSERT_SPACE_BETWEEN, 'p.text', 'default', THREE, TWO],
   [INSERT_SPACE_BETWEEN, '.progress', 'default', TWO, TWO],
   [INSERT_SPACE_BETWEEN, '.progress-radial', 'default', TWO, TWO],
-  [INSERT_SPACE_BETWEEN, '.radio', 'default', THREE, THREE],
+  [INSERT_SPACE_BETWEEN, '.radios', 'default', THREE, THREE],
+  [INSERT_SPACE_BETWEEN, ':not(.radios) >.radios', 'default', THREE, THREE],
   [INSERT_SPACE_BETWEEN, '.checkbox', 'default', THREE, THREE],
   [INSERT_SPACE_BETWEEN, '.switch', 'default', THREE, THREE],
-  [INSERT_SPACE_BETWEEN, '.radio-tile', 'default', FIVE, FOUR],
-  [INSERT_SPACE_BETWEEN, '.checkbox-tile', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.radio-tiles', 'default', FOUR, THREE],
+  [INSERT_SPACE_BETWEEN, ':not(.radio-tiles) > .radio-tile', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.checkbox-tiles', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, ':not(.checkbox-tiles) > .checkbox-tile', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.field', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.control', 'default', ONE, ONE],
   [INSERT_SPACE_BETWEEN, '.help', 'default', ONE, ONE],
   [INSERT_SPACE_BETWEEN, '.textarea', 'default', FOUR, FOUR],
   [INSERT_SPACE_BETWEEN, '.select', 'default', FOUR, FOUR],
   [INSERT_SPACE_BETWEEN, '.link', 'default', THREE, TWO],
   [INSERT_SPACE_BETWEEN, '.sticker', 'default', TWO, TWO],
-  [INSERT_SPACE_BETWEEN, '.tag', 'default', TWO, TWO],
+  [INSERT_SPACE_BETWEEN, '.tags', 'default', FOUR, FOUR],
+  [INSERT_SPACE_BETWEEN, ':not(.tags) > .tag', 'default', TWO, TWO],
   [INSERT_SPACE_BETWEEN, '.title.is-level-1', 'default', SEVEN, SIX],
   [INSERT_SPACE_BETWEEN, '.title.is-level-2', 'default', SIX, FIVE],
   [INSERT_SPACE_BETWEEN, '.title.is-level-3', 'default', FOUR, THREE],