feat(fluentUI-migration): DefaultButton fluentui v8 to v9 migration (#…

…7356) #### Details DefaultButton v9 migration Files worked upon: 1. selector-input-list.tsx ![image](https://github.com/user-attachments/assets/82830d5c-5e5f-41c2-90ff-ecd1cd40e700) ![image](https://github.com/user-attachments/assets/3687ad8d-aba3-4b8b-981f-066a8c418032) ![image](https://github.com/user-attachments/assets/0a2d0e6f-99f9-42f2-aa30-ee73201bdc8d) ![image](https://github.com/user-attachments/assets/a686c17d-52d2-4f00-b1a8-2d8e6f0bba91) ![image](https://github.com/user-attachments/assets/0651bd8e-3c1b-4897-84bf-a84ab8c42a35) ![image](https://github.com/user-attachments/assets/ea90705f-907d-4599-9308-e8c7977adda9) 2. scoping-panel.tsx ![image](https://github.com/user-attachments/assets/74e506d2-b9e7-47d1-952b-1af26ff3000d) ![image](https://github.com/user-attachments/assets/14cbc885-1699-4d0c-8465-3257b24d1e76) ![image](https://github.com/user-attachments/assets/a65d9401-2143-463e-8a65-e7486b0281fc) 3. failure-instance-panel-details.tsx ![image](https://github.com/user-attachments/assets/56fe4ff2-49a9-4b00-b813-ddb3f8c91470) ![image](https://github.com/user-attachments/assets/d79b9cbb-2ab8-4ef7-a6b7-2f9f588ad8ac) ![image](https://github.com/user-attachments/assets/9770e3a0-0366-4fb5-a856-04f4ffc28899) ![image](https://github.com/user-attachments/assets/5788813c-5e71-4418-8a3b-78a0e8053075) 4. next-requirement-button.tsx ![image](https://github.com/user-attachments/assets/71e850c9-2c60-4e00-9869-df031be1a42c) ![image](https://github.com/user-attachments/assets/c16862fb-3069-47ea-a3ea-39b35dababe9) ![image](https://github.com/user-attachments/assets/c98e95e8-79de-4ab0-85ab-1dde95df261d) ![image](https://github.com/user-attachments/assets/2c87106c-4879-467c-98a2-1029b3c5427a) 5. copy-issue-details-button.tsx 6. issue-filing-button.tsx 7. command-bar.tsx ![image](https://github.com/user-attachments/assets/5b009f39-127f-485e-b378-59613ceb8f38) ![image](https://github.com/user-attachments/assets/ecacd889-559d-475e-b377-8c6aa4189b1d) 8. issue-details-navigation-controls.tsx ![image](https://github.com/user-attachments/assets/76d0b9b1-9d6f-418e-847a-6f85d6e25b52) ![image](https://github.com/user-attachments/assets/d53b8427-ce38-407f-9ec7-98a4cfc29546) ![image](https://github.com/user-attachments/assets/6ef51b48-d08f-4bcd-b6f7-2cca7fef7e3c) ![image](https://github.com/user-attachments/assets/c34b5b6d-d66d-4088-8e95-ebf434e18b24) Changes in UI with comparison to current UI have been added in this Document. Data for UI testing carried out in both normal & high contrast modes is present here. https://microsoft-my.sharepoint.com/:w:/p/v-sharmachir/EW-s8dSGK9xCnMGknEXAVY0BDawYAg0YHnG1rua0zzkBiQ?e=CS1cOE (MS Internal) ##### Motivation Fluent UI v8 to v9 migration ##### Context **Pending:** - Few instance of default button is still in v8 as those are under Dialog, it will be migrated with Dialog migration. - Need to fix Icons margin for Primary buttons, as they appear little close to text, this will be fixed during Icon migration.  #### Pull request checklist  - [x] Addresses an existing issue: (https://dev.azure.com/mseng/1ES/_workitems/edit/2187075) - [x] Ran `yarn fastpass` - [x] Added/updated relevant unit test(s) (and ran `yarn test`) - [x] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage` - [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`. - [x] (UI changes only) Added screenshots/GIFs to description above - [x] (UI changes only) Verified usability with NVDA/JAWS --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Anjali Singh <[email protected]> Co-authored-by: v-rakeshsh <[email protected]> Co-authored-by: Jeevani Chinthala <[email protected]> Co-authored-by: JeevaniChinthala <[email protected]> Co-authored-by: Saanica Ghate <[email protected]> Co-authored-by: Saanica Ghate <[email protected]> Co-authored-by: Rakesh Shivapooja <[email protected]> Co-authored-by: Prachi Naigaonkar <[email protected]>
microsoft · Aug 20, 2024 · 5aba30e · 5aba30e
1 parent 85c96dd
commit 5aba30e
Show file tree

