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 18 commits into
base: trunk
Choose a base branch
from
+26 −1
Open

DataViews grid layout: Fix long pattern names display #65200

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 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
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
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataviews-item-actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ function CompactItemActions< Item >( {
<DropdownMenuV2
trigger={
<Button
size="compact"
size="small"
Copy link
Contributor

Choose a reason for hiding this comment

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

@jameskoster Is the icon size change (from 32px to 24px) something to expect in this PR? It should affect all layouts.

Copy link
Contributor

Choose a reason for hiding this comment

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

Good spot, no this should only affect the grid layout.

Copy link
Member Author

Choose a reason for hiding this comment

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

Should i change it with styles to only impact on grid view?

icon={ moreVertical }
label={ __( 'Actions' ) }
accessibleWhenDisabled
Expand Down
6 changes: 5 additions & 1 deletion 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,8 +95,12 @@ function GridItem< Item >( {
<HStack
justify="space-between"
className="dataviews-view-grid__title-actions"
alignment="top"
>
<HStack className="dataviews-view-grid__primary-field">
<HStack
className="dataviews-view-grid__primary-field"
alignment="top"
>
{ renderedPrimaryField }
</HStack>
<ItemActions item={ item } actions={ actions } isCompact />
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -16,7 +16,7 @@
}

.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
15 changes: 15 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 @@ -104,6 +104,21 @@
}
}

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

.edit-site-patterns__pattern-lock-icon {
align-self: start;
}
}

Copy link
Contributor

Choose a reason for hiding this comment

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

This may be a personal preference, but you may find the following writing style easier to read:

.edit-site-patterns__pattern-title {
  .dataviews-view-grid & {
  }
}

.edit-site-patterns__pattern-lock-icon {
  .dataviews-view-grid & {
  }
}

It's similar to the writing style here:

gutenberg/packages/edit-site/src/components/page-templates/style.scss

Lines 26 to 38 in b202059

.dataviews-view-list & {
.block-editor-block-preview__container {
height: 120px;
}
}
.dataviews-view-grid & {
.block-editor-block-preview__container {
height: 100%;
}
}
.dataviews-view-table & {

.edit-site-page-patterns-dataviews {
.dataviews-view-grid__badge-fields {
.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
Expand Down
Loading