From b92500b35f8bf8ba21bbd0008cf28a44350f7d22 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Thu, 10 Oct 2019 07:00:33 +0800 Subject: [PATCH] Onboarding: Replace TextControl component (https://github.com/woocommerce/woocommerce-admin/pull/3020) * Add TextControl component * Replace instances of newspack TextControl --- .../settings/general/store-address.js | 3 +- .../dashboard/profile-wizard/style.scss | 1 + .../client/dashboard/style.scss | 59 ------------ .../dashboard/task-list/tasks/appearance.js | 4 +- .../task-list/tasks/payments/index.js | 4 +- .../task-list/tasks/payments/paypal.js | 4 +- .../task-list/tasks/payments/stripe.js | 4 +- .../task-list/tasks/shipping/rates.js | 4 +- .../client/devdocs/examples.json | 1 + .../docs/components/_sidebar.md | 1 + .../packages/components/CHANGELOG.md | 1 + .../packages/components/src/index.js | 1 + .../packages/components/src/style.scss | 1 + .../components/src/text-control/README.md | 24 +++++ .../src/text-control/docs/example.js | 27 ++++++ .../components/src/text-control/index.js | 81 ++++++++++++++++ .../components/src/text-control/style.scss | 93 +++++++++++++++++++ 17 files changed, 242 insertions(+), 71 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/text-control/README.md create mode 100644 plugins/woocommerce-admin/packages/components/src/text-control/docs/example.js create mode 100644 plugins/woocommerce-admin/packages/components/src/text-control/index.js create mode 100644 plugins/woocommerce-admin/packages/components/src/text-control/style.scss diff --git a/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js b/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js index 657c417c588..8efb901c6cd 100644 --- a/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js +++ b/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js @@ -4,14 +4,13 @@ */ import { __ } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; -import { TextControl } from 'newspack-components'; import { useMemo } from 'react'; import { getSetting } from '@woocommerce/wc-admin-settings'; /** * Internal depdencies */ -import { SelectControl } from '@woocommerce/components'; +import { SelectControl, TextControl } from '@woocommerce/components'; const { countries } = getSetting( 'dataEndpoints', { countries: {} } ); /** diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss index 5ebff5dd02b..ff820d995a4 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss @@ -269,6 +269,7 @@ &.is-active { box-shadow: 0 0 0 1px $studio-woocommerce-purple-60; + border-color: $studio-woocommerce-purple-60; } &::after { diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss index b72051c695e..44a8d8da639 100644 --- a/plugins/woocommerce-admin/client/dashboard/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/style.scss @@ -123,65 +123,6 @@ } } - .muriel-input-text { - &.empty { - .components-base-control__label { - display: none; - } - - input { - top: 14px; - } - } - - input[type='text']:focus { - box-shadow: none; - border: 0; - } - } - - .muriel-input-text label, - .muriel-select label { - display: initial; - width: auto; - right: auto; - left: $gap; - } - - .muriel-select select { - left: 15px; - } - - .muriel-select.empty label { - top: 15px; - } - - .muriel-select::after { - margin-top: -$gap-smallest; - } - - .muriel-input-text, - .muriel-select { - &.with-value, - &.active { - label { - display: block; - top: 8px; - } - - input, - select { - top: 24px; - } - } - } - - .muriel-input-text.active, - .muriel-select.active { - box-shadow: 0 0 0 2px $studio-woocommerce-purple-60; - border-color: transparent; - } - .muriel-checkbox label.components-checkbox-control__label { margin-left: $gap-smaller; } diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js index e19d8428b51..d272429e42f 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; -import { Button, ImageUpload, TextControl } from 'newspack-components'; +import { Button, ImageUpload } from 'newspack-components'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { difference, filter } from 'lodash'; @@ -13,7 +13,7 @@ import { withDispatch } from '@wordpress/data'; /** * WooCommerce dependencies */ -import { Card, Stepper } from '@woocommerce/components'; +import { Card, Stepper, TextControl } from '@woocommerce/components'; import { getHistory, getNewPath } from '@woocommerce/navigation'; import { getSetting, setSetting } from '@woocommerce/wc-admin-settings'; diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js index 8961f63436a..a9ffd1d10c7 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js @@ -8,13 +8,13 @@ import { Fragment, Component } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { get, filter, noop, keys, pickBy, difference } from 'lodash'; import { FormToggle, CheckboxControl } from '@wordpress/components'; -import { Button, TextControl } from 'newspack-components'; +import { Button } from 'newspack-components'; import { withDispatch } from '@wordpress/data'; /** * WooCommerce dependencies */ -import { Form, Card, Stepper, List } from '@woocommerce/components'; +import { Form, Card, Stepper, TextControl, List } from '@woocommerce/components'; import { getAdminLink, getHistory, getNewPath } from '@woocommerce/navigation'; import { WC_ASSET_URL as wcAssetUrl } from '@woocommerce/wc-admin-settings'; diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js index 8b1f735a0db..2f7f21ba364 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; -import { Button, TextControl } from 'newspack-components'; +import { Button } from 'newspack-components'; import { getQuery } from '@woocommerce/navigation'; import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; @@ -15,7 +15,7 @@ import interpolateComponents from 'interpolate-components'; * WooCommerce dependencies */ import { WC_ADMIN_NAMESPACE } from 'wc-api/constants'; -import { Form, Link } from '@woocommerce/components'; +import { Form, Link, TextControl } from '@woocommerce/components'; import withSelect from 'wc-api/with-select'; import { recordEvent } from 'lib/tracks'; diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js index a6342e66642..03ab9923493 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js @@ -9,14 +9,14 @@ import apiFetch from '@wordpress/api-fetch'; import { withDispatch } from '@wordpress/data'; import interpolateComponents from 'interpolate-components'; import { Modal } from '@wordpress/components'; -import { Button, TextControl } from 'newspack-components'; +import { Button } from 'newspack-components'; import { getQuery } from '@woocommerce/navigation'; import { get } from 'lodash'; /** * WooCommerce dependencies */ -import { Form, Link } from '@woocommerce/components'; +import { Form, Link, TextControl } from '@woocommerce/components'; import withSelect from 'wc-api/with-select'; import { WCS_NAMESPACE } from 'wc-api/constants'; import { recordEvent } from 'lib/tracks'; diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js index c0aad0ed539..7df03f91735 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; -import { Button, TextControl } from 'newspack-components'; +import { Button } from 'newspack-components'; import classnames from 'classnames'; import { Component, Fragment } from '@wordpress/element'; import { FormToggle } from '@wordpress/components'; @@ -13,7 +13,7 @@ import PropTypes from 'prop-types'; /** * WooCommerce dependencies */ -import { Flag, Form } from '@woocommerce/components'; +import { Flag, Form, TextControl } from '@woocommerce/components'; import { getCurrencyFormatString } from '@woocommerce/currency'; import { CURRENCY, getSetting, setSetting } from '@woocommerce/wc-admin-settings'; diff --git a/plugins/woocommerce-admin/client/devdocs/examples.json b/plugins/woocommerce-admin/client/devdocs/examples.json index 079dbf0ae46..fbd4469ac1c 100644 --- a/plugins/woocommerce-admin/client/devdocs/examples.json +++ b/plugins/woocommerce-admin/client/devdocs/examples.json @@ -34,6 +34,7 @@ { "component": "Summary" }, { "component": "Table" }, { "component": "Tag" }, + { "component": "TextControl" }, { "component": "TextControlWithAffixes" }, { "component": "ViewMoreList" }, { "component": "WebPreview" } diff --git a/plugins/woocommerce-admin/docs/components/_sidebar.md b/plugins/woocommerce-admin/docs/components/_sidebar.md index de7ea91aeb7..6705085066b 100644 --- a/plugins/woocommerce-admin/docs/components/_sidebar.md +++ b/plugins/woocommerce-admin/docs/components/_sidebar.md @@ -46,5 +46,6 @@ * [Table](components/packages/table/README.md) * [Tag](components/packages/tag/README.md) * [TextControlWithAffixes](components/packages/text-control-with-affixes/README.md) + * [TextControl](components/packages/text-control/README.md) * [ViewMoreList](components/packages/view-more-list/README.md) * [WebPreview](components/packages/web-preview/README.md) \ No newline at end of file diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 729cd506b02..cd74f1c71b7 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ - Removed the `` component. - Removed WC-Admin specific actions from `` component. - Export the `` component. +- Add `` component. # 4.0.0 - Added a new `` component. diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index b3d2c2f190f..e731cfafe93 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -55,6 +55,7 @@ export { default as EmptyTable } from './table/empty'; export { default as TablePlaceholder } from './table/placeholder'; export { default as TableSummary } from './table/summary'; export { default as Tag } from './tag'; +export { default as TextControl } from './text-control'; export { default as TextControlWithAffixes } from './text-control-with-affixes'; export { default as useFilters } from './higher-order/use-filters'; export { default as ViewMoreList } from './view-more-list'; diff --git a/plugins/woocommerce-admin/packages/components/src/style.scss b/plugins/woocommerce-admin/packages/components/src/style.scss index e7256d57564..2cf439ded75 100644 --- a/plugins/woocommerce-admin/packages/components/src/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/style.scss @@ -33,6 +33,7 @@ @import 'summary/style.scss'; @import 'table/style.scss'; @import 'tag/style.scss'; +@import 'text-control/style.scss'; @import 'text-control-with-affixes/style.scss'; @import 'view-more-list/style.scss'; @import 'web-preview/style.scss'; diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/README.md b/plugins/woocommerce-admin/packages/components/src/text-control/README.md new file mode 100644 index 00000000000..ef3a90bcf3d --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/text-control/README.md @@ -0,0 +1,24 @@ +TextControl +=== + +An input field use for text inputs in forms. + +## Usage + +```jsx + setState( { value } ) } +/>; +``` + +### Props + +Name | Type | Default | Description +--- | --- | --- | --- +`className` | String | ``null`` | Additional CSS classes +`disabled` | Boolean | ``null`` | Disables the field +`label` | String | ``null`` | Input label used as a placeholder +`onClick` | Function | ``null`` | On click handler called when the component is clicked, passed the click event +`value` | String | ``null`` | The value of the input field diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/docs/example.js b/plugins/woocommerce-admin/packages/components/src/text-control/docs/example.js new file mode 100644 index 00000000000..5550ae7e048 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/text-control/docs/example.js @@ -0,0 +1,27 @@ +/** @format */ +/** + * Internal dependencies + */ +import { TextControl } from '@woocommerce/components'; + +/** + * External dependencies + */ +import { withState } from '@wordpress/compose'; + +export default withState( { + value: '', +} )( ( { setState, value } ) => { + return ( +
+ setState( { value: newValue } ) } + value={ value } + /> +
+ +
+ ); +} ); diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/index.js b/plugins/woocommerce-admin/packages/components/src/text-control/index.js new file mode 100644 index 00000000000..d9d5b801b1e --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/text-control/index.js @@ -0,0 +1,81 @@ +/** @format */ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { Component } from '@wordpress/element'; +import PropTypes from 'prop-types'; +import { TextControl as BaseComponent, withFocusOutside } from '@wordpress/components'; + +/** + * An input field use for text inputs in forms. + */ +const TextControl = withFocusOutside( + class extends Component { + constructor( props ) { + super( props ); + this.state = { + isFocused: false, + }; + } + + handleFocusOutside() { + this.setState( { isFocused: false } ); + } + + handleOnClick( event, onClick ) { + this.setState( { isFocused: true } ); + if ( typeof onClick === 'function' ) { + onClick( event ); + } + } + + render() { + const { isFocused } = this.state; + const { className, onClick, ...otherProps } = this.props; + const { label, value, disabled } = otherProps; + const isEmpty = '' === value; + const isActive = isFocused && ! disabled; + + return ( + this.handleOnClick( event, onClick ) } + onFocus={ () => this.setState( { isFocused: true } ) } + { ...otherProps } + /> + ); + } + } +); + +TextControl.propTypes = { + /** + * Additional CSS classes. + */ + className: PropTypes.string, + /** + * Disables the field. + */ + disabled: PropTypes.bool, + /** + * Input label used as a placeholder. + */ + label: PropTypes.string, + /** + * On click handler called when the component is clicked, passed the click event. + */ + onClick: PropTypes.func, + /** + * The value of the input field. + */ + value: PropTypes.string, +}; + +export default TextControl; diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/style.scss b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss new file mode 100644 index 00000000000..ad1f8c0ea88 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss @@ -0,0 +1,93 @@ +/** @format */ + +.muriel-input-text { + background: $studio-white; + border: 1px solid $studio-gray-20; + border-radius: 0; + box-shadow: none; + padding: 12px 12px 4px; + position: relative; + + &:hover { + border-color: $studio-gray-40; + } + + label { + color: $studio-gray-50; + font-size: 14px; + line-height: 21px; + + &.components-base-control__label { + margin: 0; + } + } + + .components-text-control__input { + border: 0; + box-shadow: none; + font-size: 16px; + line-height: 21px; + margin: 0; + padding: 0; + + &:focus { + box-shadow: none; + } + } + + &.active { + box-shadow: 0 0 0 2px $studio-woocommerce-purple-60; + border-color: transparent; + + input { + color: $studio-gray-80; + } + } + + &.with-value { + .components-base-control__label { + display: block; + } + + input { + color: $studio-gray-80; + } + } + + &.empty { + label { + display: none; + } + input { + color: $studio-gray-50; + } + } + + &.has-error { + box-shadow: none; + } + + &.disabled { + label { + display: none; + } + input { + color: $studio-gray-20; + + /* Placeholder styling: */ + &::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: $studio-gray-20; + opacity: 1; /* Firefox */ + } + &:-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: $studio-gray-20; + } + &::-ms-input-placeholder { + /* Microsoft Edge */ + color: $studio-gray-20; + } + } + } +}