Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[ResourceList] Make se23 styles the default #10055

Merged
merged 1 commit into from
Aug 16, 2023
Merged

[ResourceList] Make se23 styles the default #10055

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
117 changes: 33 additions & 84 deletions polaris-react/src/components/ResourceList/ResourceList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,10 @@ $item-wrapper-loading-height: 64px;
}

.FiltersWrapper {
padding: var(--p-space-3) var(--p-space-3) var(--p-space-4);

@media #{$p-breakpoints-sm-up} {
padding: var(--p-space-4);
}

#{$se23} & {
padding: var(--p-space-3);

@media #{$p-breakpoints-sm-up} {
padding: var(--p-space-3);
}
}
padding: var(--p-space-3);

+ .ResourceList {
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);

#{$se23} & {
border-top: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This border-top: none; was to reset the border-top above before item-separator sets a new border-top... ie; We want item-separator's border-top to win in SE23, so removing the pre-uplift one means we can remove the reset also.

@include item-separator;
}
@include item-separator;
}
}

Expand All @@ -49,12 +32,7 @@ $item-wrapper-loading-height: 64px;
border-top-right-radius: var(--p-border-radius-2);

+ .ResourceList {
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);

#{$se23} & {
border-top: none;
@include item-separator;
}
@include item-separator;
}
}

Expand All @@ -77,55 +55,41 @@ $item-wrapper-loading-height: 64px;
.HeaderWrapper {
position: relative;
display: flex;
align-items: flex-start;
width: 100%;
min-height: resource-list(header-min-height);
padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-5);
background-color: var(--p-color-bg);
border-radius: var(--p-border-radius-2);
#{$se23} & {
// This container conditionally includes a Select component for sorting
// It's 32px above md-up and 36px below
// This hardcoded min-height is to ensure the Select has uniform padding when it's 36px high
min-height: 52px;
align-items: center;
padding: var(--p-space-2) var(--p-space-3);
// We reduce the min-height here to account for the Select shrinking to 32px at this breakpoint.
@media #{$p-breakpoints-md-up} {
min-height: 48px;
}
// This container conditionally includes a Select component for sorting
// It's 32px above md-up and 36px below
// This hardcoded min-height is to ensure the Select has uniform padding when it's 36px high
min-height: 52px;
align-items: center;
padding: var(--p-space-2) var(--p-space-3);
// We reduce the min-height here to account for the Select shrinking to 32px at this breakpoint.
@media #{$p-breakpoints-md-up} {
min-height: 48px;
}
}

.HeaderWrapper-isSticky {
box-shadow: var(--p-shadow-md);

#{$se23} & {
box-shadow: var(--p-shadow-xs);
border-radius: 0;
}
box-shadow: var(--p-shadow-xs);
border-radius: 0;
}

.HeaderContentWrapper {
position: absolute;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: resource-list(content-wrapper-stacking-order);
right: var(--p-space-5);
left: var(--p-space-5);
right: var(--p-space-3);
left: var(--p-space-3);
// Regardless of the variable height of the content
// we just want it to be center aligned.
top: 0;
bottom: 0;
display: flex;
min-height: resource-list(header-content-min-height);
opacity: 1;
transition: opacity var(--p-motion-ease) var(--p-motion-duration-200);

#{$se23} & {
right: var(--p-space-3);
left: var(--p-space-3);
// Regardless of the variable height of the content
// we just want it to be center aligned.
top: 0;
bottom: 0;
align-items: center;
}
align-items: center;

.HeaderWrapper-inSelectMode & {
opacity: 0;
Expand Down Expand Up @@ -222,33 +186,23 @@ $item-wrapper-loading-height: 64px;
z-index: resource-list(bulk-actions-wrapper-stacking-order);
width: 100%;

// se23: This is the initial value of flex, is there something else that mutates this in other components?
@media #{$p-breakpoints-sm-up} {
flex: 0 1 auto;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As per the above comment; this is the default. There's no other flex rules set on this element, so it's safe to remove this. (Looks like it might have been a refactor hold-over from when Bulk Editor was introduced).

align-self: flex-start;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The specificity of this @media #{$p-breakpoints-sm-up} matches the #{$se23} & below, but #{$se23} & wins because it comes last. Therefore, align-self: flex-start never gets applied and so can now be deleted 👍

}

#{$se23} & {
/*
We do not want to worry about setting the height and width explicitly.
We want to inherits the height and width of its child (in this case the SelectAllActions component).
/*
We do not want to worry about setting the height and width explicitly.
We want to inherits the height and width of its child (in this case the SelectAllActions component).

We do this using flexbox because "the cross size of each flex container is the minimum size necessary to contain the flex items" as per the spec.
https://www.w3.org/TR/css-flexbox-1/#flex-lines
*/
display: flex;
align-self: auto;
}
We do this using flexbox because "the cross size of each flex container is the minimum size necessary to contain the flex items" as per the spec.
https://www.w3.org/TR/css-flexbox-1/#flex-lines
*/
display: flex;
align-self: auto;
}

.CheckableButtonWrapper {
display: none;

#{$se23} & {
// Checkable button has no opinion on its height, so we just fill the
// container
height: 100%;
}
// Checkable button has no opinion on its height, so we just fill the
// container
height: 100%;

@media #{$p-breakpoints-sm-up} {
flex: 1;
Expand Down Expand Up @@ -303,12 +257,7 @@ $item-wrapper-loading-height: 64px;
max-width: 100%;

+ .ItemWrapper {
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);

#{$se23} & {
border-top: none;
@include item-separator;
}
@include item-separator;
}
}

Expand Down