Fluent UI 0.51.x TMP upgrade issues
This document lists the current open issues that will need to be resolved for the upgrade PR.
These issues might not be bugs with fluent but the result of known/unknown breaking changes in the versions between 47 and 51.
To request an issue to be added to this list, please post it in the thread TODO add a teams thread to collect issues
Known issues
People + Team filters which are custom
Only click dismiss, not keyboard esc
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
People + Team filters which are custom
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
(Ling: can be repro in R0)
[No repro] search - Border for teams and channel dropdown (Roman)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Wrong repro steps
-
Search for something
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
Open "Messages" search
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
Filter by channel
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
Observe the bug
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Similar issue happens with "From" item
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
The issue with the border for Avatar's image can be seen on master
branch as well
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
[FIXED] search - slight jerk (Ling)
On selecting an item from the team and channel filter, there is a glitch wherein the pill has a slight jerk ( This is happening with the From filter in the messages tab and the Modified By filter in the files tab as well )
video showing the behavior
Reported by Shahid Ikram
Participants icon font size increase
Potentially some small spacing issues here too, might want to do a side by side comparison with master/R0
Before:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Upgrade PR:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
[FIXED] Calling - Chat - giphy moves content position right (Ling)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
(Ling: Changing the popper boundary works for the giphy picker, but emoticon picker still displays the scrollbar even if it only scrolls for like 1px, a For a complete fix, we need to expose a way in the API to apply a boundary padding - fixed hide overflow in the popup footer)
[Fixed] search - Bot avatars missing (Juraj)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Master:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Upgrade:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
[FIXED] Calling - Chat - clicking on … seems to crash chat pane (Ling)
(Ling: culprit was a ToolbarPopup that used a disabled button trigger without pointer-events: none style… and we throw the error on our end :-))
[FIXED - patch in TMP] Calling app - unable to enable camera (Juraj)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Calling app - smiles popover went wild
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by shift
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Miro: created Github issue: https://github.com/microsoft/fluentui/issues/16216
Reported by Cristina Tapes
(Ling: fixed by patch)
[FIXED] Retry and Delete icons in chat [LING]
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Matt Bowen
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Matt Bowen
[FIXED] Raise hand huge in call avatar (Juraj)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Devi Malik
[FIXED - backport] Clicking call history row does nothing
https://domoreexp.visualstudio.com/DefaultCollection/MSTeams/_workitems/edit/1410892
Reported by Kon Pik
[REJECTED] CQF screen two different tab selection colours for checkbox
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
(Ling: Happens even on R0/master - need to contact feature team to deterministically render CQF)
(Ling: introduced as a bug in master/R0 in this PR https://domoreexp.visualstudio.com/Teamspace/_git/1b255d6e-1545-42ab-9e75-1fb3f0202dfa/pullrequest/281835)
Reported by Josh Xu
[FIXED] search - blue border on clear icon when dropdown are selected [Juraj]
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Amber note: we added a div around icon for clearIndicator (but not toggleIndicator).
This div is added in Fluent Dropdown.tsx L1560 by adding the following to box
:
// ...(!search && { tabIndex: 0, role: 'button' }),
So I think we cannot simply remove it. This is probably related to the a11y issue below this issue.
Reported by Shahid Ikram
[FIXED] search a11y - escape key does not clear filter [Juraj]
select a filter:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
then press escape key, expect to see:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
but instead on upgrade branch we see:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Shahid Ikram
[FIXED] search - hover over the team names the font color of the item changes [Amber]
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Shahid Ikram[REJECTED - repro in master] search - On hovering on the page number, grey background is missing, also the right and the left arrow alignment seems to be a little out of place
expected
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
bugged
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Reported by Shahid Ikram
[FIXED] search a11y - On using the keyboard to navigate the tab items the behaviour is different than it was before [LING]
expected:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
bugged:
Reported by Shahid Ikram
- Some categories has a dot in the top right corner
- The selection box is rectangle instead of square
(Ling: Seems to be the same behaviour in master)
Reported by David Weng
[ACCEPTED] File actions - on hover chiclet color issue
(jukapsia note: not sure which theme this is but if it is v2, according to https://www.figma.com/file/bD1cO42H6KuWwpyEeNWoIz/Shell20-ShipPlan-POR?node-id=0%3A1 chicklet hover color should be e8e8e8)
Shekhar Nain
[ACCEPTED] File actions - v2 hover color for attachment
confirm if this is correct:
To toggle v2 themes:
Shekhar Nain
Reported bhy Alex Hernandez
(Ling: Fix results in removing IE11 hack, need to validate with feature team about IE11 story)
Current golden:
Upgrade PR
Diff
Reported by Ling, E2E
same issue in master, out of scope for upgrade
[Rejected] After clicking message reaction to a message, the message action is not able to show by mouse hover, only by mouse click. (David W)
same issue in master, out of scope for upgrade
[Fixed] Search - Channel filter result icons [Ling + Amber]
Run a search and in the messages tab filter by 'Team and Channel'
Reported by Shahid Ikram/Priyankar Gupta
[Fixed] Search - border appears when clicking on chevron on dropdown filters [Ling+Shift+Amber]
Same thing also for file type
Reported by Shahid Ikram/Priyankar Gupta
Reported by Ling, E2E tests
Reported by Josh Xu
[Fixed] Calling app - mute mic notification looks weird [Amber]
Behavior in upgrade branch:
Expected behavior:
Reported by Yuanbo/Amber
caused by background color applid to root slot of tooltip instead of content slot.
Reported by fluent ui and CMD teams
[BACKPORT - MERGED in 51] Calling app - roster title click does not work [Amber]
To be fixed with backport
fixed by PR https://github.com/microsoft/fluentui/pull/16213
[Fixed] Calling app - ubar icon color [Shift]
Reported Milica Jovanovic
Confirmed by Anastasiya Sarmant
[BACKPORT - MERGED in 51] Breakout rooms - the toggle on Rooms and Assignment view is broken ( you have to click much lower under the arrow to toggle it) [Amber]
link to screen capture
Miro: bug in FUI Tree - click on children does not expand/collapse
fixed by PR https://github.com/microsoft/fluentui/pull/16213
Reported by Cristina Tapes
[Fixed] Raise hand icon is huge [Shift]
Reported by Milica Jovanovic
Wrong z-index maybe ?
Reported by Milica Jovanovic, Accepted by Xuan Liu
Reported by Milica Jovanovic
fix:
xSpacing in
lightweight-call-roster-item-container.tsx
with-roster-item-actions.tsx
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
[Fixed] UFD icon in warning UFD type is now red (before it was white) [Shift + Amber]
Before:
In 0.47.13 and before color is broken. Since 0.47.14 icon starts to have color.
Shift fixed it in TMP to keep this icon with white color
Fixed:
Reported by Milica Jovanovic, Josh Xu
Confirmed by Milica.
Reported by Matt Bowen
[FIXED] Chat participants icon moved 2 px down [Charles]
Reported by Matt Bowen
Charles: For both bugs above related to the icon we fixed writting overrides for button but the fontsize still looks different from master
[Fixed] New chat underline incorrect [Amber]
Reported by Matt Bowen
Amber note: caused by borderBottomColor on dropdownStyles focus-within
[FIXED] Embed roster popper styling [LING]
It seems that popper v2 adds transform and inset as inline DOM styles which breaks the sizing of the roster for embed. Investigate optional props for this use case
Fixed using !important styles - need to discuss changes to popup to eliminate this in the future
[FIXED] Smart replies - feedback (lightbulb) icon not filled on hover [Amber]
Reported by Alaa Odeh
Confirmed by Alaa.
Fix:
This is in fact not an issue related to Fluent.
The code looks like: <Button iconOnly icon={<LightBulbIcon />} ...
In master, the icon is resolved into light-bulb.tsx
. Somehow TMP is able to make <Button/> takes shorthand in 0.51 style, I don't know how it's done.
In upgrade branch, the shorthand icon is in effect, so the icon being used is LightBulbIcon.tsx
, which, has the same svg path for both outlined and filled… result in this bug
Repro:
- Make sure smart replies are enabled in settings
- In 1:1 chat you should see them at the right bottom of the chat pane when the other chat member sends you a message that might have a valid smart reply
[FIXED] Smart replies - Confirmations component doesn't disappear after the timeout Juraj
Repro:
- Make sure smart replies are enabled in settings
- In 1:1 chat you should see them at the right bottom of the chat pane when the other chat member sends you a message that might have a valid smart reply
Reported by Alaa Odeh
Steps to repro similar error:
- Search for "Checklist" in messaging extension in N* chat and select the result - "Checklist - Create a shared checklist"
- In the task module that pops up, populate the checklist template that pops up with any data.
- Click 'Next', and the task module will show a preview of the card. Click 'Send' to send the card. Observe the behavior.
Reported by Susan Shen
[FIXED] Messaging extension search sometimes yields results that are indented (should be flush against the left side) [LING]
Reported by Susan Shen
[FIXED] Filter pills height is truncated [Amber]
Tracked in ADO https://domoreexp.visualstudio.com/MSTeams/_workitems/edit/1395027/
[FIXED] Avatar icon positioning & size is incorrect [Ling]
Tracked in ADO
https://domoreexp.visualstudio.com/MSTeams/_workitems/edit/1395036/
https://local.teams.office.com/multi-window/apps/search/hello/view
Priyankar Gupta + Shahid Ikram
[REJECTED] Search app - Channel filter in messages tab [LING]
https://local.teams.office.com/multi-window/apps/search/hello/view
(Ling: bottom border seems to be an intentional design change in dropdown, reverting to feature team)
Priyankar Gupta + Shahid Ikram
[FIXED] Search app - Search app avatar pill [Ling]
https://local.teams.office.com/multi-window/apps/search/hello/view
Priyankar Gupta + Shahid Ikram
Shekhar Nain
Similar issue as the one below - indicator
prop was passed the arrow function, which worked in 0.47, but does not work in 0.51
Solution - pass the arrow function to the children
prop of the indicator
[Fixed][Verified] File actions - No text in flyout (ROMAN)
Shekhar Nain
Notes: error is happening because TMP passes function to content
prop, which was working in 0.47, but not working in 0.51.
Solution - pass that function to children
props instead.
Shift: this issue is present in master
and should be fixed as a quick follow after the upgrade (probably with small tweaks to Popper boundaries)
Reported by David Weng
[REJECTED] Messaging - After clicking message reaction to a message, the message action is not able to show by mouse hover, only by mouse click.
(Ling: same behaviour in master already reported LINK)
[REJECTED] Messaging - There is a flash of the entire BIM/Popout window sometimes when open gif and emji flyout in compose (David W) [LING]
(Ling+Juraj+Shift: Can repro on master)
[FIXED] Reactions missing ellipses + different Icons' spacing (Marat)
Prod:
51:
Reported by
Bundle size
Bundle size increase is not expected, needs to be investigated
Backports required
Please add the github PR link to the 51 branch when done
- useTriggerElement test fix:
- Fix Popup onClick if hover is used with context
- Remove default header prop in chat message
[RELEASED] 0.51.4
- TreeTitle expand with children [merged]
- Popper tether default
- export SplitButtonProps [merged]
- Grid template in checkbox label end - commit c298abf7b7f48d660737a5f96a488f1a0820a322 [merged]
- Export Attachment body style type
- Fix Table row click getting swallowed
- Revert menu styles fixes for IE11
- Support React 17 in peer deps for react-component-ref & react-component-event-listener
- Fix Dropdown onBlur event type
Review staus
Group |
Reviewer |
Status |
Details |
Calls App |
Kon P. |
blocking |
commented, fix in progress |
N* CMD |
Kon P. |
blocking |
|
N* Core |
Blake S |
blocking |
commented, fixes in progress |
Foundation |
Blake S |
blocking |
|
N* UI |
David W. |
blocking |
|
Search |
Shahid I |
blocking |
FIXED - pls review again |
Messaging |
David W |
blocking |
commented, fix in progress |
Compose |
|
|
|
Extensibility |
Daniel S. |
commented, response in progress |
|
Files |
|
|
working on validation and fixes on their side, committed for Wednesday (Shekhar) |
Modern Meetings |
Josh X |
commented |
FIXED, please review |
N* Client Arch |
Sergii M. |
|
|
People |
|
|
|
Platform User Lifecycle |
Sid U. |
waiting for review |
|
Shell |
Matt B |
commented |
one more issue remaining to fix |
TACO |
Sinclaire L. |
commented |
issue resolved, waiting for Fluent UI patch |
Telemetry |
|
|
|
Fundamentals |
Jason X. |
commented |
waiting for memory gates to run |