feat: forms refactoring #419
Conversation
InnaAtanasova
requested review from
markpalfreeman,
droshev,
bcullman,
greg-a-smith,
JKMarkowski,
jbadan and
stefanoScalzo
|
Deploy preview for fundamental-styles ready! Built with commit 6a90a95 |
| @@ -15,7 +15,7 @@ | |||
|
|
|||
| > .fd-tile__content { | |||
There was a problem hiding this comment.
I think those stylings should be even removed. They create false expectations
There was a problem hiding this comment.
This rule is applied only when the fd-tile is child of .docs-component.
The padding is just for the content to look nice and the width is to show the cases when we have very long text and truncation.
We want to be able to see this:
Without the width we see this:
src/input.scss
Outdated
|
|
||
| &:last-child { | ||
| margin-bottom: 0.25rem; | ||
| } | ||
|
|
||
| &::placeholder { | ||
| @include fd-reset(); | ||
| @include fd-var-color("color", $fd-forms-color--placeholder, --fd-color-neutral-4); |
There was a problem hiding this comment.
can we replace the old values with theming parameters?
src/mixins/_mixins.scss
Outdated
| @@ -6,7 +6,7 @@ | |||
|
|
|||
| @include fd-var-color("color", $fd-color, --fd-color-text-1); | |||
There was a problem hiding this comment.
can we replace with theming parameters?
InnaAtanasova
force-pushed
the
feat/forms-refactoring
branch
from
a248e3b
to
ca5f7a3
Compare
|
@InnaAtanasova JFYI: the forms documentation still refers a lot to "form groups". But the form groups have been removed. |
| &--inline { | ||
| float: left; | ||
| margin-right: fd-space(4); | ||
| &--horizontal { |
There was a problem hiding this comment.
What are the different use cases for --horizontal versus --inline?
There was a problem hiding this comment.
--inline is what we had before for displaying the checkboxes and radio buttons inline.
This was only the elements go to one line, the label is on another line.
But then we needed to add inline items - label and input inline. This was achieved by using flexbox.
Stefano is working currently on Forms Layout - there's going to be vertical and horizontal layout.
So, to minimize the breaking changes, we decided to keep the --inline modifier for displaying the checkboxes and radio btns inline, and add --horizontal for displaying the items inline
Thanks for pointing this out. You are absolutely right. We will def improve the documentation. |
Description
Refactored:
fd-form-label- added--requiredmodifier for styling the*fd-form-item--horizontalmodifier class to display form items inline (horizontally)fd-form-label--inline-helpfor form items with inline helpfd-form-message--help-BREAKING CHANGEfd-textarea- added interaction states, compact modefd-radio- added interaction states, cosy and compact modefd-checkbox- added interaction states, compact modefd-form-label--radio,fd-form-label--checkboxandfd-form-label--togglemodifier classes to labelScreenshots
Before:
After:
About tests:
Running locally the following tests failed. They have been updated