Replace a few buttons with links

react-common/components/controls/Link.tsx

@@ -5,6 +5,7 @@ export interface LinkProps extends ContainerProps {
     href: string;
     target?: "_self" | "_blank" | "_parent" | "_top";
     tabIndex?: number;
+    title?: string;
 }
 
 export const Link = (props: LinkProps) => {
@@ -15,7 +16,8 @@ export const Link = (props: LinkProps) => {
         href,
         target,
         children,
-        tabIndex
+        tabIndex,
+        title
     } = props;
 
     const classes = classList(
@@ -32,7 +34,8 @@ export const Link = (props: LinkProps) => {
             target={target}
             rel={target === "_blank" ? "noopener noreferrer" : ""}
             tabIndex={tabIndex ?? 0}
-            >
+            title={title}
+        >
             {children}
         </a>
     );

react-common/components/controls/Modal.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
 import { classList, ContainerProps } from "../util";
 import { Button } from "./Button";
 import { FocusTrap } from "./FocusTrap";
+import { Link } from "./Link";
 
 export interface ModalAction {
     label: string;
@@ -86,13 +87,16 @@ export const Modal = (props: ModalProps) => {
                 </div>
                 {fullscreen && helpUrl &&
                     <div className="common-modal-help">
-                        <Button
-                            className="menu-button"
+                        <Link
+                            className="common-button menu-button"
                             title={lf("Help on {0} dialog", title)}
                             href={props.helpUrl}
-                            onClick={() => {}}
-                            rightIcon="fas fa-question"
-                        />
+                            target="_blank"
+                        >
+                            <span className="common-button-flex">
+                                <i className="fas fa-question" aria-hidden={true}/>
+                            </span>
+                        </Link>
                     </div>
                 }
                 {!fullscreen && !hideDismissButton &&

react-common/components/extensions/ExtensionCard.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { Button } from "../controls/Button";
 import { Card } from "../controls/Card";
 import { LazyImage } from "../controls/LazyImage";
 import { classList } from "../util";
+import { Link } from "../controls/Link";
 
 export interface ExtensionCardProps<U> {
     title: string;
@@ -46,7 +46,7 @@ export const ExtensionCard = <U,>(props: ExtensionCardProps<U>) => {
             <div className="common-extension-card-contents">
                 {!loading && <>
                     {imageUrl && <LazyImage src={imageUrl} alt={title} />}
-                    <div className="common-extension-card-title" id={id + "-title"}>
+                    <div className="common-extension-card-title" id={id + "-title"} title={title}>
                         {title}
                     </div>
                     <div className="common-extension-card-description">
@@ -58,13 +58,13 @@ export const ExtensionCard = <U,>(props: ExtensionCardProps<U>) => {
                         <div className="common-extension-card-extra-content">
                             {showDisclaimer && lf("User-provided extension, not endorsed by Microsoft.")}
                             {learnMoreUrl &&
-                                <Button
+                                <Link
                                     className="link-button"
-                                    label={lf("Learn More")}
-                                    title={lf("Learn More")}
-                                    onClick={() => { }}
                                     href={learnMoreUrl}
-                                />
+                                    target="_blank"
+                                >
+                                    {lf("Learn More")}
+                                </Link>
                             }
                         </div>
                     }

react-common/styles/controls/Button.less

@@ -227,6 +227,11 @@
     background: none;
 }
 
+a.common-button.menu-button {
+    display: flex;
+    align-items: center;
+}
+
 /****************************************************
  *                   Link Buttons                   *
  ****************************************************/

react-common/styles/extensions/ExtensionCard.less

@@ -14,6 +14,7 @@
         font-size: 18px;
         padding: 0.5rem 1rem 0.25rem 1rem;
         text-overflow: ellipsis;
+        white-space: nowrap;
         overflow: hidden;
         flex-shrink: 0;
     }
@@ -56,7 +57,7 @@
         border-bottom-right-radius: 0.5rem;
     }
 
-    .common-button.link-button {
+    a.link-button {
         float: right;
     }