Skip to content

MeetingComposite: Use a SplitButton with device selection dropdown#1392

Merged
prprabhu-ms merged 24 commits intomainfrom
prprabhu/newstyle-buttons-splitbutton
Feb 1, 2022
Merged

MeetingComposite: Use a SplitButton with device selection dropdown#1392
prprabhu-ms merged 24 commits intomainfrom
prprabhu/newstyle-buttons-splitbutton

Conversation

@prprabhu-ms
Copy link
Copy Markdown
Contributor

@prprabhu-ms prprabhu-ms commented Jan 29, 2022

What

  • Add a new prop to MicrophoneButton. When set, use a SplitButton with a context menu for audio device selection.
    • Share code with DevicesButton for implementation
  • Update selector for MicrophoneButton to return audio device information
  • Update MicrophoneButton story to showcase the new fields.
  • Use the new-style MicrophoneButton in MeetingComposite.

Why

MeetingComposite introduces a new way of selecting devices, but CallComposite will continue to use a separate DevicesButton. This API extension to MicrophoneButton allows either button to be used for device controls.

How Tested

  • Storybook
  • Meeting sample

image

(Please don't mind the fat buttons. Those will look better once #1388 lands and this is rebased)

Stable build

All new API is introduced conditionally. Stable API is unchanged.

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

Failed to pass the composite UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

Failed to pass the composite UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside left a comment

Choose a reason for hiding this comment

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

only concern is with overriding the split etc properties in the btns, otherwise this is great!!

Comment thread packages/react-components/src/components/DevicesButton.tsx Outdated
Comment thread packages/communication-react/review/communication-react.api.md
Comment thread packages/communication-react/review/communication-react.api.md
Comment thread packages/communication-react/review/communication-react.api.md
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2022

Failed to pass the composite UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2022

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2022

@prprabhu-ms
Copy link
Copy Markdown
Contributor Author

whelp. Need to register an icon in the e2e tests. This looks good in samples, but not e2e tests.
image

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2022

@prprabhu-ms prprabhu-ms enabled auto-merge (squash) February 1, 2022 22:11
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2022

@prprabhu-ms
Copy link
Copy Markdown
Contributor Author

Will let this PR in without the fix showing icons in e2e snapshots. We have a bug for that: https://skype.visualstudio.com/SPOOL/_workitems/edit/2707880

Fix is to initializeIcons in our e2e apps.

@prprabhu-ms prprabhu-ms merged commit 1c456ea into main Feb 1, 2022
@prprabhu-ms prprabhu-ms deleted the prprabhu/newstyle-buttons-splitbutton branch February 1, 2022 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants