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 List wrapping bug #1806

Merged
merged 6 commits into from
Apr 8, 2020
Merged

Fix List wrapping bug #1806

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c24560a
fix: test bolt-list without FF `width` hack
Apr 2, 2020
54ed3f5
Merge branch 'master' into fix/list-wrapping-bug
Apr 2, 2020
3d09773
fix: scope `width` hack to FF-only
Apr 2, 2020
f11bdd0
chore: stylelint
Apr 2, 2020
d4040e8
chore: stylelint expects quotes
Apr 2, 2020
71f771b
docs: add comment
Apr 2, 2020
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
72 changes: 44 additions & 28 deletions packages/components/bolt-list/src/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
//
// 1. Reset typography so it doesn't inherit from a higher level container.
// 2. Reset text-align so it doesn't conflict with the align prop which handles the horizontal alignment of inline items in a list, not the text-align within.
// 3. Width must be defined in order for the list to dislay correctly in Firefox.
.c-bolt-list {
@include bolt-margin(0);
@include bolt-padding(0);
Expand Down Expand Up @@ -47,10 +48,12 @@
flex-flow: row wrap;
}

@include bolt-repeat-rule((
'.c-bolt-list--display-flex bolt-list-item',
'.c-bolt-list--display-flex ::slotted(bolt-list-item)'
)) {
@include bolt-repeat-rule(
(
'.c-bolt-list--display-flex bolt-list-item',
'.c-bolt-list--display-flex ::slotted(bolt-list-item)'
)
) {
flex: 1;
}

Expand All @@ -68,28 +71,48 @@
}
}


// Spacing Prop
@each $spacing-value in $bolt-spacing-values {
$spacing-value-name: nth($spacing-value, 1);

.c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
margin-bottom: bolt-v-spacing(#{$spacing-value-name}) * -1;
margin-left: bolt-spacing(#{$spacing-value-name}) * -1;
}

// The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
&.c-bolt-list--display-inline,
&.c-bolt-list--display-flex {
width: calc(100% + #{bolt-spacing($spacing-value-name)}); // Width must be defined in order for the list to dislay correctly in Firefox.
}
// CSS hack targeting any Firefox version: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
@-moz-document url-prefix('') {
Copy link
Contributor

Choose a reason for hiding this comment

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

Wait, what? Link to docs and/or comment about this please.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Agree. Let's throw a comment in there. I've been using that, it's quite handy.

Copy link
Collaborator

Choose a reason for hiding this comment

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

https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@sghoweri added a comment, see commit.

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

.c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {
// The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
&.c-bolt-list--display-inline,
&.c-bolt-list--display-flex {
width: 100%; // [3]
}

@each $breakpoint in $bolt-breakpoints {
$breakpoint-name: nth($breakpoint, 1);
@each $breakpoint in $bolt-breakpoints {
$breakpoint-name: nth($breakpoint, 1);

&.c-bolt-list--display-inline\@#{$breakpoint-name} {
@include bolt-mq($breakpoint-name) {
width: 100%; // [3]
}
}
}
}
.c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
// The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
&.c-bolt-list--display-inline\@#{$breakpoint-name} {
@include bolt-mq($breakpoint-name) {
width: calc(100% + #{bolt-spacing($spacing-value-name)}); // Width must be defined in order for the list to dislay correctly in Firefox.
&.c-bolt-list--display-inline,
&.c-bolt-list--display-flex {
width: calc(100% + #{bolt-spacing($spacing-value-name)}); // [3]
}

@each $breakpoint in $bolt-breakpoints {
$breakpoint-name: nth($breakpoint, 1);

&.c-bolt-list--display-inline\@#{$breakpoint-name} {
@include bolt-mq($breakpoint-name) {
width: calc(100% + #{bolt-spacing($spacing-value-name)}); // [3]
}
}
}
}
Expand All @@ -109,11 +132,9 @@ $bolt-list-alignments: start, center, end, justify;
&.c-bolt-list--display-inline {
@if $alignment != center and $alignment != justify {
justify-content: flex-#{$alignment};
}
@else if $alignment == justify {
} @else if $alignment == justify {
justify-content: space-between;
}
@else {
} @else {
justify-content: #{$alignment};
}
}
Expand All @@ -125,11 +146,9 @@ $bolt-list-alignments: start, center, end, justify;
@include bolt-mq($breakpoint-name) {
@if $alignment != center and $alignment != justify {
justify-content: flex-#{$alignment};
}
@else if $alignment == justify {
} @else if $alignment == justify {
justify-content: space-between;
}
@else {
} @else {
justify-content: #{$alignment};
}
}
Expand All @@ -147,8 +166,7 @@ $bolt-list-valignments: start, center, end;
&.c-bolt-list--display-flex {
@if $alignment != center {
align-items: flex-#{$alignment};
}
@else {
} @else {
align-items: #{$alignment};
}
}
Expand All @@ -160,8 +178,7 @@ $bolt-list-valignments: start, center, end;
@include bolt-mq($breakpoint-name) {
@if $alignment != center {
align-items: flex-#{$alignment};
}
@else {
} @else {
align-items: #{$alignment};
}
}
Expand All @@ -186,5 +203,4 @@ $bolt-list-valignments: start, center, end;
}
}
}

}