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

Remove external/outside margin from components #9830

Merged
merged 13 commits into from
Oct 19, 2021
Merged

Remove external/outside margin from components #9830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3b333c2
fix(form): remove fieldset margin
tay1orjones Oct 8, 2021
495d2d8
fix(form): remove fileuploader margin
tay1orjones Oct 8, 2021
84acfd8
fix(form): remove label margin
tay1orjones Oct 8, 2021
d8a5202
fix(notifications): remove external margin
tay1orjones Oct 8, 2021
ca55054
fix(structured-list): remove external margin
tay1orjones Oct 8, 2021
02c8df8
chore: put component margin removal behind flag
tay1orjones Oct 11, 2021
1d6e534
Merge branch '5367-remove-margin' of github.com:tay1orjones/carbon in…
tay1orjones Oct 11, 2021
cfde281
Merge branch 'main' into 5367-remove-margin
joshblack Oct 15, 2021
b037791
Merge branch 'main' into 5367-remove-margin
tay1orjones Oct 18, 2021
8b0da0c
Merge branch 'main' into 5367-remove-margin
tay1orjones Oct 18, 2021
3a3e6a2
Merge branch 'main' of github.com:carbon-design-system/carbon into 53…
tay1orjones Oct 18, 2021
27b4e2d
chore: add v11 flag env variable to sass compilation config
tay1orjones Oct 19, 2021
759acf0
Merge branch 'main' into 5367-remove-margin
sstrubberg Oct 19, 2021
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
5 changes: 4 additions & 1 deletion packages/components/src/components/file-uploader/_file-uploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@
display: inline-block;
width: 100%;
max-width: rem(320px);
margin-bottom: $carbon--spacing-03;
@if not feature-flag-enabled('enable-v11-release') {
margin-bottom: $carbon--spacing-03;
}

color: $link-01;
cursor: pointer;
outline: 2px solid transparent;
Expand Down
21 changes: 15 additions & 6 deletions packages/components/src/components/form/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,15 @@
.#{$prefix}--fieldset {
@include reset;

margin-bottom: $carbon--spacing-07;
@if not feature-flag-enabled('enable-v11-release') {
margin-bottom: $carbon--spacing-07;
}
}

.#{$prefix}--fieldset--no-margin {
margin-bottom: 0;
@if not feature-flag-enabled('enable-v11-release') {
.#{$prefix}--fieldset--no-margin {
margin-bottom: 0;
}
}

.#{$prefix}--form-item {
Expand All @@ -42,7 +46,10 @@
@include type-style('label-01');

display: inline-block;
margin-bottom: $carbon--spacing-03;
@if not feature-flag-enabled('enable-v11-release') {
margin-bottom: $carbon--spacing-03;
}

color: $text-02;
font-weight: $input-label-weight;
line-height: 1rem;
Expand Down Expand Up @@ -125,8 +132,10 @@
display: block;
}

.#{$prefix}--form--fluid .#{$prefix}--fieldset {
margin: 0;
@if not feature-flag-enabled('enable-v11-release') {
.#{$prefix}--form--fluid .#{$prefix}--fieldset {
margin: 0;
}
}

.#{$prefix}--form--fluid input[data-invalid] {
Expand Down
7 changes: 5 additions & 2 deletions packages/components/src/components/notification/_inline-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,11 @@
height: auto;
min-height: rem(48px);
flex-wrap: wrap;
margin-top: $carbon--spacing-05;
margin-bottom: $carbon--spacing-05;
@if not feature-flag-enabled('enable-v11-release') {
margin-top: $carbon--spacing-05;
margin-bottom: $carbon--spacing-05;
}

color: $inverse-01;

