Bug 1518487 - add ability to customize the className of the LearnMoreLink component. r=gl
authorYura Zenevich <yura.zenevich@gmail.com>
Tue, 12 Feb 2019 19:39:22 +0000
changeset 458784 7fe5ccd66c8f
parent 458783 f1c16e2af72f
child 458785 bcda0131d8f5
push id35548
push useropoprus@mozilla.com
push dateWed, 13 Feb 2019 09:48:26 +0000
treeherdermozilla-central@93e37c529818 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1518487
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1518487 - add ability to customize the className of the LearnMoreLink component. r=gl MozReview-Commit-ID: 2Ft28e4sbi Differential Revision: https://phabricator.services.mozilla.com/D19049
devtools/client/accessibility/components/LearnMoreLink.js
devtools/client/accessibility/test/mochitest/test_accessible_learnMoreLink.html
--- a/devtools/client/accessibility/components/LearnMoreLink.js
+++ b/devtools/client/accessibility/components/LearnMoreLink.js
@@ -12,16 +12,17 @@ const { openDocLink } = require("devtool
 
 /**
  * Localization friendly component for rendering a block of text with a "Learn more" link
  * as a part of it.
  */
 class LearnMoreLink extends Component {
   static get propTypes() {
     return {
+      className: PropTypes.string,
       href: PropTypes.string,
       learnMoreStringKey: PropTypes.string.isRequired,
       l10n: PropTypes.object.isRequired,
       messageStringKey: PropTypes.string.isRequired,
       onClick: PropTypes.func,
     };
   }
 
@@ -36,25 +37,28 @@ class LearnMoreLink extends Component {
   }
 
   static openDocOnClick(event) {
     event.preventDefault();
     openDocLink(event.target.href);
   }
 
   render() {
-    const { href, learnMoreStringKey, l10n, messageStringKey, onClick } = this.props;
+    const { className, href, learnMoreStringKey, l10n, messageStringKey, onClick } =
+      this.props;
     const learnMoreString = l10n.getStr(learnMoreStringKey);
     const messageString = l10n.getFormatStr(messageStringKey, learnMoreString);
 
     // Split the paragraph string with the link as a separator, and include the link into
     // results.
     const re = new RegExp(`(\\b${learnMoreString}\\b)`);
     const contents = messageString.split(re);
     contents[1] = a({ className: "link", href, onClick }, contents[1]);
 
     return (
-      p({}, ...contents)
+      p({
+        className,
+      }, ...contents)
     );
   }
 }
 
 module.exports = LearnMoreLink;
--- a/devtools/client/accessibility/test/mochitest/test_accessible_learnMoreLink.html
+++ b/devtools/client/accessibility/test/mochitest/test_accessible_learnMoreLink.html
@@ -60,29 +60,32 @@ window.onload = async function() {
 
       ok(onClickUrl !== checker, "Link was clicked");
       is(onClickUrl, expectedUrl, "Correct URL is opened");
 
       browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
     }
 
     const href = "http://example.com/";
+    const className = "test-class";
     const l10n = new MockL10N({
       message: "This is a message that contains a link. %S",
       link: "Learn more",
     });
     const learnMoreLink = LearnMoreLink(
-      { href, l10n, learnMoreStringKey: "link", messageStringKey: "message" });
+      { href, className, l10n, learnMoreStringKey: "link", messageStringKey: "message" });
     ok(LearnMoreLink, "Should be able to create LearnMoreLink instances");
 
     ReactDOM.render(learnMoreLink, document.body);
     const p = document.querySelector("p");
     is(p.textContent, "This is a message that contains a link. Learn more",
       "Text content for the whole paragraph is correct");
 
+    is(p.className, className, "Class name is set correctly.");
+
     const link = p.querySelector(".link");
     ok(link, "Link was rendered");
     is(link.textContent, "Learn more", "Text content for link is correct");
 
     testLinkClicked(link, href);
   } catch (e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {