feat(Split): added wrappable prop

Author: mtorromeo

apps/docs/src/stories/Layouts/Split.story.vue

@@ -11,12 +11,38 @@
       <component-info src="packages/core/src/layouts/Split/SplitItem.vue" />
     </template>
 
-    <story-canvas title="Split">
+    <story-canvas title="Basic">
+      <pf-split>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item filled>pf-m-fill</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+      </pf-split>
+    </story-canvas>
+
+    <story-canvas title="With gutter">
       <pf-split gutter>
         <pf-split-item>content</pf-split-item>
         <pf-split-item filled>pf-m-fill</pf-split-item>
         <pf-split-item>content</pf-split-item>
       </pf-split>
     </story-canvas>
+
+    <story-canvas title="Wrappable">
+      <pf-split gutter wrappable>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+        <pf-split-item>content</pf-split-item>
+      </pf-split>
+    </story-canvas>
   </doc-page>
 </template>

packages/core/src/layouts/Gallery/Gallery.vue

@@ -25,6 +25,8 @@ defineOptions({
 
 export interface Props extends /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
+
+  /** Adds space between children. */
   gutter?: boolean;
 
   /** Minimum width */

packages/core/src/layouts/Grid/Grid.vue

@@ -26,6 +26,8 @@ export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 export interface Props extends OrderBreakpointProps, /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
+
+  /** Adds space between children. */
   gutter?: boolean;
 
   /** The number of rows a column in the grid should span.  Value should be a number 1-12 */

packages/core/src/layouts/Level/Level.vue

@@ -14,6 +14,8 @@ defineOptions({
 
 export interface Props extends /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
+
+  /** Adds space between children. */
   gutter?: boolean;
 }
 

packages/core/src/layouts/Split/Split.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="component" :class="[styles.split, { [styles.modifiers.gutter]: gutter }]">
+  <component
+    :is="component"
+    :class="[styles.split, {
+      [styles.modifiers.gutter]: gutter,
+      [styles.modifiers.wrap]: wrappable,
+    }]"
+  >
     <slot />
   </component>
 </template>
@@ -14,7 +20,11 @@ defineOptions({
 
 export interface Props extends /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
+
+  /** Adds space between children. */
   gutter?: boolean;
+  /** Allows children to wrap */
+  wrappable?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {

packages/core/src/layouts/Stack/Stack.vue

@@ -14,6 +14,8 @@ defineOptions({
 
 export interface Props extends /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
+
+  /** Adds space between children. */
   gutter?: boolean;
 }