Remove string refs

.eslintrc.json

@@ -15,7 +15,6 @@
     "no-nested-ternary": 0,
     "react/no-array-index-key": 1, // TODO Remove this when warnings are addressed
     "react/no-find-dom-node": 1, // TODO Remove this when warnings are addressed
-    "react/no-string-refs": 1, // TODO Remove this when warnings are addressed
     "react/prefer-stateless-function": 0,
     "react/prop-types": 1,
     "react/sort-comp": [1, {

src/components/Activity.js

@@ -27,16 +27,16 @@ export default class Activity extends React.Component {
       <ListGroupItem {...props}>
         <Row className="w-100 no-gutters">
           <Col xs={12} sm={4} md={3} className="text-nowrap">
-            <span ref="date">{fecha.format(date, dateFormat)}</span>
+            <span>{fecha.format(date, dateFormat)}</span>
           </Col>
           <Col>
             {(action || date) && (
               <div>
-                {action && <strong ref="action">{action}</strong>}
+                {action && <strong>{action}</strong>}
                 {by && (
                   <span className="pl-1">
                     {action ? 'by ' : ''}
-                    <span ref="by">{by}</span>
+                    <span>{by}</span>
                   </span>
                 )}
               </div>

src/components/Alert.js

@@ -57,7 +57,7 @@ export default class AlertComponent extends React.Component {
       >
         <div className="d-flex align-items-start">
           {icon ? <Icon name={ICON_MAP[color]} size="lg" className="mr-3 mt-1" /> : null}
-          {icon ? <div ref="wrapper" style={{ overflow: 'hidden' }}>{children}</div> : <div>{children}</div>}
+          {icon ? <div style={{ overflow: 'hidden' }}>{children}</div> : <div>{children}</div>}
         </div>
       </Alert>
     );

src/components/BlockPanel.js

@@ -92,7 +92,6 @@ class BlockPanel extends React.Component {
           <div
             className="d-inline-flex align-items-center"
             onClick={this.toggle}
-            ref="title"
             role={expandable ? 'button' : undefined}
           >
             {expandable ?
@@ -113,7 +112,6 @@ class BlockPanel extends React.Component {
               <Button
                 color="link"
                 className={`${(color === 'primary' || color === 'dark') ? 'text-white' : ''} p-0 ml-2 mr-1`}
-                ref="edit"
                 onClick={onEdit}
                 role="button"
               >

src/components/CheckboxBooleanInput.js

@@ -25,7 +25,7 @@ class CheckboxBooleanInput extends React.Component {
           className="my-0"
         />
         {checkboxLabel && (
-          <Label check for={id} ref="label" className="my-0">
+          <Label check for={id} className="my-0">
             {checkboxLabel}
           </Label>
         )}

src/components/DateInput.js

@@ -292,10 +292,10 @@ export default class DateInput extends React.Component {
             {header || (
               <header className="d-flex py-2">
                 <ButtonGroup size="sm">
-                  <Button ref="prevYear" color="link" onClick={() => this.prevYear()}>
+                  <Button className="js-prev-year" color="link" onClick={() => this.prevYear()}>
                     <Icon name="angle-double-left" fixedWidth />
                   </Button>
-                  <Button ref="prevMonth" color="link" onClick={() => this.prevMonth()}>
+                  <Button className="js-prev-month" color="link" onClick={() => this.prevMonth()}>
                     <Icon name="angle-left" fixedWidth />
                   </Button>
                 </ButtonGroup>
@@ -305,10 +305,10 @@ export default class DateInput extends React.Component {
                 </span>
 
                 <ButtonGroup size="sm">
-                  <Button ref="nextMonth" color="link" onClick={() => this.nextMonth()}>
+                  <Button className="js-next-month" color="link" onClick={() => this.nextMonth()}>
                     <Icon name="angle-right" fixedWidth />
                   </Button>
-                  <Button ref="nextYear" color="link" onClick={() => this.nextYear()}>
+                  <Button className="js-next-year" color="link" onClick={() => this.nextYear()}>
                     <Icon name="angle-double-right" fixedWidth />
                   </Button>
                 </ButtonGroup>
@@ -325,7 +325,7 @@ export default class DateInput extends React.Component {
             {footer || (
               <footer className="text-center pb-2 pt-1">
                 <div>
-                  <Button ref="today" onClick={this.today} className="mr-2">Today</Button>
+                  <Button onClick={this.today} className="mr-2">Today</Button>
                 </div>
               </footer>
             )}

src/components/MonthInput.js

@@ -270,10 +270,10 @@ export default class MonthInput extends React.Component {
             {header || (
               <header className="d-flex py-2">
                 <ButtonGroup size="sm">
-                  <Button ref="prevYear" color="link" onClick={() => this.prevYear()}>
+                  <Button className="js-prev-year" color="link" onClick={() => this.prevYear()}>
                     <Icon name="angle-double-left" fixedWidth />
                   </Button>
-                  <Button ref="prevMonth" color="link" onClick={() => this.prevMonth()}>
+                  <Button className="js-prev-month" color="link" onClick={() => this.prevMonth()}>
                     <Icon name="angle-left" fixedWidth />
                   </Button>
                 </ButtonGroup>
@@ -283,10 +283,10 @@ export default class MonthInput extends React.Component {
                 </span>
 
                 <ButtonGroup size="sm">
-                  <Button ref="nextMonth" color="link" onClick={() => this.nextMonth()}>
+                  <Button className="js-next-month" color="link" onClick={() => this.nextMonth()}>
                     <Icon name="angle-right" fixedWidth />
                   </Button>
-                  <Button ref="nextYear" color="link" onClick={() => this.nextYear()}>
+                  <Button className="js-next-year" color="link" onClick={() => this.nextYear()}>
                     <Icon name="angle-double-right" fixedWidth />
                   </Button>
                 </ButtonGroup>
@@ -305,7 +305,7 @@ export default class MonthInput extends React.Component {
             {footer || (
               <footer className="text-center pb-2 pt-1">
                 <div>
-                  <Button ref="today" onClick={this.today} className="mr-2">Today</Button>
+                  <Button onClick={this.today} className="mr-2">Today</Button>
                 </div>
               </footer>
             )}

test/components/Activity.spec.js

@@ -18,17 +18,20 @@ describe('<Activity />', () => {
 
   it('should render date', () => {
     const component = mount(<Activity date={new Date(2015, 1, 13, 12, 30)} />);
-    assert.equal(component.ref('date').textContent, '02/13/2015 12:30PM');
+    const date = component.find('span').first();
+    assert.strictEqual(date.text(), '02/13/2015 12:30PM');
   });
 
   it('should render action', () => {
     const component = mount(<Activity date={new Date()} action="Eat" />);
-    assert.equal(component.ref('action').textContent, 'Eat');
+    const action = component.find('strong');
+    assert.strictEqual(action.text(), 'Eat');
   });
 
   it('should render by', () => {
     const component = mount(<Activity date={new Date()} action="Sleep" by="Gary Thomas" />);
-    assert.equal(component.ref('by').textContent, 'Gary Thomas');
+    const by = component.find('span').at(2);
+    assert.strictEqual(by.text(), 'Gary Thomas');
   });
 
   it('should render children correctly', () => {
@@ -44,6 +47,7 @@ describe('<Activity />', () => {
 
   it('should support custom date formats', () => {
     const component = mount(<Activity dateFormat="M/D/YYYY" date={new Date(2010, 4, 9)} />);
-    assert.equal(component.ref('date').textContent, '5/9/2010');
+    const date = component.find('span').first();
+    assert.strictEqual(date.text(), '5/9/2010');
   });
 });

test/components/Alert.spec.js

@@ -41,9 +41,8 @@ describe('<Alert />', () => {
 
     it('should wrap children with block (for alignment) with icon', () => {
       const component = mount(<Alert icon>Stuff Here</Alert>);
-      const wrapper = component.ref('wrapper');
-      assert(wrapper);
-      assert.equal(wrapper.textContent, 'Stuff Here');
+      const wrapper = component.find('div').first();
+      assert.strictEqual(wrapper.text(), 'Stuff Here');
     });
   });
 

test/components/BlockPanel.spec.js

@@ -135,7 +135,8 @@ describe('<BlockPanel />', () => {
           <h1 id="hi">Hello World!</h1>
         </BlockPanel>
       );
-      assert(!component.ref('edit'));
+      const editButton = component.find(Button);
+      assert.strictEqual(editButton.length, 0);
     });
 
     it('should render edit link when passed onEdit', () => {
@@ -144,7 +145,8 @@ describe('<BlockPanel />', () => {
           <h1 id="hi">Hello World!</h1>
         </BlockPanel>
       );
-      assert(component.ref('edit'));
+      const editButton = component.find(Button);
+      assert.strictEqual(editButton.length, 1);
     });
 
     it('should call onEdit when clicked', () => {
@@ -155,8 +157,9 @@ describe('<BlockPanel />', () => {
           <h1 id="hi">Hello World!</h1>
         </BlockPanel>
       );
-      component.ref('edit').onClick();
-      assert.equal(onEdit.calledOnce, true);
+      const editButton = component.find(Button);
+      editButton.simulate('click');
+      assert(onEdit.calledOnce);
     });
 
     it('should render title components when passed', () => {

test/components/CheckboxBooleanInput.spec.js

@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import assert from 'assert';
 import { mount } from 'enzyme';
 
-import { CheckboxBooleanInput, Input } from '../../src';
+import { CheckboxBooleanInput, Input, Label } from '../../src';
 
 describe('<CheckboxBooleanInput />', () => {
   const onChange = sinon.stub();
@@ -19,7 +19,8 @@ describe('<CheckboxBooleanInput />', () => {
   });
 
   it('should not render checkboxLabel', () => {
-    assert.equal(wrapper.ref('label'), undefined);
+    const label = wrapper.find(Label);
+    assert.strictEqual(label.length, 0);
   });
 
   it('should use value for checked state', () => {

test/components/DateInput.spec.js

@@ -179,37 +179,50 @@ describe('<DateInput />', () => {
     it('should should set date after clicking prev year', () => {
       callback.reset();
       const expectedDate = addYears(component.instance().getCurrentDate(), -1);
-      component.ref('prevYear').props.onClick();
+      const prevYear = component.find('Button.js-prev-year');
+
+      prevYear.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should should set date after clicking next year', () => {
       callback.reset();
       const expectedDate = addYears(component.instance().getCurrentDate(), 1);
-      component.ref('nextYear').props.onClick();
+      const nextYear = component.find('Button.js-next-year');
+
+      nextYear.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should should set date after clicking prev month', () => {
       callback.reset();
       const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
-      component.ref('prevMonth').props.onClick();
+      const prevMonth = component.find('Button.js-prev-month');
+
+      prevMonth.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should should set date after clicking next month', () => {
       callback.reset();
       const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
-      component.ref('nextMonth').props.onClick();
+      const nextMonth = component.find('Button.js-next-month');
+
+      nextMonth.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should should set date after clicking today', () => {
-      component.ref('today').props.onClick();
+      const today = component.find('footer Button');
+      today.simulate('click');
       assert(isToday(component.instance().getCurrentDate()));
     });
 

test/components/MonthInput.spec.js

@@ -178,37 +178,50 @@ describe('<MonthInput />', () => {
     it('should set date after clicking prev year', () => {
       callback.reset();
       const expectedDate = addYears(component.instance().getCurrentDate(), -1);
-      component.ref('prevYear').onClick();
+      const prevYear = component.find('Button.js-prev-year');
+
+      prevYear.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should set date after clicking next year', () => {
       callback.reset();
       const expectedDate = addYears(component.instance().getCurrentDate(), 1);
-      component.ref('nextYear').onClick();
+      const nextYear = component.find('Button.js-next-year');
+
+      nextYear.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should set date after clicking prev month', () => {
       callback.reset();
       const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
-      component.ref('prevMonth').onClick();
+      const prevMonth = component.find('Button.js-prev-month');
+
+      prevMonth.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should set date after clicking next month', () => {
       callback.reset();
       const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
-      component.ref('nextMonth').onClick();
+      const nextMonth = component.find('Button.js-next-month');
+
+      nextMonth.simulate('click');
+
       assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
-      assert(callback.calledWith(expectedDate, true));
+      assert(isSameDay(callback.firstCall.args[0], expectedDate));
     });
 
     it('should set date after clicking today', () => {
-      component.ref('today').onClick();
+      const today = component.find('footer Button');
+      today.simulate('click');
       assert(isSameMonth(new Date(), component.instance().getCurrentDate()));
     });