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

Limit CSS styles to WooCommerce Block icons only #5363

Merged
merged 3 commits into from
Dec 10, 2021

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Dec 10, 2021

Fixes #5355

Notes

At the moment, when selecting a block within the List View (Mac: control + option + o), the icon remains purple (#7F54B3). With the blue background color (#007CBA), the contrast ratio of the icon drops to 1.2:1 (see https://webaim.org/resources/contrastchecker/ or https://color.adobe.com/create/color-contrast-analyzer). This PR is doing the following things:

  1. Remove the hard-coded foreground color.
  2. Add a CSS class to all icons.
  3. Add CSS styles for the unselected and the selected state.

Initially, I thought about adding the CSS class to the <Icon> component itself rather than the individual elements. However, we're also using icons without a defined color, such as the eye icon within the ViewSwitcherComponent. Therefore, I decided to add the CSS classes to the affected icons itself.

Testing

  1. Create a test page.
  2. Add all blocks of this plugin to the test page.
  3. Open the List View (Mac: control + option + o).
  4. Click on each block.
  5. Verify that, before selecting a block, the icon color is purple, and the text color is black.
  6. Verify that, when selecting a block, both the icon color and the text color is white.

User Facing Testing

  • Same as above

@nielslange nielslange added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. focus: global styles Issues that involve styles/css/layout structure. focus: accessibility The issue/PR is related to accessibility. labels Dec 10, 2021
@nielslange nielslange requested a review from Aljullu December 10, 2021 13:52
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Looks good, thanks for following-up from the previous PR @nielslange! I left a couple of suggestions to simplify the CSS, but pre-approving. 🚢

assets/css/editor.scss Outdated Show resolved Hide resolved
assets/css/editor.scss Outdated Show resolved Hide resolved
@github-actions
Copy link
Contributor

Size Change: -30 B (0%)

Total Size: 817 kB

Filename Size Change
build/active-filters.js 7.05 kB -11 B (0%)
build/all-products.js 34.4 kB +16 B (0%)
build/all-reviews.js 8.35 kB -8 B (0%)
build/attribute-filter.js 12.7 kB -8 B (0%)
build/cart.js 44 kB -2 B (0%)
build/checkout.js 47 kB +6 B (0%)
build/featured-product.js 9.9 kB -2 B (0%)
build/handpicked-products.js 7.32 kB -4 B (0%)
build/mini-cart-contents.js 3.46 kB +5 B (0%)
build/mini-cart.js 6.65 kB -1 B (0%)
build/price-filter.js 8.6 kB -8 B (0%)
build/product-best-sellers.js 7.51 kB -3 B (0%)
build/product-categories.js 3.47 kB -1 B (0%)
build/product-category.js 8.35 kB -4 B (0%)
build/product-new.js 7.66 kB -3 B (0%)
build/product-on-sale.js 8.05 kB -1 B (0%)
build/product-search.js 2.46 kB -2 B (0%)
build/product-tag.js 7.76 kB -8 B (0%)
build/product-top-rated.js 7.63 kB -4 B (0%)
build/products-by-attribute.js 8.48 kB -2 B (0%)
build/reviews-by-category.js 11.8 kB -8 B (0%)
build/reviews-by-product.js 12.9 kB -8 B (0%)
build/single-product-frontend.js 22.1 kB +13 B (0%)
build/single-product.js 10.4 kB -7 B (0%)
build/stock-filter.js 6.82 kB -11 B (0%)
build/wc-blocks-editor-style-rtl.css 4.32 kB +13 B (0%)
build/wc-blocks-editor-style.css 4.32 kB +13 B (0%)
build/wc-blocks.js 2.96 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.22 kB
build/all-products-frontend.js 18.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.86 kB
build/atomic-block-components/add-to-cart.js 6.42 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 848 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 552 B
build/atomic-block-components/rating.js 553 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 584 B
build/atomic-block-components/stock-indicator.js 586 B
build/atomic-block-components/summary-frontend.js 872 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list-frontend.js 458 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.3 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.88 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.12 kB
build/cart-blocks/order-summary-frontend.js 8.98 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.4 kB
build/checkout-blocks/actions-frontend.js 1.45 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.24 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/contact-information-frontend.js 2.93 kB
build/checkout-blocks/express-payment-frontend.js 5.17 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.46 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/shipping-methods-frontend.js 4.8 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.5 kB
build/featured-category.js 8.55 kB
build/legacy-template.js 2.08 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-frontend.js 1.76 kB
build/price-filter-frontend.js 12.4 kB
build/price-format.js 1.18 kB
build/reviews-frontend.js 7.25 kB
build/stock-filter-frontend.js 6.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 18.9 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.82 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.5 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.6 kB

compressed-size-action

@nielslange nielslange merged commit 527ae50 into trunk Dec 10, 2021
@nielslange nielslange deleted the fix/5355-limit-CSS-styles branch December 10, 2021 14:32
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Limit CSS styles to WooCommerce Block icons only

* Update assets/css/editor.scss

Co-authored-by: Albert Juhé Lluveras <[email protected]>

Co-authored-by: Albert Juhé Lluveras <[email protected]>
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Limit CSS styles to WooCommerce Block icons only

* Update assets/css/editor.scss

Co-authored-by: Albert Juhé Lluveras <[email protected]>

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: accessibility The issue/PR is related to accessibility. focus: global styles Issues that involve styles/css/layout structure. skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Limit CSS styles to WooCommerce Block icons only
2 participants