Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add default style to link-button mixin #7340

Merged
merged 2 commits into from
Oct 10, 2022

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Oct 7, 2022

It was identified that we currently have 3 different behaviors for links used in the application. In issue #1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.

Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).

  • Change link-button mixin to make it attend the expected default style for links
  • Replace text-button with link-button mixin in FilterResetButton component

Accessibility

Screenshots

Before After
CleanShot 2022-10-07 at 16 02 20@2x CleanShot 2022-10-07 at 16 04 34@2x

User Facing Testing

  1. Create a regular page (Pages > Add New) and add the All Product block to it;
  2. Add the Active Filters block;
  3. Add the Filter By Attribute block;
  4. Select an attribute from the Filter By Attribute block and apply it;
  5. When the page reloads, check if the "Clear All" button (in the Active Filters block) and the "Reset" button (in Filter By Attribute block) have the following properties:

Font size: 14px
Font weight: normal
Text decoration: underlined

  1. Hover the mouse over the "Clear All" button and the "Reset" button and make sure the text decoration is changed to none (no underline) while the other properties remain the same:

Font size: 14px
Font weight: normal
Text decoration: none

Changelog

Improve visual consistency between block links

It was identified that we currently have 3 different behaviors for links used in the application. In issue #1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.

Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).

* Change link-button mixin to make it attend the expected default style for links

* Replace text-button with link-button mixin in FilterResetButton component
@rubikuserbot rubikuserbot requested a review from a team October 7, 2022 19:17
@github-actions
Copy link
Contributor

github-actions bot commented Oct 7, 2022

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7340.zip

@thealexandrelara thealexandrelara linked an issue Oct 7, 2022 that may be closed by this pull request
@github-actions
Copy link
Contributor

github-actions bot commented Oct 7, 2022

Size Change: +197 B (0%)

Total Size: 959 kB

Filename Size Change
build/wc-blocks-style-rtl.css 24.2 kB +98 B (0%)
build/wc-blocks-style.css 24.1 kB +99 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.73 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 26.5 kB
build/all-products.js 33.6 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper-frontend.js 7.03 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.64 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.24 kB
build/cart-blocks/cart-express-payment-frontend.js 786 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.31 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 785 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.61 kB
build/cart-blocks/order-summary-shipping-frontend.js 430 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 50 kB
build/cart.js 46.2 kB
build/checkout-blocks/actions-frontend.js 1.79 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.98 kB
build/checkout-blocks/billing-address-frontend.js 948 B
build/checkout-blocks/contact-information-frontend.js 3.03 kB
build/checkout-blocks/express-payment-frontend.js 1.16 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 52.1 kB
build/checkout.js 40 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 10.6 kB
build/filter-wrapper.js 1.86 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.28 kB
build/legacy-template.js 2.83 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 367 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.97 kB
build/mini-cart-contents-block/items-frontend.js 236 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.8 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.57 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 6.95 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 227 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart-frontend.js 1.25 kB
build/product-add-to-cart.js 6.47 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 303 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 881 B
build/product-category-list.js 503 B
build/product-category.js 8.61 kB
build/product-image-frontend.js 1.92 kB
build/product-image.js 1.61 kB
build/product-new.js 7.63 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 648 B
build/product-rating-frontend.js 1.18 kB
build/product-rating.js 774 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 815 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 379 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 996 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 876 B
build/product-tag-list.js 497 B
build/product-tag.js 7.99 kB
build/product-title-frontend.js 1.34 kB
build/product-title.js 937 B
build/product-top-rated.js 7.87 kB
build/products-by-attribute.js 8.53 kB
build/rating-filter-frontend.js 6.74 kB
build/rating-filter.js 5.65 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7 kB
build/single-product-frontend.js 29.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.73 kB
build/stock-filter-wrapper-frontend.js 5.99 kB
build/stock-filter.js 6.68 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.21 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/wc-blocks-data.js 15.9 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

Great PR write-up and testing instructions @thealexandrelara ! This PR LGTM! 🚢

