Feature Description

Noticed this during RRM but we can review this across the board for subtle notifications.
On tablet, the banners just look weird in my opinion.
Refer to the picture attached.

• There is a very dense block of text and the buttons sections have a lot of space.
• This feels unbalanced.
• I'm wondering if it might be best to move the buttons below and let the text sit along the width of the banner.

UPDATE: Changing the layout of notices simply based on the size of viewport doesn't work for us when certain notices are rendered in narrow components, e.g. in #11459 (Figma). So we should determine the layout of a notice based on the width of the notice itself and not the viewport width.

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

Acceptance criteria

• All Site Kit "Notices" (i.e. <Notice> and <NoticeNotification> components) should be styled as per their corresponding Figma mocks based on the width of the notices themselves.
• If the width of a notice is <= 800px, use the Mobile and Tablet designs.
• If the width of a notice is > 800px, use the Narrow Desktop and Wider Desktop designs.

Implementation Brief

** The following IB is implemented in this #11954 PR as a PoC. Tests will need to be fixed. **

• Within assets/js/components/Notice/index.js:
  • Wrap the entire component being returned with another div with a className of googlesitekit-notice-container.
  • Move the ref to this parent container now.
• Within assets/sass/components/notice/_googlesitekit-notice.scss:
  • For the googlesitekit-notice-container selector, add a container-type: inline-size property.
  • Change all media queries for bp-tablet to be @container (width > 800px)
  • Remove unnecessary 10px bottom margin for the p tag within .googlesitekit-notice__content which was incorrectly added previously.
• Update all VRTs and fix JSUnit snapshots.

Test Coverage

• No new tests required.

QA Brief

• Use the Banner Notifications Refactoring test plan to test as many 'Notice' components within the plugin of all types: warning, error, success and info.
• To make testing easier, test a few notices each that appear on the following:
  • On the Site Kit setup page when Site Kit is reset.
  • On the main dashboard at the top when adding new modules.
  • Inside all Selection Side panels: Key Metrics, Audience Segmentation and Email Reporting side panels.
  • Within other banners: Ads Banner (with Ad block on).
  • Within other components on "Connect new services" tab: More AdBlock notices.
  • Within other components in View and Edit settings of different modules: Focus on RRM and Analytics.
  • Within other components on the Admin Settings page: Focus on Consent Mode
  • Floating snack bar: The "You are offline" notice

Changelog entry

• Update Notices and NoticeNotifications components to follow mobile styles in tablet viewport