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

Update page component (and some data view elements) spacing metrics #61333

Merged
merged 23 commits into from
May 24, 2024
Merged

Update page component (and some data view elements) spacing metrics #61333

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
d45b50b
Update metrics
jameskoster Apr 24, 2024
975b3b2
vars
jameskoster Apr 24, 2024
afc52a1
A different approach
jameskoster Apr 24, 2024
6f15aa3
pagination
jameskoster Apr 24, 2024
dae0d7b
List layout
jameskoster Apr 26, 2024
9dcfa7c
Merge branch 'trunk' into update/page-metrics
jameskoster May 2, 2024
8599ed4
filter, grid spacing
jameskoster May 2, 2024
3c7a9c7
rebase
jameskoster May 2, 2024
12a916f
list item padding
jameskoster May 2, 2024
756bb45
Further adjustments
jameskoster May 3, 2024
6d27cf4
disable stylelint for container queries
jameskoster May 9, 2024
0292095
Merge branch 'trunk' into update/page-metrics
jameskoster May 9, 2024
244ffd6
Rebase
jameskoster May 17, 2024
1000a17
Add description to stylelint-disable
jameskoster May 17, 2024
94806b1
Add container, update table + grid
jameskoster May 21, 2024
122a91a
Use css vars
jameskoster May 21, 2024
d8ea7e4
rebase
jameskoster May 21, 2024
f466e32
Revert use of css vars
jameskoster May 21, 2024
efb40c9
Fix patterns page header
jameskoster May 21, 2024
7f7de3b
Reduce animation speed
jameskoster May 21, 2024
b17ba83
Update stylelint disabling
jameskoster May 22, 2024
4145fe6
Address feedback
jameskoster May 23, 2024
beeef7b
Merge branch 'trunk' into update/page-metrics
jameskoster May 24, 2024
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
38 changes: 27 additions & 11 deletions packages/dataviews/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@