Hide file tree

Showing 42 changed files with 1,639 additions and 1,409 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -161,7 +161,7 @@ jobs:
     name: e2e-web-tests (${{ matrix.shard-index }}/${{ strategy.job-total }})
     runs-on: ubuntu-20.04
     # We need to update this each time we update playwright
-    container: mcr.microsoft.com/playwright:v1.44.1-focal
+    container: mcr.microsoft.com/playwright:v1.46.1-focal
     strategy:
       fail-fast: false
       matrix:

diff --git a/Dockerfile b/Dockerfile
@@ -5,7 +5,7 @@
 # reference: https://stackoverflow.com/a/51683309/3711475
 # reference: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker
 
-FROM mcr.microsoft.com/playwright:v1.44.1-focal AS setup
+FROM mcr.microsoft.com/playwright:v1.46.1-focal AS setup
 
 USER root
 

diff --git a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
@@ -122,6 +122,9 @@
   --nav-link-hover: #2a2a2a;
   --nav-link-selected: var(--communication-tint-40);
   --nav-link-expanded: transparent;
+  --button-border: var(--grey);
+  --button-background-disable: var(--grey);
+  --button-background-hover: var(--grey);
 }
 
 .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {

diff --git a/src/DetailsView/components/details-view-overlay/scoping-panel/scoping-panel.tsx b/src/DetailsView/components/details-view-overlay/scoping-panel/scoping-panel.tsx
@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { DefaultButton } from '@fluentui/react';
+import { Button, mergeClasses } from '@fluentui/react-components';
 import { InspectActionMessageCreator } from 'common/message-creators/inspect-action-message-creator';
 import { ScopingActionMessageCreator } from 'common/message-creators/scoping-action-message-creator';
+import styles from 'common/styles/button.scss';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
 import { ScopingStoreData } from 'common/types/store-data/scoping-store-data';
 import * as React from 'react';
@@ -41,12 +42,19 @@ export class ScopingPanel extends React.Component<ScopingPanelProps> {
                     scopingActionMessageCreator={this.props.scopingActionMessageCreator}
                     inspectActionMessageCreator={this.props.inspectActionMessageCreator}
                 />
-                <DefaultButton
-                    className="closing-scoping-panel"
-                    primary={true}
-                    text="OK"
-                    onClick={this.props.deps.detailsViewActionMessageCreator.closeScopingPanel}
-                />
+                <div className={styles.buttonsComponent}>
+                    <div className={styles.buttonCol}>
+                        <Button
+                            appearance="primary"
+                            className={mergeClasses(styles.primaryButton, 'closing-scoping-panel')}
+                            onClick={
+                                this.props.deps.detailsViewActionMessageCreator.closeScopingPanel
+                            }
+                        >
+                            OK
+                        </Button>
+                    </div>
+                </div>
             </GenericPanel>
         );
     }

diff --git a/src/DetailsView/components/failure-instance-panel-details.tsx b/src/DetailsView/components/failure-instance-panel-details.tsx
@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { DefaultButton, Icon, ILabelStyles, ITextFieldStyles, TextField } from '@fluentui/react';
+import { Icon, ILabelStyles, ITextFieldStyles, TextField } from '@fluentui/react';
+import { Button, mergeClasses } from '@fluentui/react-components';
+import buttonStyles from 'common/styles/button.scss';
 import * as React from 'react';
 import { NamedFC } from '../../common/react/named-fc';
 import styles from './failure-instance-panel.scss';
@@ -54,11 +56,20 @@ export const FailureInstancePanelDetails = NamedFC<FailureInstancePanelDetailsPr
                     Note: If the CSS selector maps to multiple snippets, the first will be selected
                 </div>
                 <div>
