docs

Author: danharrin

docs-assets/app/app/Livewire/PrimesDemo.php

@@ -62,7 +62,7 @@ public function primes(Schema $schema): Schema
                                         ->copyable()
                                         ->copyMessage('Copied')
                                         ->fontFamily(FontFamily::Mono)
-                                        ->size('xs')
+                                        ->size(TextSize::ExtraSmall)
                                         ->color('neutral'),
                                     [
                                         'tYRnCqNLUx-3QOLNKyDiV',
@@ -75,7 +75,7 @@ public function primes(Schema $schema): Schema
                                         'cO0dJYqmee-S9ubJHpRFR',
                                     ],
                                 ))
-                                    ->size('xs'),
+                                    ->size(TextSize::ExtraSmall),
                             ])
                             ->compact()
                             ->secondary(),

packages/panels/src/Auth/MultiFactor/GoogleTwoFactor/Actions/SetUpGoogleTwoFactorAuthenticationAction.php

@@ -20,6 +20,7 @@
 use Filament\Schemas\Components\UnorderedList;
 use Filament\Support\Enums\FontFamily;
 use Filament\Support\Enums\FontWeight;
+use Filament\Support\Enums\TextSize;
 use Filament\Support\Enums\Width;
 use Filament\Support\Icons\Heroicon;
 use Illuminate\Contracts\Auth\Authenticatable;
@@ -86,11 +87,11 @@ public static function make(GoogleTwoFactorAuthentication $googleTwoFactorAuthen
                                         ->copyable()
                                         ->copyMessage(__('filament-panels::auth/multi-factor/recovery-codes-modal-content.messages.copied'))
                                         ->fontFamily(FontFamily::Mono)
-                                        ->size('xs')
+                                        ->size(TextSize::ExtraSmall)
                                         ->color('neutral'),
                                     decrypt($action->getArguments()['encrypted'] ?? encrypt([]))['recoveryCodes'] ?? [],
                                 ))
