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
Merged

fix: form messages margin fix for textarea #591

Show file tree
Hide file tree
Changes from 4 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
26 changes: 15 additions & 11 deletions docs/pages/components/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,27 +156,28 @@ 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 fd-popover">
Copy link
Contributor

Choose a reason for hiding this comment

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

You actually don't need fd-popover. This example doesn't have a message

<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">
<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 />

<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>
Expand All @@ -185,9 +186,9 @@ Along with Invalid and Warning, error messages should be displayed below the fie
<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>
Expand All @@ -196,9 +197,9 @@ Along with Invalid and Warning, error messages should be displayed below the fie
<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>
Expand Down Expand Up @@ -262,8 +263,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
9 changes: 9 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,15 @@ $block: #{$fd-namespace}-textarea;
white-space: initial;
overflow: auto;
resize: none;
display: block;

&[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.