Update Transaction Details → HorizontalList label styles to uppercase #7126

Jinksi · 2023-09-05T05:39:45Z

Project thread: pdjTHR-2PC-p2

Warning
This PR is not behind a feature flag

Changes proposed in this Pull Request

This PR updates the styling of the HorizontalList labels to match the latest design. Note: this component is only used on the Transaction Details screen.

This PR

Design

Before (develop)

Testing instructions

Navigate to Payments → Transactions and click on a transaction to view the Transaction Details screen.
Check that the styles match the design.

Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
Covered with tests (or have a good reason not to test in description ☝️) Not required
Tested on mobile (or does not apply)

Post merge

Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
Add or update critical flows and testing instructions for critical flows, if applicable.
Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

e.g. text & ClickTooltip

botwoo · 2023-09-05T05:47:43Z

Test the build

Option 1. Jetpack Beta

Install and activate Jetpack Beta.
Use this build by searching for PR number 7126 or branch name update/horizontal-list-label-style-uppercase in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

Build info:

Latest commit: 6642a42
Build time: 2023-09-06 02:51:56 UTC

Note: the build is updated when a new commit is pushed to this PR.

github-actions · 2023-09-05T05:50:35Z

Size Change: +22 B (0%)

Total Size: 1.4 MB

Filename	Size	Change
`release/woocommerce-payments/dist/index-rtl.css`	35.6 kB	+11 B (0%)
`release/woocommerce-payments/dist/index.css`	35.6 kB	+11 B (0%)

ℹ️ View Unchanged

Filename	Size
`release/woocommerce-payments/assets/css/admin.css`	1.03 kB
`release/woocommerce-payments/assets/css/success.css`	158 B
`release/woocommerce-payments/dist/blocks-checkout-rtl.css`	1.51 kB
`release/woocommerce-payments/dist/blocks-checkout.css`	1.51 kB
`release/woocommerce-payments/dist/blocks-checkout.js`	73.5 kB
`release/woocommerce-payments/dist/checkout-rtl.css`	440 B
`release/woocommerce-payments/dist/checkout.css`	441 B
`release/woocommerce-payments/dist/checkout.js`	28.5 kB
`release/woocommerce-payments/dist/index.js`	276 kB
`release/woocommerce-payments/dist/multi-currency-analytics.js`	1.05 kB
`release/woocommerce-payments/dist/multi-currency-rtl.css`	2.87 kB
`release/woocommerce-payments/dist/multi-currency-switcher-block.js`	59.6 kB
`release/woocommerce-payments/dist/multi-currency.css`	2.87 kB
`release/woocommerce-payments/dist/multi-currency.js`	54.2 kB
`release/woocommerce-payments/dist/order-rtl.css`	741 B
`release/woocommerce-payments/dist/order.css`	743 B
`release/woocommerce-payments/dist/order.js`	40.3 kB
`release/woocommerce-payments/dist/payment-gateways-rtl.css`	686 B
`release/woocommerce-payments/dist/payment-gateways.css`	688 B
`release/woocommerce-payments/dist/payment-gateways.js`	37.8 kB
`release/woocommerce-payments/dist/payment-request-rtl.css`	146 B
`release/woocommerce-payments/dist/payment-request.css`	146 B
`release/woocommerce-payments/dist/payment-request.js`	11.6 kB
`release/woocommerce-payments/dist/product-details.js`	789 B
`release/woocommerce-payments/dist/settings-rtl.css`	8.95 kB
`release/woocommerce-payments/dist/settings.css`	8.96 kB
`release/woocommerce-payments/dist/settings.js`	231 kB
`release/woocommerce-payments/dist/subscription-edit-page.js`	669 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css`	519 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.css`	519 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.js`	20.2 kB
`release/woocommerce-payments/dist/subscription-product-onboarding-toast.js`	693 B
`release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css`	117 B
`release/woocommerce-payments/dist/subscriptions-empty-state.css`	117 B
`release/woocommerce-payments/dist/subscriptions-empty-state.js`	19.3 kB
`release/woocommerce-payments/dist/tos-rtl.css`	230 B
`release/woocommerce-payments/dist/tos.css`	231 B
`release/woocommerce-payments/dist/tos.js`	21.8 kB
`release/woocommerce-payments/dist/upe_checkout-rtl.css`	440 B
`release/woocommerce-payments/dist/upe_checkout.css`	441 B
`release/woocommerce-payments/dist/upe_checkout.js`	34 kB
`release/woocommerce-payments/dist/upe_split_checkout-rtl.css`	440 B
`release/woocommerce-payments/dist/upe_split_checkout.css`	441 B
`release/woocommerce-payments/dist/upe_split_checkout.js`	34.6 kB
`release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js`	36.4 kB
`release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css`	1.51 kB
`release/woocommerce-payments/dist/upe-blocks-checkout.css`	1.51 kB
`release/woocommerce-payments/dist/upe-blocks-checkout.js`	39.5 kB
`release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css`	1.51 kB
`release/woocommerce-payments/dist/upe-split-blocks-checkout.css`	1.51 kB
`release/woocommerce-payments/dist/upe-split-blocks-checkout.js`	41 kB
`release/woocommerce-payments/dist/woopay-express-button-rtl.css`	146 B
`release/woocommerce-payments/dist/woopay-express-button.css`	146 B
`release/woocommerce-payments/dist/woopay-express-button.js`	50.5 kB
`release/woocommerce-payments/dist/woopay-rtl.css`	3.85 kB
`release/woocommerce-payments/dist/woopay.css`	3.85 kB
`release/woocommerce-payments/dist/woopay.js`	71.6 kB
`release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css`	633 B
`release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js`	720 B
`release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js`	2.43 kB
`release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js`	1.01 kB
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js`	522 B
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js`	581 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js`	160 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css`	2.32 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js`	13.8 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css`	2.32 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css`	1.2 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css`	403 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css`	3.56 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css`	299 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css`	742 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css`	572 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css`	411 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js`	9.55 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js`	6.8 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js`	3.83 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js`	2.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js`	22.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js`	11.6 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js`	1.29 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js`	502 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js`	355 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js`	429 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js`	1.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js`	781 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js`	1.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js`	1.27 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css`	392 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js`	3.06 kB

