Skip to content

Participant button Item mobile view fixed by removing use of mergeStyleSets in CallControl.tsx#1322

Merged
edwardlee-msft merged 13 commits intomainfrom
elee/participant-item-mobile-height-resize-1
Jan 21, 2022
Merged

Participant button Item mobile view fixed by removing use of mergeStyleSets in CallControl.tsx#1322
edwardlee-msft merged 13 commits intomainfrom
elee/participant-item-mobile-height-resize-1

Conversation

@edwardlee-msft
Copy link
Copy Markdown
Contributor

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
with_mergeStyleSets

vs without mergeStyleSets

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

  • I have updated the project documentation to reflect my changes if necessary.
  • I have read the CONTRIBUTING documentation.

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

() => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}),
() =>
props.increaseFlyoutItemSize
? { ...participantButtonWithIncreasedTouchTargets, ...controlButtonBaseStyle }
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fluent exposes a merge function, perhaps that would work instead?

Comment thread change/@internal-react-composites-ae9ef7c5-4a19-4aec-8f5d-f146b82fc48c.json Outdated
@Azure Azure deleted a comment from JamesBurnside Jan 19, 2022
@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

Comment thread change/@internal-react-composites-ae9ef7c5-4a19-4aec-8f5d-f146b82fc48c.json Outdated
};

const concatButtonBaseStyles = (styles: IButtonStyles): IButtonStyles =>
concatStyleSets(controlButtonBaseStyle, styles);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woohoo!

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

Copy link
Copy Markdown
Contributor

@prprabhu-ms prprabhu-ms left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New snapshots look good

Copy link
Copy Markdown
Contributor

@PorterNan PorterNan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@edwardlee-msft edwardlee-msft enabled auto-merge (squash) January 21, 2022 00:58
@github-actions
Copy link
Copy Markdown
Contributor

@edwardlee-msft edwardlee-msft merged commit 4d63c1d into main Jan 21, 2022
@edwardlee-msft edwardlee-msft deleted the elee/participant-item-mobile-height-resize-1 branch January 21, 2022 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants