diff --git a/react-common/components/controls/Link.tsx b/react-common/components/controls/Link.tsx
index 299403e1b11e..5a26164b2dfe 100644
--- a/react-common/components/controls/Link.tsx
+++ b/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}
);
diff --git a/react-common/components/controls/Modal.tsx b/react-common/components/controls/Modal.tsx
index 874546499b6a..96d80b100578 100644
--- a/react-common/components/controls/Modal.tsx
+++ b/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) => {
{fullscreen && helpUrl &&
-
}
{!fullscreen && !hideDismissButton &&
diff --git a/react-common/components/extensions/ExtensionCard.tsx b/react-common/components/extensions/ExtensionCard.tsx
index 03b7b504c3f3..973bb689cebe 100644
--- a/react-common/components/extensions/ExtensionCard.tsx
+++ b/react-common/components/extensions/ExtensionCard.tsx
@@ -3,6 +3,7 @@ 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 {
title: string;
@@ -46,7 +47,7 @@ export const ExtensionCard = (props: ExtensionCardProps) => {
{!loading && <>
{imageUrl &&
}
-
+
{title}
@@ -58,13 +59,13 @@ export const ExtensionCard =
(props: ExtensionCardProps) => {
{showDisclaimer && lf("User-provided extension, not endorsed by Microsoft.")}
{learnMoreUrl &&
-
}
diff --git a/react-common/styles/controls/Button.less b/react-common/styles/controls/Button.less
index 5273279541ea..3bd8428be543 100644
--- a/react-common/styles/controls/Button.less
+++ b/react-common/styles/controls/Button.less
@@ -227,6 +227,11 @@
background: none;
}
+a.common-button.menu-button {
+ display: flex;
+ align-items: center;
+}
+
/****************************************************
* Link Buttons *
****************************************************/
diff --git a/react-common/styles/extensions/ExtensionCard.less b/react-common/styles/extensions/ExtensionCard.less
index b16fa38d8573..8e634c5f7d57 100644
--- a/react-common/styles/extensions/ExtensionCard.less
+++ b/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;
}