🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

2026-01-28 07:43:18 +00:00 · 2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions
--- a/resources/views/flux/time-picker/button.blade.php
+++ b/resources/views/flux/time-picker/button.blade.php
@@ -0,0 +1,54 @@
+@props([
+    'placeholder' => null,
+    'clearable' => null,
+    'invalid' => false,
+    'size' => null,
+])
+
+@php
+
+$classes = Flux::classes()
+    ->add('group/select-button cursor-default py-2')
+    ->add('overflow-hidden') // Overflow hidden is here to prevent the button from growing if the selected time text is too long.
+    ->add('flex items-center')
+    ->add('shadow-xs')
+    ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+    // Make the placeholder match the text color of standard input placeholders...
+    ->add('disabled:shadow-none')
+    ->add(match ($size) {
+        default => 'h-10 text-base sm:text-sm rounded-lg px-3 block w-full',
+        'sm' => 'h-8 text-sm rounded-lg ps-3 pe-2 block w-full',
+        'xs' => 'h-6 text-xs rounded-lg ps-3 pe-2 block w-full',
+    })
+    ->add($invalid
+        ? 'border border-red-500'
+        : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+    )
+    ;
+@endphp
+
+<button type="button" {{ $attributes->class($classes) }} @if ($invalid) data-invalid @endif data-flux-group-target data-flux-time-picker-button>
+    <flux:icon.clock variant="mini" class="me-2 text-zinc-300 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[disabled]_&]:text-white/40!" />
+
+    <?php if ($slot->isNotEmpty()): ?>
+        {{ $slot }}
+    <?php else: ?>
+        <flux:time-picker.selected :$placeholder />
+    <?php endif; ?>
+
+    <?php if ($clearable): ?>
+        <flux:button as="div"
+            class="cursor-pointer ms-2 {{ $size === 'sm' || $size === 'xs' ? '-me-1' : '-me-2' }} [[data-flux-time-picker-button]:has([data-flux-time-picker-placeholder])_&]:hidden [[data-flux-select]:has([disabled])_&]:hidden"
+            variant="subtle"
+            :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
+            square
+            tabindex="-1"
+            aria-label="Clear time"
+            x-on:click.prevent.stop="let timePicker = $el.closest('ui-time-picker'); timePicker.clear();"
+        >
+            <flux:icon.x-mark variant="micro" />
+        </flux:button>
+    <?php endif; ?>
+
+    <flux:icon.chevron-down variant="mini" class="ms-2 -me-1 text-zinc-300 [[data-flux-time-picker-button]:hover_&]:text-zinc-800 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[data-flux-time-picker-button]:hover_&]:text-white dark:[[disabled]_&]:text-white/40!" />
+</button>
--- a/resources/views/flux/time-picker/index.blade.php
+++ b/resources/views/flux/time-picker/index.blade.php
@@ -0,0 +1,96 @@
+@props([
+    'placeholder' => null,
+    'unavailable' => null,
+    'clearable' => null,
+    'dropdown' => null,
+    'type' => 'button',
+    'invalid' => null,
+    'value' => null,
+    'name' => null,
+    'size' => null,
+])
+
+@php
+// We only want to show the name attribute if it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+    unset($attributes[$wireModel->directive]);
+
+    $wireModel->directive .= '.self';
+
+    $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+$placeholder ??= __('Select a time');
+
+// Mark it invalid if the property or any of it's nested attributes have errors...
+$invalid ??= ($name && ($errors->has($name) || $errors->has($name . '.*')));
+
+$classes = Flux::classes()
+    ->add('block min-w-0')
+    // The below reverts styles added by Tailwind Forms plugin...
+    ->add('border-0 p-0 bg-transparent')
+    ;
+
+$optionsClasses = Flux::classes()
+    ->add('[:where(&)]:min-w-48 [:where(&)]:max-h-[20rem] p-[.3125rem] scroll-py-[.3125rem]')
+    ->add('rounded-lg shadow-xs')
+    ->add('border border-zinc-200 dark:border-zinc-600')
+    ->add('bg-white dark:bg-zinc-700')
+    ;
+
+// Add support for `$value` being an array, if for example it's coming from
+// the `old()` helper or if a user prefers to pass data in as an array...
+if (is_array($value)) {
+    $value = collect($value)->join(',');
+}
+
+if (isset($unavailable)) {
+    $unavailable = collect($unavailable)->join(',');
+}
+
+if (isset($dropdown) && $dropdown === false) {
+    $dropdown = 'false';
+}
+@endphp
+
+<flux:with-field :$attributes :$name>
+    <ui-time-picker
+        {{ $attributes->class($classes) }}
+        data-flux-control
+        data-flux-time-picker
+        @if (isset($dropdown)) dropdown="{{ $dropdown }}" @endif
+        @if ($unavailable) unavailable="{{ $unavailable }}" @endif
+        @if ($showName) name="{{ $name }}" @endif
+        @if (isset($value)) value="{{ $value }}" @endif
+        {{ $attributes }}
+    >
+        <ui-time-picker-trigger>
+        <?php if ($type === 'input'): ?>
+            <flux:time-picker.input :$invalid :$size :$clearable :$dropdown />
+        <?php else: ?>
+            <flux:time-picker.button :$placeholder :$invalid :$size :$clearable />
+        <?php endif; ?>
+        </ui-time-picker-trigger>
+
+        <ui-time-picker-options popover="manual" tabindex="-1" wire:ignore class="{{ $optionsClasses }}">
+            <template name="option">
+                <button type="button" tabindex="-1" class="w-full px-1 py-1.5 rounded-lg flex items-center justify-start gap-2 text-sm text-zinc-800 dark:text-white data-active:bg-zinc-100 dark:data-active:bg-zinc-600 disabled:text-zinc-400 disabled:pointer-events-none disabled:cursor-default [[readonly]_&]:pointer-events-none [[readonly]_&]:cursor-default [[readonly]_&]:bg-transparent">
+                    <div class="w-6 shrink-0" data-checked>
+                        <flux:icon.check variant="mini" class="hidden [ui-time-picker-options>[data-selected]_&]:block" />
+                    </div>
+                    {{-- This need to be `ltr`, otherwise the string will be flipped in RTL mode when it shouldn't be... --}}
+                    <div dir="ltr" class="tabular-nums">
+                        <slot></slot>
+                    </div>
+                </button>
+            </template>
+        </ui-time-picker-options>
+    </ui-time-picker>
+</flux:with-field>
--- a/resources/views/flux/time-picker/input.blade.php
+++ b/resources/views/flux/time-picker/input.blade.php
@@ -0,0 +1,88 @@
+@props([
+    'variant' => 'outline',
+    'clearable' => null,
+    'dropdown' => null,
+    'invalid' => false,
+    'size' => null,
+])
+
+@php
+
+$classes = Flux::classes()
+    ->add('w-full border rounded-lg block group disabled:shadow-none dark:shadow-none')
+    ->add('ps-3 pe-2 flex items-center')
+    ->add('font-mono cursor-default')
+    ->add(match ($size) {
+        default => 'text-base sm:text-sm py-2 h-10 leading-[1.375rem]', // This makes the height of the input 40px (same as buttons and such...)
+        'sm' => 'text-sm py-1.5 h-8 leading-[1.125rem]',
+        'xs' => 'text-xs py-1.5 h-6 leading-[1.125rem]',
+    })
+    ->add(match ($variant) { // Background...
+        'outline' => 'bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]',
+        'filled'  => 'bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%]',
+    })
+    ->add(match ($variant) { // Text color
+        'outline' => 'text-zinc-700 disabled:text-zinc-500 placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:text-zinc-300 dark:disabled:text-zinc-400 dark:placeholder-zinc-400 dark:disabled:placeholder-zinc-500',
+        'filled'  => 'text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40',
+    })
+    ->add(match ($variant) { // Border...
+        'outline' => $invalid ? 'border-red-500' : 'shadow-xs border-zinc-200 border-b-zinc-300/80 disabled:border-b-zinc-200 dark:border-white/10 dark:disabled:border-white/5',
+        'filled'  => $invalid ? 'border-red-500' : 'border-0',
+    })
+    ;
+
+$inputClasses = Flux::classes()
+    ->add('w-[calc(2ch+2px)] text-center')
+    ->add('rounded-sm')
+    ->add('disabled:text-zinc-500 dark:disabled:text-zinc-400')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-0 bg-transparent p-0 [font-size:inherit] [line-height:inherit] focus:ring-0 focus:ring-offset-0 focus:outline-[revert] focus:outline-offset-[revert]')
+    ;
+
+$buttonClasses = Flux::classes()
+    ->add(match ($size) {
+        default => '!size-8 -mr-1.25 text-base sm:text-sm rounded-md block w-full',
+        'sm' => '!size-6 text-sm rounded-md block w-full',
+        'xs' => '!size-4 text-xs rounded-md block w-full',
+    })
+    ->add('[[disabled]_&]:pointer-events-none')
+    ;
+@endphp
+
+
+<div {{ $attributes->class($classes) }}>
+    {{-- This click.stop prevents clicking on the inputs or the characters between from opening the popover... --}}
+    <div x-on:click.stop class="flex items-center" dir="ltr" wire:ignore>
+        <input type="text" inputmode="numeric" data-flux-hour-input class="{{ $inputClasses }}" />:
+        <input type="text" inputmode="numeric" data-flux-minute-input class="{{ $inputClasses }}" />&nbsp;
+        <input type="text" data-flux-meridiem-input class="{{ $inputClasses }}" />
+    </div>
+
+    <span class="flex-1"></span>
+
+    <?php if ($clearable): ?>
+        <flux:button
+            as="div"
+            class="cursor-pointer [ui-time-picker:has([disabled])_&]:hidden"
+            variant="subtle"
+            :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
+            square
+            tabindex="-1"
+            aria-label="Clear time"
+            x-on:click.prevent.stop="let timePicker = $el.closest('ui-time-picker'); timePicker.clear();"
+            inset
+        >
+            <flux:icon.x-mark variant="micro" />
+        </flux:button>
+    <?php endif; ?>
+
+    <?php if ($dropdown === false || $dropdown === 'false'): ?>
+    <div class="{{ $buttonClasses->add('flex items-center justify-center') }}">
+            <flux:icon.clock variant="mini" class="text-zinc-300 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[disabled]_&]:text-white/40!" />
+        </div>
+    <?php else: ?>
+        <flux:button square variant="subtle" class="{{ $buttonClasses }}" data-flux-time-picker-button>
+            <flux:icon.clock variant="mini" class="text-zinc-300 [[data-flux-time-picker-button]:hover_&]:text-zinc-800 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[data-flux-time-picker-button]:hover_&]:text-white dark:[[disabled]_&]:text-white/40!" />
+        </flux:button>
+    <?php endif; ?>
+</div>
--- a/resources/views/flux/time-picker/selected.blade.php
+++ b/resources/views/flux/time-picker/selected.blade.php
@@ -0,0 +1,17 @@
+@blaze
+
+@props([
+    'placeholder' => null,
+])
+
+<ui-selected-time x-ignore wire:ignore class="truncate flex gap-2 text-start flex-1 text-zinc-700 [[disabled]_&]:text-zinc-500 dark:text-zinc-300 dark:[[disabled]_&]:text-zinc-400">
+    <template name="placeholder">
+        <span class="text-zinc-400 [[disabled]_&]:text-zinc-400/70 dark:text-zinc-400 dark:[[disabled]_&]:text-zinc-500" data-flux-time-picker-placeholder>
+            {{ $placeholder ?? new Illuminate\Support\HtmlString('<slot></slot>') }}
+        </span>
+    </template>
+
+    <template name="time">
+        <div dir="auto" class="truncate"><slot></slot></div>
+    </template>
+</ui-selected-time>