-                                    ->size('xs'),
+                                    ->size(TextSize::ExtraSmall),
                                 Text::make(function () use ($action): Htmlable {
                                     $recoveryCodes = decrypt($action->getArguments()['encrypted'])['recoveryCodes'];
 

packages/schemas/docs/04-layouts/01-overview.md

@@ -54,7 +54,6 @@ By default, calling `extraAttributes()` multiple times will overwrite the previo
 The vast majority of methods used to configure entries accept functions as parameters instead of hardcoded values:
 
 ```php
-use App\Models\User;
 use Filament\Schemas\Components\Grid;
 use Filament\Schemas\Components\Section;
 

packages/schemas/docs/05-primes/01-overview.md

@@ -19,6 +19,8 @@ use Filament\Schemas\Components\Image;
 use Filament\Schemas\Components\Section;
 use Filament\Schemas\Components\Text;
 use Filament\Schemas\Components\UnorderedList;
+use Filament\Support\Enums\FontWeight;
+use Filament\Support\Enums\TextSize;
 
 $schema
     ->components([
@@ -39,11 +41,11 @@ $schema
                     fn (string $recoveryCode): Text => Text::make($recoveryCode)
                         ->copyable()
                         ->fontFamily(FontFamily::Mono)
-                        ->size('xs')
+                        ->size(TextSize::ExtraSmall)
                         ->color('neutral'),
                     ['tYRnCqNLUx-3QOLNKyDiV', 'cKok2eImKc-oWHHH4VhNe', 'C0ZstEcSSB-nrbyk2pv8z', '49EXLRQ8MI-FpWywpSDHE', 'TXjHnvkUrr-KuiVJENPmJ', 'BB574ookll-uI20yxP6oa', 'BbgScF2egu-VOfHrMtsCl', 'cO0dJYqmee-S9ubJHpRFR'],
                 ))
-                    ->size('xs'),
+                    ->size(TextSize::ExtraSmall),
             ])
             ->compact()
             ->secondary(),
@@ -52,40 +54,31 @@ $schema
     ])
 ```
 
-In these examples, the prime components are not associated with any other components in the schema, they are standalone. 
+Although text can be rendered in a schema using an [infolist text entry](../infolists/text), entries are intended to render a label-value detail about an entity (like an Eloquent model), and not to render arbitrary text. Prime components are more suitable for this purpose. Infolists can be considered more similar to [description lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) in HTML.
 
 Prime component classes can be found in the `Filament\Schemas\Components` namespace. They reside within the schema array of components.
 
-Components may be created using the static `make()` method. Usually, you will then define the child component `schema()` to display inside:
-
-```php
-use Filament\Schemas\Components\Text;
-
-Text::make()
-```
-
 ## Available prime components
 
 Filament ships with some prime components, suitable for arranging your components depending on your needs:
 
-- [Grid](grid)
-- [Section](section)
-- [Tabs](tabs)
-- [Wizard](wizard)
-- [Fieldset](fieldset)
-- [Split](split)
+- [Text](text)
+- [Icon](icon)
+- [Image](image)
+- [Unordered list](unordered-list)
+- [Action](action)
 
-You may also [create your own custom prime components](custom) to organize schemas however you wish.
+You may also [create your own custom prime components](custom) to add your own arbitrary content to a schema.
 
 ## Adding extra HTML attributes to a prime component
 
 You can pass extra HTML attributes to the component via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value:
 
 ```php
-use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\Text;
 
-Section::make()
-    ->extraAttributes(['class' => 'custom-section-style'])
+Text::make()
+    ->extraAttributes(['class' => 'custom-text-style'])
 ```
 
 <UtilityInjection set="formFields" version="4.x">As well as allowing a static value, the `extraAttributes()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
@@ -97,21 +90,18 @@ By default, calling `extraAttributes()` multiple times will overwrite the previo
 The vast majority of methods used to configure entries accept functions as parameters instead of hardcoded values:
 
 ```php
-use App\Models\User;
-use Filament\Schemas\Components\Grid;
-use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\Image;
+use Filament\Schemas\Components\Text;
 
-Grid::make(fn (): array => [
-    'lg' => auth()->user()->isAdmin() ? 4 : 6,
-])->schema([
-    // ...
-])
+Text::make(fn (): string => auth()->user()->isAdmin()
+    ? 'Admin users modify the settings'
+    : 'Non-admin users view but not change the settings.')
 
-Section::make()
-    ->heading(fn (): string => auth()->user()->isAdmin() ? 'Admin Dashboard' : 'User Dashboard')
-    ->schema([
-        // ...
-    ])
+Image::make(
+    url: fn (): string => auth()->user()->isAdmin() ? asset('images/admin.jpg') : asset('images/non-admin.jpg'),
+    alt: fn (): string => auth()->user()->isAdmin() ? 'Admin user' : 'Non-admin user',
+)
+    ->imageHeight(fn (): string => auth()->user()->isAdmin() ? '12rem' : '8rem')
 ```
 
 This alone unlocks many customization possibilities.
@@ -212,22 +202,22 @@ function (Request $request, Set $set) {
 
 ## Global settings
 
-If you wish to change the default behavior of a component globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the component using. For example, if you wish to make all section components have [2 columns](grid) by default, you can do it like so:
+If you wish to change the default behavior of a component globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the component using. For example, if you wish to make all images have a height of 12rem by default:
 
 ```php
-use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\Image;
 
-Section::configureUsing(function (Section $section): void {
-    $section
-        ->columns(2);
+Image::configureUsing(function (Image $image): void {
+    $image
+        ->imageHeight('12rem');
 });
 ```
 
 Of course, you are still able to overwrite this on each component individually:
 
 ```php
-use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\Image;
 
-Section::make()
-    ->columns(1)
+Image::make()
+    ->imageHeight('8rem')
 ```

packages/schemas/docs/05-primes/02-text.md

@@ -0,0 +1,7 @@
+---
+title: Text
+---
+import Aside from "@components/Aside.astro"
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+import UtilityInjection from "@components/UtilityInjection.astro"
+

packages/schemas/docs/05-primes/03-icon.md

@@ -0,0 +1,7 @@
+---
+title: Icon
+---
+import Aside from "@components/Aside.astro"
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+import UtilityInjection from "@components/UtilityInjection.astro"
+

packages/schemas/docs/05-primes/04-image.md

@@ -0,0 +1,7 @@
+---
+title: Image
+---
+import Aside from "@components/Aside.astro"
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+import UtilityInjection from "@components/UtilityInjection.astro"
+

packages/schemas/docs/05-primes/05-unordered-list.md

@@ -0,0 +1,7 @@
+---
+title: Unordered list
+---
+import Aside from "@components/Aside.astro"
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+import UtilityInjection from "@components/UtilityInjection.astro"
+

packages/schemas/docs/05-primes/02-actions.md renamed to packages/schemas/docs/05-primes/06-action.md

@@ -1,5 +1,5 @@
 ---
-title: Actions
+title: Action
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 

packages/schemas/docs/05-primes/07-custom.md

@@ -0,0 +1,11 @@
+---
+title: Custom
+---
+import Aside from "@components/Aside.astro"
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+import UtilityInjection from "@components/UtilityInjection.astro"
+
+render hook
+livewire
+view
+custom component

packages/schemas/resources/views/components/image.blade.php

@@ -17,12 +17,15 @@
     @if (filled($tooltip))
         x-tooltip="{ content: @js($tooltip), theme: $store.theme }"
     @endif
-    @class([
-        'fi-sc-icon',
-        ($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
-    ])
-    @style([
-        "height: {$height}" => $height,
-        "width: {$width}" => $width,
-    ])
+    {{
+        $getExtraAttributeBag()
+            ->class([
+                'fi-sc-icon',
+                ($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
+            ])
+            ->style([
+                "height: {$height}" => $height,
+                "width: {$width}" => $width,
+            ])
+    }}
 />

packages/schemas/resources/views/components/text.blade.php

@@ -36,6 +36,7 @@
             ' : null
         "
         :tag="$isCopyable ? 'button' : 'span'"
+        :attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())"
     >
         {{ $content }}
     </x-filament::badge>
@@ -60,6 +61,7 @@
                     ($weight instanceof FontWeight) ? "fi-font-{$weight->value}" : $weight,
                     ($fontFamily instanceof FontFamily) ? "fi-font-{$fontFamily->value}" : $fontFamily,
                 ])
+                ->merge($getExtraAttributes(), escape: false)
         }}
     >
         {{ $content }}

packages/schemas/resources/views/components/unordered-list.blade.php

@@ -1,8 +1,8 @@
 <ul
-    @class([
+    {{ $getExtraAttributeBag()->class([
         'fi-sc-unordered-list',
         (($size = $getSize()) instanceof \Filament\Support\Enums\TextSize) ? "fi-size-{$size->value}" : $size,
-    ])
+    ]) }}
 >
     @foreach ($getChildSchema()->getComponents() as $component)
         <li>

packages/schemas/src/Components/IconComponent.php renamed to packages/schemas/src/Components/Icon.php

@@ -3,4 +3,4 @@
     'icon' => null,
 ])
 
-{{ \Filament\Support\generate_icon_html($icon, $alias, $attributes) }}
+{{ \Filament\Support\generate_icon_html($icon, $alias, $attributes->merge($getExtraAttributes(), escape: false)) }}