Replace flux:textarea inline style with tailwindcss class

[ghabriel25]

The scenario

Although I can't seem to reproduce this issue #2627, I think this might be better to use tailwind class on flux:textarea since this style not exposed to Alpine like flux:progress in #2512.

We can revert it if this style need to be set dynamically using Alpine. I just never see the need of it, at least for me.

The problem

flux:textarea current template using inline style for resize type and field-sizing.

<textarea
    ...
    style="{{ $resizeStyle }}; {{ $rows === 'auto' ? 'field-sizing: content' : '' }}"
    ... 
    >{{ $slot }}</textarea>

The solution

Change inline style with tailwindcss class which can cover it all.

$classes = Flux::classes()
    ...
    ->add($rows === 'auto' ? 'field-sizing-content' : '')
    ->add($resize ? match ($resize) {
        default => 'resize', // to prevent unhandled match type when user only provide the attribute without value
        'none' => 'resize-none',
        'both' => 'resize',
        'horizontal' => 'resize-x',
        'vertical' => 'resize-y',
    } : 'resize-none')
    ...

File Changes

• stubs/resources/views/flux/textarea.blade.php

[troccoli-sgr]

I think this could be improved.

If $resize is not defined this would use resize-none but the original default was resize-y.

To make sure that $resize is always defined, and defaults to vertical, you can use

$resize ??= 'vertical';

just before setting the classes, and maybe remove the default in the props.

Then this block can be simplified as

Suggested change

	->add($resize ? match ($resize) {
	default => 'resize', // to prevent unhandled match type when user only provide the attribute without value
	'none' => 'resize-none',
	'both' => 'resize',
	'horizontal' => 'resize-x',
	'vertical' => 'resize-y',
	} : 'resize-none')
	->add(match ($resize) {
	'none' => 'resize-none',
	'both' => 'resize',
	'horizontal' => 'resize-x',
	'vertical' => 'resize-y',
	default => 'resize-y'
	})

what do you thnk?