change default button element from anchor to button

zookatron · Jul 3, 2018 · d79a28b · d79a28b
1 parent 407b161
commit d79a28b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 50 deletions.
diff --git a/src/components/button/__test__/__snapshots__/button.test.js.snap b/src/components/button/__test__/__snapshots__/button.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button component Should be a Large Primary Button 1`] = `
-<a
+<button
   className="is-primary is-large button"
   disabled={false}
   onClick={[Function]}
@@ -11,7 +11,7 @@ exports[`Button component Should be a Large Primary Button 1`] = `
 `;
 
 exports[`Button component Should be a Primary Button 1`] = `
-<a
+<button
   className="is-primary button"
   disabled={false}
   onClick={[Function]}
@@ -21,10 +21,9 @@ exports[`Button component Should be a Primary Button 1`] = `
 `;
 
 exports[`Button component Should be a default Button 1`] = `
-<a
+<button
   className="button"
   disabled={false}
-  href="http://google.com"
   onClick={[Function]}
   style={Object {}}
   tabIndex={0}
@@ -53,7 +52,18 @@ exports[`Button component Should be a submit form button 1`] = `
 />
 `;
 
-exports[`Button component Should render as a React element link with custom href 1`] = `
+exports[`Button component Should be an anchor button 1`] = `
+<a
+  className="button"
+  disabled={false}
+  href="https://github.com/couds/react-bulma-components"
+  onClick={[Function]}
+  style={Object {}}
+  tabIndex={0}
+/>
+`;
+
+exports[`Button component Should render as a React element link with to prop 1`] = `
 <a
   href="http://google.com"
 >
@@ -82,7 +92,7 @@ exports[`Button component Should render as a static Button 1`] = `
 `;
 
 exports[`Button component Should render be disabled 1`] = `
-<a
+<button
   className="button"
   disabled={true}
   onClick={undefined}

diff --git a/src/components/button/__test__/button.test.js b/src/components/button/__test__/button.test.js
@@ -18,7 +18,11 @@ Link.propTypes = {
 
 describe('Button component', () => {
   it('Should be a default Button', () => {
-    const component = renderer.create(<Button href="http://google.com" />);
+    const component = renderer.create(<Button />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should be an anchor button', () => {
+    const component = renderer.create(<Button renderAs="a" href="https://github.com/couds/react-bulma-components" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should be a Primary Button', () => {
@@ -37,25 +41,13 @@ describe('Button component', () => {
     const component = renderer.create(<Button renderAs="button" color="danger" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it('Should render as a React element link with custom href', () => {
+  it('Should render as a React element link with to prop', () => {
     const component = renderer.create(
-      <Button renderAs={Link} href="http://google.com" hrefAttr="to" color="danger" >
+      <Button renderAs={Link} to="http://google.com" color="danger" >
         TEST
       </Button>);
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it('Should throw a console.error if no hrefAttr is defined when renderAs different as A and href attr is defined', () => {
-    // eslint-disable-next-line no-console
-    console.error = jest.genMockFn();
-    renderer.create(
-      <Button renderAs={Link} href="http://google.com" color="danger" >
-        TEST
-      </Button>);
-    // eslint-disable-next-line no-console
-    expect(console.error).toHaveBeenCalled();
-    // eslint-disable-next-line no-console
-    console.error.mockRestore();
-  });
   it('Should render be disabled', () => {
     const component = renderer.create(<Button disabled />);
     expect(component.toJSON()).toMatchSnapshot();

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -9,8 +9,6 @@ export default class Button extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    href: PropTypes.string,
-    hrefAttr: PropTypes.string,
     style: PropTypes.shape({}),
     renderAs: PropTypes.oneOfType([
       PropTypes.oneOf(['a', 'button']),
@@ -36,10 +34,8 @@ export default class Button extends PureComponent {
   static defaultProps = {
     children: null,
     className: '',
-    href: '',
-    hrefAttr: '',
     style: {},
-    renderAs: 'a',
+    renderAs: 'button',
     onClick: () => null,
     color: null,
     size: null,
@@ -73,8 +69,6 @@ export default class Button extends PureComponent {
       loading,
       disabled,
       remove,
-      href,
-      hrefAttr,
       isStatic,
       rounded,
       onClick,
@@ -83,13 +77,6 @@ export default class Button extends PureComponent {
     } = this.props;
     let Element = isStatic ? 'span' : renderAs;
     const otherProps = {};
-    if (href) {
-      otherProps[renderAs === 'a' ? 'href' : hrefAttr] = href;
-      if (renderAs !== 'a' && !hrefAttr) {
-        // eslint-disable-next-line no-console
-        console.error('warning: if renderAs is different the anchor (a), hrefAttr is required. Check Button props');
-      }
-    }
     if (submit) {
       Element = 'button';
       otherProps.type = 'submit';

diff --git a/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap b/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap
@@ -12,7 +12,7 @@ exports[`Dropdown component Should concat Bulma class with classes in props 1`]
     onClick={[Function]}
     role="presentation"
   >
-    <a
+    <button
       className="button"
       disabled={false}
       onClick={[Function]}
@@ -30,7 +30,7 @@ exports[`Dropdown component Should concat Bulma class with classes in props 1`]
           className="rbc rbc-angle-down"
         />
       </span>
-    </a>
+    </button>
   </div>
   <div
     className="dropdown-menu"
@@ -67,7 +67,7 @@ exports[`Dropdown component Should have custom inline styles 1`] = `
     onClick={[Function]}
     role="presentation"
   >
