Skip to content

Commit

Permalink
Merge pull request #16 from tales-from-a-dev/bugfix/issue-14
Browse files Browse the repository at this point in the history 
🐛 Use tailwind_merge twig filter to resolve conflicts between classes on error
  • Loading branch information
@ker0x
ker0x authored Nov 17, 2023
2 parents 25aec90 + 6fe5d5e commit 24c6243
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 15 deletions.
3 changes: 2 additions & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"require": {
"php": ">=8.2",
"symfony/http-kernel": "^6.2 || ^7.0",
"symfony/twig-bridge": "^6.2 || ^7.0"
"symfony/twig-bridge": "^6.2 || ^7.0",
"tales-from-a-dev/twig-tailwind-extra": "^0.1.0"
},
"require-dev": {
"friendsofphp/php-cs-fixer": "^3.15",
Expand Down
19 changes: 10 additions & 9 deletions templates/form/default.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@
{%- endif -%}
<div {{ block('widget_container_attributes') }}>
{{- date_pattern|replace({
'{{ year }}': form_widget(form.year, { attr: { class: block('class_widget_addon_append') ~ ' ' ~ attr_class_error }}),
'{{ month }}': form_widget(form.month, { attr: { class: block('class_widget_addon_prepend') ~ ' ' ~ attr_class_error }}),
'{{ day }}': form_widget(form.day, { attr: { class: 'rounded-none' ~ attr_class_error }}),
'{{ year }}': form_widget(form.year, { attr: { class: (block('class_widget_addon_append') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
'{{ month }}': form_widget(form.month, { attr: { class: (block('class_widget_addon_prepend') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
'{{ day }}': form_widget(form.day, { attr: { class: ('rounded-none' ~ attr_class_error)|trim|tailwind_merge }}),
})|raw -}}
</div>
{%- endif -%}
Expand All @@ -104,14 +104,14 @@
{%- set attr_class_error = ' ' ~ block('class_input_error') -%}
{%- endif -%}
<div {{ block('widget_container_attributes') }}>
{{- form_widget(form.hour, { attr: { class: (with_minutes or with_seconds ? block('class_widget_addon_prepend') : '') ~ attr_class_error }}) -}}
{{- form_widget(form.hour, { attr: { class: ((with_minutes or with_seconds ? block('class_widget_addon_prepend') : '') ~ attr_class_error)|trim|tailwind_merge }}) -}}
{%- if with_minutes -%}
<span class="{{ block('class_time_separator') }}">:</span>
{{- form_widget(form.minute, { attr: { class: (with_seconds ? 'rounded-none' : block('class_widget_addon_append')) ~ attr_class_error }}) -}}
{{- form_widget(form.minute, { attr: { class: ((with_seconds ? 'rounded-none' : block('class_widget_addon_append')) ~ attr_class_error|trim|tailwind_merge) }}) -}}
{%- endif -%}
{%- if with_seconds -%}
<span class="{{ block('class_time_separator') }}">:</span>
{{- form_widget(form.second, { attr: { class: block('class_widget_addon_append') ~ attr_class_error }}) -}}
{{- form_widget(form.second, { attr: { class: (block('class_widget_addon_append') ~ attr_class_error)|trim|tailwind_merge }}) -}}
{%- endif -%}
</div>
{%- endif -%}
Expand All @@ -132,7 +132,7 @@
{%- block form_label -%}
{% if label is not same as(false) -%}
{%- set label_attr_class = (valid ? block('class_label') : block('class_label_error')) ~ ' ' ~ label_attr.class|default('') -%}
{%- set label_attr = label_attr|merge({class: label_attr_class|trim}) -%}
{%- set label_attr = label_attr|merge({class: label_attr_class|trim|tailwind_merge}) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
Expand All @@ -149,7 +149,7 @@
{%- set valid = false -%}
{%- endif -%}
{%- set label_attr_class = (valid ? block('class_input_radio_label') : block('class_input_radio_label_error')) ~ ' ' ~ label_attr.class|default('') -%}
{%- set label_attr = label_attr|merge({'class': label_attr_class|trim}) -%}
{%- set label_attr = label_attr|merge({'class': label_attr_class|trim|tailwind_merge}) -%}
{%- if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
Expand Down Expand Up @@ -237,7 +237,8 @@

{%- block widget_attributes -%}
{%- if not valid %}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ' ~ block('class_input_error'))|trim}) %}
{%- set attr_class = attr.class|default('') ~ ' ' ~ block('class_input_error') -%}
{%- set attr = attr|merge({class: attr_class|trim|tailwind_merge}) -%}
{% endif -%}
{{ parent() }}
{%- endblock widget_attributes -%}
Expand Down
2 changes: 1 addition & 1 deletion tests/FormLayout/SelectLayoutTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ public function testSelectError(string $classType): void
'/select
[@name="name"]
[@id="name"]
[@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-red-900 bg-red-50 border-red-500 placeholder-red-700 dark:bg-red-100 dark:border-red-400 dark:text-red-900 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
[@class="rounded-lg text-sm block w-full p-2.5 border dark:placeholder-gray-400 text-red-900 bg-red-50 border-red-500 placeholder-red-700 dark:bg-red-100 dark:border-red-400 dark:text-red-900 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
'
);
}
Expand Down
2 changes: 1 addition & 1 deletion tests/FormLayout/TextLayoutTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ public function testInputError(string $classType, mixed $data, string $inputType
[@type="%s"]
[@name="name"]
[@id="name"]
[@class="text-gray-900 bg-gray-50 rounded-lg text-sm block w-full p-2.5 border border-gray-300 focus:z-10 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-red-900 bg-red-50 border-red-500 placeholder-red-700 dark:bg-red-100 dark:border-red-400 dark:text-red-900 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
[@class="rounded-lg text-sm block w-full p-2.5 border dark:placeholder-gray-400 text-red-900 bg-red-50 border-red-500 placeholder-red-700 dark:bg-red-100 dark:border-red-400 dark:text-red-900 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500"]
',
$inputType,
));
Expand Down
14 changes: 11 additions & 3 deletions tests/FormLayoutTestCase.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
use Symfony\Component\Form\Test\FormIntegrationTestCase;
use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
use TalesFromADev\FlowbiteBundle\Tests\Fixtures\StubTranslator;
use TalesFromADev\Twig\Extra\Tailwind\TailwindExtension;
use TalesFromADev\Twig\Extra\Tailwind\TailwindRuntime;
use Twig\Environment;
use Twig\Loader\FilesystemLoader;
use Twig\RuntimeLoader\RuntimeLoaderInterface;
Expand All @@ -32,6 +34,7 @@ protected function setUp(): void
$environment = new Environment($loader, ['strict_variables' => true]);
$environment->addExtension(new TranslationExtension(new StubTranslator()));
$environment->addExtension(new FormExtension());
$environment->addExtension(new TailwindExtension());

$rendererEngine = new TwigRendererEngine([
'default.html.twig',
Expand Down Expand Up @@ -67,11 +70,16 @@ protected function renderWidget(FormView $view, array $vars = []): string

private function registerTwigRuntimeLoader(Environment $environment, FormRenderer $renderer): void
{
$loader = $this->createMock(RuntimeLoaderInterface::class);
$loader->expects($this->any())->method('load')->willReturnMap([
$formRendererLoader = $this->createMock(RuntimeLoaderInterface::class);
$formRendererLoader->expects($this->any())->method('load')->willReturnMap([
[FormRenderer::class, $renderer],
]);
$environment->addRuntimeLoader($loader);

$tailwindLoader = $this->createMock(RuntimeLoaderInterface::class);
$tailwindLoader->expects($this->any())->method('load')->willReturn(new TailwindRuntime());

$environment->addRuntimeLoader($formRendererLoader);
$environment->addRuntimeLoader($tailwindLoader);
}

protected function assertMatchesXpath(string $html, string $expression, int $count = 1): void
Expand Down

0 comments on commit 24c6243

Please sign in to comment.