fix(text-field): update isRtl to a prop (#195)

BREAKING CHANGE: In order for rtl to work on the Notched Outline component, isRtl will need to be passed in as boolean (default is false). Updating isRtl will result in a re-render.
material-components · Aug 1, 2018 · cd7c7c8 · cd7c7c8
1 parent f88f180
commit cd7c7c8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 24 deletions.
diff --git a/packages/text-field/README.md b/packages/text-field/README.md
@@ -62,6 +62,7 @@ dense | Boolean | Enables dense variant.
 floatingLabelClassName | String | An optional class added to the floating label element of the text field.
 fullWidth | Boolean | Enables fullWidth variant.
 helperText | Element | Helper text that appears below the text field. Use the `<HelperText>` component that comes with this package.
+isRtl | Boolean | Whether the direction of the text field element is set to RTL.
 label | String | Mandatory. Label text that appears as the floating label or placeholder.
 leadingIcon | Element | An icon element that appears as the leading icon.
 lineRippleClassName | String | An optional class added to the line ripple element.

diff --git a/packages/text-field/index.js b/packages/text-field/index.js
@@ -18,7 +18,6 @@ class TextField extends React.Component {
     super(props);
     this.floatingLabelElement = React.createRef();
     this.inputElement = React.createRef();
-    this.textFieldElement = React.createRef();
 
     this.state = {
       // root state
@@ -94,7 +93,7 @@ class TextField extends React.Component {
       },
       hasClass: (className) => this.classes.split(' ').includes(className),
       isFocused: () => this.state.isFocused,
-      isRtl: this.getIsRtl,
+      isRtl: () => this.props.isRtl,
     };
 
     return Object.assign({},
@@ -182,13 +181,6 @@ class TextField extends React.Component {
     };
   }
 
-  getIsRtl = () => {
-    if (this.textFieldElement.current) {
-      const dir = window.getComputedStyle(this.textFieldElement.current).getPropertyValue('direction');
-      return dir === 'rtl';
-    }
-  }
-
   inputProps(props) {
     return Object.assign({}, props, {
       foundation: this.foundation_,
@@ -221,7 +213,6 @@ class TextField extends React.Component {
         onClick={() => this.foundation_ && this.foundation_.handleTextFieldInteraction()}
         onKeyDown={() => this.foundation_ && this.foundation_.handleTextFieldInteraction()}
         key='text-field-container'
-        ref={this.textFieldElement}
       >
         {leadingIcon ? this.renderIcon(leadingIcon) : null}
         {this.renderInput()}
@@ -281,7 +272,7 @@ class TextField extends React.Component {
     return (
       <NotchedOutline
         className={notchedOutlineClassName}
-        isRtl={this.getIsRtl()}
+        isRtl={this.props.isRtl}
         notch={outlineIsNotched}
         notchWidth={labelWidth}
       />
@@ -319,6 +310,7 @@ TextField.propTypes = {
   'floatingLabelClassName': PropTypes.string,
   'fullWidth': PropTypes.bool,
   'helperText': PropTypes.element,
+  'isRtl': PropTypes.bool,
   'label': PropTypes.string.isRequired,
   'leadingIcon': PropTypes.element,
   'lineRippleClassName': PropTypes.string,
@@ -335,6 +327,7 @@ TextField.defaultProps = {
   floatingLabelClassName: '',
   fullWidth: false,
   helperText: null,
+  isRtl: false,
   leadingIcon: null,
   lineRippleClassName: '',
   notchedOutlineClassName: '',

diff --git a/test/screenshot/text-field/index.js b/test/screenshot/text-field/index.js
@@ -15,7 +15,7 @@ class TestField extends React.Component {
     } = this.props;
     return (
       <div dir={isRtl ? 'rtl' : 'ltr'}>
-        <TextField label='Dog' {...otherProps} className='text-field'>
+        <TextField label='Dog' {...otherProps} className='text-field' isRtl={isRtl}>
           <Input value={this.state.value}
             id={id}
             disabled={disabled}

diff --git a/test/unit/text-field/index.test.js b/test/unit/text-field/index.test.js
@@ -107,24 +107,22 @@ test('#adapter.removeClass removes class from state.classList', () => {
   assert.isTrue(wrapper.instance().foundation_.adapter_.hasClass('test-class-name'));
 });
 
-test('#adapter.isFocused returns true if wrapped in an rtl element', () => {
+test('#adapter.isFocused returns true if state.isFocused updates to true', () => {
   const wrapper = mount(<TextField label='my label'><Input /></TextField>);
   wrapper.setState({isFocused: true});
   assert.isTrue(wrapper.instance().foundation_.adapter_.isFocused());
 });
 
-test('#adapter.isRtl returns true if the direction is true', () => {
-  const div = document.createElement('div');
-  // needs to be attached to real DOM to get width
-  // https://github.com/airbnb/enzyme/issues/1525
-  document.body.style.direction = 'rtl';
-  document.body.append(div);
-  const options = {attachTo: div};
-  const wrapper = mount(
-    <TextField label='my label'><Input /></TextField>, options);
+test('#adapter.isRtl returns true props.isRtl if is true', () => {
+  const wrapper = shallow(
+    <TextField isRtl label='my label'><Input /></TextField>);
   assert.isTrue(wrapper.instance().foundation_.adapter_.isRtl());
-  document.body.style.direction = 'initial';
-  div.remove();
+});
+
+test('#adapter.isRtl returns false props.isRtl if is false', () => {
+  const wrapper = mount(
+    <TextField label='my label'><Input /></TextField>);
+  assert.isFalse(wrapper.instance().foundation_.adapter_.isRtl());
 });
 
 test('#adapter.input.getNativeInput.validity.badInput return false for valid input', () => {