-    <a
+    <button
       className="button"
       disabled={false}
       onClick={[Function]}
@@ -85,7 +85,7 @@ exports[`Dropdown component Should have custom inline styles 1`] = `
           className="rbc rbc-angle-down"
         />
       </span>
-    </a>
+    </button>
   </div>
   <div
     className="dropdown-menu"
@@ -122,7 +122,7 @@ exports[`Dropdown component Should have divider 1`] = `
     onClick={[Function]}
     role="presentation"
   >
-    <a
+    <button
       className="button"
       disabled={false}
       onClick={[Function]}
@@ -140,7 +140,7 @@ exports[`Dropdown component Should have divider 1`] = `
           className="rbc rbc-angle-down"
         />
       </span>
-    </a>
+    </button>
   </div>
   <div
     className="dropdown-menu"
@@ -185,7 +185,7 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
     onClick={[Function]}
     role="presentation"
   >
-    <a
+    <button
       className="button"
       disabled={false}
       onClick={[Function]}
@@ -203,7 +203,7 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
           className="rbc rbc-angle-down"
         />
       </span>
-    </a>
+    </button>
   </div>
   <div
     className="dropdown-menu"

diff --git a/src/components/modal/__test__/__snapshots__/modal.test.js.snap b/src/components/modal/__test__/__snapshots__/modal.test.js.snap
@@ -21,7 +21,7 @@ exports[`Modal component Should close the modal 1`] = `
       >
         Modal Title
       </p>
-      <a
+      <button
         class="delete"
         tabindex="0"
       />
@@ -69,7 +69,7 @@ exports[`Modal component Should close the modal on ESC key press 1`] = `
       >
         Modal Title
       </p>
-      <a
+      <button
         class="delete"
         tabindex="0"
       />
@@ -169,7 +169,7 @@ exports[`Modal component Should not close the modal on ESC key press 1`] = `
       >
         Modal Title
       </p>
-      <a
+      <button
         class="delete"
         tabindex="0"
       />
@@ -197,7 +197,7 @@ exports[`Modal component Should not close the modal on other than ESC key press
       >
         Modal Title
       </p>
-      <a
+      <button
         class="delete"
         tabindex="0"
       />
@@ -251,7 +251,7 @@ exports[`Modal component Should open the modal 1`] = `
       >
         Modal Title
       </p>
-      <a
+      <button
         class="delete"
         tabindex="0"
       />

diff --git a/src/components/modal/__test__/modal.test.js b/src/components/modal/__test__/modal.test.js
@@ -37,7 +37,7 @@ describe('Modal component', () => {
           </Modal.Card.Title>
         </Modal.Card.Head>
       </Modal.Card>);
-    component.find('a.delete').simulate('click');
+    component.find('.delete').simulate('click');
     expect(onClose).toHaveBeenCalledTimes(1);
   });
   it('Should open the modal', () => {
@@ -74,7 +74,7 @@ describe('Modal component', () => {
       </Modal>);
     const modal = window.document.querySelector('div.modal.is-active');
     expect(modal).toMatchSnapshot();
-    modal.querySelector('a.delete').click();
+    modal.querySelector('.delete').click();
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(window.document.querySelector('div.modal.is-active')).toBeNull();
   });