icon prime

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

@@ -4,6 +4,7 @@ namespace App\Livewire;
 
 use Filament\Actions\Action;
 use Filament\Schemas\Components\Group;
+use Filament\Schemas\Components\Icon;
 use Filament\Schemas\Components\Image;
 use Filament\Schemas\Components\Section;
 use Filament\Schemas\Components\Text;
@@ -152,6 +153,41 @@ class PrimesDemo extends Component implements HasSchemas
                         Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
                             ->fontFamily(FontFamily::Mono),
                     ]),
+                Group::make()
+                    ->id('textTooltip')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
+                            ->tooltip('Your secret recovery code'),
+                    ]),
+                Group::make()
+                    ->id('icon')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Icon::make(Heroicon::Star),
+                    ]),
+                Group::make()
+                    ->id('iconColor')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Icon::make(Heroicon::ExclamationCircle)
+                            ->color('danger'),
+                    ]),
+                Group::make()
+                    ->id('iconTooltip')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Icon::make(Heroicon::ExclamationTriangle)
+                            ->tooltip('Warning'),
+                    ]),
             ]);
     }
 

docs-assets/screenshots/schema.js

@@ -1910,6 +1910,52 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'primes/text/tooltip': {
+        url: 'primes',
+        selector: '#textTooltip',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.hover('#textTooltip .fi-sc-text')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'primes/icon/simple': {
+        url: 'primes',
+        selector: '#icon',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'primes/icon/color': {
+        url: 'primes',
+        selector: '#iconColor',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'primes/icon/tooltip': {
+        url: 'primes',
+        selector: '#iconTooltip',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.hover('#iconTooltip .fi-sc-icon')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',

packages/schemas/docs/06-primes.md

@@ -227,3 +227,65 @@ Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
 <UtilityInjection set="schemaComponents" version="4.x">As well as allowing a static value, the `fontFamily()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
 
 <AutoScreenshot name="primes/text/mono" alt="Text entry in a monospaced font" version="4.x" />
+
+### Adding a tooltip to the text
+
+You may add a tooltip to the text using the `tooltip()` method:
+
+```php
+use Filament\Schemas\Components\Text;
+
+Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
+    ->tooltip('Your secret recovery code')
+```
+
+<UtilityInjection set="schemaComponents" version="4.x">As well as allowing a static value, the `tooltip()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/text/tooltip" alt="Text with a tooltip" version="4.x" />
+
+## Icon component
+
+Icons can be inserted into a schema using the `Icon` component. [Icons](../styling/icons) are passed to the `make()` method:
+
+```php
+use Filament\Schemas\Components\Icon;
+use Filament\Support\Icons\Heroicon;
+
+Icon::make(Heroicon::Star)
+```
+
+<UtilityInjection set="schemaComponents" version="4.x">As well as allowing a static value, the `make()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/icon/simple" alt="Icon" version="4.x" />
+
+### Customizing the icon color
+
+You may set a [color](../../styling/colors) for the icon:
+
+```php
+use Filament\Schemas\Components\Icon;
+use Filament\Support\Icons\Heroicon;
+
+Icon::make(Heroicon::ExclamationCircle)
+    ->color('danger')
+```
+
+<UtilityInjection set="schemaComponents" version="4.x">As well as allowing a static value, the `color()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/icon/color" alt="Icon in the danger color" version="4.x" />
+
+## Adding a tooltip to the icon
+
+You may add a tooltip to the icon using the `tooltip()` method:
+
+```php
+use Filament\Schemas\Components\Icon;
+use Filament\Support\Icons\Heroicon;
+
+Icon::make(Heroicon::ExclamationTriangle)
+    ->tooltip('Warning')
+```
+
+<UtilityInjection set="schemaComponents" version="4.x">As well as allowing a static value, the `tooltip()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/icon/tooltip" alt="Icon with a tooltip" version="4.x" />

packages/schemas/resources/css/components/image.css

@@ -1,4 +1,4 @@
-.fi-sc-icon {
+.fi-sc-image {
     @apply rounded-lg border border-gray-300 dark:border-transparent;
 
     &.fi-align-center {

packages/schemas/resources/css/index.css

@@ -1,9 +1,9 @@
 @import './components/actions.css' layer(components);
+@import './components/flex.css' layer(components);
 @import './components/form.css' layer(components);
 @import './components/icon.css' layer(components);
 @import './components/image.css' layer(components);
 @import './components/section.css' layer(components);
-@import './components/split.css' layer(components);
 @import './components/tabs.css' layer(components);
 @import './components/text.css' layer(components);
 @import './components/unordered-list.css' layer(components);

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

@@ -20,7 +20,7 @@
     {{
         $getExtraAttributeBag()
             ->class([
-                'fi-sc-icon',
+                'fi-sc-image',
                 ($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
             ])
             ->style([

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

@@ -10,6 +10,7 @@
     $iconPosition = $getIconPosition();
     $iconSize = $getIconSize();
     $size = $getSize();
+    $tooltip = $getTooltip();
     $weight = $getWeight();
     $fontFamily = $getFontFamily();
 
@@ -36,7 +37,8 @@
             ' : null
         "
         :tag="$isCopyable ? 'button' : 'span'"
-        :attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())"
+        :tooltip="$tooltip"
+        :attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag()->class(['fi-sc-text']))"
     >
         {{ $content }}
     </x-filament::badge>
@@ -51,6 +53,9 @@
                 })
             "
         @endif
+        @if (filled($tooltip))
+            x-tooltip="{ content: @js($tooltip), theme: $store.theme }"
+        @endif
         {{
             (new \Illuminate\View\ComponentAttributeBag)
                 ->color(TextComponent::class, $color)

packages/schemas/src/Components/Icon.php

@@ -49,6 +49,6 @@ class Icon extends Component implements HasEmbeddedView
     {
         return generate_icon_html($this->getIcon(), attributes: (new ComponentAttributeBag([
             'x-tooltip' => filled($tooltip = $this->getTooltip()) ? '{ content: ' . Js::from($tooltip) . ', theme: $store.theme }' : null,
-        ]))->color(IconComponent::class, 'primary')->class(['fi-sc-icon']))->toHtml();
+        ]))->color(IconComponent::class, $this->getColor() ?? 'primary')->class(['fi-sc-icon']))->toHtml();
     }
 }