_{compressed-size-action}

brucealdridge

Tested and confirmed against mockup, LGTM.

Jinksi added 3 commits September 5, 2023 14:32

Update list item title styles to uppercase, match design

2c2ca63

Fix vertical alignment for list items with multiple content elements

312cd18

e.g. text & ClickTooltip

Add empty changelog entry

e97a210

Jinksi marked this pull request as ready for review September 5, 2023 05:42

Jinksi requested a review from a team September 5, 2023 05:42

Jinksi changed the title ~~Update list item title styles to uppercase, match design~~ Update Transaction Details → HorizontalList label styles to uppercase Sep 5, 2023

This was referenced Sep 5, 2023

Update Transaction Details breakdown: rename labels and add fee breakdown tooltip when disputed #7118

Merged

Add Horizontal list of dispute details to the transaction page #7077

Merged

Jinksi added the pr: needs review label Sep 5, 2023

brucealdridge approved these changes Sep 6, 2023

View reviewed changes

brucealdridge added pr: ready to merge and removed pr: needs review labels Sep 6, 2023

Merge branch 'develop' into update/horizontal-list-label-style-uppercase

6642a42

Jinksi added this pull request to the merge queue Sep 6, 2023

Merged via the queue into develop with commit fc451c5 Sep 6, 2023

Jinksi deleted the update/horizontal-list-label-style-uppercase branch September 6, 2023 04:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Transaction Details → HorizontalList label styles to uppercase #7126

Update Transaction Details → HorizontalList label styles to uppercase #7126

Jinksi commented Sep 5, 2023 •

edited

Loading

botwoo commented Sep 5, 2023 •

edited

Loading

github-actions bot commented Sep 5, 2023 •

edited

Loading

brucealdridge left a comment

Update Transaction Details → HorizontalList label styles to uppercase #7126

Update Transaction Details → HorizontalList label styles to uppercase #7126

Conversation

Jinksi commented Sep 5, 2023 • edited Loading

Changes proposed in this Pull Request

Testing instructions

botwoo commented Sep 5, 2023 • edited Loading

Test the build

Option 1. Jetpack Beta

Option 2. Jurassic Ninja - available for logged-in A12s

github-actions bot commented Sep 5, 2023 • edited Loading

brucealdridge left a comment

Choose a reason for hiding this comment

Jinksi commented Sep 5, 2023 •

edited

Loading

botwoo commented Sep 5, 2023 •

edited

Loading

github-actions bot commented Sep 5, 2023 •

edited

Loading