Minor UX/UI Issue on Disconnect RRM Module

[wpdarren]

Bug Description

While testing #8845 I noticed that the engineering does not match the figma design. There is a styling issue where the bullet point is not aligned to the text like the figma designs and in addition the horizontal line has no space between the text underneath. Only a minor UX/UI issue but it looks odd.

Steps to reproduce

1. Set up RRM module
2. Go to Site Kit Settings > Connected modules > and Edit RRM
3. Click on the link to disconnect the module and the modal will appear
4. See UX/UI issue

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• In the module disconnection confirmation modal, if a feature has multiple lines:
  • Its bullet/list-item marker should be vertically aligned to the first line according to the Figma designs.
  • The bottom border should be spaced consistently from the text like it is for single-lined features, according to the Figma designs.

Implementation Brief

• [ ] Add padding to the relevant .mdc-list-item styling to fix the border, and provide a static value to top in the before block to ensure the bullet point is aligned with the first line of text. https://github.com/google/site-kit-wp/blob/a74c0e6d6b34ef08893380b450ce4a355068895b/assets/sass/vendor/_mdc-dialog.scss#L94-L111
• [ ] Finish and merge PR https://github.com/google/site-kit-wp/pull/9145.

Test Coverage

• Add an additional story as per the draft PR, and add a VRT scenario for it.

QA Brief

Follow the steps to reproduce the issue and match the alignment of bullet to that of the figma design.

Changelog entry

• Improve module disconnection confirmation dialog UI.

[nfmohit]

IB ✅

[kelvinballoo]

QA Update ⚠️

This is verified good overall. My only flag is a potential regression on other modals. ⚠️

I did a test on Ads module. On the modal, there will be 3 bullets and there will be 2 horizontal lines separating them all. The last bullet will not have a horizontal line below it. But when I cross-check with figma, it would eventually have a horizontal line for each bullet. I was wondering if this is intentional or this is a regression.

Implementation: Figma:

---

Other than that, those were verified good:

• The bullet is now aligned to the text on the first line. ✅

• The horizontal line doesn't appear which is similar to figma ✅

  Implementation: Figma:

• Mobile breakpoint and tablet breakpoints were verified good. ✅

  

[ankitrox]

@kelvinballoo This is intentional and we have removed the bottom border from last item to maintain the consistency with RRM disconnect dialog.

CC: @benbowler @techanvil

[kelvinballoo]

QA Update ✅

Thanks for confirming @ankitrox . This is good to be moved to approval.

• The bullet is now aligned to the text on the first line. ✅

• The horizontal line doesn't appear which is similar to figma ✅

  Implementation: Figma:

• Mobile breakpoint and tablet breakpoints were verified good. ✅