Reader: Use toggle group control on search page (#102083)

Use `ToggleGroupControl` for sorting on `/reader/search` page which is a core component.

Author: mehmoodak

client/reader/search-stream/index.jsx

@@ -1,5 +1,9 @@
 import page from '@automattic/calypso-router';
-import { CompactCard, SegmentedControl } from '@automattic/components';
+import { CompactCard } from '@automattic/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import { trim, flatMap } from 'lodash';
@@ -88,23 +92,27 @@ class SearchStream extends React.Component {
 		window.scrollTo( 0, 0 );
 	};
 
-	useRelevanceSort = () => {
-		const sort = 'relevance';
-		recordAction( 'search_page_clicked_relevance_sort' );
-		this.props.recordReaderTracksEvent( 'calypso_reader_clicked_search_sort', {
-			query: this.props.query,
-			sort,
-		} );
-		updateQueryArg( { sort } );
-	};
+	onChangeSortPicker = ( sort ) => {
+		if ( typeof sort !== 'string' ) {
+			return;
+		}
+
+		switch ( sort ) {
+			case 'date':
+				recordAction( 'search_page_clicked_date_sort' );
+				break;
+			case 'relevance':
+				recordAction( 'search_page_clicked_relevance_sort' );
+				break;
+		}
+
+		if ( recordReaderTracksEvent ) {
+			this.props.recordReaderTracksEvent( 'calypso_reader_clicked_search_sort', {
+				query: this.props.query,
+				sort,
+			} );
+		}
 
-	useDateSort = () => {
-		const sort = 'date';
-		recordAction( 'search_page_clicked_date_sort' );
-		this.props.recordReaderTracksEvent( 'calypso_reader_clicked_search_sort', {
-			query: this.props.query,
-			sort,
-		} );
 		updateQueryArg( { sort } );
 	};
 
@@ -121,7 +129,7 @@ class SearchStream extends React.Component {
 		const { query, translate, searchType, suggestions, isLoggedIn } = this.props;
 		const sortOrder = this.props.sort;
 		const wideDisplay = this.props.width > WIDE_DISPLAY_CUTOFF;
-		const segmentedControlClass = wideDisplay
+		const toggleGroupControlClasses = wideDisplay
 			? 'search-stream__sort-picker is-wide'
 			: 'search-stream__sort-picker';
 		// Hide posts and sites if the only result has no feed ID. This can happen when searching
@@ -191,17 +199,20 @@ class SearchStream extends React.Component {
 					</CompactCard>
 					<SearchFollowButton query={ query } feeds={ this.state.feeds } />
 					{ query && (
-						<SegmentedControl compact className={ segmentedControlClass }>
-							<SegmentedControl.Item
-								selected={ sortOrder !== 'date' }
-								onClick={ this.useRelevanceSort }
+						<div className={ toggleGroupControlClasses }>
+							<ToggleGroupControl
+								hideLabelFromVision
+								isBlock
+								label=""
+								value={ sortOrder }
+								onChange={ this.onChangeSortPicker }
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 							>
-								{ TEXT_RELEVANCE_SORT }
-							</SegmentedControl.Item>
-							<SegmentedControl.Item selected={ sortOrder === 'date' } onClick={ this.useDateSort }>
-								{ TEXT_DATE_SORT }
-							</SegmentedControl.Item>
-						</SegmentedControl>
+								<ToggleGroupControlOption label={ TEXT_RELEVANCE_SORT } value="relevance" />
+								<ToggleGroupControlOption label={ TEXT_DATE_SORT } value="date" />
+							</ToggleGroupControl>
+						</div>
 					) }
 					{ ! query && (
 						<BlankSuggestions

client/reader/search-stream/style.scss

@@ -227,13 +227,29 @@
 .search-stream__sort-picker {
 	position: absolute;
 	z-index: z-index("root", ".search-stream__sort-picker");
-	bottom: 15px;
-	right: 15px;
+	right: 16px;
+	top: 100px;
+	width: 170px;
+
+	@include break-small {
+		right: 0;
+	}
 
 	&.is-wide {
-		bottom: unset;
-		right: 50px;
-		top: 41px;
+		top: 30px;
+		right: 45px;
+	}
+}
+
+div.is-section-reader:not(.is-logged-in) {
+	.search-stream__sort-picker {
+		top: 64px;
+		right: 85px;
+
+		@include break-small {
+			top: 76px;
+			right: 70px;
+		}
 	}
 }