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; }