From eb54b5ae3c999efda101eecef20c9e74fe0acba3 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 24 Apr 2025 17:13:37 +0530 Subject: [PATCH 01/21] Setup header section for logo and title --- .../navigation-header/navigation-header.scss | 29 ++++++++++++++---- .../navigation-header/navigation-header.tsx | 30 +++++++++++++++---- client/my-sites/stats/site.jsx | 9 ++++-- 3 files changed, 53 insertions(+), 15 deletions(-) diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss index b00a79502bae..7c8b01a266ba 100644 --- a/client/components/navigation-header/navigation-header.scss +++ b/client/components/navigation-header/navigation-header.scss @@ -17,12 +17,17 @@ display: flex; align-items: center; justify-content: space-between; + height: 32px; } &__left-section { display: flex; align-items: center; - gap: $grid-unit-20; + } + + &__right-section { + display: flex; + align-items: center; } &__back-link { @@ -34,7 +39,7 @@ transition: color 0.2s ease; &:hover { - color: var(--wp-components-color-gray-900, #333); + color: var(--wp-components-color-gray-900, $gray-900); } svg { @@ -43,19 +48,31 @@ } &__title { - margin: 0; - font-size: 24px; + font-size: 20px; font-weight: 500; - color: var(--wp-components-color-gray-900, #333); + color: var(--wp-components-color-gray-900, #1e1e1e); + display: flex; + align-items: center; + gap: 10px; + line-height: 1; + height: 32px; @media (max-width: $break-small) { font-size: 20px; } } - &__right-section { + &__title-logo { + padding: 4px; display: flex; align-items: center; + height: 24px; + width: 24px; + + img, svg { + max-height: 100%; + width: auto; + } } // Add extra space when there is a classic/non classic option tab at the top on mobile that collides with cta's diff --git a/client/components/navigation-header/navigation-header.tsx b/client/components/navigation-header/navigation-header.tsx index bffd91564df1..32c433a06b18 100644 --- a/client/components/navigation-header/navigation-header.tsx +++ b/client/components/navigation-header/navigation-header.tsx @@ -12,10 +12,11 @@ interface BackLinkProps { interface HeaderProps extends React.HTMLAttributes< HTMLElement > { title?: string; + titleLogo?: ReactNode; backLinkProps?: BackLinkProps; titleElement?: ReactNode; headElement?: ReactNode; - children?: ReactNode; + rightSection?: ReactNode; hasScreenOptionsTab?: boolean; } @@ -24,18 +25,33 @@ interface HeaderProps extends React.HTMLAttributes< HTMLElement > { * @param props - Component props * @param props.className - Additional CSS class name for the component * @param props.title - Header title text + * @param props.titleLogo - Header title logo element to render * @param props.backLinkProps - Object containing back link properties (backLink URL, backLinkText, and onBackClick handler) * @param props.titleElement - Custom element to override default title rendering * @param props.headElement - Custom element to override default head section rendering - * @param props.children - Child elements to render in the right section + * @param props.rightSection - Child elements to render in the right section * @param props.hasScreenOptionsTab - Indicates whether the screen options tab should be added * @returns The rendered NavigationHeader component */ const NavigationHeader: React.FC< HeaderProps > = ( { className, title, + titleLogo, backLinkProps, - titleElement =

{ title }

, + titleElement = ( +

+ { titleLogo && ( + + ) } + { title && titleLogo ? ( + { title } + ) : ( + title + ) } +

+ ), headElement = backLinkProps?.url && ( = ( { ← { backLinkProps?.text ?? translate( 'Back' ) } ), - children, + rightSection, hasScreenOptionsTab, ...rest } ) => { return (
= ( {
{ headElement }
{ titleElement }
-
{ children }
+ { rightSection && ( +
{ rightSection }
+ ) }
); diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index 2bab1c5b6a22..5746bc0c4633 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -1,7 +1,7 @@ import config from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; import { eye } from '@automattic/components/src/icons'; -import { Icon, people, starEmpty, commentContent } from '@wordpress/icons'; +import { Icon, settings, people, starEmpty, commentContent } from '@wordpress/icons'; import clsx from 'clsx'; import { localize, translate } from 'i18n-calypso'; import { find } from 'lodash'; @@ -22,6 +22,7 @@ import { useShortcuts } from 'calypso/components/date-range/use-shortcuts'; import EmptyContent from 'calypso/components/empty-content'; import InlineSupportLink from 'calypso/components/inline-support-link'; import JetpackColophon from 'calypso/components/jetpack-colophon'; +import JetpackLogo from 'calypso/components/jetpack-logo'; import NavigationHeader from 'calypso/components/navigation-header'; import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header'; import StickyPanel from 'calypso/components/sticky-panel'; @@ -184,7 +185,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... const isWPAdmin = config.isEnabled( 'is_odyssey' ); const isAtomic = useSelector( ( state ) => isAtomicSite( state, siteId ) ); const isSitePrivate = useSelector( ( state ) => isPrivateSite( state, siteId ) ); - const isStatsNavigationImprovementEnabled = config.isEnabled( 'stats/navigation-improvement' ); + const isStatsNavigationImprovementEnabled = true; const slug = useSelector( getSelectedSiteSlug ); const moduleToggles = useSelector( ( state ) => getModuleToggles( state, siteId, 'traffic' ) ); const momentSiteZone = useSelector( ( state ) => getMomentSiteZone( state, siteId ) ); @@ -533,7 +534,9 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... { isStatsNavigationImprovementEnabled ? ( : null } + rightSection={ } /> ) : ( Date: Thu, 24 Apr 2025 17:14:07 +0530 Subject: [PATCH 02/21] Don't override the config --- client/my-sites/stats/site.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index 5746bc0c4633..9792f2de54dc 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -185,7 +185,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... const isWPAdmin = config.isEnabled( 'is_odyssey' ); const isAtomic = useSelector( ( state ) => isAtomicSite( state, siteId ) ); const isSitePrivate = useSelector( ( state ) => isPrivateSite( state, siteId ) ); - const isStatsNavigationImprovementEnabled = true; + const isStatsNavigationImprovementEnabled = config.isEnabled( 'stats/navigation-improvement' ); const slug = useSelector( getSelectedSiteSlug ); const moduleToggles = useSelector( ( state ) => getModuleToggles( state, siteId, 'traffic' ) ); const momentSiteZone = useSelector( ( state ) => getMomentSiteZone( state, siteId ) ); From aa786c379d18834350b8d6e25b35cf8162774e11 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 24 Apr 2025 17:49:52 +0530 Subject: [PATCH 03/21] Set CSS colors using SASS variables --- client/components/navigation-header/navigation-header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss index 7c8b01a266ba..b968f167a683 100644 --- a/client/components/navigation-header/navigation-header.scss +++ b/client/components/navigation-header/navigation-header.scss @@ -39,7 +39,7 @@ transition: color 0.2s ease; &:hover { - color: var(--wp-components-color-gray-900, $gray-900); + color: var($gray-900, #1e1e1e); } svg { @@ -50,7 +50,7 @@ &__title { font-size: 20px; font-weight: 500; - color: var(--wp-components-color-gray-900, #1e1e1e); + color: var($gray-900, #1e1e1e); display: flex; align-items: center; gap: 10px; From 03805124290d80c7daa8cc0074c89e0f2b547d05 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Fri, 25 Apr 2025 12:12:13 +0530 Subject: [PATCH 04/21] Set the font-family --- client/components/navigation-header/navigation-header.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss index b968f167a683..7b7c4e844ea0 100644 --- a/client/components/navigation-header/navigation-header.scss +++ b/client/components/navigation-header/navigation-header.scss @@ -39,7 +39,7 @@ transition: color 0.2s ease; &:hover { - color: var($gray-900, #1e1e1e); + color: var(--wp-components-color-gray-900, $gray-900); } svg { @@ -50,7 +50,8 @@ &__title { font-size: 20px; font-weight: 500; - color: var($gray-900, #1e1e1e); + font-family: "SF Pro Display", $sans; + color: var(--wp-components-color-gray-900, $gray-900); display: flex; align-items: center; gap: 10px; From 22c25bfc6ab0a5769ec762b9445780e407859b7c Mon Sep 17 00:00:00 2001 From: Nikhil Date: Fri, 25 Apr 2025 17:29:23 +0530 Subject: [PATCH 05/21] Simplify the titleElement default prop by defining it in the component --- .../navigation-header/navigation-header.tsx | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/client/components/navigation-header/navigation-header.tsx b/client/components/navigation-header/navigation-header.tsx index 32c433a06b18..33406cd4ad5b 100644 --- a/client/components/navigation-header/navigation-header.tsx +++ b/client/components/navigation-header/navigation-header.tsx @@ -38,20 +38,7 @@ const NavigationHeader: React.FC< HeaderProps > = ( { title, titleLogo, backLinkProps, - titleElement = ( -

- { titleLogo && ( - - ) } - { title && titleLogo ? ( - { title } - ) : ( - title - ) } -

- ), + titleElement, headElement = backLinkProps?.url && ( = ( { hasScreenOptionsTab, ...rest } ) => { + const defaultTitleElement = ( +

+ { titleLogo && ( + + ) } + { title && titleLogo ? ( + { title } + ) : ( + title + ) } +

+ ); + + const finalTitleElement = titleElement ?? defaultTitleElement; + return (
= ( { >
{ headElement }
-
{ titleElement }
+
{ finalTitleElement }
{ rightSection && (
{ rightSection }
) } From af68585d54fee0f7ce15ad242ea3bae36655af70 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Fri, 25 Apr 2025 17:45:14 +0530 Subject: [PATCH 06/21] Remove duplicate class for nav header --- client/components/navigation-header/navigation-header.scss | 1 - client/my-sites/stats/modernized-layout-styles.scss | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss index 7b7c4e844ea0..12d543f152de 100644 --- a/client/components/navigation-header/navigation-header.scss +++ b/client/components/navigation-header/navigation-header.scss @@ -5,7 +5,6 @@ .calypso-navigation-header { background-color: var(--wp-components-color-background, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); - width: 100%; padding: 24px 0; &__head { diff --git a/client/my-sites/stats/modernized-layout-styles.scss b/client/my-sites/stats/modernized-layout-styles.scss index e2e962058cc3..8d9a264000b4 100644 --- a/client/my-sites/stats/modernized-layout-styles.scss +++ b/client/my-sites/stats/modernized-layout-styles.scss @@ -36,7 +36,7 @@ $sidebar-appearance-break-point: $break-medium; > * { padding: 0 max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px); - &:not(.navigation-header) { + &:not(.calypso-navigation-header, .navigation-header) { @media (max-width: $break-small) { padding-left: 0; padding-right: 0; @@ -49,6 +49,7 @@ $sidebar-appearance-break-point: $break-medium; margin-bottom: 32px; } + .calypso-navigation-header, .navigation-header { margin-bottom: 0; padding-bottom: 24px; From d78644f963495f9fe2a54f570a8ac970d070ea62 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Fri, 25 Apr 2025 17:46:04 +0530 Subject: [PATCH 07/21] Remove the duplicate navigation header class --- client/components/navigation-header/navigation-header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/navigation-header/navigation-header.tsx b/client/components/navigation-header/navigation-header.tsx index 33406cd4ad5b..fc11cf9ae9e3 100644 --- a/client/components/navigation-header/navigation-header.tsx +++ b/client/components/navigation-header/navigation-header.tsx @@ -76,7 +76,7 @@ const NavigationHeader: React.FC< HeaderProps > = ( { return (
Date: Mon, 28 Apr 2025 12:43:37 +0530 Subject: [PATCH 08/21] Allow setting the logo of size 24 in color --- client/components/jetpack-logo/index.jsx | 13 +++++++++++-- client/my-sites/stats/site.jsx | 2 +- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 1555116b274b..24d8f3ea7422 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -48,10 +48,19 @@ const LogoPathSize32Monochrome = () => ( ); -const JetpackLogo = ( { full = false, monochrome = false, size = 32, className, aria } ) => { +const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, className, aria } ) => { const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); + // If the size=24 is passed without explicitely passing monochrome=true, + // we assume that the logo should be monochrome. + // This is to support the legacy behavior of the logo component. + if ( size === 24 && monochrome === undefined ) { + monochrome = true; + } else { + monochrome = monochrome ?? false; + } + if ( full === true ) { return ( @@ -65,7 +74,7 @@ const JetpackLogo = ( { full = false, monochrome = false, size = 32, className, ); } - if ( 24 === size ) { + if ( 24 === size && monochrome ) { return ( // eslint-disable-next-line wpcalypso/jsx-classname-namespace diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index 9792f2de54dc..ea972d61d7ab 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -535,7 +535,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... : null } + titleLogo={ isOdysseyStats ? : null } rightSection={ } /> ) : ( From b908c593c7041b186d7836c0f8bd0c1674621c1e Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 12:48:51 +0530 Subject: [PATCH 09/21] Simplify the monochrome condition --- client/components/jetpack-logo/index.jsx | 15 +++++---------- client/my-sites/stats/site.jsx | 2 +- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 24d8f3ea7422..8fc7996a4622 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -52,20 +52,15 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); - // If the size=24 is passed without explicitely passing monochrome=true, - // we assume that the logo should be monochrome. + // For size=24, if monochrome is not explicitely passed, we want to use the monochrome version of the logo. // This is to support the legacy behavior of the logo component. - if ( size === 24 && monochrome === undefined ) { - monochrome = true; - } else { - monochrome = monochrome ?? false; - } + const useMonochrome = monochrome ?? size === 24; if ( full === true ) { return ( Jetpack - { monochrome ? : } + { useMonochrome ? : } @@ -85,7 +80,7 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa return ( - { monochrome ? : } + { useMonochrome ? : } ); }; diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index ea972d61d7ab..1bdcf5e70837 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -535,7 +535,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... : null } + titleLogo={ ! isOdysseyStats ? : null } rightSection={ } /> ) : ( From 2181bcdcb3c0d159c7160ff22fcaf2b4ac812bf2 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 12:50:54 +0530 Subject: [PATCH 10/21] Fix typo --- client/components/jetpack-logo/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 8fc7996a4622..7edb8a7117b7 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -52,7 +52,7 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); - // For size=24, if monochrome is not explicitely passed, we want to use the monochrome version of the logo. + // For size=24, if monochrome is not explicitly passed, we want to use the monochrome version of the logo. // This is to support the legacy behavior of the logo component. const useMonochrome = monochrome ?? size === 24; From 9b3a9adfa14a60f193ad7002bf5c71e7aabeb191 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 12:53:25 +0530 Subject: [PATCH 11/21] The logo should be displayed for odyssey --- client/my-sites/stats/site.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index 1bdcf5e70837..ea972d61d7ab 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -535,7 +535,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... : null } + titleLogo={ isOdysseyStats ? : null } rightSection={ } /> ) : ( From 0ee8be356101978c15157945be0b7533a3be1c7a Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 12:57:01 +0530 Subject: [PATCH 12/21] Make the variable name clear --- client/components/jetpack-logo/index.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 7edb8a7117b7..f6cbaf53b7cb 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -54,13 +54,13 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa // For size=24, if monochrome is not explicitly passed, we want to use the monochrome version of the logo. // This is to support the legacy behavior of the logo component. - const useMonochrome = monochrome ?? size === 24; + const shouldUseMonochromeLogo = monochrome ?? size === 24; if ( full === true ) { return ( Jetpack - { useMonochrome ? : } + { shouldUseMonochromeLogo ? : } @@ -80,7 +80,7 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa return ( - { useMonochrome ? : } + { shouldUseMonochromeLogo ? : } ); }; From 1c04ce2ff3cfff342a00fcc77938d376c6f65b8f Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 15:02:52 +0530 Subject: [PATCH 13/21] Hide the right section from this PR --- client/my-sites/stats/site.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index ea972d61d7ab..8934d907ef20 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -1,7 +1,7 @@ import config from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; import { eye } from '@automattic/components/src/icons'; -import { Icon, settings, people, starEmpty, commentContent } from '@wordpress/icons'; +import { Icon, people, starEmpty, commentContent } from '@wordpress/icons'; import clsx from 'clsx'; import { localize, translate } from 'i18n-calypso'; import { find } from 'lodash'; @@ -536,7 +536,6 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ... className="stats__section-header modernized-header" title={ isOdysseyStats ? STATS_PRODUCT_NAME : STATS_PRODUCT_NAME_IMPR } titleLogo={ isOdysseyStats ? : null } - rightSection={ } /> ) : ( Date: Mon, 28 Apr 2025 15:10:15 +0530 Subject: [PATCH 14/21] Fix props for the JetpackLogo --- client/components/jetpack-logo/index.jsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index f6cbaf53b7cb..7518660da5f6 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -1,6 +1,7 @@ import colorStudio from '@automattic/color-studio'; import clsx from 'clsx'; import PropTypes from 'prop-types'; +import React from 'react'; import useAriaProps from 'calypso/lib/a11y/use-aria-props'; /** @@ -48,13 +49,22 @@ const LogoPathSize32Monochrome = () => ( ); +/** + * JetpackLogo component renders the Jetpack logo with optional monochrome styling. + * @param {Object} props - Component properties. + * @param {boolean} [props.full] - Whether to show the full logo with text. + * @param {boolean|undefined} [props.monochrome] - If true, renders the logo in monochrome. If undefined, uses a default based on size. + * @param {number} [props.size] - The size of the logo. + * @param {string} [props.className] - Additional class names. + * @param {Object} [props.aria] - ARIA attributes. + * @returns The rendered NavigationHeader component + */ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, className, aria } ) => { const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); - // For size=24, if monochrome is not explicitly passed, we want to use the monochrome version of the logo. - // This is to support the legacy behavior of the logo component. - const shouldUseMonochromeLogo = monochrome ?? size === 24; + // If monochrome is undefined, set default based on size (e.g., true for size 24) + const shouldUseMonochromeLogo = monochrome !== undefined ? monochrome : size === 24; if ( full === true ) { return ( From 388d76b0d6f7f9a1fe71dc9256978cd75ad7bb47 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 17:22:22 +0530 Subject: [PATCH 15/21] Apply padding to the nav heade rbody --- client/components/navigation-header/navigation-header.scss | 1 + client/my-sites/stats/modernized-layout-styles.scss | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/client/components/navigation-header/navigation-header.scss b/client/components/navigation-header/navigation-header.scss index 12d543f152de..03b530ffd8cf 100644 --- a/client/components/navigation-header/navigation-header.scss +++ b/client/components/navigation-header/navigation-header.scss @@ -17,6 +17,7 @@ align-items: center; justify-content: space-between; height: 32px; + padding-bottom: 24px; } &__left-section { diff --git a/client/my-sites/stats/modernized-layout-styles.scss b/client/my-sites/stats/modernized-layout-styles.scss index 8d9a264000b4..0f157221ae1b 100644 --- a/client/my-sites/stats/modernized-layout-styles.scss +++ b/client/my-sites/stats/modernized-layout-styles.scss @@ -49,10 +49,13 @@ $sidebar-appearance-break-point: $break-medium; margin-bottom: 32px; } + .navigation-header { + padding-bottom: 24px; + } + .calypso-navigation-header, .navigation-header { margin-bottom: 0; - padding-bottom: 24px; padding-left: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px); padding-right: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px); background-color: var(--studio-white); From f88d7f95656aa8b90a271a64e74d154866095392 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Mon, 28 Apr 2025 17:44:14 +0530 Subject: [PATCH 16/21] Match the padding on mobile --- client/my-sites/stats/modernized-layout-styles.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/my-sites/stats/modernized-layout-styles.scss b/client/my-sites/stats/modernized-layout-styles.scss index 0f157221ae1b..eee6b01c5292 100644 --- a/client/my-sites/stats/modernized-layout-styles.scss +++ b/client/my-sites/stats/modernized-layout-styles.scss @@ -51,6 +51,10 @@ $sidebar-appearance-break-point: $break-medium; .navigation-header { padding-bottom: 24px; + + @media (max-width: $break-small) { + padding-bottom: 24px; + } } .calypso-navigation-header, @@ -61,10 +65,8 @@ $sidebar-appearance-break-point: $break-medium; background-color: var(--studio-white); @media (max-width: $break-small) { - // Restore padding to 16px on mobile as per the `.navigation-header` style. - padding: 16px; - // Reduce gap to the following section on mobile. - padding-bottom: 24px; + padding-top: 16px; + padding-inline: 16px; } @media (max-width: $break-mobile) { From 3ca2bc22db682550e03ac660f9f94555de2ee6c3 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Tue, 29 Apr 2025 16:00:30 +1200 Subject: [PATCH 17/21] try --- client/components/jetpack-logo/index.jsx | 12 +++++---- .../navigation-header/navigation-header.tsx | 20 +++++++------- .../stats/components/headers/page-header.tsx | 27 +++++++++++++++++++ client/my-sites/stats/site.jsx | 8 ++---- 4 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 client/my-sites/stats/components/headers/page-header.tsx diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 7518660da5f6..72d7c7af0cd5 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -63,14 +63,16 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); - // If monochrome is undefined, set default based on size (e.g., true for size 24) - const shouldUseMonochromeLogo = monochrome !== undefined ? monochrome : size === 24; + // This is to ensure compatibility with the legacy behavior, where a size of 24 always results in a monochrome logo. + if ( monochrome === undefined && size === 24 ) { + monochrome = true; + } if ( full === true ) { return ( Jetpack - { shouldUseMonochromeLogo ? : } + { monochrome ? : } @@ -90,7 +92,7 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa return ( - { shouldUseMonochromeLogo ? : } + { monochrome ? : } ); }; diff --git a/client/components/navigation-header/navigation-header.tsx b/client/components/navigation-header/navigation-header.tsx index fc11cf9ae9e3..f079defbea1d 100644 --- a/client/components/navigation-header/navigation-header.tsx +++ b/client/components/navigation-header/navigation-header.tsx @@ -18,14 +18,17 @@ interface HeaderProps extends React.HTMLAttributes< HTMLElement > { headElement?: ReactNode; rightSection?: ReactNode; hasScreenOptionsTab?: boolean; + titleProps?: { + title?: string; + titleLogo?: ReactNode; + }; } /** * Header component that can be used in various contexts * @param props - Component props * @param props.className - Additional CSS class name for the component - * @param props.title - Header title text - * @param props.titleLogo - Header title logo element to render + * @param props.titleProps - Header title props * @param props.backLinkProps - Object containing back link properties (backLink URL, backLinkText, and onBackClick handler) * @param props.titleElement - Custom element to override default title rendering * @param props.headElement - Custom element to override default head section rendering @@ -35,8 +38,7 @@ interface HeaderProps extends React.HTMLAttributes< HTMLElement > { */ const NavigationHeader: React.FC< HeaderProps > = ( { className, - title, - titleLogo, + titleProps, backLinkProps, titleElement, headElement = backLinkProps?.url && ( @@ -59,15 +61,15 @@ const NavigationHeader: React.FC< HeaderProps > = ( { } ) => { const defaultTitleElement = (

- { titleLogo && ( + { titleProps?.titleLogo && ( ) } - { title && titleLogo ? ( - { title } + { titleProps?.title && titleProps?.titleLogo ? ( + { titleProps?.title } ) : ( - title + titleProps?.title ) }

); diff --git a/client/my-sites/stats/components/headers/page-header.tsx b/client/my-sites/stats/components/headers/page-header.tsx new file mode 100644 index 000000000000..0260d50ca187 --- /dev/null +++ b/client/my-sites/stats/components/headers/page-header.tsx @@ -0,0 +1,27 @@ +import config from '@automattic/calypso-config'; +import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header'; +import { STATS_PRODUCT_NAME, STATS_PRODUCT_NAME_IMPR } from '../../constants'; +import { JetpackLogo } from '@automattic/components'; + +function PageHeader() { + const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' ); + + if ( isOdysseyStats ) { + return ( + } + /> + ); + } + + return ( + + ); +} + +export default PageHeader; diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index 8934d907ef20..d0d675fa79cb 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -24,7 +24,6 @@ import InlineSupportLink from 'calypso/components/inline-support-link'; import JetpackColophon from 'calypso/components/jetpack-colophon'; import JetpackLogo from 'calypso/components/jetpack-logo'; import NavigationHeader from 'calypso/components/navigation-header'; -import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header'; import StickyPanel from 'calypso/components/sticky-panel'; import memoizeLast from 'calypso/lib/memoize-last'; import Main from 'calypso/my-sites/stats/components/stats-main'; @@ -85,6 +84,7 @@ import StatsPlanUsage from './stats-plan-usage'; import statsStrings from './stats-strings'; import StatsUpsell from './stats-upsell/traffic-upsell'; import { appendQueryStringForRedirection, getPathWithUpdatedQueryString } from './utils'; +import PageHeader from './components/headers/page-header'; // Sync hidable modules with StatsNavigation. const HIDDABLE_MODULES = AVAILABLE_PAGE_MODULES.traffic.map( ( module ) => { @@ -532,11 +532,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
) } { isStatsNavigationImprovementEnabled ? ( - : null } - /> + ) : ( Date: Tue, 29 Apr 2025 11:20:35 +0530 Subject: [PATCH 18/21] Fix lint errors --- client/my-sites/stats/components/headers/page-header.tsx | 2 +- client/my-sites/stats/site.jsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/client/my-sites/stats/components/headers/page-header.tsx b/client/my-sites/stats/components/headers/page-header.tsx index 0260d50ca187..fcc1f06f2caa 100644 --- a/client/my-sites/stats/components/headers/page-header.tsx +++ b/client/my-sites/stats/components/headers/page-header.tsx @@ -1,7 +1,7 @@ import config from '@automattic/calypso-config'; +import { JetpackLogo } from '@automattic/components'; import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header'; import { STATS_PRODUCT_NAME, STATS_PRODUCT_NAME_IMPR } from '../../constants'; -import { JetpackLogo } from '@automattic/components'; function PageHeader() { const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' ); diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index d0d675fa79cb..9859107a9e7b 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -22,7 +22,6 @@ import { useShortcuts } from 'calypso/components/date-range/use-shortcuts'; import EmptyContent from 'calypso/components/empty-content'; import InlineSupportLink from 'calypso/components/inline-support-link'; import JetpackColophon from 'calypso/components/jetpack-colophon'; -import JetpackLogo from 'calypso/components/jetpack-logo'; import NavigationHeader from 'calypso/components/navigation-header'; import StickyPanel from 'calypso/components/sticky-panel'; import memoizeLast from 'calypso/lib/memoize-last'; @@ -33,7 +32,6 @@ import { STATS_FEATURE_PAGE_TRAFFIC, STATS_FEATURE_INTERVAL_DROPDOWN_WEEK, STATS_PRODUCT_NAME, - STATS_PRODUCT_NAME_IMPR, } from 'calypso/my-sites/stats/constants'; import { getMomentSiteZone } from 'calypso/my-sites/stats/hooks/use-moment-site-zone'; import { getChartRangeParams } from 'calypso/my-sites/stats/utils'; @@ -54,6 +52,7 @@ import { isJetpackSite } from 'calypso/state/sites/selectors'; import getEnvStatsFeatureSupportChecks from 'calypso/state/sites/selectors/get-env-stats-feature-supports'; import { getModuleToggles } from 'calypso/state/stats/module-toggles/selectors'; import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors'; +import PageHeader from './components/headers/page-header'; import StatsModuleAuthors from './features/modules/stats-authors'; import StatsModuleClicks from './features/modules/stats-clicks'; import StatsModuleCountries from './features/modules/stats-countries'; @@ -84,7 +83,6 @@ import StatsPlanUsage from './stats-plan-usage'; import statsStrings from './stats-strings'; import StatsUpsell from './stats-upsell/traffic-upsell'; import { appendQueryStringForRedirection, getPathWithUpdatedQueryString } from './utils'; -import PageHeader from './components/headers/page-header'; // Sync hidable modules with StatsNavigation. const HIDDABLE_MODULES = AVAILABLE_PAGE_MODULES.traffic.map( ( module ) => { From 2528130fe720d3e9601ff946e9d611d9cb674b2d Mon Sep 17 00:00:00 2001 From: Nikhil Date: Tue, 29 Apr 2025 11:24:21 +0530 Subject: [PATCH 19/21] use logo with new props --- .../my-sites/stats/components/headers/page-header.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/my-sites/stats/components/headers/page-header.tsx b/client/my-sites/stats/components/headers/page-header.tsx index fcc1f06f2caa..e07da73c5120 100644 --- a/client/my-sites/stats/components/headers/page-header.tsx +++ b/client/my-sites/stats/components/headers/page-header.tsx @@ -10,8 +10,10 @@ function PageHeader() { return ( } + titleProps={ { + title: STATS_PRODUCT_NAME, + titleLogo: , + } } /> ); } @@ -19,7 +21,9 @@ function PageHeader() { return ( ); } From db51525bee826f1e1c90882478c4c1ff7dab7338 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Tue, 29 Apr 2025 11:35:11 +0530 Subject: [PATCH 20/21] Simplify the monochrome condition --- client/components/jetpack-logo/index.jsx | 11 ++++------- .../my-sites/stats/components/headers/page-header.tsx | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index 72d7c7af0cd5..c033c6716ee3 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -59,15 +59,10 @@ const LogoPathSize32Monochrome = () => ( * @param {Object} [props.aria] - ARIA attributes. * @returns The rendered NavigationHeader component */ -const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, className, aria } ) => { +const JetpackLogo = ( { full = false, monochrome, size = 32, className, aria } ) => { const classes = clsx( 'jetpack-logo', className ); const ariaProps = useAriaProps( aria ); - // This is to ensure compatibility with the legacy behavior, where a size of 24 always results in a monochrome logo. - if ( monochrome === undefined && size === 24 ) { - monochrome = true; - } - if ( full === true ) { return ( @@ -81,7 +76,9 @@ const JetpackLogo = ( { full = false, monochrome = undefined, size = 32, classNa ); } - if ( 24 === size && monochrome ) { + // If size=24 and monochrome is true or undefined, return a monochrome logo - This is to ensure legacy behavior of the component. + // Return a non-monochrome logo if monochrome=false is explicitly passed with size 24. + if ( 24 === size && ( monochrome || monochrome === undefined ) ) { return ( // eslint-disable-next-line wpcalypso/jsx-classname-namespace diff --git a/client/my-sites/stats/components/headers/page-header.tsx b/client/my-sites/stats/components/headers/page-header.tsx index e07da73c5120..56d409b0532f 100644 --- a/client/my-sites/stats/components/headers/page-header.tsx +++ b/client/my-sites/stats/components/headers/page-header.tsx @@ -1,5 +1,5 @@ import config from '@automattic/calypso-config'; -import { JetpackLogo } from '@automattic/components'; +import JetpackLogo from 'calypso/components/jetpack-logo'; import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header'; import { STATS_PRODUCT_NAME, STATS_PRODUCT_NAME_IMPR } from '../../constants'; From a9a5730ae3ecf581ec2e3dc813be8dea2f4bf8be Mon Sep 17 00:00:00 2001 From: Nikhil Date: Tue, 29 Apr 2025 12:07:34 +0530 Subject: [PATCH 21/21] Update the function doc return statement Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- client/components/jetpack-logo/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/jetpack-logo/index.jsx b/client/components/jetpack-logo/index.jsx index c033c6716ee3..762d8b2d611e 100644 --- a/client/components/jetpack-logo/index.jsx +++ b/client/components/jetpack-logo/index.jsx @@ -57,7 +57,7 @@ const LogoPathSize32Monochrome = () => ( * @param {number} [props.size] - The size of the logo. * @param {string} [props.className] - Additional class names. * @param {Object} [props.aria] - ARIA attributes. - * @returns The rendered NavigationHeader component + * @returns The rendered Jetpack logo component */ const JetpackLogo = ( { full = false, monochrome, size = 32, className, aria } ) => { const classes = clsx( 'jetpack-logo', className );