Document required props for EDGE components

Author: shanerbaner82

resources/views/docs/mobile/2/edge-components/bottom-nav.md

@@ -45,10 +45,10 @@ A bottom navigation bar with up to 5 items. Used for your app's primary navigati
 
 A `<native:bottom-nav>` can contain up to 5 `<native:bottom-nav-item>` elements.
 
-- `id` - Unique identifier
-- `icon` - A named [icon](icons)
-- `label` - Accessibility label (optional)
-- `url` - A URL to navigate to in the web view (optional)
+- `id` - Unique identifier (required)
+- `icon` - A named [icon](icons) (required)
+- `label` - Accessibility label (required)
+- `url` - A URL to navigate to in the web view (required)
 - `active` - Highlight this item as active (optional, default: `false`)
 - `badge` - Badge text/number (optional)
 - `news` - Show "new" indicator dot (optional, default: `false`)

resources/views/docs/mobile/2/edge-components/introduction.md

@@ -74,6 +74,23 @@ They can be defined in any Blade file, but for them to be processed, that Blade
 recommend putting your components in a Blade component that is likely to be rendered on every request, such as your
 main layout, e.g. `layouts/app.blade.php` or one of its child views/components.
 
+## Props Validation
+
+EDGE components enforce required props validation to prevent misconfiguration. If you're missing required props, you'll
+see a clear error message that tells you exactly what's missing and how to fix it.
+
+For example, if you forget the `label` prop on a bottom navigation item:
+
+```
+EDGE Component <native:bottom-nav-item> is missing required properties: 'label'.
+Add these attributes to your component: label="..."
+```
+
+The error message will list all missing required props and show you exactly which attributes you need to add. This
+validation happens at render time, making it easy to catch configuration issues during development.
+
+Each component's documentation page indicates which props are required vs optional.
+
 ## Using Inertia?
 
 Each link in an EDGE component will do a full post back to PHP, which may not be what you want if you are using Inertia. To transform these requests into Inertia `<Link>`, add `router` to your `window` object:

resources/views/docs/mobile/2/edge-components/side-nav.md

@@ -84,10 +84,10 @@ On iOS, gesture support is always enabled for the side nav.
 
 ### `<native:side-nav-item>`
 
-- `id` - Unique identifier
-- `label` - Display text
-- `icon` - A named [icon](icons)
-- `url` - A URL to navigate to in the web view (optional)
+- `id` - Unique identifier (required)
+- `label` - Display text (required)
+- `icon` - A named [icon](icons) (required)
+- `url` - A URL to navigate to in the web view (required)
 - `active` - Highlight this item as active (optional, default: `false`)
 - `badge` - Badge text (optional)
 - `badge-color` - Hex code or named color (optional)
@@ -100,7 +100,7 @@ Any `url` that doesn't match the web view's domain will open in the user's defau
 
 ### `<native:side-nav-group>`
 
-- `heading` - The group's heading
+- `heading` - The group's heading (required)
 - `expanded` - Initially expanded (optional, default: `false`)
 - `icon` - Material icon (optional)
 

resources/views/docs/mobile/2/edge-components/top-bar.md

@@ -35,9 +35,9 @@ A top bar with title and action buttons. This renders at the top of the screen.
 
 ## Props
 
-- `title` - The title text
+- `title` - The title text (required)
 - `show-navigation-icon` - Show back/menu button (optional, default: `true`)
-- `label` - If more than 5 actions, iOS will display an overflow menu and the labels assigned to each item
+- `label` - If more than 5 actions, iOS will display an overflow menu and the labels assigned to each item (optional)
 - `background-color` - Background color. Hex code (optional)
 - `text-color` - Text color. Hex code (optional)
 - `elevation` - Shadow depth 0-24 (optional) [Android]
@@ -48,8 +48,8 @@ A `<native:top-bar>` can contain up to 10 `<native:top-bar-action>` elements. Th
 collapsing to a menu if there are too many.
 
 ### Props
-- `id` - Unique identifier
-- `icon` - A named [icon](icons)
+- `id` - Unique identifier (required)
+- `icon` - A named [icon](icons) (required)
 - `label` - Accessibility label (optional)
 - `url` - A URL to navigate to in the web view (optional)