[Inspectorv2/Fluent] Open infobutton links in new tab (#17345)

Bug fix to open link in new tab vs current window

other changes:
- Moves fluent link usage over to the shared primitive 
- Adds style prop to baseprimtive

---------

Co-authored-by: Georgina Halpern <[email protected]>

Author: georginahalpern

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx

@@ -1,15 +1,9 @@
-import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine";
 import { Link } from "../../primitives/link";
-import type { ImmutablePrimitiveProps } from "../../primitives/primitive";
+import type { LinkProps } from "../../primitives/link";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
 
-type LinkProps = ImmutablePrimitiveProps<string> & {
-    onLink?: () => void;
-    url?: string;
-};
-
 /**
  * Wraps a link in a property line
  * @param props - PropertyLineProps and LinkProps
@@ -19,9 +13,7 @@ export const LinkPropertyLine: FunctionComponent<PropertyLineProps<string> & Lin
     LinkPropertyLine.displayName = "LinkPropertyLine";
     return (
         <PropertyLine {...props}>
-            <Link inline onClick={() => props.onLink?.()} href={props.url} title={props.title}>
-                <Body1>{props.value}</Body1>
-            </Link>
+            <Link {...props} />
         </PropertyLine>
     );
 };

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx

@@ -1,4 +1,4 @@
-import { Body1, InfoLabel, Link, Checkbox, makeStyles, Body1Strong, tokens, mergeClasses } from "@fluentui/react-components";
+import { Body1, InfoLabel, Checkbox, makeStyles, Body1Strong, tokens, mergeClasses } from "@fluentui/react-components";
 import {
     ChevronCircleDown20Regular,
     ChevronCircleDown16Regular,
@@ -13,6 +13,7 @@ import { Collapse } from "../../primitives/collapse";
 import { copyCommandToClipboard } from "../../../copyCommandToClipboard";
 import { ToolContext } from "../fluentToolWrapper";
 import type { PrimitiveProps } from "../../primitives/primitive";
+import { Link } from "../../primitives/link";
 import { ToggleButton } from "../../primitives/toggleButton";
 import { Button } from "../../primitives/button";
 import { CustomTokens } from "../../primitives/utils";
@@ -136,7 +137,7 @@ export const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<Propert
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
 
-    const description = props.docLink ? <Link href={props.docLink}>{props.description ?? "Docs"}</Link> : props.description;
+    const description = props.docLink ? <Link url={props.docLink} value={props.description ?? "Docs"} /> : props.description;
 
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
     const processedChildren =

packages/dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx

@@ -7,7 +7,6 @@ import {
     ColorSlider,
     ColorArea,
     AlphaSlider,
-    Link,
     makeStyles,
     Popover,
     PopoverSurface,
@@ -24,6 +23,7 @@ import { SpinButton } from "./spinButton";
 import { TextInput } from "./textInput";
 import { NumberDropdown } from "./dropdown";
 import { ValidateColorHex } from "./utils";
+import { Link } from "./link";
 import { ToolContext } from "../hoc/fluentToolWrapper";
 
 const useColorPickerStyles = makeStyles({
@@ -233,7 +233,7 @@ export const InputHexField: FunctionComponent<InputHexProps> = (props) => {
                                   <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>
                                   <br />
                                   <br />
-                                  <Link href="https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/"> Read more in our docs! </Link>
+                                  <Link url="https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/" value="Read more in our docs!" />
                               </>
                           ),
                       }

packages/dev/sharedUiComponents/src/fluent/primitives/link.tsx

@@ -1,3 +1,28 @@
-// No special styling / functionality yet!
+import type { FunctionComponent, PropsWithChildren } from "react";
+import { Body1, Link as FluentLink } from "@fluentui/react-components";
+import type { ImmutablePrimitiveProps } from "./primitive";
 
-export { Link } from "@fluentui/react-components";
+export type LinkProps = ImmutablePrimitiveProps<string> & {
+    /**
+     * Used if you want to handle the link click yourself
+     */
+    onLink?: () => void;
+    /**
+     * The URL the link points to
+     */
+    url?: string;
+    /**
+     * Defines whether to open the link in current tab or new tab. Default is new
+     */
+    target?: "current" | "new";
+};
+
+export const Link: FunctionComponent<PropsWithChildren<LinkProps>> = (props) => {
+    const { target, url, onLink, ...rest } = props;
+    return (
+        <FluentLink inline target={target === "current" ? "_self" : "_blank"} rel="noopener noreferrer" href={url} onClick={onLink ?? undefined} {...rest}>
+            {props.children}
+            <Body1>{props.value}</Body1>
+        </FluentLink>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx

@@ -30,9 +30,7 @@ export const MessageBar: FunctionComponent<MessageBarProps> = (props) => {
                     {docLink && (
                         <>
                             {" - "}
-                            <Link href={docLink} target="_blank" rel="noopener noreferrer">
-                                Learn More
-                            </Link>
+                            <Link url={docLink} value="Learn More" />
                         </>
                     )}
                 </MessageBarBody>

packages/dev/sharedUiComponents/src/fluent/primitives/primitive.ts

@@ -9,7 +9,10 @@ export type BasePrimitiveProps = {
      * Optional class name to apply custom styles to the component.
      */
     className?: string;
-
+    /**
+     * Optional style object to apply custom inline styles to the top-level HTML element.
+     */
+    style?: React.CSSProperties;
     /**
      * Optional title for the component, used for tooltips or accessibility.
      */