Skip to content

Commit

Permalink
Domains Transfers: Move trash/refresh to the validation text (#79649)
Browse files Browse the repository at this point in the history 
* Domains Transfers: Move trash/refresh to the validation text

* Domain Transfer: remove domain control CSS

* Domain Transfer: Tweaks to field validation positioning

---------

Co-authored-by: Eric Binnion <ericbinnion@gmail.com>
  • Loading branch information
@lupus2k @ebinnion
lupus2k and ebinnion authored Jul 20, 2023
1 parent 0915660 commit 7689f2b
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 96 deletions.
81 changes: 40 additions & 41 deletions .../declarative-flow/internals/steps-repository/domain-transfer-domains/domain-code-pair.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
import { FormInputValidation } from '@automattic/components';
import formatCurrency from '@automattic/format-currency';
import { Button, Icon } from '@wordpress/components';
import { check, trash, closeSmall } from '@wordpress/icons';
import { check, closeSmall } from '@wordpress/icons';
import { useI18n } from '@wordpress/react-i18n';
import classnames from 'classnames';
import { useEffect } from 'react';
import Gridicon from 'calypso/../packages/components/src/gridicon';
import FormFieldset from 'calypso/components/forms/form-fieldset';
import FormLabel from 'calypso/components/forms/form-label';
import FormExplanation from 'calypso/components/forms/form-setting-explanation';
Expand Down Expand Up @@ -132,6 +131,28 @@ export function DomainCodePair( {
}
}, [ shouldReportError, valid, domain, message, errorStatus ] );

const domainActions = (
<>
&nbsp;
<Button
// Disable the delete button on initial state meaning. no domain, no auth and one row.
disabled={ ! domain && ! auth && domainCount === 1 }
onClick={ () => onRemove( id ) }
>
<span className="delete-label">{ __( 'Discard Domain' ) }</span>
</Button>
<Button
title={ __( 'Refresh' ) }
disabled={ ! refetch }
onClick={ () => refetch?.() }
className={ classnames( 'domains__domain-refresh', {
'is-invisible-field': ! refetch,
} ) }
>
<span className="refresh-label">{ __( 'Refresh' ) }</span>
</Button>
</>
);
return (
<div className="domains__domain-info-and-validation">
<div className="domains__domain-info">
Expand Down Expand Up @@ -201,19 +222,19 @@ export function DomainCodePair( {
/>
{ domainInputFieldIcon( valid, shouldReportError ) }
</FormFieldset>
{ ( shouldReportError || ( message && loading ) ) && (
<div className="domains__domain-validation is-mobile">
{ shouldReportError && (
<FormInputValidation
isError={ ! valid }
text={ message }
children={ domainActions }
></FormInputValidation>
) }
{ message && loading && <FormExplanation>{ message }</FormExplanation> }
</div>
) }
</div>
{ ( shouldReportError || ( message && loading ) ) && (
<div className="domains__domain-validation is-mobile">
{ shouldReportError && (
<FormInputValidation isError={ ! valid } text={ message }></FormInputValidation>
) }
{ message && loading && (
<div>
<FormExplanation>{ message }</FormExplanation>
</div>
) }
</div>
) }
<div className="domains__domain-price">
<FormFieldset>
<FormLabel
Expand All @@ -231,36 +252,14 @@ export function DomainCodePair( {
/>
</FormFieldset>
</div>
<div className="domains__domain-controls">
<div className="domains__domain-delete">
<Button
// Disable the delete button on initial state meaning. no domain, no auth and one row.
disabled={ ! domain && ! auth && domainCount === 1 }
icon={ trash }
onClick={ () => onRemove( id ) }
>
<span className="delete-label">{ __( 'Delete' ) }</span>
</Button>
</div>
<div
className={ classnames( 'domains__domain-refresh', {
'is-invisible-field': ! refetch,
} ) }
>
<Button
icon={ <Gridicon icon="sync" width={ 24 } height={ 24 } /> }
title={ __( 'Refresh' ) }
disabled={ ! refetch }
onClick={ () => refetch?.() }
>
<span className="refresh-label">{ __( 'Refresh' ) }</span>
</Button>
</div>
</div>
</div>
<div className="domains__domain-validation is-desktop">
{ shouldReportError && (
<FormInputValidation isError={ ! valid } text={ message }></FormInputValidation>
<FormInputValidation
isError={ ! valid }
text={ message }
children={ domainActions }
></FormInputValidation>
) }
{ message && loading && (
<div>
Expand Down
68 changes: 13 additions & 55 deletions ...g/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,16 +155,20 @@
}

.domains__domain-validation {
margin-top: 12px;

&.is-mobile {
display: none;
margin-top: 5px;
}

&.is-desktop {
display: block;
}

button {
padding: 0 5px;
text-decoration: underline;
}

@media (max-width: $break-medium ) {
margin-top: 0;

Expand All @@ -179,7 +183,7 @@
}

.domains__domain-domain {
flex: 7;
flex: 8;
}

.domains__domain-key {
Expand All @@ -196,7 +200,7 @@
}

.domains__domain-price {
flex: 2;
flex: 1;

.domains__domain-price-number {
align-items: center;
Expand Down Expand Up @@ -312,57 +316,6 @@
}
}


.domains__domain-controls {
display: flex;
gap: 16px;
flex: 1;

button {
&:hover {
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, var(--studio-blue-60)));
}
}

@media (min-width: $break-medium ) {
margin-left: -25px;
}

.domains__domain-refresh {
button {
cursor: pointer;

.refresh-label {
margin-left: 4px;
}
}

.refresh-label {
display: none;
}

@media (max-width: $break-medium ) {
.refresh-label {
display: block;
}
}
}

.domains__domain-delete {
.delete-label {
display: none;
}

@media (max-width: $break-medium ) {
order: 1;

.delete-label {
display: block;
}
}
}
}

.bulk-domain-transfer__container {

.bulk-domain-transfer__add-domain {
Expand Down Expand Up @@ -465,6 +418,11 @@
a {
text-decoration: underline;
}

// Remove left-padding for first button to minimize padding when line wraps on mobile.
button:first-of-type {
padding-left: 0;
}
}
}

Expand Down

0 comments on commit 7689f2b

Please sign in to comment.