Skip to content

Commit

Permalink
minor #2214 [Doc] Misc updates in TogglePassword docs (javiereguiluz)
Browse files Browse the repository at this point in the history
This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Doc] Misc updates in TogglePassword docs

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Issues        | -
| License       | MIT

Twig recently added inline comments (twigphp/Twig#4349) and this doc was used an example of invalid Twig syntax (twigphp/Twig#4001). So, let's fix it.

Commits
-------

11276a0 [Doc] Misc updates in TogglePassword docs
  • Loading branch information
smnandre committed Sep 27, 2024
2 parents 2827502 + 11276a0 commit b875ee6
Showing 1 changed file with 16 additions and 9 deletions.
25 changes: 16 additions & 9 deletions src/TogglePassword/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ You can disable it by passing ``use_toggle_form_theme`` option to ``false``::

*Note*: If you choose to disable provided package form theme, you will have to handle styling by yourself.

.. _ux-password-customizing-labels-and-icons:

Customizing Labels and Icons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Expand Down Expand Up @@ -264,29 +266,34 @@ Then in your form, add your controller as an HTML attribute::
Usage without Symfony Forms
---------------------------

You can also use the TogglePassword with native HTML inputs:
You can also use the TogglePassword with native HTML inputs. Inside the ``stimulus_controller()``
function you can use the same :ref:`options to customize labels and icons <ux-password-customizing-labels-and-icons>`
shown in previous sections:

.. code-block:: html+twig

// ...
{# ... #}

<div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
{# add "toggle-password-container" or a class that applies "position: relative" to this container #}
<div class="toggle-password-container">
<label for="password">Password</label>
<input
id="password"
name="password"
type="password"
{{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
{# visibleLabel: 'Show password', // If you want to modify this label. #}
{# visibleIcon: 'Some svg icon', // If you want to modify this icon. #}
{# hiddenLabel: 'Hide password', // If you want to modify this label. #}
{# hiddenIcon: 'Some svg icon', // If you want to modify this icon. #}
buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
visibleLabel: 'Show password',
visibleIcon: 'Name of some SVG icon',
hiddenLabel: 'Hide password',
hiddenIcon: 'Name of some SVG icon',
# you can add your own CSS classes if needed, but the following
# CSS class is required to activate the default styles
buttonClasses: ['toggle-password-button'],
}) }}
>
</div>

// ...
{# ... #}

Backward Compatibility promise
------------------------------
Expand Down

0 comments on commit b875ee6

Please sign in to comment.