Forward icon:variant to input action sub-components

[joshhanley]

The Scenario

When using viewable, clearable, copyable, or expandable on a <flux:input>, the action icons use hard-coded variants with no way to customise them. The icon:variant prop on the input only affects leading/trailing icons, not the action sub-components.

{{-- icon:variant="outline" only affects leading/trailing icons, not the viewable eye icon --}}
<flux:input type="password" viewable icon:variant="outline" icon="lock-closed" />

The Problem

Each action sub-component hard-coded its own icon variant rather than inheriting from the parent input's $iconVariant prop:

• viewable.blade.php: variant="micro"
• clearable.blade.php: variant="micro"
• expandable.blade.php: variant="micro"
• copyable.blade.php: variant="mini"

The parent input/index.blade.php already accepted icon:variant (defaulting to mini) but never forwarded it to these sub-components.

The Solution

Forward $iconVariant from the parent input component to all four action sub-components (viewable, clearable, copyable, expandable), replacing the hard-coded variants. This allows users to customise the icon variant via icon:variant:

<flux:input type="password" viewable icon:variant="outline" />
<flux:input clearable icon:variant="micro" />

All sub-components now default to mini (the input's default), which also fixes the inconsistency where copyable used mini but the other three used micro.

Fixes #2335

[ghabriel25]

Hi, @joshhanley

Navbar item trailing icon also hardcoded its variant. Shouldn't it forwarded too or its intended?

<flux:navbar class="max-lg:hidden">
    <flux:navbar.item :href="route('home', absolute: false)"
                      icon:trailing="home"
                      icon:variant="outline"
                      wire:navigate>Home</flux:navbar.item>
</flux:navbar>

[calebporzio]

thanks Josh!