From b0f045029301120fe5ce94d05833ff70c3adbab4 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Sat, 24 Oct 2020 18:47:10 +0200
Subject: [PATCH 1/8] feat(migration): transition-group document fragment
 default behaviour

---
 src/api/built-in-components.md          |  4 +--
 src/guide/migration/introduction.md     |  1 +
 src/guide/migration/transition-group.md | 40 +++++++++++++++++++++++++
 src/guide/migration/transition.md       |  6 +++-
 src/guide/transitions-list.md           |  2 +-
 5 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 src/guide/migration/transition-group.md

diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index ec03ce4f38..99c42ce64d 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -107,7 +107,7 @@
 
 - **Props:**
 
-  - `tag` - `string`, defaults to `span`.
+  - `tag` - `string`, if not defined, renders without a root element.
   - `move-class` - overwrite CSS class applied during moving transition.
   - exposes the same props as `<transition>` except `mode`.
 
@@ -117,7 +117,7 @@
 
 - **Usage:**
 
-  `<transition-group>` serve as transition effects for **multiple** elements/components. The `<transition-group>` renders a real DOM element. By default it renders a `<span>`, and you can configure what element it should render via the `tag` attribute.
+  `<transition-group>` provides transition effects for **multiple** elements/components. By default it doesn't render a wrapper DOM element, but one can be defined via the `tag` attribute.
 
   Note that every child in a `<transition-group>` must be [**uniquely keyed**](./special-attributes.html#key) for the animations to work properly.
 
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index 57f8c44e00..b510910234 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -101,6 +101,7 @@ The following consists a list of breaking changes from 2.x:
 - [The `data` option from mixins is now merged shallowly](/guide/migration/data-option.html#mixin-merge-behavior-change)
 - [Attributes coercion strategy changed](/guide/migration/attribute-coercion.html)
 - [Some transition classes got a rename](/guide/migration/transition.html)
+- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
 - [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
 - `<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
 - In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead - this means the container itself is no longer considered part of the template.
diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
new file mode 100644
index 0000000000..d4d8d32341
--- /dev/null
+++ b/src/guide/migration/transition-group.md
@@ -0,0 +1,40 @@
+---
+title: Transition Group root Element
+badges:
+  - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+`<transition-group>` no longer renders a root element by default, but can still create one with the `tag` prop
+
+## 2.x Syntax
+
+In Vue 2, `<transition-group>`, like other custom components, needed a root element, which by default was a `<span>` but was customizable via the `tag` prop.
+
+```html
+<transition-group tag="ul">
+  <li v-for="item in items" :key="item">
+    {{ item }}
+  </li>
+</transition-group>
+```
+
+## 3.0 Syntax
+
+In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
+
+- If you already have `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
+- If you didn't have one defined _and_ your styling or other behaviors relied in the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
+
+```html
+<transition-group tag="span">
+  <!-- -->
+</transition-group>
+```
+
+## See also
+
+- [Some transition classes got a rename](/guide/migration/transition.html)
diff --git a/src/guide/migration/transition.md b/src/guide/migration/transition.md
index 89643f1b2f..645c5697fa 100644
--- a/src/guide/migration/transition.md
+++ b/src/guide/migration/transition.md
@@ -59,4 +59,8 @@ The `<transition>` component's related prop names are also changed:
 
 1. Replace instances of `.v-enter` to `.v-enter-from`
 2. Replace instances of `.v-leave` to `.v-leave-from`
-3. Replace instances of related prop names, as above.
\ No newline at end of file
+3. Replace instances of related prop names, as above.
+
+## See also
+
+- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md
index 3c46039dc2..a4cf83615a 100644
--- a/src/guide/transitions-list.md
+++ b/src/guide/transitions-list.md
@@ -7,7 +7,7 @@ So far, we've managed transitions for:
 
 So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the `<transition-group>` component. Before we dive into an example though, there are a few things that are important to know about this component:
 
-- Unlike `<transition>`, it renders an actual element: a `<span>` by default. You can change the element that's rendered with the `tag` attribute.
+- By default, it doesn't render a wrapper element, but you can can element to be rendered with the `tag` attribute.
 - [Transition modes](/guide/transitions-enterleave#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
 - Elements inside are **always required** to have a unique `key` attribute.
 - CSS transition classes will be applied to inner elements and not to the group/container itself.

From 272ae343174aad656fe5fdf7e42fe81e963f4d0c Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:33:17 -0600
Subject: [PATCH 2/8] Update src/guide/migration/transition-group.md

---
 src/guide/migration/transition-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index d4d8d32341..f2abcfc183 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -8,7 +8,7 @@ badges:
 
 ## Overview
 
-`<transition-group>` no longer renders a root element by default, but can still create one with the `tag` prop
+`<transition-group>` no longer renders a root element by default, but can still create one with the `tag` prop.
 
 ## 2.x Syntax
 

From 716c2fe9d60f584e0aef7867145019ff3058ac98 Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:33:43 -0600
Subject: [PATCH 3/8] Update src/guide/migration/transition-group.md

---
 src/guide/migration/transition-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index f2abcfc183..a6255ac97b 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -22,7 +22,7 @@ In Vue 2, `<transition-group>`, like other custom components, needed a root elem
 </transition-group>
 ```
 
-## 3.0 Syntax
+## 3.x Syntax
 
 In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
 

From 07025420f0eb8768fee9299c44485b3ad1b3461b Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:34:12 -0600
Subject: [PATCH 4/8] Update src/guide/migration/transition-group.md

---
 src/guide/migration/transition-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index a6255ac97b..44a70affaf 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -26,7 +26,7 @@ In Vue 2, `<transition-group>`, like other custom components, needed a root elem
 
 In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
 
-- If you already have `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
+- If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
 - If you didn't have one defined _and_ your styling or other behaviors relied in the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
 
 ```html

From 6e50bdd0e3b40bb1013b9f599b96c200ef17231d Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:34:44 -0600
Subject: [PATCH 5/8] Update src/guide/migration/transition-group.md

---
 src/guide/migration/transition-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index 44a70affaf..cab4b9eb55 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -27,7 +27,7 @@ In Vue 2, `<transition-group>`, like other custom components, needed a root elem
 In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
 
 - If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
-- If you didn't have one defined _and_ your styling or other behaviors relied in the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
+- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
 
 ```html
 <transition-group tag="span">

From 2a2b630d6c2fc6ab75b451232011e4f64e7f7303 Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:34:52 -0600
Subject: [PATCH 6/8] Update src/guide/transitions-list.md

---
 src/guide/transitions-list.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md
index a4cf83615a..f8e6950e47 100644
--- a/src/guide/transitions-list.md
+++ b/src/guide/transitions-list.md
@@ -7,7 +7,7 @@ So far, we've managed transitions for:
 
 So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the `<transition-group>` component. Before we dive into an example though, there are a few things that are important to know about this component:
 
-- By default, it doesn't render a wrapper element, but you can can element to be rendered with the `tag` attribute.
+- By default, it doesn't render a wrapper element, but you can specify an element to be rendered with the `tag` attribute.
 - [Transition modes](/guide/transitions-enterleave#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
 - Elements inside are **always required** to have a unique `key` attribute.
 - CSS transition classes will be applied to inner elements and not to the group/container itself.

From 8c599200ee6bd0d982e2c5105a1c2f5e3696ff73 Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:35:23 -0600
Subject: [PATCH 7/8] Update src/guide/migration/transition-group.md

---
 src/guide/migration/transition-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index cab4b9eb55..86509dedc5 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -1,5 +1,5 @@
 ---
-title: Transition Group root Element
+title: Transition Group Root Element
 badges:
   - breaking
 ---

From 47a2a3cf5777c80ef44aceb093a08db46be80f1d Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Sat, 31 Oct 2020 10:41:43 -0600
Subject: [PATCH 8/8] add transition-group to config

---
 src/.vuepress/config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index def1f8ef38..5662e525df 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -139,6 +139,7 @@ const sidebar = {
         '/guide/migration/render-function-api',
         '/guide/migration/slots-unification',
         '/guide/migration/transition',
+        '/guide/migration/transition-group',
         '/guide/migration/v-on-native-modifier-removed',
         '/guide/migration/v-model',
         '/guide/migration/v-if-v-for',