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

Move Chip and RemovableChip to components package #11223

Merged
merged 2 commits into from
Oct 18, 2023
Merged

Move Chip and RemovableChip to components package #11223

merged 2 commits into from
Oct 18, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Oct 12, 2023

What

This PR is based on #11214 (update/checkbox-component)
Move Chip and RemovableChip to components package and update instances where they're imported:

  • Active Filters
  • Cart/Checkout coupons area

Why

As more developers integrate their extensions with WooCommerce Blocks, the case for reusing components grows. This starts the ball rolling by creating a new package. Rather than recreating components developers can access wc.blocksComponents and get the ones we need.

Testing Instructions

  1. Create a coupon
  2. Add the Active Filters block to a page, add the Filter by Attribute block, the Filter by Stock block, and the Products (Beta) block too.
  3. Visit the page, apply some filters, ensure the chips show up correctly in the Active Filters block. Remove the filters by pressing the x on the chip.
image
  1. Visit the Cart block. Apply the coupon you created in step 1. Ensure the coupon shows correctly:
image
  1. Remove the coupon.
  2. Proceed to the Checkout block and re-apply the coupon, ensure it shows correctly and ensure it can be removed.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

N/A

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Make the Chip and RemovableChip components available in the @woocommerce/blocks-components package.

@opr opr added status: needs review type: enhancement The issue is a request for an enhancement. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. block: active filters Issues related to the Active Filters block. labels Oct 12, 2023
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team October 12, 2023 11:38
@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
active-filters-style.js wc-blocks-components ⚠️
cart-style.js wc-blocks-components ⚠️
checkout-style.js wc-blocks-components ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 522
  • Total errors: 2319

⚠️ ⚠️ This PR introduces new TS errors on 2 files:

packages/components/chip/chip.tsx

packages/components/chip/removable-chip.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2023

Size Change: +77.3 kB (+5%) 🔍

Total Size: 1.56 MB

