Updated documentation for upgrading to version 7

docs/docs/migration/to-v7.md

@@ -24,3 +24,97 @@ Depending on the version that you are currently on, your upgrade path will be di
 Search for all `grid` classes. You need to find any grids that are using any of the [gutter classes](/styles/gutter). Based on the number of columns add the correct [number of grid columns classes](/styles/grid-num-columns).
 
 If the number of columns change at different breakpoints (i.e. a column is hidden or made visible), then add in the correct [breakpoint class](/styles/grid-num-columns#media-query-classes) to indicate the number of columns at that breakpoint.
+
+For example if you have code like this:
+
+```html
+<div class="grid g-2">
+    <div class="col-1-2">Column here</div>
+    <div class="col-1-2">Column here</div>
+</div>
+```
+
+you'll change it to:
+
+```html
+<div class="grid g-2 nc-2">
+    <div class="col-1-2">Column here</div>
+    <div class="col-1-2">Column here</div>
+</div>
+```
+
+We added `nc-2` to the grid div.
+
+A more complicated example is when you have a grid that changes the number of columns based on breakpoints. For example:
+
+```html
+<div class="grid g-3">
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column one content here. I'll be at 25% width on large screens, 50% width on medium screens, and full width on small screens.
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+</div>
+```
+
+You would convert that to:
+
+```html
+<div class="grid g-3 nc-1 nc-2-md nc-4-md">
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column one content here. I'll be at 25% width on large screens, 50% width on medium screens, and full width on small screens.
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+    <div class="col-1-1 col-1-2-md col-1-4-lg">
+        Column two content here. </a>
+    </div>
+</div>
+```
+
+We added `nc-1 nc-2-md nc-4-md` to the grid div.
+
+#### Search for `--gap` in your CSS
+
+Also search for `--gap` in the CSS as some components may be setting their own gap value instead of using the gutter classes. Find the HTML related to that component and add the correct [number of grid columns classes](/styles/grid-num-columns).
+
+For example, if you have this in your CSS:
+
+```css
+.ImageGrid.grid {
+    --gap: var(--ImageGrid-gap, 20px); /* set the --gap variable that is used by the Cacao grid utility */
+
+    gap: var(--gap);
+}
+```
+
+and you have this HTML:
+
+```html
+<div class="ImageGrid grid">
+    <div class="col-1 col-1-2-md">Column content here</div>
+    <div class="col-1 col-1-2-md">Column content here</div>
+</div>
+```
+
+you'd change the HTML like this:
+
+```html
+<div class="ImageGrid nc-1 nc-2-md">
+    <div class="col-1 col-1-2-md">Column content here</div>
+    <div class="col-1 col-1-2-md">Column content here</div>
+</div>
+```
+
+We added `nc-1 nc-2-md` to the grid div.