Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(fluentUI-migration): ActionButton fluentui v8 to v9 migration (#…
…7401) #### Details Action Button migration from V8 to V9 | V8 Component | V9 Component | Reference Link | |--------|--------|--------| | Action Button | Button | https://react.fluentui.dev/?path=/docs/components-button-button--docs | | Primary Button | Button | https://react.fluentui.dev/?path=/docs/components-button-button--docs | | CommandBarButton | Combination of Menu, MenuTrigger, MenuButton, MenuPopover, MenuList | 1. MenuButton - https://react.fluentui.dev/?path=/docs/components-button-menubutton--docs 2. Menu - https://react.fluentui.dev/?path=/docs/components-menu-menu--docs 3. MenuList - https://react.fluentui.dev/?path=/docs/components-menu-menulist--docs | | IconProps for Action Button and action button internally takes care of showing the icon | Created a component **src/common/icons/fluentui-v9-icons.tsx** to consume @fluentui/react-icons icons | Cell | ### Styling Improvements: * Updated the width property from `100%` to `auto` for better layout flexibility in multiple snapshot files. * Added new CSS classes for better button and icon styling, including hover and focus states. * Adjusted font-weight to `normal` for better text consistency. ### Component Enhancements: * Added `FluentUIV9Icon` import and updated the components to use the new icon. * Improved the components with new styles and updated its component structure to use Fluent UI v9 components. ##### Motivation 1. Migrate Action Button of V8 to V9 Button in all locations of code. 2. Changed types to align with V9 button. 3. Changed styling to align with old UI. 4. Fixed test cases to cover >90% coverage. ##### Context UI locations for all the files are mentioned with images in below file: [ActionButtonComparison](https://microsoft-my.sharepoint.com/:w:/r/personal/v-singhanjal_microsoft_com/_layouts/15/Doc.aspx?sourcedoc=%7B8893E880-1CFB-4D25-8E5F-3AD94CA0E9EB%7D&file=Document%202.docx&action=editNew&mobileredirect=true&wdOrigin=MARKETING.WORD.SIGNIN%2CAPPHOME-WEB.BANNER.NEWBLANK&wdPreviousSession=2dab2adc-a3f9-4816-a2b9-7175f764cb0f&wdPreviousSessionSrc=AppHomeWeb&ct=1724306297464&share=IQGA6JOI-xwlTY5fOtlMoOnrAX4RP9xcmRvEolaQPAyCsOs) Due to FluentUI V9 Migration there are slight differences between old and new Icons. PFA screenshots below. - **More Actions, Collapse all Icons**   - **Expand, Move to Assessment Icons**   - **Export result, Save Assessment, Load Assessment, Start over Icons**   - **File issue, Copy failure details Icons**   Note : 1. isNarrowMode property is added in details-view-command-bar.tsx and other related files to differentiate the rendering of button in normal mode and menu in minimize mode. 2. SaveAssessmentDialog is now moved out of SaveAssessmentButton file as with v9 button migration to menu, dialog in narrow mode was not rendering as it was getting close once menu button is clicked. 3. Accessibility test has a failure for aria-hidden-focus. There is an existing issue with fluentui and as per them these are Tabster dummy inputs and they must be added to the exception list. They are intentionally aria - hidden as their purpose is to redirect focus to the correct element right when they receive focus and not having aria - hidden will result in the screen readers choking starting to announce them. Please refer for more information on the error:microsoft/fluentui#25133 5. Changed buttonRef: IRefObject<IButton>; to ButtonRefFunction, as ButtonRefFunction can be used in future when we migrate the dialog to v9 from V8. 6. Changed /load-assessment-button.tsx to functional component from class component so that i can consume makeStyles hooks, as hooks cannot be used in class components, hence converted to Functional component. 7. Removed IPoint because its deprecated in latest Fluent UI V8. 8. Removed expand-collapse-all-button.scss because to consume makeStyles hooks and to use V9 themes, hence created expand-collapse-all-button.-styles.tsx. Technical Debt: These will be take care in up coming PR for v8 to v9 migration. **IButton**: 1. We are stilling using IButton from v8 for ref object in src\DetailsView\components\details-view-command-bar.tsx, because when we tried to use useRef instead of IButton, we have converted the component from class to functional component to consume useRef hook. 2. But after converting to functional component and using useRef, focus back to kebab button is not going in narrow mode when we close the dialog. **Card footer button scroll behaviour** 1. If multiple issues are shown in the card footer, when we expand all issues, and if we click on the first issue section button, scroll goes to the bottom of the page i.e, the focus goes to the last section. **Closing dialog focus issue** 1. In Narromode,When we open the dialog on click of export or save assessment or start over, and when we close the dialog, focus is not going back to the Kebab button, as dialog is still in v8, we will take care of this focus back issues during v9 dialog migration. **Focus style inconsistency** 1. We explicitly added focus styling for buttons to show focus like kebab button / buttons, after closing the file issue dialog, but when we use keyboard to navigate to these kebab or other buttons, browser default focus styles are getting applied, for which it might look thick border for keyboard focus, but on close of dialog, the focus goes to button with little thin border. #### Pull request checklist <!-- If a checklist item is not applicable to this change, write "n/a" in the checkbox --> - [ ] Addresses an existing issue: #0000 - [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` - [ ] 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 --------- Co-authored-by: v-sharmachir <[email protected]> Co-authored-by: Prachi Naigaonkar <[email protected]> Co-authored-by: Chirag Sharma <[email protected]> Co-authored-by: Jeevani Chinthala <[email protected]> Co-authored-by: Anjali Singh <[email protected]>
- Loading branch information
6 people
committed
Sep 19, 2024
1 parent
5aba30e
commit 15a87c1