Skip to content

Commit

Permalink
fix(styles): form grid margins & paddings issues (#3767)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
* Class `fd-col--compact` removed, use `fd-form-item--compact` instead
* Class `fd-row__form-item` removed
* Class `fd-row--top` removed
* Classes applying approach of `fd-form-layout-grid` changed, see wiki
  • Loading branch information
@platon-rov
platon-rov committed Aug 15, 2022
1 parent 3d4d4f8 commit 676da99
Show file tree
Hide file tree
Showing 16 changed files with 354 additions and 352 deletions.
10 changes: 1 addition & 9 deletions src/styles/form-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,21 @@
@import "./mixins";

/*!
.fd-form-group
.fd-form-group(--inline)
*/

$block: #{$fd-namespace}-form-group;

.#{$block} {
@include fd-reset();

&:last-child {
margin-bottom: 0;
}

&--inline {
@include fd-flex() {
justify-content: flex-start;
flex-wrap: wrap;
}
}

&__item {
@include fd-reset();
}

&__header {
@include fd-reset();
@include fd-flex-vertical-center();
Expand Down
2 changes: 1 addition & 1 deletion src/styles/form-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import "./mixins";

/*!
.fd-form-item+(--inline)
.fd-form-item(--horizontal)
*/
$block: #{$fd-namespace}-form-item;

Expand Down
115 changes: 55 additions & 60 deletions src/styles/form-layout-grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,38 @@
@import "./mixins";
@import "./layout-grid.scss";
@import "./layout-grid";

$block: #{$fd-namespace}-form-layout-grid;
$blockContainer: #{$block}-container;

$formContainer: #{$block}-container;
$formGroup: #{$fd-namespace}-form-group;
$formItem: #{$fd-namespace}-form-item;

$gridContainer: #{$fd-namespace}-container;
$gridRow: #{$fd-namespace}-row;
$gridCol: #{$fd-namespace}-col;

$cols: 12;
$gutter: 0.25rem;
$groupGutter: 1rem;
@mixin fd-form-vertical($marginTop: 0.625rem) {
&.#{$formGroup},
.#{$formGroup} {
.#{$formItem} {
margin-top: $marginTop;

&:first-of-type {
margin-top: 0;
}
}
}
}

@mixin fd-form-col-paddings($colSelector) {
.#{$gridContainer}.#{$blockContainer} .#{$gridRow} {
$cols: 12;

.#{$gridContainer}.#{$formContainer} .#{$gridRow} {
@for $col from 1 through $cols - 1 {
.#{$colSelector}--#{$col} {
.#{$fd-namespace}-form-label {
@include fd-form-vertical();

> .#{$fd-namespace}-form-label {
float: right;
text-align: right;
padding-bottom: 0;
Expand All @@ -32,7 +48,7 @@ $groupGutter: 1rem;

.#{$colSelector},
.#{$colSelector}--12 {
.#{$fd-namespace}-form-label {
> .#{$fd-namespace}-form-label {
float: left;
text-align: left;
width: auto;
Expand All @@ -45,69 +61,48 @@ $groupGutter: 1rem;
}
}
}

.#{$gridContainer}.#{$blockContainer}--vertical .#{$gridRow}:not(:first-child) {
.#{$colSelector},
.#{$colSelector}--12 {
.#{$fd-namespace}-form-label {
margin-top: 0.625rem;
}
}
}
}

.#{$gridContainer}.#{$blockContainer} {
padding: $groupGutter;

.#{$gridRow} {
align-items: center;
margin-bottom: 0.625rem;

&--top {
align-items: start;
}

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}

.#{$gridCol} {
padding-top: 0;
padding-bottom: 0;
.#{$gridContainer}.#{$formContainer} {
&,
&.#{$formContainer}--vertical {
@include fd-form-vertical();
}

@include fd-ellipsis();

.#{$fd-namespace}-select__control {
margin: 0.25rem 0;
}
&.#{$formGroup},
.#{$formGroup} {
padding: 1rem !important;

.#{$formItem} {
&--compact {
.#{$fd-namespace}-select__control {
margin: 0.1875rem 0 0.25rem 0;
margin-bottom: 0.1875rem;
}
}

.#{$fd-namespace}-select__control {
margin: 0.25rem 0;
}

.#{$fd-namespace}-form-label {
@include fd-set-margin-right(0);

