From 50b113d7d7fb68985146f0dbc92779e8b8f65a4b Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 19 Jul 2022 16:02:56 +0200 Subject: [PATCH 1/5] Make Actions column use visible text. --- .../src/components/list/actions/index.js | 10 ++++++---- .../edit-site/src/components/list/style.scss | 20 +++++++++---------- .../edit-site/src/components/list/table.js | 7 ++----- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js index 74cdb5bc65882..703e659c90cfc 100644 --- a/packages/edit-site/src/components/list/actions/index.js +++ b/packages/edit-site/src/components/list/actions/index.js @@ -5,7 +5,6 @@ import { useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; -import { moreVertical } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -26,7 +25,7 @@ export default function Actions( { template } ) { const isRevertable = isTemplateRevertable( template ); if ( ! isRemovable && ! isRevertable ) { - return null; + return __( 'No actions' ); } async function revertAndSaveTemplate() { @@ -53,9 +52,12 @@ export default function Actions( { template } ) { return ( { ( { onClose } ) => ( diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index 8682b9f79181f..f579a6763eb59 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -63,10 +63,6 @@ max-width: 960px; tr { - display: flex; - align-items: center; - padding: $grid-unit-20; - box-sizing: border-box; border-top: $border-width solid $gray-100; margin: 0; @@ -74,14 +70,17 @@ border-top: 0; } - @include break-medium() { - padding: $grid-unit-30 $grid-unit-40; + th, + td { + padding: $grid-unit-20; + @include break-medium() { + padding: $grid-unit-30 $grid-unit-40; + } } // Template. .edit-site-list-table-column:nth-child(1) { - width: calc(60% - 18px); - padding-right: $grid-unit-30; + width: 58%; a { display: inline-block; @@ -93,14 +92,13 @@ // Added by. .edit-site-list-table-column:nth-child(2) { - width: calc(40% - 18px); + width: 30%; word-break: break-word; } // Actions. .edit-site-list-table-column:nth-child(3) { - min-width: $button-size; - flex-shrink: 0; + width: 12%; } } diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index 358807dc2e076..0b10ce35c05d5 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -4,10 +4,7 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; import { __, sprintf } from '@wordpress/i18n'; -import { - VisuallyHidden, - __experimentalHeading as Heading, -} from '@wordpress/components'; +import { __experimentalHeading as Heading } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; /** @@ -85,7 +82,7 @@ export default function Table( { templateType } ) { className="edit-site-list-table-column" role="columnheader" > - { __( 'Actions' ) } + { __( 'Manage' ) } From 141f5a760dd9a7dc6bf677c4a58e39cccf2a2573 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Jul 2022 10:29:57 +0200 Subject: [PATCH 2/5] Change button to tertiary with icon. --- packages/edit-site/src/components/list/actions/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js index 703e659c90cfc..f6e020413fe22 100644 --- a/packages/edit-site/src/components/list/actions/index.js +++ b/packages/edit-site/src/components/list/actions/index.js @@ -5,6 +5,7 @@ import { useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; +import { chevronDown } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -52,11 +53,12 @@ export default function Actions( { template } ) { return ( { ( { onClose } ) => ( From 358df8296a742d1fd7675b9e5e621555ba5e29e1 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Jul 2022 10:55:39 +0200 Subject: [PATCH 3/5] Add toggle button icon and visually hidden text. --- .../src/components/list/actions/index.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js index f6e020413fe22..1b0a873424596 100644 --- a/packages/edit-site/src/components/list/actions/index.js +++ b/packages/edit-site/src/components/list/actions/index.js @@ -4,8 +4,13 @@ import { useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; -import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; -import { chevronDown } from '@wordpress/icons'; +import { + DropdownMenu, + MenuGroup, + MenuItem, + VisuallyHidden, +} from '@wordpress/components'; +import { Icon, chevronDown, reset } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -26,7 +31,14 @@ export default function Actions( { template } ) { const isRevertable = isTemplateRevertable( template ); if ( ! isRemovable && ! isRevertable ) { - return __( 'No actions' ); + return ( + <> + + + { __( 'No actions available' ) } + + + ); } async function revertAndSaveTemplate() { From c25c0bf1cdd10a0a58e5d3cbe8cf529d92081ffe Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 13 Apr 2023 10:49:22 +0200 Subject: [PATCH 4/5] Restore table borders. --- .../edit-site/src/components/list/style.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index f579a6763eb59..687927a680922 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -63,21 +63,22 @@ max-width: 960px; tr { - border-top: $border-width solid $gray-100; - margin: 0; - - &:first-child { - border-top: 0; - } - th, td { + border-top: $border-width solid $gray-100; padding: $grid-unit-20; @include break-medium() { padding: $grid-unit-30 $grid-unit-40; } } + &:first-child { + th, + td { + border-top: 0; + } + } + // Template. .edit-site-list-table-column:nth-child(1) { width: 58%; @@ -107,10 +108,10 @@ font-weight: 600; text-align: left; color: $gray-900; - border-top: none; - border-bottom: $border-width solid $gray-300; th { + border-top: 0; + border-bottom: $border-width solid $gray-300; font-weight: inherit; } } From 2c2e739e732048dd5575dabf8a9ed637063b6827 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 14 Apr 2023 09:45:58 +0200 Subject: [PATCH 5/5] Use vertical ellipsis icon. --- packages/edit-site/src/components/list/actions/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js index 1b0a873424596..66f9258f4030c 100644 --- a/packages/edit-site/src/components/list/actions/index.js +++ b/packages/edit-site/src/components/list/actions/index.js @@ -10,7 +10,7 @@ import { MenuItem, VisuallyHidden, } from '@wordpress/components'; -import { Icon, chevronDown, reset } from '@wordpress/icons'; +import { Icon, moreVertical, reset } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -65,12 +65,11 @@ export default function Actions( { template } ) { return ( { ( { onClose } ) => (