772 set href as a required prop and as the default value for children (#776)

* Conditionally set children as href

* 773 - Make href a required prop

* Updated changelog

* Added basic integration test

Author: HammadTheOne

CHANGELOG.md

@@ -6,7 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - [#766](https://github.com/plotly/dash-core-components/pull/766) Update from React 16.8.6 to 16.13.0
 - [#768](https://github.com/plotly/dash-core-components/pull/768) Added title property to dcc.Link
-
+- [#776](https://github.com/plotly/dash-core-components/pull/776) Update dcc.Link to set href as children if children not defined. Makes href a required prop as well.
 
 ## [1.8.1] -2020-02-27
 ### Added

src/components/Link.react.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 
 import React, {Component} from 'react';
 
+import {isNil} from 'ramda';
+
 /*
  * event polyfill for IE
  * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
@@ -54,7 +56,15 @@ export default class Link extends Component {
     }
 
     render() {
-        const {className, style, id, href, title, loading_state} = this.props;
+        const {
+            className,
+            style,
+            id,
+            href,
+            loading_state,
+            children,
+            title,
+        } = this.props;
         /*
          * ideally, we would use cloneElement however
          * that doesn't work with dash's recursive
@@ -72,7 +82,7 @@ export default class Link extends Component {
                 onClick={e => this.updateLocation(e)}
                 title={title}
             >
-                {this.props.children}
+                {isNil(children) ? href : children}
             </a>
         );
     }
@@ -88,7 +98,7 @@ Link.propTypes = {
     /**
      * The URL of a linked resource.
      */
-    href: PropTypes.string,
+    href: PropTypes.string.isRequired,
     /**
      * Controls whether or not the page will refresh when the link is clicked
      */

tests/integration/link/test_link_children.py

@@ -0,0 +1,39 @@
+import pytest
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+
+@pytest.mark.DCC776
+def test_lich001_default(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Link(id="link1", href="/page-1"),
+            dcc.Location(id="url", refresh=False),
+            html.Div(id="content")
+        ]
+    )
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_text_to_equal("#link1", "/page-1")
+
+
+@pytest.mark.DCC776
+def test_lich002_children(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Link(children='test children', id="link1", href="/page-1"),
+            dcc.Location(id="url", refresh=False),
+            html.Div(id="content")
+        ]
+    )
+    @app.callback(Output("content", "children"), [Input("link1", "children")])
+    def display_children(children):
+        return children
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_text_to_equal("#content", "test children")