Skip to content

[Twig] boolean (true) CVA variants #1647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[Twig] boolean (true) CVA variants #1647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/TwigComponent/src/CVA.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ final class CVA
{
/**
* @var string|list<string|null>|null
* @var array<string, array<string, string|list<string|null>>|null the array should have the following format [variantCategory => [variantName => classes]]
* ex: ['colors' => ['primary' => 'bleu-8000', 'danger' => 'red-800 text-bold'], 'size' => [...]]
* @var array<string, string|list<string>|array<string, string|list<string|null>>|null the array should have the following format [variantCategory => [variantName => classes]]
* ex: ['colors' => ['primary' => 'bleu-8000', 'danger' => 'red-800 text-bold'], 'size' => [...]]
* @var array<array<string, string|array<string>>> the array should have the following format ['variantsCategory' => ['variantName', 'variantName'], 'class' => 'text-red-500']
* @var array<string, string>|null
*/
Expand All @@ -53,6 +53,14 @@ public function resolve(array $recipes): string
}

foreach ($recipes as $recipeName => $recipeValue) {
if (isset($this->variants[$recipeName]) && (\is_string($this->variants[$recipeName]) || (\is_array($this->variants[$recipeName]) && array_is_list($this->variants[$recipeName])))) {
if (true === $recipeValue) {
$classes .= ' '.implode(' ', (array) $this->variants[$recipeName]);
}

continue;
}

if (!isset($this->variants[$recipeName][$recipeValue])) {
Comment on lines +56 to 64
Copy link
Member

@smnandre smnandre Mar 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm. I fear this become hard to understand for the next ones :)

I'll try another way, you'll tell me if it's worth the change 🤷

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is something i don't understand in the algorithm will ask you questions about this, but don"t wait for me in this PR, that's 100% implementation and can be handled way after :)

continue;
}
Expand Down
3 changes: 2 additions & 1 deletion src/TwigComponent/tests/Fixtures/templates/class_merge.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
<twig:Alert color='red' size='lg' class='dark:bg-gray-600'/>
<twig:Alert color='red' size='lg' class='dark:bg-gray-600'/>
<twig:Alert color='red' size='lg' class='dark:bg-gray-600' disabled />
9 changes: 5 additions & 4 deletions src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% props color = 'blue', size = 'md' %}
{% props color = 'blue', size = 'md', disabled = false %}

{% set alert = cva({
base: ['alert'],
Expand All @@ -18,7 +18,8 @@
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
}
},
disabled: 'disable',
},
compoundVariants: [{
color: ['red'],
Expand All @@ -30,6 +31,6 @@
}
}) %}

<div class="{{ alert.apply({color, size}, attributes.render('class'), 'flex p-4') }}">
<div class="{{ alert.apply({color, size, disabled}, attributes.render('class'), 'flex p-4') }}">
...
</div>
</div>
1 change: 1 addition & 0 deletions src/TwigComponent/tests/Integration/ComponentExtensionTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@ public function testComponentWithClassMerge(): void
$output = self::getContainer()->get(Environment::class)->render('class_merge.html.twig');

$this->assertStringContainsString('class="alert alert-red alert-lg font-semibold rounded-md dark:bg-gray-600 flex p-4"', $output);
$this->assertStringContainsString('class="alert alert-red alert-lg disable font-semibold rounded-md dark:bg-gray-600 flex p-4"', $output);
}

private function renderComponent(string $name, array $data = []): string
Expand Down
84 changes: 84 additions & 0 deletions src/TwigComponent/tests/Unit/CVATest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,90 @@ public static function recipeProvider(): iterable
'font-semibold border rounded text-primary text-sm',
];

yield 'boolean string variants true' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => 'disable',
],
],
['colors' => 'primary', 'disabled' => true],
'text-primary disable',
];

yield 'boolean string variants false' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => 'disable',
],
],
['colors' => 'primary', 'disabled' => false],
'text-primary',
];

yield 'boolean string variants missing' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => 'disable',
],
],
['colors' => 'primary'],
'text-primary',
];

yield 'boolean list variants true' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => ['disable', 'opacity-50'],
],
],
['colors' => 'primary', 'disabled' => true],
'text-primary disable opacity-50',
];

yield 'boolean list variants false' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => ['disable', 'opacity-50'],
],
],
['colors' => 'primary', 'disabled' => false],
'text-primary',
];

yield 'boolean list variants missing' => [
[
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'disabled' => ['disable', 'opacity-50'],
],
],
['colors' => 'primary'],
'text-primary',
];

yield 'simple variants as array' => [
[
'base' => 'font-semibold border rounded',
Expand Down