feat : Link component migration from v8 to v9

package.json

@@ -152,7 +152,7 @@
     },
     "dependencies": {
         "@fluentui/react": "^8.118.1",
-        "@fluentui/react-components": "^9.53.0",
+        "@fluentui/react-components": "^9.54.1",
         "@microsoft/applicationinsights-web": "^2.8.15",
         "@testing-library/user-event": "^14.5.2",
         "ajv": "^8.12.0",

src/DetailsView/components/assessment-instance-edit-and-remove-control.scss

@@ -3,10 +3,10 @@
 @import '../../common/styles/common.scss';
 
 .remove-button {
-    margin-left: 12px;
-    font-size: 16px;
+    margin-left: 12px !important;
+    font-size: 16px !important;
     line-height: 24px;
-    color: $negative-outcome;
+    color: $negative-outcome !important;
 
     &:hover,
     &:focus {

src/DetailsView/components/assessment-instance-edit-and-remove-control.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { Icon, Link } from '@fluentui/react';
+import { Icon } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { CapturedInstanceActionType } from 'common/types/captured-instance-action-type';
 import { FailureInstanceData } from 'common/types/failure-instance-data';

src/DetailsView/components/base-left-nav.scss

@@ -19,6 +19,7 @@
         :global {
             .is-selected {
                 background-color: $nav-link-selected;
+                font-weight: 600;
 
                 a,
                 button {

src/DetailsView/components/failure-instance-panel-control.tsx

@@ -1,13 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import {
-    ActionButton,
-    Icon,
-    ILabelStyles,
-    ITextFieldStyles,
-    Link,
-    TextField,
-} from '@fluentui/react';
+import { ActionButton, Icon, ILabelStyles, ITextFieldStyles, TextField } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { FlaggedComponent } from 'common/components/flagged-component';
 import { FeatureFlags } from 'common/feature-flags';

src/DetailsView/components/failure-instance-panel.scss

@@ -66,6 +66,7 @@
     font-size: 16px !important;
     line-height: 24px !important;
     color: $neutral-100 !important;
+    padding-right: 3px;
 
     &:hover,
     &:focus {

src/DetailsView/components/iframe-warning.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { Link } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { NewTabLink } from 'common/components/new-tab-link';
 import { NamedFC } from 'common/react/named-fc';
 import { SupportedMouseEvent } from 'common/telemetry-data-factory';

src/DetailsView/components/left-nav/details-view-left-nav.scss

@@ -32,6 +32,10 @@
 
         button.ms-Nav-link {
             width: 100%;
+
+            &:hover {
+                background-color: $nav-link-hover;
+            }
         }
 
         .overview-label {
@@ -73,6 +77,10 @@
                     color: $always-black;
                 }
 
+                a {
+                    font-weight: 600;
+                }
+
                 a,
                 button {
                     background-color: $communication-tint-40;
@@ -93,6 +101,10 @@
                         $communication-primary;
                 }
             }
+
+            &:not(.is-selected):hover {
+                background-color: $nav-link-hover;
+            }
         }
 
         .ms-Pivot-text {

src/DetailsView/components/requirement-context-section.scss

@@ -24,6 +24,7 @@
     margin-block-end: 1em;
     margin-inline-start: 0;
     margin-inline-end: 0;
+    font-size: 17px;
 }
 
 .context-links > * {

src/DetailsView/components/requirement-view.scss

@@ -39,6 +39,8 @@
 
             h3 {
                 @include h3;
+
+                font-size: 17px;
             }
         }
     }

src/DetailsView/components/target-change-dialog.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { Link, TooltipHost } from '@fluentui/react';
+import { TooltipHost } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { css } from '@fluentui/utilities';
 import { NamedFC } from 'common/react/named-fc';
 import { PersistedTabInfo } from 'common/types/store-data/assessment-result-data';

src/DetailsView/tab-stops-requirement-instances-collapsible-content.scss

@@ -8,7 +8,7 @@
     // because we want these icons to line up with the Pass/Fail ChoiceGroup in the Requirement
     // table earlier on the same page.
     margin-left: 4px;
-    margin-right: 10px;
+    margin-right: 10px !important;
     padding-left: 3px;
     padding-right: 3px;
     font-size: 16px !important;

src/DetailsView/tab-stops-requirement-instances-collapsible-content.tsx

@@ -7,8 +7,8 @@ import {
     DetailsList,
     IColumn,
     Icon,
-    Link,
 } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { NamedFC } from 'common/react/named-fc';
 import { AssessmentInstanceDetailsColumn } from 'DetailsView/components/assessment-instance-details-column';
 import { tabStopsRequirementsTableActionColumnWidthPx } from 'DetailsView/components/tab-stops/tab-stops-requirements-table';

src/common/components/new-tab-link-with-tooltip.scss

@@ -22,4 +22,10 @@
     &:active {
         text-decoration: none !important;
     }
+
+    &:focus-visible {
+        box-shadow: $neutral-60 0 0 0 1px inset !important;
+        outline: $neutral-60 auto 1px !important;
+        text-decoration: none !important;
+    }
 }

src/common/components/new-tab-link-with-tooltip.tsx

@@ -1,17 +1,22 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ICalloutProps, ILinkProps, ITooltipHostStyles, TooltipHost } from '@fluentui/react';
+import { ICalloutProps, ITooltipHostStyles, TooltipHost } from '@fluentui/react';
+import { LinkProps } from '@fluentui/react-components';
 import { NewTabLink } from 'common/components/new-tab-link';
 import * as React from 'react';
 import { NamedFC } from '../react/named-fc';
 import styles from './new-tab-link-with-tooltip.scss';
 
-export type NewTabLinkWithTooltipProps = ILinkProps & { tooltipContent: string | undefined };
+export type NewTabLinkWithTooltipProps = LinkProps & {
+    as?: 'a';
+    tooltipContent: string | undefined;
+    className?: string;
+};
 
 export const NewTabLinkWithTooltip = NamedFC<NewTabLinkWithTooltipProps>(
     'NewTabLinkWithTooltip',
     props => {
-        const { tooltipContent, ...linkProps } = props;
+        const { tooltipContent, className, ...linkProps } = props;
         const hostStyles: Partial<ITooltipHostStyles> = {
             root: styles.insightsTooltipHost,
         };
@@ -23,7 +28,7 @@ export const NewTabLinkWithTooltip = NamedFC<NewTabLinkWithTooltipProps>(
         };
         return (
             <TooltipHost content={tooltipContent} styles={hostStyles} calloutProps={calloutProps}>
-                <NewTabLink className={styles.insightsLink} {...linkProps} />
+                <NewTabLink className={className ?? styles.insightsLink} {...linkProps} />
             </TooltipHost>
         );
     },

src/common/components/new-tab-link.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ILinkProps, Link } from '@fluentui/react';
-import { css } from '@fluentui/utilities';
+import { Link, LinkProps, mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 
 import { NamedFC } from '../react/named-fc';
 
-export const NewTabLink = NamedFC<ILinkProps>('NewTabLink', ({ className, ...props }) => {
-    const classNames = ['insights-link', className];
+export type NewTabLinkProps = LinkProps & { as?: 'a' };
 
-    return <Link className={css(...classNames)} {...props} target="_blank" />;
+export const NewTabLink = NamedFC<NewTabLinkProps>('NewTabLink', ({ className, ...props }) => {
+    return <Link className={mergeClasses('insights-link', className)} target="_blank" {...props} />;
 });

src/common/styles/root-level-only/global-styles.scss

@@ -36,6 +36,12 @@ button::after {
         color: $link-hover !important;
         text-decoration: underline;
     }
+
+    &:focus-visible {
+        box-shadow: $neutral-60 0 0 0 1px inset !important;
+        outline: $neutral-60 auto 1px !important;
+        text-decoration: none !important;
+    }
 }
 
 .high-contrast-theme {
@@ -66,6 +72,38 @@ button::after {
     }
 }
 
+.adhoc-insights-link {
+    color: $link !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+
+    &:hover {
+        color: $link-hover !important;
+    }
+
+    &:focus-visible {
+        box-shadow: $neutral-60 0 0 0 1px inset !important;
+        outline: $neutral-60 auto 1px !important;
+        text-decoration: none !important;
+    }
+}
+
+.adhoc-insights-guidance-link {
+    color: $link !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+
+    &:hover {
+        text-decoration: none !important;
+    }
+
+    &:focus-visible {
+        box-shadow: $neutral-60 0 0 0 1px inset !important;
+        outline: $neutral-60 auto 1px !important;
+        text-decoration: none !important;
+    }
+}
+
 // Add hover state that's not yet in FluentUI to menu items
 // GH Issue: https://github.com/microsoft/fluentui/issues/25330
 .ms-ContextualMenu button:hover {

src/popup/Styles/popup.scss

@@ -195,9 +195,10 @@ html {
         margin-bottom: 5px;
         padding: 0;
         height: 20px;
+        font-weight: 600 !important;
 
         .ms-Link {
-            font-weight: 600;
+            font-weight: 600 !important;
         }
     }
 }

src/popup/components/ad-hoc-tools-panel.scss

@@ -27,6 +27,12 @@
             color: $link !important;
             font-size: 11px;
             @include fluent-forced-color-adjust-override;
+
+            &:focus-visible {
+                box-shadow: $neutral-60 0 0 0 1px inset !important;
+                outline: $neutral-60 auto 1px !important;
+                text-decoration: none !important;
+            }
         }
 
         .back-to-launch-pad-icon {

src/popup/components/ad-hoc-tools-panel.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { css, Icon, Link } from '@fluentui/react';
+import { css, Icon } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { NamedFC } from 'common/react/named-fc';
 import { flatMap } from 'lodash';
 import * as React from 'react';

src/popup/components/diagnostic-view-toggle.scss

@@ -7,6 +7,7 @@
     grid-template-columns: auto auto;
     grid-template-rows: minmax(25px, min-content) minmax(25px, min-content);
     align-items: center;
+    font-weight: 600;
 
     .title {
         font-weight: 600;

src/popup/components/diagnostic-view-toggle.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { IToggle, Link, Spinner, SpinnerSize } from '@fluentui/react';
+import { IToggle, Spinner, SpinnerSize } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { VisualizationToggle } from 'common/components/visualization-toggle';
 import { VisualizationConfiguration } from 'common/configs/visualization-configuration';
 import { VisualizationConfigurationFactory } from 'common/configs/visualization-configuration-factory';
@@ -173,6 +174,7 @@ export class DiagnosticViewToggle extends React.Component<
         if (this.configuration.guidance) {
             return (
                 <ContentLink
+                    className="adhoc-insights-guidance-link"
                     deps={this.props.deps}
                     reference={this.configuration.guidance}
                     linkText={linkText}
@@ -182,7 +184,7 @@ export class DiagnosticViewToggle extends React.Component<
 
         return (
             <Link
-                className="insights-link"
+                className="adhoc-insights-link"
                 href="#"
                 onClick={ev =>
                     this.props.actionMessageCreator.openDetailsView(

src/popup/components/launch-pad-item-row.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { Icon, Link } from '@fluentui/react';
+import { Icon } from '@fluentui/react';
+import { Link } from '@fluentui/react-components';
 import { kebabCase, uniqueId } from 'lodash';
 import * as React from 'react';
 
@@ -29,6 +30,7 @@ export class LaunchPadItemRow extends React.Component<LaunchPadItemRowProps> {
                             id={kebabCase(this.props.title)}
                             onClick={this.props.onClickTitle}
                             aria-describedby={this.descriptionId}
+                            style={{ fontWeight: 600 }}
                         >
                             {this.props.title}
                         </Link>

src/reports/components/assessment-report-summary.scss

@@ -26,5 +26,6 @@
         font-family: $font-family;
         margin-top: 16px;
         margin-bottom: 21px;
+        font-size: 17px;
     }
 }

src/reports/components/new-tab-link-confirmation-dialog.tsx

@@ -1,12 +1,13 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { getId, ILinkProps } from '@fluentui/react';
+import { getId } from '@fluentui/react';
+import { LinkProps } from '@fluentui/react-components';
 import { NewTabLink } from 'common/components/new-tab-link';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
 
-export const NewTabLinkWithConfirmationDialog = NamedFC<ILinkProps>(
+export const NewTabLinkWithConfirmationDialog = NamedFC<LinkProps & { as?: 'a' }>(
     'NewTabLinkWithConfirmationDialog',
     props => {
         const id = getId('new-tab-link-with-confirmation-dialog__'); // generates something like new-tab-link-with-confirmation-dialog__123