fix/8946: replace ToggleGroupControl with ToggleControl

[Sidsector9]

Fixes #8946

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• 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.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

1. Go to widgets > add the Mini cart block and enable "Open cart in drawer".
2. Add any product to cart from the shop page.
3. Observe and verify that the drawer opens up.
4. Now disable "Open cart in drawer", repeat step (2) and verify that the drawer doesn't open up.
5. Verify this behaviour is consistent between trunk and the fix branch.

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Fix: replace ToggleGroupControl with ToggleControl

[Aljullu]

Thanks for the contribution, @Sidsector9! That's definitely a nice improvement to keep the UI consistent and more comfortable to use. 👏 I tested it and it works as expected, code changes look good as well.

The only thing missing before being able to merge it is to add testing steps, that way we have a consistent way to test this PR in releases and in the case there were regressions in the future.

@Sidsector9 is that something you can do? Thanks in advance!

[Sidsector9]

@Aljullu I have added the testing instructions.

[ankitguptaindia]

QA/Test Report- ✅

Testing Environment -

• WordPress: 6.2
• Theme: Storefront Version: 4.2.0 & WordPress 2023 theme.
• WooCommerce - Version 7.6.0
• PHP: 8.0.22
• Web Server: Nginx
• Browser: Chrome - Version 111.0.5563.64
• OS: macOS Monterey V 12.3.1

Steps to Test-

For Non-Block theme (Storefront) -

1. Login to your WordPress site and go to the dashboard.
2. Click on "Appearance" from the left sidebar and select "Widgets".
3. Look for the "Mini Cart" block and add it to the desired widget area.
4. Click on the Mini Cart block to expand its settings.
5. Enable the "Open cart in drawer" option.
6. Save the changes.
7. Go to your shop page and add any product to the cart.
8. Observe that the drawer opens up to show the contents of the cart.
9. Disable the "Open cart in drawer" option from the Mini Cart block settings.
10. Repeat step 7 and verify that the drawer does not open up.

For Block theme (2023) -

1. Activate 'Twenty Twenty-Three' theme from 'Appearance'
2. GO to site editor and Add 'Mini Cart' block to the header
3. Click on the Mini Cart block to expand its settings.
4. Enable the "Open cart in drawer" option.
5. Save the changes.
6. Go to your shop page and add any product to the cart.
7. Observe that the drawer opens up to show the contents of the cart.
8. Disable the "Open cart in drawer" option from the Mini Cart block settings.

Test Results - The WooCommerce Mini Cart block was tested on a non-block based theme (Storefront) as well as in a block-based theme (WP 2023). The behavior of the block was consistent between the two themes, and it worked as expected. When "Open cart in drawer" was enabled, the drawer opened up to show the contents of the cart, and when it was disabled, the drawer didn't open up. Also tested the new UI of block setting in RTL supportive theme.

Before Fix-

After Fix-

Functional Demo / Screencast -

Functional.Demo.for.Setting.in.FE.mp4

QA Status- Pass ✅

[kmanijak]

I tested the changes as well and it looks good!
The only missing part is a linter check is failing in the file assets/js/blocks/mini-cart/edit.tsx:

  75:23  error    Replace `⏎↹↹↹↹↹↹↹↹↹` with `·`                                                                                                                                                                                                       prettier/prettier
  77:1   error    Replace `↹↹↹↹↹↹↹↹↹↹addToCartBehaviour:·value·?·'open_drawer'·:·'none'` with `↹↹↹↹↹↹↹↹↹addToCartBehaviour:·value⏎↹↹↹↹↹↹↹↹↹↹?·'open_drawer'`                                                                                          prettier/prettier
  78:10  error    Replace `}` with `↹:·'none',`                                                                                                                                                                                                       prettier/prettier
  79:9   error    Insert `}·`     

Would you be able to update it? 🙌

[Sidsector9]

@kmanijak for some odd reason the npm run lint:js command fails for me. Says node:fs module not found.
I have reinstalled from scratch and it doesn't seem to go away.

If possible can someone take over this? Or I can try it again tomorrow.

[kmanijak]

If possible can someone take over this? Or I can try it again tomorrow.

Sure, let me update the formatting and push the change to your PR!

[kmanijak]

It's testing well, the code looks good and the pipeline passes 💪

Thanks @Sidsector9 for your contribution!

[ankitguptaindia]

Just a heads up - As this PR changes the UI, screenshot should be updated if this block is documented anywhere.