Merge pull request #327 from BouyguesTelecom/fix/divider-margins

delete margin from next/previous element divider
BouyguesTelecom · Jan 27, 2025 · a121915 · a121915
2 parents 646809d + 2150fec
commit a121915
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/examples/react-template/screens/Divider.tsx b/examples/react-template/screens/Divider.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
-import { Box, BoxContent, Divider, IconName, Section, Text } from '@trilogy-ds/react/components'
 import { Row, Rows, Spacer, SpacerSize } from '@trilogy-ds/react'
+import { Box, BoxContent, Divider, IconName, Section, Text } from '@trilogy-ds/react/lib/components'
 import { GapSize } from '@trilogy-ds/react/lib/components/columns/ColumnsTypes'
+import * as React from 'react'
 
 export const DividerScreen = (): JSX.Element => {
   return (

diff --git a/packages/react/components/divider/Divider.tsx b/packages/react/components/divider/Divider.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { DividerProps } from './DividerProps'
-import { is, has } from '@/services/classify'
-import { Icon, IconSize } from '../icon'
-import clsx from 'clsx'
-import { hashClass } from '@/helpers'
+import { DividerProps } from '@/components/divider/DividerProps'
+import { Icon, IconSize } from '@/components/icon'
 import { useTrilogyContext } from '@/context'
+import { hashClass } from '@/helpers/hashClassesHelpers'
+import { has, is } from '@/services/classify'
+import clsx from 'clsx'
+import React from 'react'
 
 /**
  * Divider Component

diff --git a/packages/styles/framework/src/components/_autolayout.scss b/packages/styles/framework/src/components/_autolayout.scss
@@ -14,12 +14,6 @@ body:not(.is-tight) {
   .box:not(:last-child) {
     margin-bottom: 24px;
   }
-  *:has(+ .divider):not(:last-child) {
-    margin-bottom: 24px;
-  }
-  .divider:not(:last-child) {
-    margin-bottom: 24px;
-  }
   .table:not(:last-child) {
     margin-bottom: 24px;
   }
@@ -183,12 +177,6 @@ body:not(.is-tight) {
   .box:not(:last-child) {
       margin-bottom: 16px;
     }
-  *:has(+ .divider):not(:last-child) {
-      margin-bottom: 16px;
-    }
-  .divider:not(:last-child) {
-      margin-bottom: 16px;
-    }
   .table:not(:last-child) {
       margin-bottom: 16px;
     }

diff --git a/packages/styles/framework/src/components/_divider.scss b/packages/styles/framework/src/components/_divider.scss
@@ -10,4 +10,20 @@
     padding: 0 $spacing-4;
     background-color: invertColor('neutral');
   }
+
+  &:not(.is-marginless) {
+    margin: $spacing-5 0;
+  }
+
+  @include mobile {
+    &:not(.is-marginless) {
+      margin: $spacing-4 0;
+    }
+  }
 }
+
+*:has(+ .divider) {
+  margin-top: 0 !important; 
+  margin-bottom: 0 !important;
+}
+
diff --git a/packages/styles/scripts/autolayout.ts b/packages/styles/scripts/autolayout.ts
@@ -19,8 +19,6 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
   [INSERT_SPACE_BETWEEN, '.card', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.columns', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.box', 'default', FIVE, FOUR],
-  [INSERT_SPACE_BETWEEN, '*:has(+ .divider)', 'default', FIVE, FOUR],
-  [INSERT_SPACE_BETWEEN, '.divider', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.table', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.list', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.timeline', 'default', FIVE, FOUR],