.dataviews-filters__view-actions {
box-sizing: border-box;
padding: $grid-unit-15 $grid-unit-40 0;
margin-bottom: $grid-unit-15;
padding: $grid-unit-20 $grid-unit-60;
flex-shrink: 0;
position: sticky;
left: 0;
transition: padding ease-out 0.2s;
@include reduce-motion("transition");

.components-search-control {
.components-base-control__field {
Expand All @@ -21,12 +22,11 @@
}

.dataviews-filters__container {
padding-right: $grid-unit-40;

.dataviews-filters__reset-button[aria-disabled="true"] {
&,
&:hover {
opacity: 0;
padding: 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a reason this was added? This makes the reset button look cramped.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good spot, it was to reduce the space occupied by the button to avoid wrapping. That should probably be looked at separately though.

}

&:focus {
Expand All @@ -44,10 +44,12 @@
bottom: 0;
left: 0;
background-color: $white;
padding: $grid-unit-15 $grid-unit-40;
padding: $grid-unit-20 $grid-unit-60;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think the vertical padding needs to be maintained. Otherwise, it will be out of alignment with the sidebar border.

sidebar

border-top: $border-width solid $gray-100;
color: $gray-700;
flex-shrink: 0;
transition: padding ease-out 0.2s;
@include reduce-motion("transition");
}

.dataviews-pagination__page-selection {
Expand Down Expand Up @@ -102,7 +104,7 @@

td:first-child,
th:first-child {
padding-left: $grid-unit-40;
padding-left: $grid-unit-60;

.dataviews-view-table-header-button,
.dataviews-view-table-header {
Expand All @@ -112,7 +114,7 @@

td:last-child,
th:last-child {
padding-right: $grid-unit-40;
padding-right: $grid-unit-60;
}

&:last-child {
Expand Down Expand Up @@ -281,7 +283,7 @@
margin-bottom: $grid-unit-30;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: max-content;
padding: 0 $grid-unit-40;
padding: 0 $grid-unit-60;

@include break-xlarge() {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
Expand Down Expand Up @@ -457,7 +459,7 @@
}

.dataviews-view-list__item {
padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40;
padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
width: 100%;
scroll-margin: $grid-unit-10 0;

Expand Down Expand Up @@ -529,7 +531,7 @@

.dataviews-view-list__item-actions {
padding-top: $grid-unit-20;
padding-right: $grid-unit-40;
padding-right: $grid-unit-30;
}

& + .dataviews-pagination {
Expand All @@ -544,7 +546,7 @@

.dataviews-no-results,
.dataviews-loading {
padding: 0 $grid-unit-40;
padding: 0 $grid-unit-60;
Comment on lines -549 to +563
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be better to consider container queries for this padding as well. Otherwise, the left and right padding will not match when matching the container query.

no-results-padding

flex-grow: 1;
display: flex;
align-items: center;
Expand Down Expand Up @@ -802,6 +804,20 @@
}
}

@container (max-width: 430px) { /* stylelint-disable -- '@container' not yet globally permitted */
.dataviews-pagination,
.dataviews-filters__view-actions {
padding: $grid-unit-20 $grid-unit-30;
}

.dataviews-filters__view-actions {
.components-search-control {
.components-base-control__field {
max-width: 112px;
}
}
}
}

.dataviews-bulk-actions-toolbar-wrapper {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/view-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ export default function ViewGrid< Item extends AnyItem >( {
<>
{ hasData && (
<Grid
gap={ 6 }
gap={ 8 }
columns={ 2 }
alignment="top"
className="dataviews-view-grid"
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/page-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
.edit-site-patterns__section-header {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we need to add a transition (and reduce-motion) here as well.

931ee9d04537465594b70c3cbbc73959.mp4

border-bottom: 1px solid #f0f0f0;
min-height: 72px;
padding: $grid-unit-20 $grid-unit-40;
padding: $grid-unit-30 $grid-unit-60;
position: sticky;
top: 0;
z-index: 2;
Expand Down
14 changes: 12 additions & 2 deletions packages/edit-site/src/components/page/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@
color: $gray-800;
background: $white;
height: 100%;
container: edit-site-page / inline-size; /* stylelint-disable */
Copy link
Contributor

Choose a reason for hiding this comment

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

The container queries are in the dataviews package and the container is outside, this is probably the only thing that I'd change, I'd move this to the root element of the dataviews probably.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We need the container declaration on .edit-site-page so that the page header dimensions can adapt.

I suppose we could have another container declaration on .dataviews-wrapper, but I'm not sure it's worth it? 🤔

Copy link
Contributor

@youknowriad youknowriad May 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I'm thinking we should only have in dataviews-wrapper no? The idea is to make these container styles work regardless of where we use the DataViews component. Isn't that possible?

Copy link
Contributor

Choose a reason for hiding this comment

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

I guess the page-header is outside of the dataviews component. So yeah, maybe two containers.

Copy link
Contributor

Choose a reason for hiding this comment

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

One way to check this is to test the dataviews in storybook and see if the spacing is correct there.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh good point. Yes we'll probably need two containers.

transition: width ease-out 0.2s;
@include reduce-motion("transition");
}

.edit-site-page-header {
padding: $grid-unit-20 $grid-unit-40;
min-height: $grid-unit * 9;
padding: $grid-unit-20 $grid-unit-60;
border-bottom: 1px solid $gray-100;
background: $white;
position: sticky;
top: 0;
z-index: z-index(".edit-site-page-header");
transition: padding ease-out 0.2s;
@include reduce-motion("transition");
.components-text {
color: $gray-800;
}
Expand All @@ -24,6 +28,12 @@
}
}

@container (max-width: 430px) {
.edit-site-page-header {
padding: $grid-unit-20 $grid-unit-30;
}
}

.edit-site-page-content {
height: 100%;
display: flex;
Expand Down
Loading