Skip to content
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

Fix(web-twig): Pass missing id attributes to the form components #1465

Closed
wants to merge 3 commits into from
Closed

Fix(web-twig): Pass missing id attributes to the form components #1465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c48fcb
Feat(web-twig): Pass missing `id` attributes to the form components
dlouhak Jun 10, 2024
e7b4dd6
fixup! Feat(web-twig): Pass missing `id` attributes to the form compo…
literat Jun 10, 2024
fa549de
fixup! Feat(web-twig): Pass missing `id` attributes to the form compo…
literat Jun 10, 2024
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
4 changes: 4 additions & 0 deletions packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
{%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
{%- set _validationTextId = _id ~ '__validationText' -%}
crishpeen marked this conversation as resolved.
Show resolved Hide resolved

<label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
<input
Expand All @@ -68,11 +70,13 @@
className="{{ _helperTextClassName }}"
elementType="span"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
<ValidationText
className="{{ _validationTextClassName }}"
elementType="span"
id="{{ _validationTextId }}"
validationState="{{ _validationState }}"
validationText="{{ _validationText }}"
UNSAFE_validationText="{{ _unsafeValidationText }}"
Expand Down
6 changes: 3 additions & 3 deletions .../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<!-- Render checked -->
<label for="example-id-checked" class="Checkbox"><input type="checkbox" id="example-id-checked" class="Checkbox__input" checked> <span class="Checkbox__text"><span class="Checkbox__label">Example
label</span></span></label> <!-- Render with helper text -->
<label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText">Example helper text</span></span></label> <!-- Render with hidden label -->
<label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText" id="example-id-helper__helperText">Example helper text</span></span></label>
Copy link
Member

Choose a reason for hiding this comment

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

It looks like we are missing the aria attribute too. Afaik it should be aria-describedby. @adamkudrna

Copy link
Member

Choose a reason for hiding this comment

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

Implemented in #1470

<!-- Render with hidden label -->
<label for="example-id-hidden" class="Checkbox"><input type="checkbox" id="example-id-hidden" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden">Example
label</span></span></label> <!-- Render with all props -->
<label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" class="Checkbox__input" checked disabled name="example-name" required="" value=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE label</span> <span class="Checkbox__helperText">UNSAFE helper text</span> <span class="Checkbox__validationText">Example validation
text</span></span></label>
<label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" class="Checkbox__input" checked disabled name="example-name" required="" value=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE label</span> <span class="Checkbox__helperText" id="example-id-all__helperText">UNSAFE helper text</span> <span class="Checkbox__validationText" id="example-id-all__validationText">Example validation text</span></span></label>
</body>
</html>
3 changes: 1 addition & 2 deletions .../Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
</title>
</head>
<body>
<label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" class="Checkbox__input" name="example" required=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText">validation
failed</span></span></label>
<label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" class="Checkbox__input" name="example" required=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText" id="example__validationText">validation failed</span></span></label>
</body>
</html>
2 changes: 1 addition & 1 deletion ...wig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
</title>
</head>
<body>
<label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" class="Checkbox__input" name="example"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText">helperText</span></span></label>
<label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" class="Checkbox__input" name="example"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText" id="example__helperText">helperText</span></span></label>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@
</div>
<HelperText
className="{{ _helperTextClassName }}"
id="{{ _helperTextId }}"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
<ValidationText
Expand Down
4 changes: 4 additions & 0 deletions packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _allowedAttributes = [ 'accept', 'multiple' ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-element', 'id']) -%}
{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _validationTextId = _id ~ '__validationText' -%}

<div
{{ mainProps(_mainPropsWithoutReservedAttributes) }}
Expand Down Expand Up @@ -88,11 +90,13 @@
<HelperText
className="{{ _helperTextClassName }}"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
</div>
<ValidationText
className="{{ _validationTextClassName }}"
id="{{ _validationTextId }}"
validationState="{{ _validationState }}"
validationText="{{ _validationText }}"
UNSAFE_validationText="{{ _unsafeValidationText }}"
Expand Down
8 changes: 4 additions & 4 deletions ...esources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</path></svg> <label for="example-input-danger" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
</div>

<div class="FileUploaderInput__validationText">
<div class="FileUploaderInput__validationText" id="example-input-danger__validationText">
Error validation text
</div>
</div>
Expand All @@ -66,7 +66,7 @@
</path>
<path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
</path></svg> <label for="example-input-unsafe" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
<div class="FileUploaderInput__helperText">
<div class="FileUploaderInput__helperText" id="example-input-unsafe__helperText">
<span>UNSAFE helper text</span>
</div>
</div>
Expand All @@ -80,12 +80,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="currentColor">
</path></svg> <label for="example-input-all-props" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
<div class="FileUploaderInput__helperText">
<div class="FileUploaderInput__helperText" id="example-input-all-props__helperText">
<span>UNSAFE helper text</span>
</div>
</div>

<div class="FileUploaderInput__validationText">
<div class="FileUploaderInput__validationText" id="example-input-all-props__validationText">
<span>UNSAFE validation text</span>
</div>
</div>
Expand Down
13 changes: 8 additions & 5 deletions packages/web-twig/src/Resources/components/Item/Item.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{# API #}
{%- set props = props | default([]) -%}
{%- set _elementType = props.elementType | default('button') -%}
{%- set _id = props.id | default('') -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _href = props.href | default(null) -%}
{%- set _iconName = props.iconName | default(null) -%}
Expand Down Expand Up @@ -32,12 +33,13 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _disabledClassName, _selectedClassName, _styleProps.className ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
{%- set _selectedIconName = 'check-plain' -%}

<{{ _elementType }}
{{ mainProps(props) }}
{{ styleProp(_styleProps) }}
{{ classProp(_classNames) }}
<{{ _elementType }}
{{ mainProps(props) }}
{{ styleProp(_styleProps) }}
{{ classProp(_classNames) }}
{{ _hrefAttr }}
{{ _targetAttr }}
{{ _typeAttr }}
Expand All @@ -57,9 +59,10 @@
{%- endif -%}
</span>
<HelperText
elementType="span"
className="{{ _helperTextClassName }}"
elementType="span"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
{% if _isSelected %}
Expand Down
2 changes: 1 addition & 1 deletion ...-twig/src/Resources/components/Item/__tests__/__snapshots__/itemHelperText.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
</title>
</head>
<body>
<button class="Item" type="button" aria-selected="false"><span class="Item__label">Item label</span> <span class="Item__helperText">Helper text</span></button>
<button class="Item" type="button" aria-selected="false"><span class="Item__label">Item label</span> <span class="Item__helperText" id="__helperText">Helper text</span></button>
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
</body>
</html>
2 changes: 2 additions & 0 deletions packages/web-twig/src/Resources/components/Radio/Radio.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
{%- set _labelClassName = [ _labelClassName, _labelHiddenClassName ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
Expand Down Expand Up @@ -62,6 +63,7 @@
className="{{ _helperTextClassName }}"
elementType="span"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
</span>
Expand Down
4 changes: 4 additions & 0 deletions packages/web-twig/src/Resources/components/Select/Select.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootFluidClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
{%- set _validationTextId = _id ~ '__validationText' -%}

<div {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
<label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
Expand All @@ -61,10 +63,12 @@
<HelperText
className="{{ _helperTextClassName }}"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
<ValidationText
className="{{ _validationTextClassName }}"
id="{{ _validationTextId }}"
validationState="{{ _validationState }}"
validationText="{{ _validationText }}"
UNSAFE_validationText="{{ _unsafeValidationText }}"
Expand Down
2 changes: 1 addition & 1 deletion ...g/src/Resources/components/Select/__tests__/__snapshots__/selectHelperText.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
</div>

<div class="Select__helperText">
<div class="Select__helperText" id="example__helperText">
Helper text
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions .../Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
</div>

<div class="Select__validationText">
<div class="Select__validationText" id="select-success__validationText">
Success validation text
</div>
</div>
Expand All @@ -52,7 +52,7 @@
</div>
</div>

<div class="Select__validationText">
<div class="Select__validationText" id="select-warning__validationText">
Warning validation text
</div>
</div>
Expand All @@ -78,7 +78,7 @@
</div>
</div>

<ul class="Select__validationText">
<ul class="Select__validationText" id="select-danger__validationText">
<li>Danger validation text
</li>

Expand Down
2 changes: 1 addition & 1 deletion .../src/Resources/components/TextArea/__tests__/__snapshots__/textAreaDefault.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<label for="example" class="TextArea__label TextArea__label--required">TextArea</label>

<textarea minlength="6" maxlength="10" rows="10" data-validate="true" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
<div class="TextArea__validationText">
<div class="TextArea__validationText" id="example__validationText">
validation failed
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...sources/components/TextArea/__tests__/__snapshots__/textAreaWithAutoResize.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<label for="example" class="TextArea__label TextArea__label--required">TextArea</label>

<textarea maxlength="10" minlength="6" rows="10" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
<div class="TextArea__validationText">
<div class="TextArea__validationText" id="example__validationText">
validation failed
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...sources/components/TextArea/__tests__/__snapshots__/textAreaWithHelperText.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<label for="example" class="TextArea__label">TextArea</label>

<textarea id="example" name="" class="TextArea__input"></textarea>
<div class="TextArea__helperText">
<div class="TextArea__helperText" id="example__helperText">
This is helper text
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...s/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<label for="example" class="TextArea__label">TextArea</label>

<textarea id="example" name="" class="TextArea__input"></textarea>
<ul class="TextArea__validationText">
<ul class="TextArea__validationText" id="example__validationText">
<li>Danger validation text
</li>

Expand Down
2 changes: 1 addition & 1 deletion ...esources/components/TextField/__tests__/__snapshots__/passwordFieldDefault.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="TextField TextField--danger">
<label for="example2" class="TextField__label TextField__label--required">Password field</label> <input type="password" id="example2" name="example2" class="TextField__input" required="">
<div class="TextField__validationText">
<div class="TextField__validationText" id="example2__validationText">
validation failed
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...rc/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="TextField TextField--danger">
<label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" required="">
<div class="TextField__validationText">
<div class="TextField__validationText" id="example__validationText">
validation failed
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...esources/components/TextField/__tests__/__snapshots__/textFieldDefaultPure.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="TextField TextField--danger">
<input type="text" id="example" name="example" class="TextField__input" required="">
<div class="TextField__validationText">
<div class="TextField__validationText" id="example__validationText">
validation failed
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...urces/components/TextField/__tests__/__snapshots__/textFieldWithHelperText.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="TextField">
<label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input">
<div class="TextField__helperText">
<div class="TextField__helperText" id="example__helperText">
This is helper text
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div class="TextField TextField--danger">
<label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input">
<ul class="TextField__validationText">
<ul class="TextField__validationText" id="example__validationText">
<li>Danger validation text
</li>

Expand Down
4 changes: 2 additions & 2 deletions ...Resources/components/TextField/__tests__/__snapshots__/textFieldWithUnsafe.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<body>
<div class="TextField TextField--success">
<label for="example" class="TextField__label">This is <strong>label</strong> text</label> <input type="text" id="example" name="example" class="TextField__input">
<div class="TextField__helperText">
<div class="TextField__helperText" id="example__helperText">
This is <strong>helper</strong> text
</div>

<div class="TextField__validationText">
<div class="TextField__validationText" id="example__validationText">
This is <strong>validation</strong> text
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,13 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _id ~ '__helperText' -%}
{%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop is not same as('id') and (_dataToggleAttr is null or prop is not same as('data-spirit-toggle'))) -%}
{%- set _allowedAttributes = [ 'autocomplete', 'placeholder'] -%}
{%- set _textFieldAllowedAttributes = _allowedAttributes | merge([ 'value' ]) -%}
{%- set _textAreaAllowedAttributes = _allowedAttributes | merge([ 'rows' ]) -%}
{%- set _validationTextId = _id ~ '__validationText' -%}

<div {{ mainProps(_mainPropsWithoutReservedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_rootClassNames) }} {{ _dataToggleAttr }}>
<label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
Expand Down Expand Up @@ -121,10 +123,12 @@
<HelperText
className="{{ _helperTextClassName }}"
helperText="{{ _helperText }}"
id="{{ _helperTextId }}"
UNSAFE_helperText="{{ _unsafeHelperText }}"
/>
<ValidationText
className="{{ _validationTextClassName }}"
id="{{ _validationTextId }}"
validationState="{{ _validationState }}"
validationText="{{ _validationText }}"
UNSAFE_validationText="{{ _unsafeValidationText }}"
Expand Down
2 changes: 1 addition & 1 deletion ...rces/components/TextFieldBase/__tests__/__snapshots__/textFieldBaseDefault.twig.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<body>
<div data-test="test" data-validate="1" data-spirit-validate="1" data-custom-validate="true" class="TextField TextField--danger">
<label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" size="10" required="">
<div class="TextField__validationText">
<div class="TextField__validationText" id="example__validationText">
validation failed
</div>
</div>
Expand Down
Loading
Loading