feat(QSeparator): "spaced" prop now supports predefined size (xs/sm/md/lg/xl) or a size in CSS units, including unit name quasarframework#7209

Author: rstoenescu

ui/src/components/separator/QSeparator.js

@@ -9,13 +9,21 @@ const insetMap = {
   'item-thumbnail': 'item-thumbnail-inset'
 }
 
+export const margins = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 24
+}
+
 export default Vue.extend({
   name: 'QSeparator',
 
   mixins: [ DarkMixin, ListenersMixin ],
 
   props: {
-    spaced: Boolean,
+    spaced: [ Boolean, String ],
     inset: [ Boolean, String ],
     vertical: Boolean,
     color: String,
@@ -41,17 +49,30 @@ export default Vue.extend({
 
     classes () {
       return `q-separator${this.classPrefix}${this.insetClass}` +
-        (this.spaced === true ? `${this.classPrefix}-spaced` : '') +
         (this.color !== void 0 ? ` bg-${this.color}` : '') +
         (this.isDark === true ? ' q-separator--dark' : '')
     },
 
     style () {
+      const style = {}
+
       if (this.size !== void 0) {
-        return {
-          [ this.vertical === true ? 'width' : 'height' ]: this.size
-        }
+        style[ this.vertical === true ? 'width' : 'height' ] = this.size
+      }
+
+      if (this.spaced !== false) {
+        const size = this.spaced === true
+          ? `${margins.md}px`
+          : this.spaced in margins ? `${margins[this.spaced]}px` : this.spaced
+
+        const props = this.vertical === true
+          ? [ 'Left', 'Right' ]
+          : [ 'Top', 'Bottom' ]
+
+        style[`margin${props[0]}`] = style[`margin${props[1]}`] = size
       }
+
+      return style
     },
 
     attrs () {

ui/src/components/separator/QSeparator.json

@@ -13,8 +13,12 @@
     },
 
     "spaced": {
-      "type": "Boolean",
-      "desc": "If set to true, the top and bottom margins will be set to 8px",
+      "type": [ "Boolean", "String" ],
+      "desc": "If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes",
+      "default": "md",
+      "examples": [
+        "12px", "sm", "md"
+      ],
       "category": "content"
     },
 

ui/src/components/separator/QSeparator.sass

@@ -12,9 +12,6 @@
     height: 1px
     width: 100%
 
-    &-spaced
-      margin-top: 8px
-      margin-bottom: 8px
     &-inset
       margin-left: 16px
       margin-right: 16px
@@ -33,9 +30,6 @@
     height: inherit
     align-self: stretch
 
-    &-spaced
-      margin-left: 8px
-      margin-right: 8px
     &-inset
       margin-top: 8px
       margin-bottom: 8px

ui/src/components/separator/QSeparator.styl

@@ -12,9 +12,6 @@
     height: 1px
     width: 100%
 
-    &-spaced
-      margin-top: 8px
-      margin-bottom: 8px
     &-inset
       margin-left: 16px
       margin-right: 16px
@@ -33,9 +30,6 @@
     height: inherit
     align-self: stretch
 
-    &-spaced
-      margin-left: 8px
-      margin-right: 8px
     &-inset
       margin-top: 8px
       margin-bottom: 8px