Filename Size Change
build/7138-frontend.js 0 B -24.2 kB (removed) 🏆
build/active-filters-frontend.js 6.7 kB -331 B (-5%)
build/active-filters-rtl.css 1.68 kB -329 B (-16%) 👏
build/active-filters-wrapper-frontend.js 7.04 kB -353 B (-5%)
build/active-filters-wrapper-rtl.css 1.53 kB -332 B (-18%) 👏
build/active-filters-wrapper.css 1.53 kB -332 B (-18%) 👏
build/active-filters.css 1.68 kB -328 B (-16%) 👏
build/active-filters.js 6.16 kB -343 B (-5%)
build/blocks-components.js 1.96 kB +671 B (+52%) 🆘
build/cart-blocks/cart-order-summary-frontend.js 410 B -3.09 kB (-88%) 🏆
build/cart-blocks/cart-order-summary-style.js 339 B -2 B (-1%)
build/cart-blocks/order-summary-coupon-form-frontend.js 869 B -3.01 kB (-78%) 🏆
build/cart-blocks/order-summary-discount-frontend.js 984 B -2.99 kB (-75%) 🏆
build/cart-blocks/order-summary-shipping-frontend.js 374 B -3.08 kB (-89%) 🏆
build/cart-frontend.js 29 kB +13 B (0%)
build/cart-rtl.css 9.62 kB -360 B (-4%)
build/cart.css 9.61 kB -352 B (-4%)
build/cart.js 39.5 kB -373 B (-1%)
build/checkout-blocks/billing-address-frontend.js 10.2 kB -163 B (-2%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 26.7 kB +22.7 kB (+573%) 🆘
build/checkout-blocks/order-summary-discount-frontend.js 26.8 kB +22.7 kB (+559%) 🆘
build/checkout-blocks/order-summary-frontend.js 26.4 kB +22.8 kB (+637%) 🆘
build/checkout-blocks/order-summary-shipping-frontend.js 26.4 kB +22.8 kB (+647%) 🆘
build/checkout-blocks/order-summary-style.js 340 B -1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 17.4 kB +9 B (0%)
build/checkout-blocks/shipping-address-frontend.js 10.2 kB -166 B (-2%)
build/checkout-blocks/shipping-methods-frontend.js 25.2 kB -29 B (0%)
build/checkout-frontend.js 30.5 kB -14 B (0%)
build/checkout-rtl.css 9.33 kB -370 B (-4%)
build/checkout.css 9.32 kB -375 B (-4%)
build/checkout.js 42.9 kB -378 B (-1%)
build/filter-wrapper-frontend.js 14.5 kB -2 B (0%)
build/packages-style-rtl.css 4.21 kB +342 B (+9%) 🔍
build/packages-style.css 4.21 kB +343 B (+9%) 🔍
build/wc-blocks-vendors.js 64.1 kB +1 B (0%)
build/4592-frontend.js 26.2 kB +26.2 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/1796-frontend.js 23.2 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.48 kB
build/add-to-cart-form-rtl.css 375 B
build/add-to-cart-form.css 373 B
build/all-products-frontend.js 9.88 kB
build/all-products-rtl.css 4.55 kB
build/all-products.css 4.55 kB
build/all-products.js 40 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 7.84 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21.2 kB
build/attribute-filter-wrapper-rtl.css 1.65 kB
build/attribute-filter-wrapper.css 1.65 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss-rtl.css 2.97 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss.css 2.97 kB
build/blocks-checkout.js 33.9 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.03 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 268 B
build/cart-blocks/cart-cross-sells-products-frontend.js 10.9 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.36 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 273 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 14.4 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-totals-frontend.js 290 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 367 B
build/cart-blocks/empty-cart-style.js 365 B
build/cart-blocks/filled-cart-frontend.js 605 B
build/cart-blocks/filled-cart-style.js 333 B
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 346 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 456 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.59 kB
build/cart-blocks/proceed-to-checkout-style.js 1.08 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.69 kB
build/checkout-blocks/actions-frontend.js 8.11 kB
build/checkout-blocks/actions-style.js 1.01 kB
build/checkout-blocks/billing-address-style.js 626 B
build/checkout-blocks/contact-information-frontend.js 2.08 kB
build/checkout-blocks/contact-information-style.js 651 B
build/checkout-blocks/express-payment-frontend.js 5.89 kB
build/checkout-blocks/fields-frontend.js 297 B
build/checkout-blocks/fields-style.js 271 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 11.8 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 456 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 15.6 kB
build/checkout-blocks/payment-style.js 504 B
build/checkout-blocks/pickup-options-style.js 476 B
build/checkout-blocks/shipping-address-style.js 515 B
build/checkout-blocks/shipping-method-frontend.js 2.65 kB
build/checkout-blocks/shipping-method-style.js 1.43 kB
build/checkout-blocks/shipping-methods-style.js 450 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 1.02 kB
build/checkout-blocks/totals-frontend.js 334 B
build/checkout-blocks/totals-style.js 301 B
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.4 kB
build/collection-filters.js 1.63 kB
build/collection-price-filter-frontend.js 577 B
build/collection-price-filter-rtl.css 1.28 kB
build/collection-price-filter.css 1.28 kB
build/collection-price-filter.js 3.55 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.17 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.7 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.37 kB
build/handpicked-products.js 7.22 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.72 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.43 kB
build/mini-cart-contents-block/empty-cart-frontend.js 374 B
build/mini-cart-contents-block/empty-cart-style.js 378 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 288 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.95 kB
build/mini-cart-contents-block/items-frontend.js 247 B
build/mini-cart-contents-block/items-style.js 251 B
build/mini-cart-contents-block/products-table-frontend.js 13.8 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.22 kB
build/mini-cart-contents.css 3.21 kB
build/mini-cart-contents.js 16.1 kB
build/mini-cart-frontend.js 2.25 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.45 kB
build/mini-cart.js 5.98 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.57 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.55 kB
build/order-confirmation-billing-wrapper.js 1.5 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.57 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.9 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 398 B
build/order-confirmation-shipping-address.js 1.55 kB
build/order-confirmation-shipping-wrapper.js 1.5 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.54 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.75 kB
build/order-confirmation-totals-rtl.css 594 B
build/order-confirmation-totals-wrapper.js 1.79 kB
build/order-confirmation-totals.css 593 B
build/order-confirmation-totals.js 2.16 kB
build/page-content-wrapper.js 1.85 kB
build/price-filter-frontend.js 13.1 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 13.3 kB
build/price-filter-wrapper-rtl.css 2.54 kB
build/price-filter-wrapper.css 2.54 kB
build/price-filter.css 2.68 kB
build/price-filter.js 7.77 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.11 kB
build/product-add-to-cart-rtl.css 1.38 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.35 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.04 kB
build/product-button-frontend.js 4.93 kB
build/product-button-interactivity-frontend.js 8.48 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.64 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.58 kB
build/product-category.js 7.97 kB
build/product-collection.js 13.6 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 392 B
build/product-gallery-large-image-frontend.js 416 B
build/product-gallery-large-image-next-previous.js 4.15 kB
build/product-gallery-large-image.js 2.36 kB
build/product-gallery-pager.js 3.38 kB
build/product-gallery-rtl.css 1.08 kB
build/product-gallery-thumbnails.js 3.8 kB
build/product-gallery.css 1.08 kB
build/product-gallery.js 9.34 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.68 kB
build/product-new.js 7.3 kB
build/product-on-sale.js 7.29 kB
build/product-price-frontend.js 8.1 kB
build/product-price-rtl.css 678 B
build/product-price.css 677 B
build/product-price.js 2.65 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.5 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.71 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.05 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.65 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.69 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.6 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.19 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.35 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.87 kB
build/product-tag.js 7.5 kB
build/product-template-rtl.css 423 B
build/product-template.css 422 B
build/product-template.js 2.8 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.04 kB
build/product-top-rated.js 7.57 kB
build/products-by-attribute.js 8.02 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.08 kB
build/rating-filter-wrapper-frontend.js 19.8 kB
build/rating-filter-wrapper-rtl.css 1.73 kB
build/rating-filter-wrapper.css 1.73 kB
build/rating-filter.css 4.07 kB
build/rating-filter.js 5.91 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.52 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11 kB
build/stock-filter-frontend.js 19 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 20.1 kB
build/stock-filter-wrapper-rtl.css 1.49 kB
build/stock-filter-wrapper.css 1.49 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.53 kB
build/store-notices.js 1.67 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.18 kB
build/wc-blocks-data.js 19.6 kB
build/wc-blocks-editor-style-rtl.css 7.08 kB
build/wc-blocks-editor-style.css 7.08 kB
build/wc-blocks-google-analytics.js 1.16 kB
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.74 kB
build/wc-blocks-rtl.css 2.47 kB
build/wc-blocks-shared-context.js 850 B
build/wc-blocks-shared-hocs.js 1.4 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 2.61 kB
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 406 B
build/wc-payment-method-cheque.js 401 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 437 B
build/wc-settings.js 2.4 kB
build/wc-shipping-method-pickup-location.js 29.3 kB

compressed-size-action

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

🚢

@github-actions github-actions bot added this to the 11.4.0 milestone Oct 16, 2023
Base automatically changed from update/checkbox-component to trunk October 17, 2023 09:47
@opr opr force-pushed the update/move-chip branch from b812471 to 505420e Compare October 17, 2023 15:47
@opr opr merged commit 0318adb into trunk Oct 18, 2023
32 checks passed
@opr opr deleted the update/move-chip branch October 18, 2023 12:08
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: active filters Issues related to the Active Filters block. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants