Skip to content

Update documentation and tests to change twig:ux:component to twig:UX:Component #2555

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

Update documentation and tests to change twig:ux:component to twig:UX:Component #2555

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
2 changes: 1 addition & 1 deletion src/Icons/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## 2.20.0

- Add `aliases` configuration option to define icon alternative names.
- Add support for `int` and `float` attribute values in `<twig:ux:icon />`.
- Add support for `int` and `float` attribute values in `<twig:UX:Icon />`.

## 2.19.0

Expand Down
2 changes: 1 addition & 1 deletion src/Icons/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Renders local and remote [SVG icons](https://ux.symfony.com/icons) in your Twig
{{ ux_icon('mdi:check', {class: 'w-4 h-4'}) }}

{# .. or Twig Component #}
<twig:ux:icon name="mdi:check" class="w-4 h-4" />
<twig:UX:Icon name="mdi:check" class="w-4 h-4" />

{# Render the "check" icon from "mdi" pack with class #}
<svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
Expand Down
34 changes: 17 additions & 17 deletions src/Icons/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,20 +165,20 @@ HTML Syntax
~~~~~~~~~~~

In addition to the ``ux_icon()`` function explained in the previous sections,
this package also supports an alternative HTML syntax based on the ``<twig:ux:icon>``
this package also supports an alternative HTML syntax based on the ``<twig:UX:Icon>``
tag:

.. code-block:: html

<!-- renders "user-profile.svg" -->
<twig:ux:icon name="user-profile" class="w-4 h-4" />
<twig:UX:Icon name="user-profile" class="w-4 h-4" />
<!-- renders "admin/user-profile.svg" -->
<twig:ux:icon name="admin:user-profile" class="w-4 h-4" />
<twig:UX:Icon name="admin:user-profile" class="w-4 h-4" />
<!-- renders 'user-solid.svg' icon from 'Flowbite' icon set via ux.symfony.com -->
<twig:ux:icon name="flowbite:user-solid" />
<twig:UX:Icon name="flowbite:user-solid" />

<!-- you can also add any HTML attributes -->
<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />
<twig:UX:Icon name="user-profile" height="16" width="16" aria-hidden="true" />

.. tip::

Expand Down Expand Up @@ -298,16 +298,16 @@ HTML Syntax

.. code-block:: html+twig

<twig:ux:icon name="user-profile" />
<twig:UX:Icon name="user-profile" />

{# Renders "user-profile.svg" #}
<twig:ux:icon name="user-profile" class="w-4 h-4" />
<twig:UX:Icon name="user-profile" class="w-4 h-4" />

{# Renders "sub-dir/user-profile.svg" (sub-directory) #}
<twig:ux:icon name="sub-dir:user-profile" class="w-4 h-4" />
<twig:UX:Icon name="sub-dir:user-profile" class="w-4 h-4" />

{# Renders "flowbite:user-solid" from ux.symfony.com #}
<twig:ux:icon name="flowbite:user-solid" />
<twig:UX:Icon name="flowbite:user-solid" />

.. note::

Expand Down Expand Up @@ -363,9 +363,9 @@ Now, you can use the ``dots`` alias in your templates:
{{ ux_icon('clarity:ellipsis-horizontal-line') }}

{# using the HTML syntax #}
<twig:ux:icon name="dots" />
<twig:UX:Icon name="dots" />
{# same as: #}
<twig:ux:icon name="clarity:ellipsis-horizontal-line" />
<twig:UX:Icon name="clarity:ellipsis-horizontal-line" />

Errors
------
Expand Down Expand Up @@ -419,7 +419,7 @@ three methods to improve icons accessibility, depending on the context.
Back to profile
</a>

That is why the ``ux_icon()`` function and the ``<twig:ux:icon>`` component add
That is why the ``ux_icon()`` function and the ``<twig:UX:Icon>`` component add
``aria-hidden="true"`` attribute **automatically** to icons not having at least one
of the following attributes: ``aria-label``, ``aria-labelledby`` or ``title``.

Expand All @@ -430,7 +430,7 @@ of the following attributes: ``aria-label``, ``aria-labelledby`` or ``title``.

.. code-block:: html+twig

<twig:ux:icon name="user-profile" aria-hidden="false" />
<twig:UX:Icon name="user-profile" aria-hidden="false" />

Performance
-----------
Expand Down Expand Up @@ -461,7 +461,7 @@ In production, you can pre-warm the cache by running the following command:
$ php bin/console ux:icons:warm-cache

This command looks in all your Twig templates for ``ux_icon()`` calls and
``<twig:ux:icon>`` tags and caches the icons it finds.
``<twig:UX:Icon>`` tags and caches the icons it finds.

.. caution::

Expand Down Expand Up @@ -493,18 +493,18 @@ TwigComponent
~~~~~~~~~~~~~

The ``ux_icon()`` function is optimized to be as fast as possible. To deliver the
same level of performance when using the HTML syntax (``<twig:ux:icon name="..." />``),
same level of performance when using the HTML syntax (``<twig:UX:Icon name="..." />``),
the TwigComponent overhead is reduced by calling the IconRenderer immediately and
returning the HTML output.

.. warning::

The <twig:ux:icon> component does not support embedded content.
The <twig:UX:Icon> component does not support embedded content.

.. code-block:: html+twig

{# The 🧸 will be ignored in the HTML output #}
<twig:ux:icon name="user-profile" class="w-4 h-4">🧸</twig:ux:icon>
<twig:UX:Icon name="user-profile" class="w-4 h-4">🧸</twig:UX:Icon>

{# Renders "user-profile.svg" #}
<svg viewBox="0 0 24 24" class="w-4 h-4">
Expand Down
4 changes: 2 additions & 2 deletions src/Icons/tests/Integration/RenderIconsInTwigTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ public function testRenderIcons(): void

public function testRenderAliasIcons(): void
{
$templateIcon = '<twig:ux:icon name="flowbite:close-outline" />';
$templateIcon = '<twig:UX:Icon name="flowbite:close-outline" />';
$outputIcon = self::getContainer()->get(Environment::class)->createTemplate($templateIcon)->render();

$templateAlias = '<twig:ux:icon name="flowbite:x-outline" />';
$templateAlias = '<twig:UX:Icon name="flowbite:x-outline" />';
$outputAlias = self::getContainer()->get(Environment::class)->createTemplate($templateAlias)->render();

$expected = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"/></svg>';
Expand Down
4 changes: 2 additions & 2 deletions src/Map/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
## 2.20

- Deprecate `render_map` Twig function (will be removed in 2.21). Use
`ux_map` or the `<twig:ux:map />` Twig component instead.
`ux_map` or the `<twig:UX:Map />` Twig component instead.
- Add `ux_map` Twig function (replaces `render_map` with a more flexible
interface)
- Add `<twig:ux:map />` Twig component
- Add `<twig:UX:Map />` Twig component
- The importmap entry `@symfony/ux-map/abstract-map-controller` can be removed
from your importmap, it is no longer needed.
- Add `Polygon` support
Expand Down
8 changes: 4 additions & 4 deletions src/Map/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,14 +243,14 @@ templates. The function accepts the same arguments as the ``Map`` class:
}
) }}

Twig Component ``<twig:ux:map />``
Twig Component ``<twig:UX:Map />``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Alternatively, you can use the ``<twig:ux:map />`` component.
Alternatively, you can use the ``<twig:UX:Map />`` component.

.. code-block:: html+twig

<twig:ux:map
<twig:UX:Map
center="[51.5074, 0.1278]"
zoom="3"
markers='[
Expand All @@ -266,7 +266,7 @@ Alternatively, you can use the ``<twig:ux:map />`` component.
style="height: 800px; width: 100%; border: 4px solid red; margin-block: 10vh;"
/>

The ``<twig:ux:map />`` component requires the `Twig Component`_ package.
The ``<twig:UX:Map />`` component requires the `Twig Component`_ package.

.. code-block:: terminal

Expand Down
2 changes: 1 addition & 1 deletion src/Map/tests/Twig/MapComponentTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ public function testRenderMapComponent(): void
self::getContainer()->set('test.ux_map.renderers', $renderer);

$twig = self::getContainer()->get('twig');
$template = $twig->createTemplate('<twig:ux:map center="{{ {lat: 5, lng: 10} }}" zoom="4" data-foo="bar" />');
$template = $twig->createTemplate('<twig:UX:Map center="{{ {lat: 5, lng: 10} }}" zoom="4" data-foo="bar" />');

$this->assertSame(
'<div data-controller="@symfony/ux-foobar-map"></div>',
Expand Down
8 changes: 4 additions & 4 deletions ux.symfony.com/cookbook/component_architecture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ In Symfony, you can have an `Alert` component, for example, with the following t

```twig
<div class="alert alert-{{ type }}">
<twig:ux:icon name="{{ icon }}" />
<twig:UX:Icon name="{{ icon }}" />
{{ message }}
</div>
```
Expand All @@ -43,9 +43,9 @@ Or you can compose with the following syntax:

```twig
<twig:Card>
<twig:ux:icon name="info"/>
<twig:UX:Icon name="info"/>
<twig:Button>
<twig:ux:icon name="close" />
<twig:UX:Icon name="close" />
</twig:Button>
</twig:Card>
```
Expand Down Expand Up @@ -79,7 +79,7 @@ We have the following template:
{% props type, icon, message %}

<div class="alert alert-{{ type }}">
<twig:ux:icon name="{{ icon }}" />
<twig:UX:Icon name="{{ icon }}" />
{{ message }}
</div>
```
Expand Down
Loading