feature: Divider has spacing sizes now

eea · Apr 5, 2023 · bf813c4 · bf813c4
1 parent a8d2db5
commit bf813c4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/components/Divider/Schema.js b/src/components/Divider/Schema.js
@@ -86,6 +86,10 @@ const messages = defineMessages({
     id: 'A divider can have its colors inverted.',
     defaultMessage: 'A divider can have its colors inverted.',
   },
+  Spacing: {
+    id: 'Spacing',
+    defaultMessage: 'Spacing',
+  },
 });
 
 export const DividerEditSchema = ({ intl }) => ({
@@ -95,7 +99,15 @@ export const DividerEditSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'text', 'hidden', 'section', 'fitted', 'short'],
+      fields: [
+        'title',
+        'text',
+        'hidden',
+        'section',
+        'fitted',
+        'short',
+        'spacing',
+      ],
     },
   ],
 
@@ -128,6 +140,11 @@ export const DividerEditSchema = ({ intl }) => ({
       description: intl.formatMessage(messages.ShortHelp),
       type: 'boolean',
     },
+    spacing: {
+      title: intl.formatMessage(messages.Spacing),
+      widget: 'image_size',
+      default: 's',
+    },
   },
   required: [],
 });

diff --git a/src/components/Divider/View.jsx b/src/components/Divider/View.jsx
@@ -8,7 +8,11 @@ export default ({ data }) => (
     hidden={data.hidden}
     section={data.section}
     fitted={data.fitted}
-    className={cx(data.styles?.theme, data.short ? 'short' : '')}
+    className={cx(
+      data.styles?.theme,
+      data.short ? 'short' : '',
+      data?.spacing ? `divider-spacing-${data?.spacing}` : '',
+    )}
     horizontal={!!data.text}
     inverted={data.styles?.inverted}
   >

diff --git a/src/components/Divider/divider.less b/src/components/Divider/divider.less
@@ -31,3 +31,17 @@
   width: 50%;
   margin-inline: auto;
 }
+
+.ui.divider {
+  &.divider-spacing-s {
+    margin: 1rem 0;
+  }
+
+  &.divider-spacing-m {
+    margin: 1.5rem 0;
+  }
+
+  &.divider-spacing-l {
+    margin: 2rem 0;
+  }
+}