Skip to content

Commit b875ee6

Browse files
committed
minor #2214 [Doc] Misc updates in TogglePassword docs (javiereguiluz)
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
2 parents 2827502 + 11276a0 commit b875ee6

File tree

1 file changed

+16
-9
lines changed

1 file changed

+16
-9
lines changed

src/TogglePassword/doc/index.rst

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ You can disable it by passing ``use_toggle_form_theme`` option to ``false``::
8282

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

85+
.. _ux-password-customizing-labels-and-icons:
86+
8587
Customizing Labels and Icons
8688
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8789

@@ -264,29 +266,34 @@ Then in your form, add your controller as an HTML attribute::
264266
Usage without Symfony Forms
265267
---------------------------
266268

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

269273
.. code-block:: html+twig
270274

271-
// ...
275+
{# ... #}
272276

273-
<div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
277+
{# add "toggle-password-container" or a class that applies "position: relative" to this container #}
278+
<div class="toggle-password-container">
274279
<label for="password">Password</label>
275280
<input
276281
id="password"
277282
name="password"
278283
type="password"
279284
{{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
280-
{# visibleLabel: 'Show password', // If you want to modify this label. #}
281-
{# visibleIcon: 'Some svg icon', // If you want to modify this icon. #}
282-
{# hiddenLabel: 'Hide password', // If you want to modify this label. #}
283-
{# hiddenIcon: 'Some svg icon', // If you want to modify this icon. #}
284-
buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
285+
visibleLabel: 'Show password',
286+
visibleIcon: 'Name of some SVG icon',
287+
hiddenLabel: 'Hide password',
288+
hiddenIcon: 'Name of some SVG icon',
289+
# you can add your own CSS classes if needed, but the following
290+
# CSS class is required to activate the default styles
291+
buttonClasses: ['toggle-password-button'],
285292
}) }}
286293
>
287294
</div>
288295

289-
// ...
296+
{# ... #}
290297

291298
Backward Compatibility promise
292299
------------------------------

0 commit comments

Comments
 (0)