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

DataViews grid layout: Fix long pattern names display #65200

Open
wants to merge 19 commits into
base: trunk
Choose a base branch
from
Open

DataViews grid layout: Fix long pattern names display #65200

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3c617c6
Fix pattern title text overflow
akasunil Sep 10, 2024
ac30e33
Apply text overflow on title for grid view only
akasunil Sep 11, 2024
456e1c2
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Sep 24, 2024
1dd9af3
Update grid view design for grid view
akasunil Sep 25, 2024
b202059
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Sep 25, 2024
82f93d0
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Oct 17, 2024
3dcb305
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Oct 19, 2024
daa89f5
Fix my pattern titles text overflow issue
akasunil Oct 19, 2024
9aa7ed3
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Oct 21, 2024
4836360
Rewrite styles
akasunil Oct 21, 2024
b718624
Resolved conflict and sync with trunk
akasunil Nov 13, 2024
dfd3599
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Nov 14, 2024
1f10f86
Remove unneccessory changes
akasunil Nov 14, 2024
41c6d75
Fix button outline issue and remove component prefix in styles
akasunil Nov 14, 2024
3aabeb8
Resolved conflict and sync with trunk
akasunil Nov 19, 2024
d91af64
Remove static styles for action button on grid view
akasunil Nov 19, 2024
fd242a5
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/patte…
akasunil Nov 20, 2024
1d3d8b0
Remove unneccessory changes
akasunil Nov 20, 2024
cfc5a3d
Resolved conflict and sync with trunk
akasunil Dec 19, 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
1 change: 1 addition & 0 deletions packages/dataviews/src/dataviews-layouts/grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ function GridItem< Item >( {
<HStack
justify="space-between"
className="dataviews-view-grid__title-actions"
alignment="top"
>
<HStack className="dataviews-view-grid__primary-field">
{ renderedPrimaryField }
Expand Down
4 changes: 2 additions & 2 deletions packages/dataviews/src/dataviews-layouts/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
position: relative;

.dataviews-view-grid__title-actions {
padding: $grid-unit-10 0 $grid-unit-05;
padding: $grid-unit-10 0 $grid-unit-10;
}

.dataviews-view-grid__primary-field {
min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
}

&.is-selected {
Expand Down
1 change: 1 addition & 0 deletions packages/dataviews/src/dataviews-layouts/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@

.dataviews-view-table__actions-column {
width: 1%;
vertical-align: middle;
}

&:has(tr.is-selected) {
Expand Down
27 changes: 27 additions & 0 deletions 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 @@ -43,6 +43,10 @@

.edit-site-patterns__pattern-lock-icon {
min-width: min-content;

.dataviews-view-grid & {
align-self: start;
}
}

.edit-site-patterns__section-header {
Expand Down Expand Up @@ -102,6 +106,29 @@
.edit-site-patterns__pattern-lock-icon {
fill: currentcolor;
}

.dataviews-view-grid & {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
padding-top: 3px;
align-self: start;

button.components-button.is-link {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}
}

.components-button.dataviews-all-actions-button.has-icon:not(.has-text) {
.dataviews-view-grid & {
min-width: 24px;
height: 24px;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

It is better to avoid using selectors with component prefixes whenever possible. Additionally, the focus outline is not square:

image

Perhaps it would be better to add a prop to the CompactItemActions component to change the size only when in grid layout. I'll consider addressing this in a separate PR.

}

.edit-site-page-patterns-dataviews {
Expand Down
Loading