From e4ec2a5b6bebff5d04cf7b934dd6955a7d2c8dd0 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Mon, 8 Dec 2025 15:38:39 -0500 Subject: [PATCH 1/4] Document required props for EDGE components --- .../docs/mobile/2/edge-components/bottom-nav.md | 8 ++++---- .../mobile/2/edge-components/introduction.md | 17 +++++++++++++++++ .../docs/mobile/2/edge-components/side-nav.md | 10 +++++----- .../docs/mobile/2/edge-components/top-bar.md | 8 ++++---- 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/resources/views/docs/mobile/2/edge-components/bottom-nav.md b/resources/views/docs/mobile/2/edge-components/bottom-nav.md index 76b31c66..ff047141 100644 --- a/resources/views/docs/mobile/2/edge-components/bottom-nav.md +++ b/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 `` can contain up to 5 `` 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`) diff --git a/resources/views/docs/mobile/2/edge-components/introduction.md b/resources/views/docs/mobile/2/edge-components/introduction.md index 035c46b1..a48d98ca 100644 --- a/resources/views/docs/mobile/2/edge-components/introduction.md +++ b/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 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 ``, add `router` to your `window` object: diff --git a/resources/views/docs/mobile/2/edge-components/side-nav.md b/resources/views/docs/mobile/2/edge-components/side-nav.md index 098f0214..fd3dde74 100644 --- a/resources/views/docs/mobile/2/edge-components/side-nav.md +++ b/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. ### `` -- `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 ### `` -- `heading` - The group's heading +- `heading` - The group's heading (required) - `expanded` - Initially expanded (optional, default: `false`) - `icon` - Material icon (optional) diff --git a/resources/views/docs/mobile/2/edge-components/top-bar.md b/resources/views/docs/mobile/2/edge-components/top-bar.md index 56069551..8406ae0d 100644 --- a/resources/views/docs/mobile/2/edge-components/top-bar.md +++ b/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 `` can contain up to 10 `` 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) From 824403e625db610ce7920b906a9b39c242ec1d7f Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Mon, 8 Dec 2025 15:51:20 -0500 Subject: [PATCH 2/4] Document direct platform icons and icon discovery resources --- .../docs/mobile/2/edge-components/icons.md | 92 ++++++++++++++++--- 1 file changed, 79 insertions(+), 13 deletions(-) diff --git a/resources/views/docs/mobile/2/edge-components/icons.md b/resources/views/docs/mobile/2/edge-components/icons.md index 1421f4fc..bfbe1cb3 100644 --- a/resources/views/docs/mobile/2/edge-components/icons.md +++ b/resources/views/docs/mobile/2/edge-components/icons.md @@ -14,14 +14,15 @@ handles the platform translation automatically. ## How It Works -The icon system uses a three-tier resolution strategy: +The icon system uses a four-tier resolution strategy: -1. **Manual Mapping** - Explicit mappings for common icons and aliases (e.g., `home`, `settings`, `user`) -2. **Smart Fallback** - Attempts to auto-convert unmapped icon names to platform equivalents -3. **Default Fallback** - Uses a circle icon if no match is found +1. **Direct Platform Icons** - On iOS, if the name contains a `.` it's used as a direct SF Symbol path (e.g., `car.side.fill`). On Android, any Material Icon ligature name works directly (e.g., `shopping_cart`). +2. **Manual Mapping** - Explicit mappings for common icons and aliases (e.g., `home`, `settings`, `user`) +3. **Smart Fallback** - Attempts to auto-convert unmapped icon names to platform equivalents +4. **Default Fallback** - Uses a circle icon if no match is found -This approach means you can use intuitive icon names and get consistent results across iOS and Android, even when the -underlying platform icon names differ. +This approach means you can use intuitive icon names for common cases, leverage direct platform icons for advanced use +cases, and get consistent results across iOS and Android. ## Platform Differences @@ -39,15 +40,60 @@ If an icon name isn't manually mapped, the system attempts to find a matching SF ### Android (Material Icons) -On Android, icons render as Material Icons with automatic support for filled and outlined variants. The filled variant -is used by default in most components, but components like bottom navigation can switch between filled (selected) and -outlined (unselected) states. +On Android, icons render using a lightweight font-based approach that supports the entire Material Icons library. You +can use any Material Icon by its ligature name directly (e.g., `shopping_cart`, `qr_code_2`). -Manual mappings convert common icon names to their Material Icon equivalents. For example: +Manual mappings provide convenient aliases for common icon names. For example: -- `home` → `Icons.Filled.Home` -- `settings` → `Icons.Filled.Settings` -- `check` → `Icons.Filled.Check` +- `home` → `home` +- `settings` → `settings` +- `check` → `check` +- `cart` → `shopping_cart` + +## Direct Platform Icons + +For advanced use cases, you can use platform-specific icon names directly. + +### iOS SF Symbols + +On iOS, include a `.` in the icon name to use an SF Symbol path directly: + +@verbatim +```blade + + + +``` +@endverbatim + +### Android Material Icons + +On Android, use any Material Icon ligature name (with underscores): + +@verbatim +```blade + + + +``` +@endverbatim + +## Platform-Specific Icons + +When you need different icons on each platform, use the `System` facade: + +@verbatim +```blade + +``` +@endverbatim + +This is useful when the mapped icon doesn't match your needs or you want to use platform-specific variants. ## Basic Usage @@ -220,3 +266,23 @@ application across apps. So try to maintain consistent use of icons to help guid - **Stay consistent** - Use the same icon name throughout your app for the same action - **Test on both platforms** - If you use auto-converted icons, verify they appear correctly on iOS and Android + +## Finding Icons + +### Android Material Icons + +Browse the complete Material Icons library at [Google Fonts Icons](https://fonts.google.com/icons). Use the icon name +exactly as shown (with underscores, e.g., `shopping_cart`, `qr_code_2`). + +### iOS SF Symbols + +Browse SF Symbols using this [community Figma file](https://www.figma.com/community/file/1549047589273604548). While not +comprehensive, it's a great starting point for discovering available symbols. + +For the complete library, download the [SF Symbols app](https://developer.apple.com/sf-symbols/) for macOS. + + From b1856c2a3ceacb9cbc574128d09faeb5c6007eae Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Mon, 8 Dec 2025 15:54:08 -0500 Subject: [PATCH 3/4] Add v2.2.0 changelog entry --- .../docs/mobile/2/getting-started/changelog.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/resources/views/docs/mobile/2/getting-started/changelog.md b/resources/views/docs/mobile/2/getting-started/changelog.md index c5ae1dec..5b0d773f 100644 --- a/resources/views/docs/mobile/2/getting-started/changelog.md +++ b/resources/views/docs/mobile/2/getting-started/changelog.md @@ -3,6 +3,23 @@ title: Changelog order: 2 --- +## v2.2.0 + +### EDGE Required Props Validation +EDGE components now validate required props at render time and provide helpful error messages showing exactly which props are missing and how to fix them. + +### Direct SF Symbol Support (iOS) +Use any SF Symbol directly by including a `.` in the icon name (e.g., `car.side.fill`, `flashlight.on.fill`). + +### Font-based Material Icons (Android) +Reduced Android app size by ~30MB by switching from the `material-icons-extended` library to a lightweight font-based approach. Any Material Icon ligature name now works directly. + +@verbatim +```blade +icon="{{ \Native\Mobile\Facades\System::isIos() ? 'flashlight.on.fill' : 'flashlight_on' }}" +``` +@endverbatim + ## v2.1.0 ### Cleaner Console Output From 31ed8ca8cd0f7fc1c3a9f8e4cd5ebc454495d1d2 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Mon, 8 Dec 2025 15:58:41 -0500 Subject: [PATCH 4/4] Updates changelog mobile 2.1.1 --- .../docs/mobile/2/getting-started/changelog.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/resources/views/docs/mobile/2/getting-started/changelog.md b/resources/views/docs/mobile/2/getting-started/changelog.md index c5ae1dec..1d84782c 100644 --- a/resources/views/docs/mobile/2/getting-started/changelog.md +++ b/resources/views/docs/mobile/2/getting-started/changelog.md @@ -3,6 +3,20 @@ title: Changelog order: 2 --- +## v2.1.1 + +### Foreground permissions +Prevent removal of FOREGROUND_SERVICE and POST_NOTIFICATIONS permissions when they're needed by camera features, even if push notifications are disabled + +### FSymlink fix +Run storage:unlink before storage:link to handle stale symlinks, and exclude public/storage from build to prevent symlink conflicts + +### iOS Push Notifications +Handles push notification APNS flow differently, fires off the native event as soon as the token is received from FCM vs assuming the AppDelegate will ahndle it. + +### Fix Missing $id param on some events +Some events were missing an `$id` parameter, which would cause users to experience errors when trying to receive an ID from the event. + ## v2.1.0 ### Cleaner Console Output