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

Jump to bottom

fix: form messages margin fix for textarea #591

Merged
merged 6 commits into from
Jan 20, 2020
+34 −26
Merged

fix: form messages margin fix for textarea #591

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
66931b3
fix z index and text area margins
stefanoScalzo Jan 16, 2020
13ded7e
add visual tests
stefanoScalzo Jan 17, 2020
b1d4d41
remove form-message modifications
stefanoScalzo Jan 17, 2020
144890f
add visual tests
stefanoScalzo Jan 17, 2020
4eb07b7
clean the documentation, add cutsor text for textarea
InnaAtanasova Jan 17, 2020
58b465d
Merge branch 'master' into fix/input-message-groups
JKMarkowski Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 24 additions & 26 deletions docs/pages/components/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Do not use the input field if:
- The user needs to carry out a search. In this case, use the search field.

{% capture inputs %}
<div class="fd-form-item fd-has-margin-none">
<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Default input:</label>
<input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text">
</div>
Expand Down Expand Up @@ -91,12 +91,12 @@ Do not use the input field if:
</div>
<br />
<br />
<div class="fd-form-item fd-form-item--horizontal fd-has-margin-none fd-popover">
<div class="fd-form-item fd-form-item--horizontal">
<label class="fd-form-label" for="input-1">Default input:</label>
<input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label">
</div>
<br><br>
<div class="fd-form-item fd-form-item--horizontal fd-has-margin-none fd-popover">
<div class="fd-form-item fd-form-item--horizontal">
<label class="fd-form-label" for="input-1">Compact input:</label>
<input class="fd-input fd-input--compact" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label">
</div>
Expand Down Expand Up @@ -156,64 +156,59 @@ The state of the input field can reflect validity of the data entered, whether t
Along with Invalid and Warning, error messages should be displayed below the field so the user can correct the error and move forward.

{% capture inputs %}
<div class="fd-form-item fd-has-margin-none fd-popover">
<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Normal input:</label>
<input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label">
</div>
<br />
<br />

<div class="fd-form-item fd-has-margin-none fd-popover">
<br /><br />

<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Valid input:</label>
<div class="fd-form-input-message-group">
<div class="fd-form-input-message-group fd-popover">
<input class="fd-input is-valid fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB2" aria-expanded="false" aria-haspopup="true">
<span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--success" aria-hidden="true" id="popoverB2">Success message</span>
</div>
</div>

<br />
<br />
<br /><br />

<div class="fd-form-item fd-has-margin-none fd-popover">
<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Error input:</label>
<div class="fd-form-input-message-group">
<div class="fd-form-input-message-group fd-popover">
<input class="fd-input is-invalid fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB3" aria-expanded="false" aria-haspopup="true">
<span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--error" aria-hidden="true" id="popoverB3">Error message</span>
</div>
</div>

<br />
<br />
<br /><br />

<div class="fd-form-item fd-has-margin-none fd-popover">
<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Warning input:</label>
<div class="fd-form-input-message-group">
<div class="fd-form-input-message-group fd-popover">
<input class="fd-input is-warning fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB4" aria-expanded="false" aria-haspopup="true">
<span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--warning" aria-hidden="true" id="popoverB4">Warning message</span>
</div>
</div>

<br />
<br />
<br /><br />

<div class="fd-form-item fd-has-margin-none fd-popover">
<div class="fd-form-item">
<label class="fd-form-label" for="input-1">Information input:</label>
<div class="fd-form-input-message-group">
<div class="fd-form-input-message-group fd-popover">
<input class="fd-input is-information fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB5" aria-expanded="false" aria-haspopup="true">
<span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--information" aria-hidden="true" id="popoverB5">Information message</span>
</div>
</div>

<br />
<br />
<br /><br />

<div class="fd-form-item">
<label class="fd-form-label" for="input-6">Disabled Input:</label>
<input class="fd-input" type="text" id="input-6" value="Non editable data" disabled>
</div>

<br />
<br />
<br /><br />

<div class="fd-form-item">
<label class="fd-form-label" for="input-7">Read Only Input:</label>
Expand Down Expand Up @@ -262,8 +257,11 @@ Do not use the text area if
</div>
<br/>
<div class="fd-form-item">
<label class="fd-form-label" for="textarea-1">Text area:</label>
<textarea class="fd-textarea is-information" id="textarea-1" placeholder="Write something here"></textarea>
<label class="fd-form-label" for="textarea-1">Information input:</label>
<div class="fd-form-input-message-group fd-popover">
<textarea class="fd-textarea is-information fd-popover__control" id="textarea-1" placeholder="Write something here" aria-controls="popoverT5" aria-expanded="false" aria-haspopup="true"></textarea>
<span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--information" aria-hidden="true" id="popoverT5">Information message</span>
</div>
</div>
<br/>
<div class="fd-form-item">
Expand Down
10 changes: 10 additions & 0 deletions src/textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@ $block: #{$fd-namespace}-textarea;
white-space: initial;
overflow: auto;
resize: none;
display: block;
cursor: text;

&[aria-expanded="false"] {
z-index: 0;
}

&[aria-expanded="true"] {
z-index: 4;
}

&--compact {
min-height: 1.625rem;
Expand Down
Binary file modified test/visual-regression-tests/reference_images/FS_textarea_0_backstop_0_.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual-regression-tests/reference_images/FS_textarea_1_backstop__n1_0_.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual-regression-tests/reference_images/FS_textarea_2_backstop__n2_0_.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual-regression-tests/reference_images/FS_textarea_3_backstop__n3_0_.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual-regression-tests/reference_images/FS_textarea_4_backstop__n4_0_.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.