-                    <DefaultButton
-                        text="Validate CSS selector"
-                        onClick={props.onValidateSelector}
-                        disabled={props.path === null}
-                    />
+                    <div className={buttonStyles.buttonsComponent}>
+                        <div className={buttonStyles.buttonCol}>
+                            <Button
+                                className={mergeClasses(
+                                    buttonStyles.defaultButton,
+                                    styles.validateCssButton,
+                                )}
+                                onClick={props.onValidateSelector}
+                                disabled={props.path === null}
+                            >
+                                Validate CSS selector
+                            </Button>
+                        </div>
+                    </div>
                 </div>
                 <div aria-live="polite" aria-atomic="true">
                     <div className={styles.failureInstanceSnippetTitle}>Code Snippet</div>

diff --git a/src/DetailsView/components/failure-instance-panel.scss b/src/DetailsView/components/failure-instance-panel.scss
@@ -84,3 +84,7 @@
         }
     }
 }
+
+.validate-css-button {
+    width: 180px !important;
+}
diff --git a/src/DetailsView/components/issues-table.tsx b/src/DetailsView/components/issues-table.tsx
@@ -76,7 +76,7 @@ export class IssuesTable extends React.Component<IssuesTableProps> {
         return (
             <h1>
                 {this.props.title}
-                {this.props.includeStepsText ?? true ? ` ${this.props.stepsText}` : null}
+                {(this.props.includeStepsText ?? true) ? ` ${this.props.stepsText}` : null}
             </h1>
         );
     }

diff --git a/src/DetailsView/components/next-requirement-button.tsx b/src/DetailsView/components/next-requirement-button.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { DefaultButton, Icon } from '@fluentui/react';
+import { Icon } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { Requirement } from 'assessments/types/requirement';
 import { NamedFC } from 'common/react/named-fc';
 import { VisualizationType } from 'common/types/visualization-type';
@@ -36,15 +37,12 @@ export const NextRequirementButton = NamedFC<NextRequirementButtonProps>(
         };
 
         return (
-            <DefaultButton
-                text={props.nextRequirement.name}
-                className={props.className}
-                onClick={selectNextRequirement}
-            >
+            <Button className={props.className} onClick={selectNextRequirement}>
+                {props.nextRequirement.name}
                 <span>
                     <Icon iconName="ChevronRight" ariaLabel={'next'} />
                 </span>
-            </DefaultButton>
+            </Button>
         );
     },
 );
diff --git a/src/DetailsView/components/requirement-view.scss b/src/DetailsView/components/requirement-view.scss
@@ -22,6 +22,14 @@
         align-self: flex-end;
         margin-bottom: 1vh;
         margin-top: 1vh;
