docs/tut/crash-course/7-property-groups.md

@@ -1,8 +1,43 @@
 # [Property Groups](./index.md)
 
-When a key is assigned a table, Vide does not attempt to assign it to a
-property, instead, the table is iterated and processed just like the nesting
-table.
+Often when creating components from existing components, you can find yourself
+repetitively passing through properties such as size or position.
+
+```lua
+function Background(props: {
+    Color: Color3,
+    AnchorPoint: UDim2,
+    Position: UDim2,
+    Size: UDim2
+})
+    return create "Frame" {
+        Color = props.Color
+        AnchorPoint = props.AnchorPoint,
+        Position = props.Position,
+        Size = props.Size
+    }
+end
+
+function Menu(props: {
+    Color = props.Color
+    AnchorPoint: UDim2,
+    Position: UDim2,
+    Size: UDim2
+})
+    return Background {
+        Color = props.COlor,
+        AnchorPoint = props.AnchorPoint,
+        Position = props.Position,
+        Size = props.Size
+    }
+end
+```
+
+One way this can be avoided is by using *property nesting*. In Vide, passign a
+table value inside `props` has special semantics. Any key with a table value is
+not assigned like a property, instead the table is iterated and processed just
+like the outer table is. Any properties in the nested table will be assigned
+to the instance just the same.
 
 Below is an example of how you can use this to pass groups of similar properties
 together such as position and size, while also using typechecking.
@@ -16,48 +51,36 @@ type Layout = {
     }
 }
 
-local function Button(args: Layout & {
-    Text: string,
-    Callback: () -> ()
-})
-    local count = source(0)
-
-    return create "TextButton" {
-        Text = args.Text
-        Activated = args.Callback,
-        Layout = args.Layout
+function Background(props: Layout & { Color: Color3 })
+    return create "Frame" {
+        Color = props.Color,
+        props.Layout
     }
 end
 
-Button {
-    Text = "Click me!",
-    
-    Callback = function()
-        print "clicked me!"
-    end,
-
-    Layout = {
-        Position = UDim2.new(),
-        Size = UDim2.new()
+function Menu(props: Layout & { Color: Color3 })
+    return Background {
+        Color = props.Color,
+        Layout = props.Layout
     }
-}
+end
 ```
 
-Here the button component is assigned a position and size as if you passed those
-properties directly.
+Here we created a nested group with the key `Layout` that can accept
+layout-related properties. Any name could be chosen for the key.
+This allows us to write much more concise syntax that is also typecheckable.
 
-The same can be done for properties such as children.
+The same can be done for properties such as children to pass table of instances.
 
 ```lua
 type Children = {
     Children = Array<Instance>
 }
 
-local function List(args: Children & Layout)
+local function List(props: Children & Layout)
     return create "Frame" {
-        Layout = args.Layout,
-        Children = args.Children,
-
+        props.Layout,
+        props.Children,
         create "UIListLayout" {}
     }
 end
@@ -68,7 +91,8 @@ List {
     },
 
     Children = {
-        create "TextLabel" { Text = "1" }
+        create "TextLabel" { Text = "1" },
+        create "TextLabel" { Text = "2" }
     }
 }
 ```