Commit Graph

12 Commits

Author SHA1 Message Date
Seghir Nadir 07a0b8477b
Fix visual inconsisties in Cart/Checkout between elements and between Light/Dark modes (#51585)
* darker outline and double outline on focus

* flip outlines for shipping selector

* fix select outline in dark mode

* Fix input labels being cut off due to line height

* adjust outline colors

* fix rest of problems in dark mode

* fix express payment on checkout

* Fix broken styles for shipping cart in medium

* Always center input label

* Fix order note background in dark mode

* remove empty space in payment methods when there's no content inside

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix linter issues

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-23 14:11:43 +02:00
Niels Lange 79786c5443
Revert #46362 (#49404)
* Revert #46262

* Remove pnpm-lock.yaml

* Revert "Remove pnpm-lock.yaml"

This reverts commit df4b87940d.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Revert pnpm-lock.yaml

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-11 19:00:49 +02:00
Mike Jolley a80e3e8a56
Accessibility: Prevent shipping losing focus when making selections during checkout (#48370)
* Prevent duplicate update

* Style aria disabled radio input

* Disable keyboard navigation when options are being sent to server.

* Abort multiple requests to update shipping rates

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Update changelog

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-06-21 10:23:19 +01:00
Niels Lange 93214eeb2b
[Enhancement]: Block-based checkout input fields style updates (#46362)
* Adjust border and box-shadow color for textual inputs

* WIP: Style checkboxes

* Vertically center checkmark

* Adjust focus outline width

* Adjust selected checkbox background in light mode

* Adjust background color of selected radio button

* Add chevron icon to dropdown fields

* Add changelog

* Fix CSS lint issues

* Adjust outline width

* Revert checkbox styles

* Adjust input field height and label size

* Revert box-shadow styles

* Add spacing between coupon title and coupon code

* Simplify onFocus and onBlur

* Fix outline width when focusing combobox

* Ensure chevron points down after selecting value

* Adjust outline color of focused delivery option

* POC: Use currentColor for focus states
2024-06-03 18:46:08 +07:00
Patricia Hillebrandt 5dd7713346
[Performance]: Replace `classnames` usage with `clsx` (#47760)
* Replace classnames with clsx within woocommerce-blocks.

* Undo unnecessary change to getClassnames const.

* Replace classnames with clsx within woocommerce-admin.

* Add changelog.

* Update the pnpm lock file

* Address lint.

* Address lint errors for the block-library.
2024-05-31 05:49:36 +02:00
Niels Lange e7aff9428f
[Enhancement]: Block-based checkout - Pickup section updates (#47173)
* Change “Pickup options” to “Pickup locations”

* Always show pickup location and truncate pickup details

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Adjust spacing between pickup details and more link

* Hide pickup details of unselected pickup location

* Adjust line height of truncated text

* Show “Read more/less” instead of “more/less”

* Ensure both lines are equally filled with text

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-08 17:58:09 +07:00
Thomas Roberts fb481bdce5
Increase shipping/payment borders to prevent half pixel issues on high-resolution screens (#46525)
* Replace pixel box shadow with em to prevent half pixels

* Add changelog

* Apply 2px border

* Make padding around shipping options bigger
2024-04-16 09:50:54 +01:00
Thomas Roberts 255a45911c
Update shipping and payment radio controls to use borders on selected items (#46150) 2024-04-10 02:54:05 -07:00
Christopher Allford ec9b7852f9
Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00
Tarun Vijwani 29b4217f15 Update the border colors in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/11474)
* Change border color to Gutenberg 100 for Cart and Checkout blocks

* Change form input color to Gutenberg 900 for Cart and Checkout blocks

* Fix additional border colors of Checkout block

* Update borders and form field colors in Cart Block

* Change border color to $universal-border-light

* Change border color for cart line items to $universal-border-light

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix colors of text area border and form steps

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix form steps

* Update universal dark border rgba value

- Update universal dark border rgba value from rgba(0, 0, 0, 0.882) to rgba(17, 17, 17, .80) to keep it consistent with universal-border colors

* Update $universal-border-light color

* Update the opacity of the borders

* Update the border color to rgba (17, 17, 17, 0.12)

* Roll back $universal-border-light value to the original value: 0.115

* Remove Opacity and pass it as argument in with-translucent-border

- We have with-translucent-border option that accepts border and opacity for pseudo elements.

* Remove additional spaces

* Replace with-translucent-border with normal border

- Since we're are not mixing the opacity to the border color so we don't need to use mixin with-translucent-border.

* Fix applied css and add low contrast Color usage details

-  Fix minor CSS as per the standards.
- Add comments for universal border colors that they're low contrast colors and should be used for decorative elements only

* Fix border gap and double border for multiple shipping packages

* Fix payment method borders and Cart line items borders

- Change border bottom to border-top for cart line items.
- Fix payment method radio control borders.

* Fix local pickup border

- Local pickup was using  with-translucent-borders so it has some opacity, changed it to border-bottom.

* Add border-bottom to cart items

* Remove additional border from Cart items

* Fix radio and checkbox borders as per the design

* Fix shipping method borders and background color as per the design.

* Force align left on the description for the local pickup options.

* Update border color in quantity selector component

* Fix Shipping options radio selection alignment

- Add left padding to wc-block-components-shipping-rates-control__package element.

* Update colors and variables

* Change checkbox and radio button colors

- Change checkbox and radio button colors from  rgba(25, 23, 17, 0.3) to  rgba(25, 23, 17, 0.48).

* Remove bottom property from express payment style
2023-12-07 21:37:48 +04:00
Alex Florisca 4d90cb2803 Add storybook entries for RadioControl and RadioControlAccordion (https://github.com/woocommerce/woocommerce-blocks/pull/11657) 2023-11-13 17:12:46 +00:00
Alex Florisca e3f378d990 Move `RadioControl`and `RadioControlAccordion` components to components package (https://github.com/woocommerce/woocommerce-blocks/pull/11312)
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2023-10-23 15:59:19 +01:00