Fix default layer host by PorterNan · Pull Request #1950 · Azure/communication-ui-library

PorterNan · 2022-06-02T00:54:05Z

What

Related to issue: #775

Add a default host layer in base provider

make our lib compatible with react-full-screen
avoid polluting global dom tree

Why

How Tested

Process & policy checklist

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

Is this a breaking change?

This change causes current functionality to break.

1. make our lib compatible with react-full-screen 2. avoid polluting global dom tree

github-actions · 2022-06-02T00:59:30Z

Storybook URL https://60c7ae6891f0e90039d7cd54-uismkbxett.chromatic.com/

github-actions · 2022-06-02T01:01:53Z

Calling bundle size is increased❗.

Current size: 4700281
Base size: 4700085
Diff size: 196

github-actions · 2022-06-02T01:01:53Z

Chat bundle size is increased❗.

Current size: 4881232
Base size: 4880662
Diff size: 570

github-actions · 2022-06-02T01:01:55Z

CallWithChat bundle size is increased❗.

Current size: 5090587
Base size: 5090389
Diff size: 198

github-actions · 2022-06-02T01:12:18Z

Failed to pass the 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 · 2022-06-02T01:16:54Z

Failed to pass the 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.

JamesBurnside · 2022-06-03T17:56:45Z

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-      {props.children}
+      <Customizer scopedSettings={{ Layer: { hostId: globalLayerHostId } }}>{props.children}</Customizer>
+      <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />


Am I seeing this correct - We can just specificy a new global layer in the customizer and everything automatically childs to that instead of body??

This is amazing if so 😍

I assume when we assign layerHosts manually (such as for modals) that need to be in a specific layer they are unnaffected and not overriden by this?

I assume when we assign layerHosts manually (such as for modals) that need to be in a specific layer they are unnaffected and not overriden by this?

Yes, according to my tests, it behaves just like in tag, except we moving it into another div element, and all override is still working pretty well

JamesBurnside

❤️❤️❤️

github-actions · 2022-06-06T17:26:29Z

Storybook URL https://60c7ae6891f0e90039d7cd54-zejnxghaln.chromatic.com/

github-actions · 2022-06-06T17:36:02Z

Failed to pass the 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 · 2022-06-06T17:40:43Z

Failed to pass the 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 · 2022-06-06T18:38:19Z

Failed to pass the 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 · 2022-06-06T18:40:19Z

Failed to pass the 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 · 2022-06-06T21:43:31Z

Storybook URL https://60c7ae6891f0e90039d7cd54-nuuilbrfeh.chromatic.com/

github-actions · 2022-06-06T21:50:53Z

Failed to pass the 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 · 2022-06-06T21:59:57Z

Failed to pass the 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.

…re/communication-ui-sdk into jinan/fix-default-layer-host

github-actions · 2022-06-07T04:56:32Z

Storybook URL https://60c7ae6891f0e90039d7cd54-gdbjvevtkq.chromatic.com/

github-actions · 2022-06-07T05:07:20Z

Failed to pass the 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 · 2022-06-07T05:12:39Z

Failed to pass the 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 · 2022-06-07T08:17:25Z

Storybook URL https://60c7ae6891f0e90039d7cd54-gtfsyigktg.chromatic.com/

github-actions · 2022-06-07T08:34:19Z

Storybook URL https://60c7ae6891f0e90039d7cd54-kbbluvsktf.chromatic.com/

github-actions · 2022-06-07T08:42:22Z

Failed to pass the 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 · 2022-06-07T22:51:48Z

Storybook URL https://60c7ae6891f0e90039d7cd54-raabselrky.chromatic.com/

github-actions · 2022-06-07T22:56:40Z

Failed to pass the 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 · 2022-06-07T23:01:41Z

Failed to pass the 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 · 2022-06-07T23:31:32Z

Failed to pass the 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 · 2022-06-07T23:43:57Z

Storybook URL https://60c7ae6891f0e90039d7cd54-jwpksvmnwm.chromatic.com/

github-actions · 2022-06-07T23:56:33Z

Failed to pass the 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 · 2022-06-07T23:57:32Z

Failed to pass the 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 · 2022-06-08T00:13:00Z

Storybook URL https://60c7ae6891f0e90039d7cd54-vasuuxinrg.chromatic.com/

github-actions · 2022-06-08T00:25:35Z

Storybook URL https://60c7ae6891f0e90039d7cd54-befojwqaxk.chromatic.com/

communication-ui-bot added 2 commits June 1, 2022 17:49

Add a default host layer in base provider

cbd5e86

1. make our lib compatible with react-full-screen 2. avoid polluting global dom tree

Change files

dec0251

PorterNan requested review from JamesBurnside, alkwa-msft, anjulgarg, carocao-msft, dmceachernmsft, edwardlee-msft, mgamis-msft, prabhjot-msft and prprabhu-ms as code owners June 2, 2022 00:54

PorterNan assigned JamesBurnside and carocao-msft Jun 2, 2022

JamesBurnside reviewed Jun 3, 2022

View reviewed changes

JamesBurnside approved these changes Jun 3, 2022

View reviewed changes

Add same z-index value from default fluent host

a5f0e16

Merge branch 'main' into jinan/fix-default-layer-host

d3861f9

communication-ui-bot added 2 commits June 6, 2022 21:51

Fix test problem of default overlay

43b8f12

Merge branch 'jinan/fix-default-layer-host' of https://github.com/Azu…

74ffdeb

…re/communication-ui-sdk into jinan/fix-default-layer-host

Update style to the same as fluent

64e4114

Merge branch 'main' into jinan/fix-default-layer-host

06f7ff2

carocao-msft approved these changes Jun 7, 2022

View reviewed changes

Merge branch 'main' into jinan/fix-default-layer-host

8cbfc88

Merge branch 'main' into jinan/fix-default-layer-host

27b9d6a

Merge branch 'main' into jinan/fix-default-layer-host

55f4dc4

Merge branch 'main' into jinan/fix-default-layer-host

2dbb9f0

PorterNan enabled auto-merge (squash) June 8, 2022 00:20

PorterNan merged commit 8f250b1 into main Jun 8, 2022

PorterNan deleted the jinan/fix-default-layer-host branch June 8, 2022 00:41

PorterNan mentioned this pull request Jun 9, 2022

Options button does not work with react-full-screen in CallComposite #775

Closed

Conversation

PorterNan commented Jun 2, 2022

What

Add a default host layer in base provider

Why

How Tested

Process & policy checklist

Uh oh!

github-actions Bot commented Jun 2, 2022

Uh oh!

github-actions Bot commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Calling bundle size is increased❗.

Uh oh!

github-actions Bot commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chat bundle size is increased❗.

Uh oh!

github-actions Bot commented Jun 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CallWithChat bundle size is increased❗.

Uh oh!

github-actions Bot commented Jun 2, 2022

Uh oh!

github-actions Bot commented Jun 2, 2022

Uh oh!

JamesBurnside Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JamesBurnside Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

JamesBurnside Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

PorterNan Jun 6, 2022

Choose a reason for hiding this comment

Uh oh!

JamesBurnside left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 6, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 7, 2022

Uh oh!

github-actions Bot commented Jun 2, 2022 •

edited

Loading

github-actions Bot commented Jun 2, 2022 •

edited

Loading

github-actions Bot commented Jun 2, 2022 •

edited

Loading

JamesBurnside Jun 3, 2022 •

edited

Loading