[8.x] Conditionally merge classes into a Blade Component attribute bag

[pascalbaljet]

Inspired by Vue's :class syntax, this PR adds a class() method to the ComponentAttributeBag class. It merges the given classes into the attribute bag.

It accepts an array of classes, and you can specify a constraint whether to merge the class or not:

<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>

It also accepts a string:

<div {{ $attributes->class('p-4') }}>

[taylorotwell]

What's your suggest usage with this if you also need to pass other attributes to the parent? Do you use $attributes->class() and then $attributes->except('class')->merge()?

[pascalbaljet]

Thanks for merging! I would chain the class and merge methods.

Blade Component view:

<button {{ $attributes->class(['bg-red' => true])->merge(['type' => 'submit']) }}>
    {{ $slot }}
</button>

Consuming the component:

<x-button class="justify-self-end" type="reset" disabled>
    Reset form
</x-button>

The rendered HTML:

<button class="bg-red justify-self-end" type="reset" disabled="disabled">
    Reset form
</button>

[driesvints]

@pascalbaljet thanks for this! Can you also send in a PR to the docs?

[pascalbaljet]

@pascalbaljet thanks for this! Can you also send in a PR to the docs?

Yes, working on it :)