feat: add correct margins for divider (#3033)

db-ui · Aug 14, 2024 · 3c3388c · 3c3388c
1 parent d84aa39
commit 3c3388c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png
diff --git a/packages/components/src/components/divider/divider.scss b/packages/components/src/components/divider/divider.scss
@@ -2,10 +2,22 @@
 @use "@db-ui/foundations/build/scss/helpers";
 
 .db-divider {
-	&:not([data-margin="none"]) {
+	&:is(:not([data-margin]), [data-margin="small"]) {
 		margin: variables.$db-spacing-fixed-sm 0;
 	}
 
+	&[data-margin="medium"] {
+		margin: variables.$db-spacing-fixed-md 0;
+	}
+
+	&[data-margin="large"] {
+		margin: variables.$db-spacing-fixed-lg 0;
+	}
+
+	&[data-margin="none"] {
+		margin: 0;
+	}
+
 	&:not([data-variant="vertical"]) {
 		@include helpers.divider();
 
@@ -21,10 +33,22 @@
 
 		inline-size: variables.$db-border-height-3xs;
 
-		&:not([data-margin="none"]) {
+		&:is(:not([data-margin]), [data-margin="small"]) {
 			margin: 0 variables.$db-spacing-fixed-sm;
 		}
 
+		&[data-margin="medium"] {
+			margin: 0 variables.$db-spacing-fixed-md;
+		}
+
+		&[data-margin="large"] {
+			margin: 0 variables.$db-spacing-fixed-lg;
+		}
+
+		&[data-margin="none"] {
+			margin: 0;
+		}
+
 		&[data-width="full"] {
 			block-size: 100%;
 		}

diff --git a/packages/components/src/components/divider/model.ts b/packages/components/src/components/divider/model.ts
@@ -2,7 +2,8 @@ import {
 	EmphasisProps,
 	GlobalProps,
 	GlobalState,
-	WidthProps
+	WidthProps,
+	MarginProps
 } from '../../shared/model';
 
 export const DividerMarginList = ['none', '_'] as const;
@@ -19,6 +20,7 @@ export type DBDividerDefaultProps = {
 export type DBDividerProps = DBDividerDefaultProps &
 	GlobalProps &
 	EmphasisProps &
+	MarginProps &
 	WidthProps;
 
 export type DBDividerDefaultState = {};

diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -74,6 +74,15 @@ export type SpacingProps = {
 	 */
 	spacing?: SpacingType;
 };
+export const MarginList = ['medium', 'small', 'large', 'none'] as const;
+export type MarginType = (typeof MarginList)[number];
+
+export type MarginProps = {
+	/**
+	 * The margin attribute changes the margin of the component.
+	 */
+	margin?: MarginType;
+};
 
 export const PlacementList = [
 	'left',