From 2b1dd08040fe3b6c31fe663cdf7d4983244669d4 Mon Sep 17 00:00:00 2001 From: Jacob Sewell Date: Sat, 22 Jan 2022 11:48:01 -0600 Subject: [PATCH] Fix/7174 dismiss button alignment (https://github.com/woocommerce/woocommerce-admin/pull/8168) * Combine all the .woocommerce-task-dashboard__container .woocommerce-task-card rules in one block. * Move the .woocommerce-task-card__section-controls text-align center rule up in specificity so it overrides the rule in experimental-list. Do we need the experimental-list package still? * Changelog for 7174/8168. * Expand button to container width and center text rather than centering the entire button in the ellipsis menu. * Move ellipsis menu button style to _global so it applies, um, globally. * Update changelog description for 7174/8186. * Move ellipsis-menu popover button style to package from _global. * Add components package changelog for Dismiss button in Unreleased section. --- .../fix-7174-dismiss-button-alignment | 4 ++++ .../woocommerce-admin/client/tasks/tasks.scss | 18 ++++++------------ .../packages/components/CHANGELOG.md | 1 + .../components/src/ellipsis-menu/style.scss | 5 +++++ 4 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 plugins/woocommerce-admin/changelogs/fix-7174-dismiss-button-alignment diff --git a/plugins/woocommerce-admin/changelogs/fix-7174-dismiss-button-alignment b/plugins/woocommerce-admin/changelogs/fix-7174-dismiss-button-alignment new file mode 100644 index 00000000000..4209a502dea --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/fix-7174-dismiss-button-alignment @@ -0,0 +1,4 @@ +Significance: patch +Type: Tweak + +Grow and center buttons in all WooCommerce ellipsis menu popover containers. #8168 diff --git a/plugins/woocommerce-admin/client/tasks/tasks.scss b/plugins/woocommerce-admin/client/tasks/tasks.scss index 190ca881739..46e8c764fcf 100644 --- a/plugins/woocommerce-admin/client/tasks/tasks.scss +++ b/plugins/woocommerce-admin/client/tasks/tasks.scss @@ -12,15 +12,7 @@ margin-top: 8px; } } - } - .woocommerce-task-payments { - width: 680px; - margin: auto; - max-width: 100%; - } - - .woocommerce-task-card { .wooocommerce-task-card__header { display: flex; } @@ -36,6 +28,12 @@ min-width: unset; } } + + .woocommerce-task-payments { + width: 680px; + margin: auto; + max-width: 100%; + } } .woocommerce-task__additional-info, @@ -145,10 +143,6 @@ } } -.woocommerce-task-card__section-controls { - text-align: center; -} - .woocommerce-task-dashboard__container { .woocommerce-task-card.is-loading { .woocommerce-card__body { diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 0ac2992c566..108e0c48067 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -7,6 +7,7 @@ - Add `labelPositionToLeft` prop to the `OrderStatus` component. #8121 - Remove dev dependency `@woocommerce/wc-admin-settings`. #8057 - Fix incorrect screen reader text generated for data points on charts table. #8181 +- Grow and center buttons in all WooCommerce ellipsis menu popover containers. #8168 # 8.1.1 diff --git a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss index 3b512807a77..fb195392144 100644 --- a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss @@ -28,6 +28,11 @@ .woocommerce-ellipsis-menu__content { width: 100%; + + .components-button { + justify-content: center; + width: 100%; + } } .woocommerce-ellipsis-menu__title,