Merge pull request #166 from ownego/dev

Fix: FormGroup item wrapper in the loop

Author: juzser

src/components/FormLayout/README.stories.mdx

@@ -96,10 +96,10 @@ export const FormLayoutGroup = (args, { argTypes }) => ({
   },
   template: `<FormLayout>
     <FormGroup>
-      <TextField v-model="min" type="number">
+      <TextField v-model="min" autoComplete="off" type="number">
         <template #label>Minimum order</template>
       </TextField>
-      <TextField v-model="max" type="number">
+      <TextField v-model="max" autoComplete="off" type="number">
         <template #label>Maximum order</template>
       </TextField>
     </FormGroup>
@@ -117,10 +117,10 @@ export const FormLayoutGroup = (args, { argTypes }) => ({
           code: dedent`
             <FormLayout>
               <FormGroup>
-                <TextField v-model="min" type="number">
+                <TextField v-model="min" autoComplete="off" type="number">
                   <template #label>Minimum order</template>
                 </TextField>
-                <TextField v-model="max" type="number">
+                <TextField v-model="max" autoComplete="off" type="number">
                   <template #label>Maximum order</template>
                 </TextField>
               </FormGroup>
@@ -146,16 +146,16 @@ export const FormGroupCondensed = (args) => ({
   },
   template: `<FormLayout>
     <FormGroup condensed>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Length</template>
       </TextField>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Width</template>
       </TextField>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Height</template>
       </TextField>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Unit</template>
       </TextField>
     </FormGroup>
@@ -172,16 +172,16 @@ export const FormGroupCondensed = (args) => ({
           code: dedent`
           <FormLayout>
             <FormGroup condensed>
-              <TextField>
+              <TextField autoComplete="off">
                 <template #label>Length</template>
               </TextField>
-              <TextField>
+              <TextField autoComplete="off">
                 <template #label>Width</template>
               </TextField>
-              <TextField>
+              <TextField autoComplete="off">
                 <template #label>Height</template>
               </TextField>
-              <TextField>
+              <TextField autoComplete="off">
                 <template #label>Unit</template>
               </TextField>
             </FormGroup>

src/components/FormLayout/components/Group/Group.vue

@@ -13,12 +13,19 @@ div(
     slot(v-if="slots.title", name="title")
     template(v-else) {{ title }}
   div(:class="styles.Items")
-    template(v-if="slots.default")
-      Item(
-        v-for="(item, index) in slots.default()",
+    template(v-if="slots.default && hasSlot(slots.default)")
+      template(
+        v-for="item, index in slots.default()",
         :key="index",
       )
-        component(:is="item")
+        Item(
+          v-if="item.type.toString() === 'Symbol(Fragment)' && item.el === null && item.children",
+          v-for="child, childIndex in item.children",
+          :key="`${index}-${childIndex.toString()}`",
+        )
+          component(:is="child")
+        Item(v-else)
+          component(:is="item")
     slot(v-else)
   div(
     v-if="slots['help-text'] || helpText",
@@ -33,6 +40,7 @@ div(
 import { computed, useSlots } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { Item } from '../Item';
+import { hasSlot } from '@/utilities/has-slot';
 import styles from '@/classes/FormLayout.json';
 import { UseUniqueId } from '@/use';