From b876c0f70f26f906bf1e04958b34ff9c4d509140 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Sat, 6 Jun 2020 16:05:05 +0200 Subject: [PATCH 01/12] Enhance domain-picker package encapsulation 1. No need for extenal stying to look as it should 2. No more coupling with client folder 3. No more coupling with Gutenboading (S)CSS variables 4. Move as much as possible domain-picker logic to domain-picker 5. Use stores instead of props when possible (domainCategories) 6. Clean up a lot of uneeded CSS --- packages/domain-picker/package.json | 5 +- .../src/domain-categories/index.tsx | 14 +++-- .../domain-picker/src/domain-picker/index.tsx | 52 +++++++++---------- .../src/domain-picker/style.scss | 9 ++-- packages/domain-picker/src/hooks/constants.ts | 3 ++ .../src/hooks/use-domain-suggestions.ts | 36 +++++++++++++ .../domain-picker/src/styles/base-styles.scss | 4 ++ .../src/{ => styles}/mixins.scss | 3 +- .../domain-picker/src/styles/placeholder.scss | 29 +++++++++++ packages/domain-picker/src/variables.scss | 7 --- 10 files changed, 112 insertions(+), 50 deletions(-) create mode 100644 packages/domain-picker/src/hooks/constants.ts create mode 100644 packages/domain-picker/src/hooks/use-domain-suggestions.ts create mode 100644 packages/domain-picker/src/styles/base-styles.scss rename packages/domain-picker/src/{ => styles}/mixins.scss (75%) create mode 100644 packages/domain-picker/src/styles/placeholder.scss delete mode 100644 packages/domain-picker/src/variables.scss diff --git a/packages/domain-picker/package.json b/packages/domain-picker/package.json index 47fc92bc85e0e..5252d88044324 100644 --- a/packages/domain-picker/package.json +++ b/packages/domain-picker/package.json @@ -47,5 +47,8 @@ "@wordpress/i18n": "^3.10.0", "react": "^16.8" }, - "private": true + "private": true, + "devDependencies": { + "@wordpress/base-styles": "1.9.0" + } } diff --git a/packages/domain-picker/src/domain-categories/index.tsx b/packages/domain-picker/src/domain-categories/index.tsx index 13148af0ddfc3..b410e6bdde1a6 100644 --- a/packages/domain-picker/src/domain-categories/index.tsx +++ b/packages/domain-picker/src/domain-categories/index.tsx @@ -7,25 +7,19 @@ import { Icon, chevronDown } from '@wordpress/icons'; import classNames from 'classnames'; import { useI18n } from '@automattic/react-i18n'; import { useState } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; /** * Style dependencies */ import './style.scss'; -type DomainCategory = import('@automattic/data-stores').DomainSuggestions.DomainCategory; - export interface Props { onSelect: ( domainCategorySlug?: string ) => void; selected?: string; - domainCategories: DomainCategory[]; } -const DomainPickerCategories: React.FunctionComponent< Props > = ( { - onSelect, - selected, - domainCategories, -} ) => { +const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, selected } ) => { const { __ } = useI18n(); const [ isOpen, setIsOpen ] = useState( false ); @@ -35,6 +29,10 @@ const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect( slug ); }; + const domainCategories = useSelect( ( select ) => + select( 'automattic/domains/suggestions' ).getCategories() + ); + return (
{ showDomainCategories && (
- +
) }
diff --git a/packages/domain-picker/src/domain-picker/style.scss b/packages/domain-picker/src/domain-picker/style.scss index bbadfbd214349..1dae2d4e5999c 100644 --- a/packages/domain-picker/src/domain-picker/style.scss +++ b/packages/domain-picker/src/domain-picker/style.scss @@ -1,7 +1,5 @@ -@import 'assets/stylesheets/gutenberg-base-styles'; -@import 'assets/stylesheets/shared/mixins/placeholder'; // Contains the placeholder mixin -@import 'assets/stylesheets/shared/animation'; // Needed for the placeholder -@import '../mixins'; +@import '../styles/placeholder.scss'; // Contains the placeholder mixin +@import '../styles/mixins'; $domain-picker__suggestion-item-height: 24px; @@ -14,6 +12,8 @@ $domain-picker__suggestion-item-height: 24px; padding: 0; width: 100%; height: 100%; + border-top: unset; + border-bottom: unset; } .components-panel__row { @@ -188,6 +188,7 @@ $domain-picker__suggestion-item-height: 24px; } &.placeholder { + color: red; @include placeholder(); max-width: 30%; margin-right: auto; // position the placeholder to the left overriding justify-content: space-between diff --git a/packages/domain-picker/src/hooks/constants.ts b/packages/domain-picker/src/hooks/constants.ts new file mode 100644 index 0000000000000..f9284a0a9aa82 --- /dev/null +++ b/packages/domain-picker/src/hooks/constants.ts @@ -0,0 +1,3 @@ +export const PAID_DOMAINS_TO_SHOW = 5; +export const selectorDebounce = 100; +export const DOMAIN_SUGGESTION_VENDOR = 'variation4_front'; diff --git a/packages/domain-picker/src/hooks/use-domain-suggestions.ts b/packages/domain-picker/src/hooks/use-domain-suggestions.ts new file mode 100644 index 0000000000000..0f288b5dd10ef --- /dev/null +++ b/packages/domain-picker/src/hooks/use-domain-suggestions.ts @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { useSelect } from '@wordpress/data'; +import { DomainSuggestions } from '@automattic/data-stores'; + +import { DOMAIN_SUGGESTION_VENDOR, PAID_DOMAINS_TO_SHOW } from './constants'; + +const DOMAIN_SUGGESTIONS_STORE = DomainSuggestions.register( { + vendor: DOMAIN_SUGGESTION_VENDOR, +} ); + +export function useDomainSuggestions( + searchTerm = '', + domainCategory?: string, + locale = 'en', + quantity = PAID_DOMAINS_TO_SHOW +) { + return useSelect( + ( select ) => { + if ( ! searchTerm ) { + return; + } + return select( DOMAIN_SUGGESTIONS_STORE ).getDomainSuggestions( searchTerm, { + // Avoid `only_wordpressdotcom` — it seems to fail to find results sometimes + include_wordpressdotcom: true, + include_dotblogsubdomain: false, + quantity, + locale, + vendor: DOMAIN_SUGGESTION_VENDOR, + category_slug: domainCategory, + } ); + }, + [ searchTerm, domainCategory, quantity ] + ); +} diff --git a/packages/domain-picker/src/styles/base-styles.scss b/packages/domain-picker/src/styles/base-styles.scss new file mode 100644 index 0000000000000..efd1f7932c73a --- /dev/null +++ b/packages/domain-picker/src/styles/base-styles.scss @@ -0,0 +1,4 @@ +@import '~@wordpress/base-styles/colors'; +@import '~@wordpress/base-styles/breakpoints'; +@import '~@wordpress/base-styles/mixins'; +@import '~@automattic/calypso-color-schemes' diff --git a/packages/domain-picker/src/mixins.scss b/packages/domain-picker/src/styles/mixins.scss similarity index 75% rename from packages/domain-picker/src/mixins.scss rename to packages/domain-picker/src/styles/mixins.scss index da8e5615ca046..4bea1199a3567 100644 --- a/packages/domain-picker/src/mixins.scss +++ b/packages/domain-picker/src/styles/mixins.scss @@ -1,5 +1,4 @@ -@import './variables.scss'; -@import 'assets/stylesheets/gutenberg-base-styles'; +@import './base-styles.scss'; @mixin domain-picker-package--font-recoleta { font-family: Recoleta, Georgia, 'Times New Roman', Times, serif; diff --git a/packages/domain-picker/src/styles/placeholder.scss b/packages/domain-picker/src/styles/placeholder.scss new file mode 100644 index 0000000000000..9ce47fc222cd2 --- /dev/null +++ b/packages/domain-picker/src/styles/placeholder.scss @@ -0,0 +1,29 @@ +@import './base-styles.scss'; + +// ========================================================================== +// Placeholder mixin +// Adds animation to placeholder section +// ========================================================================== + +@mixin placeholder( $color-property: $light-gray-200 ) { + animation: loading-fade 1.6s ease-in-out infinite; + background: $color-property; + color: transparent; + + &::after { + content: '\00a0'; + } +} + +// Another pulsing animation for placeholders +@keyframes loading-fade { + 0% { + opacity: 0.5; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.5; + } +} diff --git a/packages/domain-picker/src/variables.scss b/packages/domain-picker/src/variables.scss deleted file mode 100644 index e28701f63f0b4..0000000000000 --- a/packages/domain-picker/src/variables.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Reusable style variables -$domain-picker-package-header-height: 64px; -$domain-picker-package-heading-padding-desktop: 64px 0 80px; -$domain-picker-package-heading-padding-mobile: 44px 0 50px; -$domain-picker-package-block-margin-mobile: 20px; -$domain-picker-package-block-margin-small: 44px; -$domain-picker-package-block-margin-medium: 88px; From b41ad1c8b36a2eeebb1b0bdc8c5edbc4f258c451 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Mon, 8 Jun 2020 14:48:54 +0200 Subject: [PATCH 02/12] Address review comments --- packages/domain-picker/package.json | 8 +++---- packages/domain-picker/src/constants.ts | 4 ++++ .../src/domain-categories/index.tsx | 7 +++++- .../src/domain-categories/style.scss | 2 +- .../domain-picker/src/domain-picker/index.tsx | 3 +-- .../src/domain-picker/style.scss | 1 - packages/domain-picker/src/hooks/constants.ts | 3 --- .../src/hooks/use-domain-suggestions.ts | 24 ++++++++++++------- .../domain-picker/src/styles/placeholder.scss | 6 ++--- 9 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 packages/domain-picker/src/constants.ts delete mode 100644 packages/domain-picker/src/hooks/constants.ts diff --git a/packages/domain-picker/package.json b/packages/domain-picker/package.json index 5252d88044324..0ab8bb3d96045 100644 --- a/packages/domain-picker/package.json +++ b/packages/domain-picker/package.json @@ -39,7 +39,8 @@ "lodash": "^4.17.15", "tslib": "^1.10.0", "use-debounce": "^3.1.0", - "uuid": "^7.0.2" + "uuid": "^7.0.2", + "@wordpress/base-styles": "^1.9.0" }, "peerDependencies": { "@wordpress/data": "^4.18.0", @@ -47,8 +48,5 @@ "@wordpress/i18n": "^3.10.0", "react": "^16.8" }, - "private": true, - "devDependencies": { - "@wordpress/base-styles": "1.9.0" - } + "private": true } diff --git a/packages/domain-picker/src/constants.ts b/packages/domain-picker/src/constants.ts new file mode 100644 index 0000000000000..ac6c6d24b832d --- /dev/null +++ b/packages/domain-picker/src/constants.ts @@ -0,0 +1,4 @@ +export const PAID_DOMAINS_TO_SHOW = 5; +export const DOMAIN_SEARCH_DEBOUNCE_INTERVAL = 300; +export const DOMAIN_SUGGESTION_VENDOR = 'variation4_front'; +export const DOMAIN_SUGGESTIONS_STORE = 'automattic/domains/suggestions'; diff --git a/packages/domain-picker/src/domain-categories/index.tsx b/packages/domain-picker/src/domain-categories/index.tsx index b410e6bdde1a6..3da37fbbbc867 100644 --- a/packages/domain-picker/src/domain-categories/index.tsx +++ b/packages/domain-picker/src/domain-categories/index.tsx @@ -9,6 +9,11 @@ import { useI18n } from '@automattic/react-i18n'; import { useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { DOMAIN_SUGGESTIONS_STORE } from '../constants'; + /** * Style dependencies */ @@ -30,7 +35,7 @@ const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, s }; const domainCategories = useSelect( ( select ) => - select( 'automattic/domains/suggestions' ).getCategories() + select( DOMAIN_SUGGESTIONS_STORE ).getCategories() ); return ( diff --git a/packages/domain-picker/src/domain-categories/style.scss b/packages/domain-picker/src/domain-categories/style.scss index 68afac0fc39b2..0c6516c2bde3e 100644 --- a/packages/domain-picker/src/domain-categories/style.scss +++ b/packages/domain-picker/src/domain-categories/style.scss @@ -1,4 +1,4 @@ -@import '../mixins'; +@import '../styles/mixins'; .domain-categories { diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index e0b0b4d1eaadb..5eb1ed62d82a3 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -23,6 +23,7 @@ import { } from '../utils/domain-suggestions'; import DomainCategories from '../domain-categories'; import CloseButton from '../close-button'; +import { PAID_DOMAINS_TO_SHOW } from '../constants'; /** * Style dependencies @@ -78,8 +79,6 @@ export interface Props { onSetDomainSearch: ( value: string ) => void; } -const PAID_DOMAINS_TO_SHOW = 5; - const DomainPicker: FunctionComponent< Props > = ( { showDomainConnectButton, showDomainCategories, diff --git a/packages/domain-picker/src/domain-picker/style.scss b/packages/domain-picker/src/domain-picker/style.scss index 1dae2d4e5999c..b46ebca878a32 100644 --- a/packages/domain-picker/src/domain-picker/style.scss +++ b/packages/domain-picker/src/domain-picker/style.scss @@ -188,7 +188,6 @@ $domain-picker__suggestion-item-height: 24px; } &.placeholder { - color: red; @include placeholder(); max-width: 30%; margin-right: auto; // position the placeholder to the left overriding justify-content: space-between diff --git a/packages/domain-picker/src/hooks/constants.ts b/packages/domain-picker/src/hooks/constants.ts deleted file mode 100644 index f9284a0a9aa82..0000000000000 --- a/packages/domain-picker/src/hooks/constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const PAID_DOMAINS_TO_SHOW = 5; -export const selectorDebounce = 100; -export const DOMAIN_SUGGESTION_VENDOR = 'variation4_front'; diff --git a/packages/domain-picker/src/hooks/use-domain-suggestions.ts b/packages/domain-picker/src/hooks/use-domain-suggestions.ts index 0f288b5dd10ef..dd8051cf30350 100644 --- a/packages/domain-picker/src/hooks/use-domain-suggestions.ts +++ b/packages/domain-picker/src/hooks/use-domain-suggestions.ts @@ -2,13 +2,17 @@ * External dependencies */ import { useSelect } from '@wordpress/data'; -import { DomainSuggestions } from '@automattic/data-stores'; +import { useDebounce } from 'use-debounce'; -import { DOMAIN_SUGGESTION_VENDOR, PAID_DOMAINS_TO_SHOW } from './constants'; - -const DOMAIN_SUGGESTIONS_STORE = DomainSuggestions.register( { - vendor: DOMAIN_SUGGESTION_VENDOR, -} ); +/** + * Internal dependencies + */ +import { + DOMAIN_SUGGESTION_VENDOR, + PAID_DOMAINS_TO_SHOW, + DOMAIN_SUGGESTIONS_STORE, + DOMAIN_SEARCH_DEBOUNCE_INTERVAL, +} from '../constants'; export function useDomainSuggestions( searchTerm = '', @@ -16,12 +20,14 @@ export function useDomainSuggestions( locale = 'en', quantity = PAID_DOMAINS_TO_SHOW ) { + const [ domainSearch ] = useDebounce( searchTerm, DOMAIN_SEARCH_DEBOUNCE_INTERVAL ); + return useSelect( ( select ) => { - if ( ! searchTerm ) { + if ( ! domainSearch ) { return; } - return select( DOMAIN_SUGGESTIONS_STORE ).getDomainSuggestions( searchTerm, { + return select( DOMAIN_SUGGESTIONS_STORE ).getDomainSuggestions( domainSearch, { // Avoid `only_wordpressdotcom` — it seems to fail to find results sometimes include_wordpressdotcom: true, include_dotblogsubdomain: false, @@ -31,6 +37,6 @@ export function useDomainSuggestions( category_slug: domainCategory, } ); }, - [ searchTerm, domainCategory, quantity ] + [ domainSearch, domainCategory, quantity ] ); } diff --git a/packages/domain-picker/src/styles/placeholder.scss b/packages/domain-picker/src/styles/placeholder.scss index 9ce47fc222cd2..15ed42c0eb18e 100644 --- a/packages/domain-picker/src/styles/placeholder.scss +++ b/packages/domain-picker/src/styles/placeholder.scss @@ -6,7 +6,7 @@ // ========================================================================== @mixin placeholder( $color-property: $light-gray-200 ) { - animation: loading-fade 1.6s ease-in-out infinite; + animation: domain-picker-loading-fade 1.6s ease-in-out infinite; background: $color-property; color: transparent; @@ -15,8 +15,8 @@ } } -// Another pulsing animation for placeholders -@keyframes loading-fade { +// a pulsing animation for placeholders +@keyframes domain-picker-loading-fade { 0% { opacity: 0.5; } From 485cba1306cc6938fc4beb721f3063449afe5d9b Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Mon, 8 Jun 2020 18:48:39 +0200 Subject: [PATCH 03/12] Match base styles version --- packages/domain-picker/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/domain-picker/package.json b/packages/domain-picker/package.json index 0ab8bb3d96045..5784400e28b46 100644 --- a/packages/domain-picker/package.json +++ b/packages/domain-picker/package.json @@ -40,7 +40,7 @@ "tslib": "^1.10.0", "use-debounce": "^3.1.0", "uuid": "^7.0.2", - "@wordpress/base-styles": "^1.9.0" + "@wordpress/base-styles": "^1.8.0" }, "peerDependencies": { "@wordpress/data": "^4.18.0", From bbfd0bf08cb87ba76e6f30c70b2170c766b0f03c Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Mon, 8 Jun 2020 18:54:17 +0200 Subject: [PATCH 04/12] Adapt to new domain-picker API changes (#43046) * Adapt to new domain-picker changes domain-picker change found in: #43045 * Fix typo in analyticsUiAlgo * Fix handler name and self-close DomainPicker tag --- .../components/domain-picker-button/index.tsx | 129 +++++++++--------- .../components/domain-picker-modal/index.tsx | 15 +- .../domain-picker-popover/index.tsx | 9 +- 3 files changed, 74 insertions(+), 79 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index 2b5c01aca6519..74015cf0a80f7 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -4,10 +4,13 @@ import * as React from 'react'; import { Button } from '@wordpress/components'; import { Icon, chevronDown } from '@wordpress/icons'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; +import { USER_STORE } from '../../stores/user'; + import { useI18n } from '@automattic/react-i18n'; import classnames from 'classnames'; import type { DomainSuggestions } from '@automattic/data-stores'; +import DomainPicker from '@automattic/domain-picker'; /** * Internal dependencies @@ -16,8 +19,7 @@ import DomainPickerPopover from '../domain-picker-popover'; import DomainPickerModal from '../domain-picker-modal'; import { FLOW_ID } from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; -import { useDomainSuggestions } from '../../hooks/use-domain-suggestions'; -import { DOMAIN_SUGGESTIONS_STORE } from '../../stores/domain-suggestions'; +import { useCurrentStep } from '../../path'; import { getSuggestionsVendor } from 'lib/domains/suggestions'; const DOMAIN_SUGGESTION_VENDOR = getSuggestionsVendor( true ); @@ -44,89 +46,86 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { } ) => { const buttonRef = React.createRef< HTMLButtonElement >(); - const domainSuggestions = useDomainSuggestions( { locale: useI18n().i18nLocale, quantity: 10 } ); - - const domainCategories = useSelect( ( select ) => - select( DOMAIN_SUGGESTIONS_STORE ).getCategories() - ); + const [ domainSearch, setDomainSearch ] = React.useState< string >( '' ); - const { domainSearch, domainCategory } = useSelect( ( select ) => - select( STORE_KEY ).getState() - ); - const { setDomainSearch, setDomainCategory } = useDispatch( STORE_KEY ); + const [ domainPickerMode, setDomainPickerMode ] = React.useState< + 'popover' | 'modal' | undefined + >(); - const [ isDomainPopoverVisible, setDomainPopoverVisibility ] = React.useState( false ); - const [ isDomainModalVisible, setDomainModalVisibility ] = React.useState( false ); - - const handlePopoverClose = ( e?: React.FocusEvent ) => { - // Don't collide with button toggling - if ( e?.relatedTarget === buttonRef.current ) { - return; - } - setDomainPopoverVisibility( false ); + const handlePopoverToggle = () => { + setDomainPickerMode( ( mode ) => ( mode ? undefined : 'popover' ) ); }; - const handleModalClose = () => { - setDomainModalVisibility( false ); + const handleClose = () => { + setDomainPickerMode( undefined ); }; - const handleMoreOptions = () => { - setDomainPopoverVisibility( false ); - setDomainModalVisibility( true ); + const onClickMoreOptions = () => { + setDomainPickerMode( 'modal' ); }; + const { __ } = useI18n(); + + const currentStep = useCurrentStep(); + + const { siteTitle, siteVertical } = useSelect( ( select ) => select( STORE_KEY ).getState() ); + const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() ); + + const prioritisedSearch = domainSearch.trim() || siteTitle; + let searchVal; + + if ( currentStep !== 'IntentGathering' ) { + searchVal = + prioritisedSearch || + siteVertical?.label.trim() || + currentUser?.username || + __( 'My new site' ); + } else { + searchVal = prioritisedSearch || ''; + } + + const domainPicker = ( + + ); + return ( <> - + isOpen={ domainPickerMode === 'popover' } + onClose={ handlePopoverToggle } + > + { domainPicker } + + + { domainPicker } + ); }; diff --git a/client/landing/gutenboarding/components/domain-picker-modal/index.tsx b/client/landing/gutenboarding/components/domain-picker-modal/index.tsx index b7709bed68ee2..606e7cc4d037c 100644 --- a/client/landing/gutenboarding/components/domain-picker-modal/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-modal/index.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import Modal from 'react-modal'; import { select } from '@wordpress/data'; -import DomainPicker, { Props as DomainPickerProps } from '@automattic/domain-picker'; /** * Internal dependencies @@ -17,11 +16,13 @@ import { STORE_KEY } from '../../stores/onboard'; */ import './style.scss'; -interface Props extends DomainPickerProps { +interface Props { + onClose: Function; isOpen: boolean; + children: any; } -const DomainPickerModal: React.FunctionComponent< Props > = ( { isOpen, onClose, ...props } ) => { +const DomainPickerModal: React.FunctionComponent< Props > = ( { isOpen, onClose, children } ) => { if ( ! isOpen ) { return null; } @@ -54,13 +55,7 @@ const DomainPickerModal: React.FunctionComponent< Props > = ( { isOpen, onClose, overlayClassName="domain-picker-modal-overlay" bodyOpenClassName="has-domain-picker-modal" > - + { children } ); }; diff --git a/client/landing/gutenboarding/components/domain-picker-popover/index.tsx b/client/landing/gutenboarding/components/domain-picker-popover/index.tsx index 7994d10e2e21d..c1f20deab483e 100644 --- a/client/landing/gutenboarding/components/domain-picker-popover/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-popover/index.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Popover } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { select } from '@wordpress/data'; -import DomainPicker, { Props as DomainPickerProps } from '@automattic/domain-picker'; /** * Internal dependencies @@ -18,11 +17,13 @@ import { STORE_KEY } from '../../stores/onboard'; */ import './style.scss'; -interface Props extends DomainPickerProps { +interface Props { + onClose: Function; isOpen: boolean; + children: any; } -const DomainPickerPopover: React.FunctionComponent< Props > = ( { isOpen, onClose, ...props } ) => { +const DomainPickerPopover: React.FunctionComponent< Props > = ( { isOpen, onClose, children } ) => { // Popover expands at medium viewport width const isMobile = useViewportMatch( 'medium', '<' ); @@ -59,7 +60,7 @@ const DomainPickerPopover: React.FunctionComponent< Props > = ( { isOpen, onClos position={ 'bottom center' } expandOnMobile={ true } > - + { children }
); From 871f54c0549d9c3b9cab0f9b09d024763af52566 Mon Sep 17 00:00:00 2001 From: Razvan Papadopol Date: Tue, 9 Jun 2020 12:04:01 +0300 Subject: [PATCH 05/12] - Add getDomainSearch selector to ONBOARD store. - Cleanup types and props in DomainPicker. - Don't debouce domain input value update. --- .../components/domain-picker-button/index.tsx | 34 ++++--------------- .../gutenboarding/stores/onboard/selectors.ts | 11 ++++++ .../domain-picker/src/domain-picker/index.tsx | 27 +++++---------- 3 files changed, 26 insertions(+), 46 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index 74015cf0a80f7..d1a10bd25d76a 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -2,13 +2,11 @@ * External dependencies */ import * as React from 'react'; +import classnames from 'classnames'; import { Button } from '@wordpress/components'; import { Icon, chevronDown } from '@wordpress/icons'; -import { useSelect } from '@wordpress/data'; -import { USER_STORE } from '../../stores/user'; - +import { useSelect, useDispatch } from '@wordpress/data'; import { useI18n } from '@automattic/react-i18n'; -import classnames from 'classnames'; import type { DomainSuggestions } from '@automattic/data-stores'; import DomainPicker from '@automattic/domain-picker'; @@ -19,7 +17,6 @@ import DomainPickerPopover from '../domain-picker-popover'; import DomainPickerModal from '../domain-picker-modal'; import { FLOW_ID } from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; -import { useCurrentStep } from '../../path'; import { getSuggestionsVendor } from 'lib/domains/suggestions'; const DOMAIN_SUGGESTION_VENDOR = getSuggestionsVendor( true ); @@ -44,9 +41,9 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { currentDomain, ...buttonProps } ) => { - const buttonRef = React.createRef< HTMLButtonElement >(); + const { __ } = useI18n(); - const [ domainSearch, setDomainSearch ] = React.useState< string >( '' ); + const buttonRef = React.createRef< HTMLButtonElement >(); const [ domainPickerMode, setDomainPickerMode ] = React.useState< 'popover' | 'modal' | undefined @@ -64,30 +61,13 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { setDomainPickerMode( 'modal' ); }; - const { __ } = useI18n(); - - const currentStep = useCurrentStep(); - - const { siteTitle, siteVertical } = useSelect( ( select ) => select( STORE_KEY ).getState() ); - const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() ); - - const prioritisedSearch = domainSearch.trim() || siteTitle; - let searchVal; - - if ( currentStep !== 'IntentGathering' ) { - searchVal = - prioritisedSearch || - siteVertical?.label.trim() || - currentUser?.username || - __( 'My new site' ); - } else { - searchVal = prioritisedSearch || ''; - } + const domainSearch = useSelect( ( select ) => select( STORE_KEY ).getDomainSearch() ); + const { setDomainSearch } = useDispatch( STORE_KEY ); const domainPicker = ( state.isRedirecting; export const getState = ( state: State ) => state; @@ -23,3 +29,8 @@ export const getSelectedFonts = ( state: State ) => state.selectedFonts; export const getSelectedVertical = ( state: State ) => state.siteVertical; export const getSelectedDomain = ( state: State ) => state.domain; export const getSelectedSiteTitle = ( state: State ) => state.siteTitle; +export const getDomainSearch = ( state: State ) => + state.domainSearch || + getSelectedSiteTitle( state ) || + getSelectedVertical( state )?.label.trim() || + select( USER_STORE ).getCurrentUser()?.username; diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index 5eb1ed62d82a3..dc979811c74bc 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -2,13 +2,12 @@ * External dependencies */ import React, { FunctionComponent, useState, useEffect } from 'react'; -import { useDebounce } from 'use-debounce'; - import { times } from 'lodash'; import { Button, Panel, PanelBody, PanelRow, TextControl } from '@wordpress/components'; import { Icon, search } from '@wordpress/icons'; import { getNewRailcarId, recordTrainTracksRender } from '@automattic/calypso-analytics'; import { useI18n } from '@automattic/react-i18n'; +import type { DomainSuggestions } from '@automattic/data-stores'; /** * Internal dependencies */ @@ -30,8 +29,7 @@ import { PAID_DOMAINS_TO_SHOW } from '../constants'; */ import './style.scss'; -type DomainSuggestion = import('@automattic/data-stores').DomainSuggestions.DomainSuggestion; -type DomainSuggestionQuery = import('@automattic/data-stores').DomainSuggestions.DomainSuggestionQuery; +type DomainSuggestion = DomainSuggestions.DomainSuggestion; export interface Props { showDomainConnectButton?: boolean; @@ -52,17 +50,9 @@ export interface Props { onMoreOptions?: () => void; - /** - * Additional parameters for the domain suggestions query. - */ - queryParameters?: Partial< DomainSuggestionQuery >; - - currentDomain?: DomainSuggestion; - quantity?: number; - /** The search results */ - domainSuggestions?: DomainSuggestion[]; + currentDomain?: DomainSuggestion; /** The flow where the Domain Picker is used. Eg: Gutenboarding */ analyticsFlowId: string; @@ -72,7 +62,7 @@ export interface Props { domainSuggestionVendor: string; - /** The domain search query */ + /** The initial domain search query */ domainSearch: string; /** Called when the domain search query is changed */ @@ -97,12 +87,11 @@ const DomainPicker: FunctionComponent< Props > = ( { const label = __( 'Search for a domain' ); const [ currentSelection, setCurrentSelection ] = useState( currentDomain ); - const [ domainCategory, setDomainCategory ] = useState< string | undefined >(); - const [ debouncedDomainSearch ] = useDebounce( domainSearch, 100 ); + const [ domainCategory, setDomainCategory ] = useState< string | undefined >(); const domainSuggestions = useDomainSuggestions( - debouncedDomainSearch, + domainSearch.trim(), domainCategory, useI18n().i18nLocale, 10 @@ -187,7 +176,7 @@ const DomainPicker: FunctionComponent< Props > = ( { recordTrainTracksRender( { uiAlgo: `/${ analyticsFlowId }/${ analyticsUiAlgo }`, fetchAlgo, - query: debouncedDomainSearch, + query: domainSearch, railcarId, result: isRecommended( suggestion ) ? domain + '#recommended' : domain, uiPosition, @@ -227,7 +216,7 @@ const DomainPicker: FunctionComponent< Props > = ( { label={ label } placeholder={ label } onChange={ onSetDomainSearch } - value={ debouncedDomainSearch } + value={ domainSearch } />
From d7bc9d016e5155f6bead263f0d27ff0313de3989 Mon Sep 17 00:00:00 2001 From: Razvan Papadopol Date: Tue, 9 Jun 2020 14:52:01 +0300 Subject: [PATCH 06/12] - Add domainSearch to DomainPicker local state. - Use initialDomainSearch prop to initialize domainSearch state. --- .../components/domain-picker-button/index.tsx | 2 +- packages/domain-picker/src/domain-picker/index.tsx | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index d1a10bd25d76a..89f32ce7f5b47 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -67,7 +67,7 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { const domainPicker = ( void; @@ -80,7 +80,7 @@ const DomainPicker: FunctionComponent< Props > = ( { analyticsFlowId, analyticsUiAlgo, domainSuggestionVendor, - domainSearch, + initialDomainSearch, onSetDomainSearch, } ) => { const { __ } = useI18n(); @@ -88,6 +88,8 @@ const DomainPicker: FunctionComponent< Props > = ( { const [ currentSelection, setCurrentSelection ] = useState( currentDomain ); + // keep domain query in local state to allow free editing of the input value while the modal is open + const [ domainSearch, setDomainSearch ] = useState< string >( initialDomainSearch ); const [ domainCategory, setDomainCategory ] = useState< string | undefined >(); const domainSuggestions = useDomainSuggestions( @@ -183,6 +185,11 @@ const DomainPicker: FunctionComponent< Props > = ( { } ); }; + const handleInputChange = ( searchQuery: string ) => { + setDomainSearch( searchQuery ); + onSetDomainSearch( searchQuery ); + }; + return ( @@ -215,7 +222,7 @@ const DomainPicker: FunctionComponent< Props > = ( { hideLabelFromVision label={ label } placeholder={ label } - onChange={ onSetDomainSearch } + onChange={ handleInputChange } value={ domainSearch } />
From 702172c694a03866e6c14147aaf4618678ff2131 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Tue, 9 Jun 2020 14:22:11 +0200 Subject: [PATCH 07/12] Fix styles and placeholder and domains count --- .../components/domain-picker-button/index.tsx | 12 ++++++++++-- client/landing/gutenboarding/constants.ts | 3 +++ packages/domain-picker/src/domain-picker/index.tsx | 2 +- packages/domain-picker/src/domain-picker/style.scss | 1 - 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index 89f32ce7f5b47..4eecdabe3891d 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -15,10 +15,13 @@ import DomainPicker from '@automattic/domain-picker'; */ import DomainPickerPopover from '../domain-picker-popover'; import DomainPickerModal from '../domain-picker-modal'; -import { FLOW_ID } from '../../constants'; +import { + FLOW_ID, + DOMAINS_SUGGESTION_COUNT_IN_POPOVER, + DOMAINS_SUGGESTION_COUNT_IN_MODAL, +} from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; import { getSuggestionsVendor } from 'lib/domains/suggestions'; - const DOMAIN_SUGGESTION_VENDOR = getSuggestionsVendor( true ); /** @@ -77,6 +80,11 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { onDomainSelect={ onDomainSelect } domainSuggestionVendor={ DOMAIN_SUGGESTION_VENDOR } analyticsUiAlgo={ domainPickerMode === 'modal' ? 'domain_modal' : 'domain_popover' } + quantity={ + domainPickerMode === 'modal' + ? DOMAINS_SUGGESTION_COUNT_IN_MODAL + : DOMAINS_SUGGESTION_COUNT_IN_POPOVER + } /> ); diff --git a/client/landing/gutenboarding/constants.ts b/client/landing/gutenboarding/constants.ts index f15172518f8e1..3104d2570a9eb 100644 --- a/client/landing/gutenboarding/constants.ts +++ b/client/landing/gutenboarding/constants.ts @@ -9,6 +9,9 @@ import type { ValuesType } from 'utility-types'; */ export const FLOW_ID = 'gutenboarding'; +export const DOMAINS_SUGGESTION_COUNT_IN_POPOVER = 5; +export const DOMAINS_SUGGESTION_COUNT_IN_MODAL = 10; + /** * Debounce our input + HTTP dependent select changes * diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index 538388199440f..5ec66f1ec22e8 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -251,7 +251,7 @@ const DomainPicker: FunctionComponent< Props > = ( { ) ) } { ! paidSuggestions && - times( quantity - 1, ( i ) => ) } + times( quantity, ( i ) => ) } { paidSuggestions && ( paidSuggestions?.length ? ( paidSuggestions.map( ( suggestion, i ) => ( diff --git a/packages/domain-picker/src/domain-picker/style.scss b/packages/domain-picker/src/domain-picker/style.scss index b46ebca878a32..7326df5b6d5a3 100644 --- a/packages/domain-picker/src/domain-picker/style.scss +++ b/packages/domain-picker/src/domain-picker/style.scss @@ -20,7 +20,6 @@ $domain-picker__suggestion-item-height: 24px; flex-direction: column; align-items: stretch; justify-content: flex-start; - margin: 0; label { max-width: 100%; From c7bdecd98f7b41e4517e6750ca414ad18f9218d8 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Tue, 9 Jun 2020 16:17:19 +0200 Subject: [PATCH 08/12] Use quantity variable in API request --- packages/domain-picker/src/domain-picker/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index 5ec66f1ec22e8..e3061dc00f529 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -96,12 +96,12 @@ const DomainPicker: FunctionComponent< Props > = ( { domainSearch.trim(), domainCategory, useI18n().i18nLocale, - 10 + quantity ); const allSuggestions = domainSuggestions; const freeSuggestions = getFreeDomainSuggestions( allSuggestions ); - const paidSuggestions = getPaidDomainSuggestions( allSuggestions )?.slice( 0, quantity ); + const paidSuggestions = getPaidDomainSuggestions( allSuggestions ); const recommendedSuggestion = getRecommendedDomainSuggestion( paidSuggestions ); const hasSuggestions = freeSuggestions?.length || paidSuggestions?.length; @@ -251,7 +251,7 @@ const DomainPicker: FunctionComponent< Props > = ( { ) ) } { ! paidSuggestions && - times( quantity, ( i ) => ) } + times( quantity - 1, ( i ) => ) } { paidSuggestions && ( paidSuggestions?.length ? ( paidSuggestions.map( ( suggestion, i ) => ( From 8f82d0348cc89ec2174a1783b1c42f13f4536b82 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Tue, 9 Jun 2020 16:22:16 +0200 Subject: [PATCH 09/12] Default to quantites based on domain-picker mode --- .../components/domain-picker-button/index.tsx | 11 +---------- client/landing/gutenboarding/constants.ts | 3 --- packages/domain-picker/src/constants.ts | 3 ++- packages/domain-picker/src/domain-picker/index.tsx | 9 +++++++-- 4 files changed, 10 insertions(+), 16 deletions(-) diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx index 4eecdabe3891d..e621278a995d9 100644 --- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx +++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx @@ -15,11 +15,7 @@ import DomainPicker from '@automattic/domain-picker'; */ import DomainPickerPopover from '../domain-picker-popover'; import DomainPickerModal from '../domain-picker-modal'; -import { - FLOW_ID, - DOMAINS_SUGGESTION_COUNT_IN_POPOVER, - DOMAINS_SUGGESTION_COUNT_IN_MODAL, -} from '../../constants'; +import { FLOW_ID } from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; import { getSuggestionsVendor } from 'lib/domains/suggestions'; const DOMAIN_SUGGESTION_VENDOR = getSuggestionsVendor( true ); @@ -80,11 +76,6 @@ const DomainPickerButton: React.FunctionComponent< Props > = ( { onDomainSelect={ onDomainSelect } domainSuggestionVendor={ DOMAIN_SUGGESTION_VENDOR } analyticsUiAlgo={ domainPickerMode === 'modal' ? 'domain_modal' : 'domain_popover' } - quantity={ - domainPickerMode === 'modal' - ? DOMAINS_SUGGESTION_COUNT_IN_MODAL - : DOMAINS_SUGGESTION_COUNT_IN_POPOVER - } /> ); diff --git a/client/landing/gutenboarding/constants.ts b/client/landing/gutenboarding/constants.ts index 3104d2570a9eb..f15172518f8e1 100644 --- a/client/landing/gutenboarding/constants.ts +++ b/client/landing/gutenboarding/constants.ts @@ -9,9 +9,6 @@ import type { ValuesType } from 'utility-types'; */ export const FLOW_ID = 'gutenboarding'; -export const DOMAINS_SUGGESTION_COUNT_IN_POPOVER = 5; -export const DOMAINS_SUGGESTION_COUNT_IN_MODAL = 10; - /** * Debounce our input + HTTP dependent select changes * diff --git a/packages/domain-picker/src/constants.ts b/packages/domain-picker/src/constants.ts index ac6c6d24b832d..8024fb11712fe 100644 --- a/packages/domain-picker/src/constants.ts +++ b/packages/domain-picker/src/constants.ts @@ -1,4 +1,5 @@ -export const PAID_DOMAINS_TO_SHOW = 5; +export const PAID_DOMAINS_TO_SHOW_WITH_CATEGORIES_MODE = 10; +export const PAID_DOMAINS_TO_SHOW_WITHOUT_CATEGORIES_MODE = 5; export const DOMAIN_SEARCH_DEBOUNCE_INTERVAL = 300; export const DOMAIN_SUGGESTION_VENDOR = 'variation4_front'; export const DOMAIN_SUGGESTIONS_STORE = 'automattic/domains/suggestions'; diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index e3061dc00f529..045ad9754e0f3 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -22,7 +22,10 @@ import { } from '../utils/domain-suggestions'; import DomainCategories from '../domain-categories'; import CloseButton from '../close-button'; -import { PAID_DOMAINS_TO_SHOW } from '../constants'; +import { + PAID_DOMAINS_TO_SHOW_WITH_CATEGORIES_MODE, + PAID_DOMAINS_TO_SHOW_WITHOUT_CATEGORIES_MODE, +} from '../constants'; /** * Style dependencies @@ -75,7 +78,9 @@ const DomainPicker: FunctionComponent< Props > = ( { onDomainSelect, onClose, onMoreOptions, - quantity = PAID_DOMAINS_TO_SHOW, + quantity = showDomainCategories + ? PAID_DOMAINS_TO_SHOW_WITH_CATEGORIES_MODE + : PAID_DOMAINS_TO_SHOW_WITHOUT_CATEGORIES_MODE, currentDomain, analyticsFlowId, analyticsUiAlgo, From d1770cf72879ae3534ba1a273d5fb77e666009d7 Mon Sep 17 00:00:00 2001 From: Razvan Papadopol Date: Tue, 9 Jun 2020 17:49:54 +0300 Subject: [PATCH 10/12] Load and display correct number of domain suggestions. --- packages/domain-picker/src/domain-picker/index.tsx | 2 +- packages/domain-picker/src/hooks/use-domain-suggestions.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/domain-picker/src/domain-picker/index.tsx b/packages/domain-picker/src/domain-picker/index.tsx index 045ad9754e0f3..4f55369072414 100644 --- a/packages/domain-picker/src/domain-picker/index.tsx +++ b/packages/domain-picker/src/domain-picker/index.tsx @@ -256,7 +256,7 @@ const DomainPicker: FunctionComponent< Props > = ( { ) ) } { ! paidSuggestions && - times( quantity - 1, ( i ) => ) } + times( quantity, ( i ) => ) } { paidSuggestions && ( paidSuggestions?.length ? ( paidSuggestions.map( ( suggestion, i ) => ( diff --git a/packages/domain-picker/src/hooks/use-domain-suggestions.ts b/packages/domain-picker/src/hooks/use-domain-suggestions.ts index dd8051cf30350..666f123750867 100644 --- a/packages/domain-picker/src/hooks/use-domain-suggestions.ts +++ b/packages/domain-picker/src/hooks/use-domain-suggestions.ts @@ -9,7 +9,7 @@ import { useDebounce } from 'use-debounce'; */ import { DOMAIN_SUGGESTION_VENDOR, - PAID_DOMAINS_TO_SHOW, + PAID_DOMAINS_TO_SHOW_WITHOUT_CATEGORIES_MODE, DOMAIN_SUGGESTIONS_STORE, DOMAIN_SEARCH_DEBOUNCE_INTERVAL, } from '../constants'; @@ -18,7 +18,7 @@ export function useDomainSuggestions( searchTerm = '', domainCategory?: string, locale = 'en', - quantity = PAID_DOMAINS_TO_SHOW + quantity = PAID_DOMAINS_TO_SHOW_WITHOUT_CATEGORIES_MODE ) { const [ domainSearch ] = useDebounce( searchTerm, DOMAIN_SEARCH_DEBOUNCE_INTERVAL ); @@ -31,7 +31,7 @@ export function useDomainSuggestions( // Avoid `only_wordpressdotcom` — it seems to fail to find results sometimes include_wordpressdotcom: true, include_dotblogsubdomain: false, - quantity, + quantity: quantity + 1, // increment the count to add the free domain locale, vendor: DOMAIN_SUGGESTION_VENDOR, category_slug: domainCategory, From 3cc22fcfc6a4b41a6250590ca18e82eecd54e93f Mon Sep 17 00:00:00 2001 From: Razvan Papadopol Date: Tue, 9 Jun 2020 17:50:30 +0300 Subject: [PATCH 11/12] Remove margin above footer of DomainPopover --- packages/domain-picker/src/domain-picker/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/domain-picker/src/domain-picker/style.scss b/packages/domain-picker/src/domain-picker/style.scss index 7326df5b6d5a3..b46ebca878a32 100644 --- a/packages/domain-picker/src/domain-picker/style.scss +++ b/packages/domain-picker/src/domain-picker/style.scss @@ -20,6 +20,7 @@ $domain-picker__suggestion-item-height: 24px; flex-direction: column; align-items: stretch; justify-content: flex-start; + margin: 0; label { max-width: 100%; From bd1e6eb644e62f00dba58f67f369c5219aa1c314 Mon Sep 17 00:00:00 2001 From: Razvan Papadopol Date: Tue, 9 Jun 2020 18:17:41 +0300 Subject: [PATCH 12/12] increase specificity on domain modal in Gutenboarding --- .../gutenboarding/components/domain-picker-modal/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/landing/gutenboarding/components/domain-picker-modal/style.scss b/client/landing/gutenboarding/components/domain-picker-modal/style.scss index b05e15fad79a4..40ab7ba353c74 100644 --- a/client/landing/gutenboarding/components/domain-picker-modal/style.scss +++ b/client/landing/gutenboarding/components/domain-picker-modal/style.scss @@ -5,7 +5,7 @@ @include onboarding-modal-overlay; } -.domain-picker-modal { +.is-section-gutenboarding .domain-picker-modal { .domain-picker__panel-row-main {