+        border: 1px solid $neutral-30 !important;
+        border-radius: 2px !important;
+
+        &:focus-visible {
+            outline: 1px solid;
+            outline-offset: -4px;
+            box-shadow: none !important;
+        }
     }
 
     .requirement-content {
@@ -49,6 +57,7 @@
         width: 308px;
         height: fit-content;
         margin-right: 32px;
+
         @media screen and (width <= 1200px) {
             width: 100%;
             padding-top: 0;

diff --git a/src/common/components/copy-issue-details-button.tsx b/src/common/components/copy-issue-details-button.tsx
@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { DefaultButton } from '@fluentui/react';
+import { Button, mergeClasses } from '@fluentui/react-components';
+import { DocumentCopy20Regular } from '@fluentui/react-icons';
 import { IssueDetailsTextGenerator } from 'background/issue-details-text-generator';
 import { NavigatorUtils } from 'common/navigator-utils';
 import { ToolData } from 'common/types/store-data/unified-data-interface';
 import * as React from 'react';
-
-import { CopyIcon } from '../../common/icons/copy-icon';
+import styles from '../styles/button.scss';
 import { CreateIssueDetailsTextData } from '../types/create-issue-details-text-data';
 import { Toast, ToastDeps } from './toast';
 
@@ -64,13 +64,16 @@ export class CopyIssueDetailsButton extends React.Component<CopyIssueDetailsButt
         return (
             <>
                 <Toast ref={this.toastRef} deps={this.props.deps} />
-                <DefaultButton
-                    className={'copy-issue-details-button'}
+                <Button
+                    className={mergeClasses(
+                        'copy-issue-details-button',
+                        styles.detailsDialogButton,
+                    )}
                     onClick={this.copyButtonClicked}
                 >
-                    <CopyIcon />
+                    <DocumentCopy20Regular />
                     <div className="ms-Button-label">Copy failure details</div>
-                </DefaultButton>
+                </Button>
             </>
         );
     }

diff --git a/src/common/components/issue-filing-button.tsx b/src/common/components/issue-filing-button.tsx
@@ -1,14 +1,14 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { DefaultButton } from '@fluentui/react';
+import { Button, mergeClasses } from '@fluentui/react-components';
+import { Bug20Filled } from '@fluentui/react-icons';
 import { ToolData } from 'common/types/store-data/unified-data-interface';
 import * as React from 'react';
-
 import { IssueFilingDialogDeps } from '../../DetailsView/components/issue-filing-dialog';
 import { IssueFilingServiceProvider } from '../../issue-filing/issue-filing-service-provider';
 import { IssueFilingService } from '../../issue-filing/types/issue-filing-service';
-import { LadyBugSolidIcon } from '../icons/lady-bug-solid-icon';
 import { IssueFilingActionMessageCreator } from '../message-creators/issue-filing-action-message-creator';
+import styles from '../styles/button.scss';
 import { CreateIssueDetailsTextData } from '../types/create-issue-details-text-data';
 import {
     IssueFilingNeedsSettingsContentProps,
@@ -71,13 +71,14 @@ export class IssueFilingButton extends React.Component<
 
         return (
             <>
-                <DefaultButton
-                    className={'file-issue-button'}
+                <Button
+                    appearance="primary"
+                    className={mergeClasses('file-issue-button', styles.detailsDialogButton)}
                     onClick={event => this.onClickFileIssueButton(event)}
                 >
-                    <LadyBugSolidIcon />
+                    <Bug20Filled />
                     <div className="ms-Button-label">File issue</div>
-                </DefaultButton>
+                </Button>
                 <NeedsSettingsContent {...needsSettingsContentProps} />
             </>
         );

diff --git a/src/common/components/selector-input-list.scss b/src/common/components/selector-input-list.scss
@@ -67,3 +67,12 @@
     justify-content: space-between;
     align-items: center;
 }
+
+.selector-input-button {
+    width: min-content !important;
+    height: 38px !important;
+}
+
+.add-selector {
+    font-size: 30px !important;
+}
diff --git a/src/common/components/selector-input-list.tsx b/src/common/components/selector-input-list.tsx
@@ -1,15 +1,17 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import {
-    DefaultButton,
     FocusZone,
     FocusZoneDirection,
     IconButton,
     ITextField,
     List,
     TextField,
 } from '@fluentui/react';
+import { Button, mergeClasses } from '@fluentui/react-components';
+import { AddRegular } from '@fluentui/react-icons';
 import styles from 'common/components/selector-input-list.scss';
+import buttonStyles from 'common/styles/button.scss';
 import * as _ from 'lodash/index';
 import * as React from 'react';
 import { SingleElementSelector } from '../types/store-data/scoping-store-data';
@@ -77,13 +79,24 @@ export class SelectorInputList extends React.Component<
                         placeholder="Enter element selector here"
                     />
                     <div className={styles.addSelectorButtons}>
-                        <DefaultButton
-                            className={styles.textboxAddSelectorButton}
-                            iconProps={{ iconName: 'add' }}
-                            onClick={this.addSelector}
-                            disabled={!this.state.isTextFieldValueValid}
-                            text="Add Selector"
-                        />
+                        <div className={buttonStyles.buttonsComponent}>
+                            <div className={buttonStyles.buttonCol}>
+                                <Button
+                                    className={
+                                        !this.state.isTextFieldValueValid
+                                            ? buttonStyles.buttonDisabled
+                                            : mergeClasses(
+                                                  buttonStyles.defaultButton,
+                                                  styles.selectorInputButton,
+                                              )
+                                    }
+                                    onClick={this.addSelector}
+                                    disabled={!this.state.isTextFieldValueValid}
+                                >
+                                    <AddRegular className={styles.addSelector} /> Add Selector
+                                </Button>
+                            </div>
+                        </div>
                         <IconButton
                             iconProps={{
                                 iconName: 'scopeTemplate',