@github-actions github-actions bot added this to the 8.7.0 milestone Oct 10, 2022
@tjcafferkey tjcafferkey added block-type: filter blocks Issues related to all of the filter blocks. type: enhancement The issue is a request for an enhancement. labels Oct 10, 2022
@tjcafferkey
Copy link
Contributor

@thealexandrelara I have also just added a few labels to this PR, and assigned you to it for good practice. Other than that, great job!

@tjcafferkey
Copy link
Contributor

I can also see that the failing tests are related to the Mini Cart, these are being looked into separately so this PR is safe to be merged I think 😃

@wavvves wavvves merged commit 69a6bfd into trunk Oct 10, 2022
@wavvves wavvves deleted the style/consistent-underlined-links-for-filter-blocks branch October 10, 2022 14:39
wavvves added a commit that referenced this pull request Oct 10, 2022
@Aljullu
Copy link
Contributor

Aljullu commented Oct 10, 2022

Nice improvement and congrats on your first PR, @thealexandrelara!

@thealexandrelara @tjcafferkey I have just one question (sorry if that was discussed somewhere else and I missed it), but is it expected that the font size changes are applied to all consumers of link-button()? Ie, I see it changes the size of the change address button in the Cart block:

Before After
imatge imatge

(I know it's hard to see 😅 but (change address) is slightly smaller now)

I wonder if font-size should be left out of this mixin. We might want to have buttons that are displayed as links from different sizes depending on the context.

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Oct 10, 2022

Good catch here @Aljullu , you might be right. @thealexandrelara how do you feel about reopening this and using the SCSS extend functionality instead for a new mixin to get the desired outcome specifically for the filter links?

cc'ing @wavvves incase you need to revert for the release.

@tjcafferkey tjcafferkey restored the style/consistent-underlined-links-for-filter-blocks branch October 10, 2022 15:27
@thealexandrelara
Copy link
Contributor Author

Nice improvement and congrats on your first PR, @thealexandrelara!

@thealexandrelara @tjcafferkey I have just one question (sorry if that was discussed somewhere else and I missed it), but is it expected that the font size changes are applied to all consumers of link-button()? Ie, I see it changes the size of the change address button in the Cart block:

Before After
imatge imatge
(I know it's hard to see 😅 but (change address) is slightly smaller now)

I wonder if font-size should be left out of this mixin. We might want to have buttons that are displayed as links from different sizes depending on the context.

Nice catch @Aljullu, I didn't release it was being used in a scope other than filter blocks 😓

Good catch here @Aljullu , you might be right. @thealexandrelara how do you feel about reopening this and using the SCSS extend functionality instead for a new mixin to get the desired outcome specifically for the filter links?

That's alright I can reopen this one. Any suggestion about the new mixin name? Maybe filter-link-button?

@tjcafferkey
Copy link
Contributor

Any suggestion about the new mixin name? Maybe filter-link-button?

I think that makes sense. Might need to also coordinate with @wavvves to ensure this does go into the release but that shouldn't be a problem 😃

@wavvves
Copy link
Contributor

wavvves commented Oct 10, 2022

@tjcafferkey I reopened and added it to the milestone, and I'll cherrypick it tomorrow along with the other task 👍🏼

@thealexandrelara
Copy link
Contributor Author

@wavvves I just opened a new PR (#7357 ) to address this issue, the idea was to revert the changes made on this one and also make the link button styles consistency in filter blocks

danieldudzic pushed a commit that referenced this pull request Oct 11, 2022
It was identified that we currently have 3 different behaviors for links used in the application. In issue #1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.

Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).

* Change link-button mixin to make it attend the expected default style for links

* Replace text-button with link-button mixin in FilterResetButton component
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
It was identified that we currently have 3 different behaviors for links used in the application. In issue woocommerce#1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.

Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).

* Change link-button mixin to make it attend the expected default style for links

* Replace text-button with link-button mixin in FilterResetButton component
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: filter blocks Issues related to all of the filter blocks. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Links for all filter blocks (reset and clear all)
4 participants