white-space: initial;

&--required {
@include fd-set-padding-right(0.5rem);
}

white-space: initial;
}

&__form-group {
padding: $groupGutter;
}
}
}

.#{$gridRow} {
.#{$gridCol} {
@include fd-ellipsis();

.#{$gridRow}__form-item {
flex-direction: row;
padding-top: 0;
padding-bottom: 0;
align-self: center;
}
}
}
Expand All @@ -117,19 +112,19 @@ $groupGutter: 1rem;
}

@media (min-width: 600px) {
.#{$gridContainer}.#{$blockContainer} {
padding: $groupGutter;
.#{$gridContainer}.#{$formContainer} {
$gutter: 0.25rem;

padding: 0 $gutter;

@include fd-form-vertical(0);

.#{$gridRow} {
margin: 0 -#{$gutter} 0.625rem;
margin: 0 -#{$gutter};
min-width: calc(100% + #{$gutter} * 2);

.#{$gridCol} {
padding: 0 $gutter;

&__form-group {
padding: $groupGutter;
}
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions stories/checkbox/__snapshots__/checkbox.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ exports[`Storyshots Components/Forms/Checkbox Inline 1`] = `


<div
class="fd-form-group__item fd-form-item"
class="fd-form-item"
>


Expand Down Expand Up @@ -343,7 +343,7 @@ exports[`Storyshots Components/Forms/Checkbox Inline 1`] = `


<div
class="fd-form-group__item fd-form-item"
class="fd-form-item"
>


Expand Down Expand Up @@ -383,7 +383,7 @@ exports[`Storyshots Components/Forms/Checkbox Inline 1`] = `


<div
class="fd-form-group__item fd-form-item"
class="fd-form-item"
>


Expand Down
6 changes: 3 additions & 3 deletions stories/checkbox/checkbox.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,23 +201,23 @@ Mobile.parameters = {
export const Inline = () => `<fieldset class="fd-fieldset">
<legend class="fd-fieldset__legend">Inline checkboxes</legend>
<div class="fd-form-group fd-form-group--inline">
<div class="fd-form-group__item fd-form-item">
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox" id="Ai4ez617">
<label class="fd-checkbox__label" for="Ai4ez617">
<div class="fd-checkbox__label-container">
<span class="fd-checkbox__text">Potatoes</span>
</div>
</label>
</div>
<div class="fd-form-group__item fd-form-item">
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox" id="Ai4ez618" checked>
<label class="fd-checkbox__label" for="Ai4ez618">
<div class="fd-checkbox__label-container">
<span class="fd-checkbox__text">Tomatoes</span>
</div>
</label>
</div>
<div class="fd-form-group__item fd-form-item">
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox" id="Ai4ez619" disabled checked>
<label class="fd-checkbox__label" for="Ai4ez619">
<div class="fd-checkbox__label-container">
Expand Down
26 changes: 12 additions & 14 deletions stories/dialog/__snapshots__/dialog.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,12 +354,12 @@ exports[`Storyshots Components/Dialog Horizontal Form 1`] = `


<div
class="fd-container fd-form-layout-grid-container"
class="fd-container fd-form-layout-grid-container fd-form-group"
>


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -400,7 +400,7 @@ exports[`Storyshots Components/Dialog Horizontal Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -476,7 +476,7 @@ exports[`Storyshots Components/Dialog Horizontal Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -552,7 +552,7 @@ exports[`Storyshots Components/Dialog Horizontal Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -593,7 +593,7 @@ exports[`Storyshots Components/Dialog Horizontal Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -1910,8 +1910,6 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `
<div
dir="ltr"
>


<section
class="fd-dialog-docs-static fd-dialog fd-dialog--active"
>
Expand Down Expand Up @@ -1965,12 +1963,12 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `


<div
class="fd-container fd-form-layout-grid-container fd-form-layout-grid-container--vertical"
class="fd-container fd-form-layout-grid-container fd-form-layout-grid-container--vertical fd-form-group"
>


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -2011,7 +2009,7 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -2087,7 +2085,7 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -2163,7 +2161,7 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down Expand Up @@ -2204,7 +2202,7 @@ exports[`Storyshots Components/Dialog Vertical Form 1`] = `


<div
class="fd-row"
class="fd-row fd-form-item"
>


Expand Down

0 comments on commit 676da99

Please sign in to comment.