Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make affix background white and remove wrapping behavior from TextControlWithAffixes.

This commit is contained in:
Jeff Stieler 2018-12-13 09:05:03 -07:00
parent e3be069601
commit 700f3ad20f
3 changed files with 15 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-admin/docs/components/text-control-with-affixes.md
View File

@ -62,10 +62,3 @@ Markup to be inserted at the beginning of the input.
Markup to be appended at the end of the input.
- Type: ReactNode
### `noWrap`
A flag that prevents the prefix and suffix from wrapping when the component is displayed on small viewports. This basically disables the corresponding breakpoint.
- Type: Boolean
- Default: null

5
plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js
View File

@ -4,7 +4,6 @@
*/
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { BaseControl } from '@wordpress/components';
import { withInstanceId } from '@wordpress/compose';
@ -17,7 +16,6 @@ class TextControlWithAffixes extends Component {
className,
instanceId,
onChange,
noWrap,
prefix,
suffix,
type = 'text',
@ -29,7 +27,7 @@ class TextControlWithAffixes extends Component {
return (
<BaseControl label={ label } id={ id } help={ help } className={ className }>
<div className={ classNames( 'text-control-with-affixes', { 'no-wrap': noWrap } ) }>
<div className="text-control-with-affixes">
{ prefix && <span className="text-control-with-affixes__prefix">{ prefix }</span> }
<input className="components-text-control__input"
@ -49,7 +47,6 @@ class TextControlWithAffixes extends Component {
}
TextControlWithAffixes.propTypes = {
noWrap: PropTypes.bool,
prefix: PropTypes.node,
suffix: PropTypes.node,
};

90
plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
View File

@ -1,49 +1,19 @@
.text-control-with-affixes {
display: inline-flex;
flex-direction: column;
flex-direction: row;
width: 100%;
:nth-child(1) {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
:nth-child(1) {
border-top-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
&.no-wrap {
flex-direction: row;
:nth-child(1) {
border-top-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
@include breakpoint( ">400px" ) {
flex-direction: row;
:nth-child(1) {
border-top-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
:nth-last-child(1) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="email"],
input[type="password"],
@ -63,18 +33,10 @@
}
}
@mixin no-prefix-wrap() {
border-right: none;
}
@mixin no-suffix-wrap() {
border-left: none;
}
.text-control-with-affixes__prefix,
.text-control-with-affixes__suffix {
position: relative;
background: $core-grey-light-100;
background: $white;
border: 1px solid $core-grey-light-500;
color: $gray-text;
padding: 7px 14px;
@ -85,19 +47,7 @@
}
.text-control-with-affixes__prefix {
@include breakpoint( "<400px" ) {
:not( .no-wrap ) > & {
border-bottom: none;
}
}
.no-wrap > & {
@include no-prefix-wrap();
}
@include breakpoint( ">400px" ) {
@include no-prefix-wrap();
}
border-right: none;
& + input[type="email"],
& + input[type="password"],
@ -112,17 +62,5 @@
}
.text-control-with-affixes__suffix {
@include breakpoint( "<400px" ) {
:not( .no-wrap ) > & {
border-top: none;
}
}
.no-wrap > & {
@include no-suffix-wrap();
}
@include breakpoint( ">400px" ) {
@include no-suffix-wrap();
}
border-left: none;
}