Domains Management Revamp: Fix breadcrumb line break on smaller scree…

…ns (#98431) * Register plans comparison route * Update page header * Hide back button * Update path generation * Fix popover style * Reduce table padding for smaller screens * Accept classname for breadcrumb items * Break line only for long domain names * Add custom classname for domain items on breadcrumbs * Add missing dependency on useMemo * Fix lint
Automattic · Jan 16, 2025 · 6ee6989 · 6ee6989
1 parent ed3c9fc
commit 6ee6989
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 9 deletions.
diff --git a/client/components/breadcrumb/index.tsx b/client/components/breadcrumb/index.tsx
@@ -95,6 +95,7 @@ export type Item = {
 	helpBubble?: React.ReactElement;
 	icon?: React.ReactElement;
 	onClick?: () => void;
+	className?: string;
 };
 interface Props {
 	items: Item[];
@@ -140,7 +141,7 @@ const Breadcrumb: React.FunctionComponent< Props > = ( props ) => {
 	return (
 		<StyledUl className="breadcrumbs">
 			{ items.map( ( item: Item, index: Key ) => (
-				<StyledLi key={ index }>
+				<StyledLi key={ index } className={ item.className }>
 					{ item.icon && <StyledIcon>{ item.icon }</StyledIcon> }
 					{ index !== 0 && <StyledGridicon icon="chevron-right" size={ 14 } /> }
 					{ item.href && index !== items.length - 1 ? (

diff --git a/...my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx b/...my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx
@@ -29,6 +29,7 @@ const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 					currentRoute,
 					inSiteContext
 				),
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: translate( 'Email' ),
@@ -57,7 +58,7 @@ const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 		}
 
 		return baseNavigationItems;
-	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] );
+	}, [ currentRoute, inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] );
 
 	return (
 		<>

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx
@@ -24,6 +24,7 @@ const AddMailboxHeader: CustomHeaderComponentType = ( {
 			{
 				label: selectedDomainName,
 				href: `${ domainManagementOverviewRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`,
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: translate( 'Email' ),

diff --git a/...nt/my-sites/domains/domain-management/subpage-wrapper/headers/compare-email-providers.tsx b/...nt/my-sites/domains/domain-management/subpage-wrapper/headers/compare-email-providers.tsx
@@ -28,6 +28,7 @@ const CompareEmailProvidersHeader: CustomHeaderComponentType = ( {
 					currentRoute,
 					inSiteContext
 				),
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: translate( 'Email' ),
@@ -56,7 +57,7 @@ const CompareEmailProvidersHeader: CustomHeaderComponentType = ( {
 		}
 
 		return baseNavigationItems;
-	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site ] );
+	}, [ currentRoute, inSiteContext, selectedDomainName, selectedSiteSlug, site ] );
 
 	return (
 		<NavigationHeader

diff --git a/...my-sites/domains/domain-management/subpage-wrapper/headers/contact-information-header.tsx b/...my-sites/domains/domain-management/subpage-wrapper/headers/contact-information-header.tsx
@@ -26,6 +26,7 @@ const ContactInformationHeader: CustomHeaderComponentType = ( {
 					null,
 					inSiteContext
 				),
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: translate( 'Contact information' ),

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/dns-record-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/dns-record-header.tsx
@@ -43,6 +43,7 @@ const DnsRecordHeader: CustomHeaderComponentType = ( {
 					null,
 					inSiteContext
 				),
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: translate( 'DNS records' ),

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/dns-records-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/dns-records-header.tsx
@@ -40,6 +40,7 @@ const DNSRecordsHeader: CustomHeaderComponentType = ( {
 					null,
 					inSiteContext
 				),
+				className: 'navigation-header__domain-name',
 			},
 			{
 				label: dnsRecordsTitle,
@@ -58,7 +59,7 @@ const DNSRecordsHeader: CustomHeaderComponentType = ( {
 		}
 
 		return baseNavigationItems;
-	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] );
+	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site ] );
 
 	return (
 		<NavigationHeader

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss
@@ -225,11 +225,17 @@
                 padding-top: 16px;
 
                 .breadcrumbs li {
-                    > a,
-                    > span {
-                        word-break: break-word;
-                        overflow-wrap: break-word;
-                        white-space: normal;
+                    &.navigation-header__domain-name {
+                        > a,
+                        > span {
+                            word-break: break-word;
+                            overflow-wrap: break-word;
+                            white-space: normal;
+                        }
+                    }
+
+                    > .gridicons-chevron-right {
+                        margin: 0 8px;
                     }
                 }
             }
-Original file line number
+Diff line change
@@ Expand Up @@
     					null,
     					inSiteContext
     				),
+    				className: 'navigation-header__domain-name',
     			},
     			{
     				label: translate( 'Contact information' ),
@@ Expand Down @@