🎨 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/sidebar/item.blade.php
+++ b/resources/views/flux/sidebar/item.blade.php
@@ -0,0 +1,92 @@
+@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
+@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
+@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
+@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+    'tooltipPosition' => 'right',
+    'tooltipKbd' => null,
+    'tooltip' => null,
+    'iconVariant' => 'outline',
+    'iconTrailing' => null,
+    'badgeColor' => null,
+    'iconDot' => null,
+    'accent' => true,
+    'badge' => null,
+    'icon' => null,
+])
+
+@php
+$tooltip ??= $slot->isNotEmpty() ? (string) $slot : null;
+
+// Size-up icons in square/icon-only buttons...
+$iconClasses = Flux::classes('size-4')
+    ->add('in-data-flux-sidebar-group-dropdown:text-zinc-400! dark:in-data-flux-sidebar-group-dropdown:text-white/80!')
+    ->add('[[data-flux-sidebar-item]:hover_&]:text-current!');
+
+$classes = Flux::classes()
+    ->add('h-8 in-data-flux-sidebar-on-mobile:h-10 relative flex items-center gap-3 rounded-lg')
+    ->add('in-data-flux-sidebar-collapsed-desktop:w-10 in-data-flux-sidebar-collapsed-desktop:justify-center')
+    ->add('py-0 text-start w-full px-3 has-data-flux-navlist-badge:not-in-data-flux-sidebar-collapsed-desktop:pe-1.5 my-px')
+    ->add('text-zinc-500 dark:text-white/80')
+    ->add(match ($accent) {
+        true => [
+            'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
+            'data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent',
+            'hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 ',
+            'border border-transparent',
+        ],
+        false => [
+            'data-current:text-zinc-800 dark:data-current:text-zinc-100 data-current:border-zinc-200',
+            'data-current:bg-white dark:data-current:bg-white/10 data-current:border data-current:border-zinc-200 dark:data-current:border-white/10 data-current:shadow-xs',
+            'hover:text-zinc-800 dark:hover:text-white',
+        ],
+    })
+    // Override the default styles to match dropdowns for when the item is inside a collapsed group dropdown...
+    ->add('in-data-flux-sidebar-group-dropdown:w-auto! in-data-flux-sidebar-group-dropdown:px-2!')
+    ->add('in-data-flux-sidebar-group-dropdown:text-zinc-800! in-data-flux-sidebar-group-dropdown:bg-white! in-data-flux-sidebar-group-dropdown:hover:bg-zinc-50!')
+    ->add('dark:in-data-flux-sidebar-group-dropdown:text-white! dark:in-data-flux-sidebar-group-dropdown:bg-transparent! dark:in-data-flux-sidebar-group-dropdown:hover:bg-zinc-600!')
+    ;
+@endphp
+
+<flux:tooltip :position="$tooltipPosition">
+    <flux:button-or-link :attributes="$attributes->class($classes)" data-flux-sidebar-item>
+        <?php if ($icon): ?>
+            <div class="relative">
+                <?php if (is_string($icon) && $icon !== ''): ?>
+                    <flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
+                <?php else: ?>
+                    {{ $icon }}
+                <?php endif; ?>
+
+                <?php if ($iconDot): ?>
+                    <div class="absolute top-[-2px] end-[-2px]">
+                        <div class="size-[6px] rounded-full bg-zinc-500 dark:bg-zinc-400"></div>
+                    </div>
+                <?php endif; ?>
+            </div>
+        <?php endif; ?>
+
+        <?php if ($slot->isNotEmpty()): ?>
+            <div class="
+                in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden
+                flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&]:hidden [[data-nav-sidebar]_[data-nav-footer]_&]:block" data-content>{{ $slot }}</div>
+        <?php endif; ?>
+
+        <?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
+            <flux:icon :icon="$iconTrailing" :variant="$iconVariant" class="in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden size-4!" />
+        <?php elseif ($iconTrailing): ?>
+            {{ $iconTrailing }}
+        <?php endif; ?>
+
+        <?php if (isset($badge) && $badge !== ''): ?>
+            <?php $badgeAttributes = Flux::attributesAfter('badge:', $attributes, ['color' => $badgeColor]); ?>
+            <flux:navlist.badge :attributes="$badgeAttributes" class="in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden">{{ $badge }}</flux:navlist.badge>
+        <?php endif; ?>
+    </flux:button-or-link>
+
+    <flux:tooltip.content :kbd="$tooltipKbd" class="not-in-data-flux-sidebar-collapsed-desktop:hidden in-data-flux-sidebar-group-dropdown:hidden cursor-default">
+        {{ $tooltip }}
+    </flux:tooltip.content>
+</flux:tooltip>