Skip to content

Bug/9215 Fix layout for narrow notices #11954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eugene-manuilov merged 19 commits into from
Jan 9, 2026
Merged

Bug/9215 Fix layout for narrow notices #11954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9831c25
Wrap Notice with a container div.
jimmymadon Dec 18, 2025
07e36ff
Add CSS variable for desktop inner container width.
jimmymadon Dec 18, 2025
37071d8
Define the notice-container to be a size container.
jimmymadon Dec 18, 2025
4954014
Use mobile layout when notice container size < 800px.
jimmymadon Dec 18, 2025
c34f7a4
Remove unnecessary margin for notice titles.
jimmymadon Dec 18, 2025
7f57ed2
Merge branch 'develop' into bug/9215-fix-layout-for-narrow-notices.
jimmymadon Jan 6, 2026
5ac78a1
Fix layout for narrow notices by ensuring full width in flexbox conta…
jimmymadon Jan 6, 2026
4b62f87
Remove redundant style.
jimmymadon Jan 7, 2026
4da6fd4
Transfer mobile and desktop styles to selection panel notices.
jimmymadon Jan 7, 2026
bfa1c1d
Override layout for product ID warning notice to adapt to viewport wi…
jimmymadon Jan 7, 2026
5f8973e
Fix layout for onboarding state notice by updating selector to use no…
jimmymadon Jan 7, 2026
5c4a8ee
Merge branch 'develop' into bug/9215-fix-layout-for-narrow-notices.
jimmymadon Jan 7, 2026
50cbfb4
Update snapshots to include wrapping notice container.
jimmymadon Jan 7, 2026
a29210d
Update expected class to be the notice wrapper instead of internal no…
jimmymadon Jan 7, 2026
dab6e5a
Fix unnecessary removal of margin and updating multiple VRTs unnecess…
jimmymadon Jan 7, 2026
1343f48
Re-fix warning notice to be absolute to allow product ID field's help…
jimmymadon Jan 8, 2026
d2ecd68
Fix margin for product ID container when notice is present.
jimmymadon Jan 8, 2026
747c6f4
Fix layout for module access warning notice and adjust margin styles.
jimmymadon Jan 8, 2026
60504b0
Update VRTs that contain reduced Notice internal spacing and notice l…
jimmymadon Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 49 additions & 48 deletions assets/js/components/Notice/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,59 +50,60 @@ const Notice = forwardRef(
ref
) => {
return (
<div
ref={ ref }
className={ classnames(
'googlesitekit-notice',
`googlesitekit-notice--${ type }`,
className
) }
>
{ ! hideIcon && (
<div className="googlesitekit-notice__icon">
<Icon type={ type } />
</div>
) }

<div className="googlesitekit-notice__content">
{ title && <Title>{ title }</Title> }
{ description && (
<Description>{ description }</Description>
<div className="googlesitekit-notice-container" ref={ ref }>
<div
className={ classnames(
'googlesitekit-notice',
`googlesitekit-notice--${ type }`,
className
) }
>
{ ! hideIcon && (
<div className="googlesitekit-notice__icon">
<Icon type={ type } />
</div>
) }
</div>

{ ( dismissButton?.label ||
dismissButton?.onClick ||
( ctaButton?.label &&
( ctaButton?.onClick || ctaButton?.href ) ) ||
children ) && (
<div className="googlesitekit-notice__action">
{ children }

{ ( dismissButton?.label ||
dismissButton?.onClick ) && (
<DismissButton
label={ dismissButton.label }
onClick={ dismissButton.onClick }
disabled={ dismissButton.disabled }
/>
<div className="googlesitekit-notice__content">
{ title && <Title>{ title }</Title> }
{ description && (
<Description>{ description }</Description>
) }
{ ctaButton?.label &&
( ctaButton?.onClick || ctaButton?.href ) && (
<CTAButton
label={ ctaButton.label }
onClick={ ctaButton.onClick }
inProgress={ ctaButton.inProgress }
disabled={ ctaButton.disabled }
href={ ctaButton.href }
external={ ctaButton.external }
hideExternalIndicator={
ctaButton.hideExternalIndicator
}
</div>

{ ( dismissButton?.label ||
dismissButton?.onClick ||
( ctaButton?.label &&
( ctaButton?.onClick || ctaButton?.href ) ) ||
children ) && (
<div className="googlesitekit-notice__action">
{ children }

{ ( dismissButton?.label ||
dismissButton?.onClick ) && (
<DismissButton
label={ dismissButton.label }
onClick={ dismissButton.onClick }
disabled={ dismissButton.disabled }
/>
) }
</div>
) }
{ ctaButton?.label &&
( ctaButton?.onClick || ctaButton?.href ) && (
<CTAButton
label={ ctaButton.label }
onClick={ ctaButton.onClick }
inProgress={ ctaButton.inProgress }
disabled={ ctaButton.disabled }
href={ ctaButton.href }
external={ ctaButton.external }
hideExternalIndicator={
ctaButton.hideExternalIndicator
}
/>
) }
</div>
) }
</div>
</div>
);
}
Expand Down
60 changes: 32 additions & 28 deletions assets/js/components/google-tag-gateway/__snapshots__/GoogleTagGatewayToggle.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,40 +156,44 @@ exports[`GoogleTagGatewayToggle should render in disabled state if server requir
</a>
</p>
<div
class="googlesitekit-notice googlesitekit-notice--warning"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
class="googlesitekit-notice googlesitekit-notice--warning"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__title"
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
Your server’s current settings prevent Google tag gateway for advertisers from working. To enable it, please contact your hosting provider and request access to external resources and plugin files.
<a
aria-label="Learn more about Google tag gateway for advertisers server requirements (opens in a new tab)"
class="googlesitekit-cta-link"
href="undefined?doc=google-tag-gateway-server-requirements"
rel="noopener noreferrer"
target="_blank"
<p
class="googlesitekit-notice__title"
>
<span
class="googlesitekit-cta-link__contents"
Your server’s current settings prevent Google tag gateway for advertisers from working. To enable it, please contact your hosting provider and request access to external resources and plugin files.
<a
aria-label="Learn more about Google tag gateway for advertisers server requirements (opens in a new tab)"
class="googlesitekit-cta-link"
href="undefined?doc=google-tag-gateway-server-requirements"
rel="noopener noreferrer"
target="_blank"
>
Learn more
</span>
<span
class="googlesitekit-icon-wrapper"
style="margin-left: 5px;"
>
<svg />
</span>
</a>
</p>
<span
class="googlesitekit-cta-link__contents"
>
Learn more
</span>
<span
class="googlesitekit-icon-wrapper"
style="margin-left: 5px;"
>
<svg />
</span>
</a>
</p>
</div>
</div>
</div>
</div>
Expand Down
134 changes: 77 additions & 57 deletions assets/js/components/key-metrics-setup/__snapshots__/KeyMetricsSetupApp.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,21 +509,25 @@ exports[`KeyMetricsSetupApp initial setup flow should display the progress indic
</div>
</div>
<div
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__title"
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
Google Analytics was successfully set up
</p>
<p
class="googlesitekit-notice__title"
>
Google Analytics was successfully set up
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1004,21 +1008,25 @@ exports[`KeyMetricsSetupApp should render correctly 1`] = `
</div>
</div>
<div
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
>
<p
class="googlesitekit-notice__title"
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
Google Analytics was successfully set up
</p>
<p
class="googlesitekit-notice__title"
>
Google Analytics was successfully set up
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1480,23 +1488,27 @@ exports[`KeyMetricsSetupApp should show an error when the save fails 1`] = `
class="googlesitekit-user-input__error"
>
<div
class="googlesitekit-notice googlesitekit-notice--error"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
class="googlesitekit-notice googlesitekit-notice--error"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__description"
<div
class="googlesitekit-notice__icon"
>
<span>
Error: Internal server error (Please try again.)
</span>
</p>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__description"
>
<span>
Error: Internal server error (Please try again.)
</span>
</p>
</div>
</div>
</div>
</div>
Expand All @@ -1522,21 +1534,25 @@ exports[`KeyMetricsSetupApp should show an error when the save fails 1`] = `
</div>
</div>
<div
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__title"
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
Google Analytics was successfully set up
</p>
<p
class="googlesitekit-notice__title"
>
Google Analytics was successfully set up
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2017,21 +2033,25 @@ exports[`KeyMetricsSetupApp should show the analytics setup success toast notice
</div>
</div>
<div
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
class="googlesitekit-notice-container"
>
<div
class="googlesitekit-notice__icon"
>
<svg />
</div>
<div
class="googlesitekit-notice__content"
class="googlesitekit-notice googlesitekit-notice--success googlesitekit-toast-notice"
>
<p
class="googlesitekit-notice__title"
<div
class="googlesitekit-notice__icon"
>
Google Analytics was successfully set up
</p>
<svg />
</div>
<div
class="googlesitekit-notice__content"
>
<p
class="googlesitekit-notice__title"
>
Google Analytics was successfully set up
</p>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading