Revert "Domains: Add domains management list breadcrumbs (#57082)" (#…

…57371) This reverts commit 776cd56.
Automattic · Oct 26, 2021 · 24cf70a · 24cf70a
1 parent d679111
commit 24cf70a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 115 deletions.
diff --git a/client/my-sites/domains/domain-management/components/breadcrumbs/style.scss b/client/my-sites/domains/domain-management/components/breadcrumbs/style.scss
@@ -2,12 +2,9 @@
 @import '@wordpress/base-styles/mixins';
 
 .breadcrumbs {
-	position: relative;
 	margin: 0;
 
 	@include break-mobile {
-		position: sticky;
-		top: -44px;
 		/* hack to make the breadcrumbs closer to the top of the content area */
 		margin-top: -44px;
 	}
@@ -18,10 +15,6 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 16px;
-
-	@include break-mobile {
-		padding: 16px 0;
-	}
 }
 
 .breadcrumbs__bottom-border {
@@ -59,11 +52,6 @@
 	& a {
 		color: var( --color-neutral-50 );
 	}
-	& span:first-child {
-		font-size: $font-body;
-		font-weight: 600;
-		color: var( --color-neutral-80 );
-	}
 
 	@include break-mobile {
 		display: none;

diff --git a/client/my-sites/domains/domain-management/list/options-domain-button.jsx b/client/my-sites/domains/domain-management/list/options-domain-button.jsx
@@ -1,5 +1,4 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
 import { Button, Gridicon } from '@automattic/components';
 import { localize } from 'i18n-calypso';
 import page from 'page';
@@ -21,12 +20,10 @@ class AddDomainButton extends Component {
 	static propTypes = {
 		selectedSiteSlug: PropTypes.string,
 		specificSiteActions: PropTypes.bool,
-		ellipsisButton: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		specificSiteActions: false,
-		ellipsisButton: false,
 	};
 
 	state = {
@@ -64,10 +61,10 @@ class AddDomainButton extends Component {
 			const useYourDomainUrl = domainUseMyDomain( this.props.selectedSiteSlug );
 			return (
 				<Fragment>
-					<PopoverMenuItem icon="search" onClick={ this.clickAddDomain }>
+					<PopoverMenuItem onClick={ this.clickAddDomain }>
 						{ translate( 'Search for a domain' ) }
 					</PopoverMenuItem>
-					<PopoverMenuItem icon="domains" href={ useYourDomainUrl } onClick={ this.trackMenuClick }>
+					<PopoverMenuItem href={ useYourDomainUrl } onClick={ this.trackMenuClick }>
 						{ translate( 'Use a domain I own' ) }
 					</PopoverMenuItem>
 				</Fragment>
@@ -76,66 +73,40 @@ class AddDomainButton extends Component {
 
 		return (
 			<Fragment>
-				{ ! config.isEnabled( 'domains/management-list-redesign' ) && (
-					<PopoverMenuItem href={ domainManagementAllRoot() } onClick={ this.trackMenuClick }>
-						{ translate( 'Manage all domains' ) }
-					</PopoverMenuItem>
-				) }
-				<PopoverMenuItem icon="plus" href="/new" onClick={ this.trackMenuClick }>
+				<PopoverMenuItem href={ domainManagementAllRoot() } onClick={ this.trackMenuClick }>
+					{ translate( 'Manage all domains' ) }
+				</PopoverMenuItem>
+				<PopoverMenuItem href="/new" onClick={ this.trackMenuClick }>
 					{ translate( 'Add a domain to a new site' ) }
 				</PopoverMenuItem>
-				<PopoverMenuItem icon="create" href="/domains/add" onClick={ this.trackMenuClick }>
+				<PopoverMenuItem href="/domains/add" onClick={ this.trackMenuClick }>
 					{ translate( 'Add a domain to a different site' ) }
 				</PopoverMenuItem>
-				<PopoverMenuItem icon="domains" href="/start/domain" onClick={ this.trackMenuClick }>
+				<PopoverMenuItem href="/start/domain" onClick={ this.trackMenuClick }>
 					{ translate( 'Add a domain without a site' ) }
 				</PopoverMenuItem>
 			</Fragment>
 		);
 	};
 
-	getDesktopViewLabel() {
+	render() {
 		const { translate } = this.props;
 
-		if ( this.props.ellipsisButton ) {
-			return <Gridicon icon="ellipsis" className="options-domain-button__ellipsis" />;
-		}
-
-		if ( this.props.specificSiteActions ) {
-			if ( config.isEnabled( 'domains/management-list-redesign' ) ) {
-				return translate( 'Add a domain' );
-			}
-			return translate( 'Add a domain to this site' );
-		}
-		return translate( 'Other domain options' );
-	}
-
-	render() {
-		const { specificSiteActions, ellipsisButton } = this.props;
+		const label = this.props.specificSiteActions
+			? translate( 'Add a domain to this site' )
+			: translate( 'Other domain options' );
 
 		return (
 			<Fragment>
 				<Button
-					primary={ specificSiteActions }
+					primary={ this.props.specificSiteActions }
 					compact
 					className="options-domain-button"
 					onClick={ this.toggleAddMenu }
 					ref={ this.addDomainButtonRef }
 				>
-					{ this.getDesktopViewLabel() }
-					{ ! ellipsisButton && <Gridicon icon="chevron-down" /> }
-				</Button>
-				<Button
-					primary={ specificSiteActions }
-					className="options-domain-button options-domain-button__mobile"
-					onClick={ this.toggleAddMenu }
-					ref={ this.addDomainButtonRef }
-					borderless={ ellipsisButton }
-				>
-					{ ! ellipsisButton && <Gridicon icon="plus" /> }
-					{ ellipsisButton && (
-						<Gridicon icon="ellipsis" className="options-domain-button__ellipsis" />
-					) }
+					{ label }
+					<Gridicon icon="chevron-down" />
 				</Button>
 				<PopoverMenu
 					className="options-domain-button__popover"

diff --git a/client/my-sites/domains/domain-management/list/options-domain-button.scss b/client/my-sites/domains/domain-management/list/options-domain-button.scss
@@ -1,26 +1,9 @@
-@import '@wordpress/base-styles/breakpoints';
-@import '@wordpress/base-styles/mixins';
-
-.options-domain-button,
-.options-domain-button__mobile {
-	display: none;
+.options-domain-button {
+	& > .gridicon {
+		margin-left: 5px;
+	}
 
 	&__popover {
 		margin-top: 5px;
 	}
-
-	@include break-mobile {
-		display: inline;
-
-		& > .gridicon {
-			margin-left: 5px;
-		}
-	}
-}
-
-.options-domain-button__mobile {
-	display: initial;
-	@include break-mobile {
-		display: none;
-	}
-}
+}
diff --git a/client/my-sites/domains/domain-management/list/site-domains.jsx b/client/my-sites/domains/domain-management/list/site-domains.jsx
@@ -18,7 +18,6 @@ import BodySectionCssClass from 'calypso/layout/body-section-css-class';
 import { type } from 'calypso/lib/domains/constants';
 import HeaderCart from 'calypso/my-sites/checkout/cart/header-cart';
 import DomainWarnings from 'calypso/my-sites/domains/components/domain-warnings';
-import Breadcrumbs from 'calypso/my-sites/domains/domain-management/components/breadcrumbs';
 import EmptyDomainsListCard from 'calypso/my-sites/domains/domain-management/list/empty-domains-list-card';
 import OptionsDomainButton from 'calypso/my-sites/domains/domain-management/list/options-domain-button';
 import WpcomDomainItem from 'calypso/my-sites/domains/domain-management/list/wpcom-domain-item';
@@ -186,35 +185,6 @@ export class SiteDomains extends Component {
 		);
 	}
 
-	renderBreadcrumbs() {
-		const { translate } = this.props;
-
-		const item = {
-			label: translate( 'Domains' ),
-			helpBubble: translate(
-				'Manage the domains connected to your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
-				{
-					components: {
-						learnMoreLink: <InlineSupportLink supportContext="domains" showIcon={ false } />,
-					},
-				}
-			),
-		};
-		const buttons = [
-			<OptionsDomainButton key="breadcrumb_button_1" specificSiteActions />,
-			<OptionsDomainButton key="breadcrumb_button_2" ellipsisButton />,
-		];
-
-		return (
-			<Breadcrumbs
-				items={ [ item ] }
-				mobileItem={ item }
-				buttons={ buttons }
-				mobileButtons={ buttons }
-			/>
-		);
-	}
-
 	render() {
 		if ( ! this.props.userCanManageOptions ) {
 			if ( this.props.renderAllSites ) {
@@ -264,7 +234,6 @@ export class SiteDomains extends Component {
 		return (
 			<Main wideLayout>
 				<BodySectionCssClass bodyClass={ [ 'edit__body-white' ] } />
-				{ this.renderBreadcrumbs() }
 				<DocumentHead title={ headerText } />
 				<SidebarNavigation />
 				{ this.renderNewDesign() }

diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss
@@ -2,12 +2,6 @@
 @import '@wordpress/base-styles/breakpoints';
 @import '@wordpress/base-styles/mixins';
 
-.breadcrumbs svg.options-domain-button__ellipsis {
-	transform: rotate( 90deg ) translateX( -2px );
-	height: 14px;
-	margin-left: 0;
-}
-
 .domain-management-list__notice {
 	margin-bottom: 0;
 }