@include carbon--breakpoint(md) {
Expand Down
15 changes: 10 additions & 5 deletions packages/components/src/components/notification/_toast-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,19 @@
width: rem(288px);
height: auto;
padding-left: $carbon--spacing-05;
margin-top: $carbon--spacing-03;
margin-right: $carbon--spacing-05;
margin-bottom: $carbon--spacing-03;
@if not feature-flag-enabled('enable-v11-release') {
margin-top: $carbon--spacing-03;
margin-right: $carbon--spacing-05;
margin-bottom: $carbon--spacing-03;
}

box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
color: $inverse-01;

&:first-child {
margin-top: $carbon--spacing-05;
@if not feature-flag-enabled('enable-v11-release') {
&:first-child {
margin-top: $carbon--spacing-05;
}
}

@include carbon--breakpoint(max) {
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/components/structured-list/_structured-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@

display: table;
width: 100%;
margin-bottom: 5rem;
@if not feature-flag-enabled('enable-v11-release') {
margin-bottom: 5rem;
}

background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
Expand Down
4 changes: 3 additions & 1 deletion packages/react/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const customProperties = require('postcss-custom-properties');
const rtlcss = require('rtlcss');

const {
CARBON_ENABLE_V11_RELEASE,
CARBON_ENABLE_V11_RELEASE = 'false',
CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
CARBON_REACT_STORYBOOK_USE_RTL,
CARBON_REACT_STORYBOOK_USE_SASS_LOADER,
Expand Down Expand Up @@ -69,6 +69,7 @@ module.exports = {
$feature-flags: (
ui-shell: true,
enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
);
${content}
`;
Expand All @@ -88,6 +89,7 @@ module.exports = {
$feature-flags: (
ui-shell: true,
enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
);
`,
implementation: require('sass'),
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/components/FormGroup/FormGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ const FormGroup = ({
className,
message,
messageText,
hasMargin,
hasMargin, // TODO - remove in v11
...other
}) => {
const prefix = usePrefix();
const enabled = useFeatureFlag('enable-v11-release');
const classNamesLegend = classnames(`${prefix}--label`, [
enabled ? null : className,
]);
// TODO - remove `fieldset--no-margin` in v11
const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
[`${prefix}--fieldset--no-margin`]: !hasMargin,
});
Expand Down
5 changes: 4 additions & 1 deletion packages/styles/scss/components/file-uploader/_file-uploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,10 @@
display: inline-block;
width: 100%;
max-width: rem(320px);
margin-bottom: $spacing-03;
@if not enabled('enable-v11-release') {
margin-bottom: $spacing-03;
}

color: $link-primary;
cursor: pointer;
outline: 2px solid transparent;
Expand Down
21 changes: 15 additions & 6 deletions packages/styles/scss/components/form/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
.#{$prefix}--fieldset {
@include reset;

margin-bottom: $spacing-07;
@if not enabled('enable-v11-release') {
margin-bottom: $spacing-07;
}
}

.#{$prefix}--fieldset--no-margin {
margin-bottom: 0;
@if not enabled('enable-v11-release') {
.#{$prefix}--fieldset--no-margin {
margin-bottom: 0;
}
}

.#{$prefix}--form-item {
Expand All @@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
@include type-style('label-01');

display: inline-block;
margin-bottom: $spacing-03;
@if not enabled('enable-v11-release') {
margin-bottom: $spacing-03;
}

color: $text-secondary;
font-weight: $input-label-weight;
line-height: 1rem;
Expand Down Expand Up @@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
display: block;
}

.#{$prefix}--form--fluid .#{$prefix}--fieldset {
margin: 0;
@if not enabled('enable-v11-release') {
.#{$prefix}--form--fluid .#{$prefix}--fieldset {
margin: 0;
}
}

.#{$prefix}--form--fluid input[data-invalid] {
Expand Down
7 changes: 5 additions & 2 deletions packages/styles/scss/components/notification/_actionable-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,11 @@
height: auto;
min-height: rem(48px);
flex-wrap: wrap;
margin-top: $spacing-05;
margin-bottom: $spacing-05;
@if not enabled('enable-v11-release') {
margin-top: $spacing-05;
margin-bottom: $spacing-05;
}

color: $text-inverse;

@include breakpoint(md) {
Expand Down
7 changes: 5 additions & 2 deletions packages/styles/scss/components/notification/_inline-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,11 @@
height: auto;
min-height: rem(48px);
flex-wrap: wrap;
margin-top: $spacing-05;
margin-bottom: $spacing-05;
@if not enabled('enable-v11-release') {
margin-top: $spacing-05;
margin-bottom: $spacing-05;
}

color: $text-inverse;

@include breakpoint(md) {
Expand Down
15 changes: 10 additions & 5 deletions packages/styles/scss/components/notification/_toast-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,19 @@
width: rem(288px);
height: auto;
padding-left: $spacing-05;
margin-top: $spacing-03;
margin-right: $spacing-05;
margin-bottom: $spacing-03;
@if not enabled('enable-v11-release') {
margin-top: $spacing-03;
margin-right: $spacing-05;
margin-bottom: $spacing-03;
}

box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
color: $text-inverse;

&:first-child {
margin-top: $spacing-05;
@if not enabled('enable-v11-release') {
&:first-child {
margin-top: $spacing-05;
}
}

@include breakpoint(max) {
Expand Down
5 changes: 4 additions & 1 deletion packages/styles/scss/components/structured-list/_structured-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@

display: table;
width: 100%;
margin-bottom: 5rem;
@if not enabled('enable-v11-release') {
margin-bottom: 5rem;
}

background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
Expand Down