Participant button Item mobile view fixed by removing use of mergeStyleSets in CallControl.tsx#1322
Merged
edwardlee-msft merged 13 commits intomainfrom Jan 21, 2022
Merged
Conversation
…operator to prevent css styling flattening
Contributor
Contributor
| () => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}), | ||
| () => | ||
| props.increaseFlyoutItemSize | ||
| ? { ...participantButtonWithIncreasedTouchTargets, ...controlButtonBaseStyle } |
Member
There was a problem hiding this comment.
Fluent exposes a merge function, perhaps that would work instead?
Contributor
Contributor
Contributor
prprabhu-ms
approved these changes
Jan 19, 2022
| }; | ||
|
|
||
| const concatButtonBaseStyles = (styles: IButtonStyles): IButtonStyles => | ||
| concatStyleSets(controlButtonBaseStyle, styles); |
Contributor
Contributor
prprabhu-ms
approved these changes
Jan 20, 2022
Contributor
prprabhu-ms
left a comment
There was a problem hiding this comment.
New snapshots look good
PorterNan
approved these changes
Jan 20, 2022
Contributor
PorterNan
left a comment
There was a problem hiding this comment.
Approved, this is fixing the bug perfectly
I am a little bit concerning of the logic of mergeStyleSets, wish I could get some answers here: wouldn't that override the first style object style set using the second style set? Or what is the true logic of mergeStyleSets - seems like we are using it not just here (and we might be using it in the future), figuring out the right logic would be nice
Contributor
Contributor
Contributor
Contributor
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Participant button items in mobile view increases in height for tap interface.
Removed use of mergeStyleSets in CallControl.tsx as the styles were flattening when use mergeStyleSets. Confirmed in below picture below:
With mergeStyleSets

vs without mergeStyleSets
Why
Participant button items did not increase in height when viewed on mobile
https://skype.visualstudio.com/SPOOL/_workitems/edit/2668807/
How Tested
Tested on chrome dev tools mobile and desktop view. Also tested on personal phone.
Confirmed size changes in dev tools and on mobile phone.
Process & policy checklist