Custom Branding bug bash fixes - Visual improvements to the call composite configuration page #3875

JamesBurnside · 2023-12-07T19:36:24Z

What

Add text shadow to config page call description (the secondary text)
Fix visual artifact on the configuration page section rounded borders
- the inner border was overlapping the outer border, updated to use overflow:hidden to ensure the child background does not overflow the rounded border
- Updated to use theme.effects.roundedCorner6 to ensure rounded corners follow theme
Fix the localpreview styles to center align the text
Fix title not rendering on safari -- safari doesn't support rem as a dy value in svg, using px instead

Why

Fixes design bugs.

How Tested

Locally verified new alignments match designs:

(left design, right actual)

github-actions · 2023-12-07T19:40:04Z

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

github-actions · 2023-12-07T19:42:06Z

Calling bundle size is increased❗.

Current size: 5587801
Base size: 5587766
Diff size: 35

github-actions · 2023-12-07T19:42:09Z

CallWithChat bundle size is increased❗.

Current size: 6400985
Base size: 6400950
Diff size: 35

github-actions · 2023-12-07T19:42:09Z

Chat bundle size is not changed.

Current size: 1526469
Base size: 1526469
Diff size: 0

…napshots

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

…napshots

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

github-actions · 2023-12-07T19:53:31Z

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

github-actions · 2023-12-07T19:57:41Z

@azure/communication-react jest test coverage for stable.

	Lines	Statements	Functions	Branches
Base	21200 / 33186 63.88%	21200 / 33186 63.88%	579 / 1003 57.72%	1683 / 2684 62.7%
Current	21224 / 33186 63.95%	21224 / 33186 63.95%	579 / 1003 57.72%	1692 / 2684 63.04%
Diff	24 / 0 0.07%	24 / 0 0.07%	0 / 0 0%	9 / 0 0.34%

github-actions · 2023-12-07T19:57:42Z

@azure/communication-react jest test coverage for beta.

	Lines	Statements	Functions	Branches
Base	43610 / 68809 63.37%	43610 / 68809 63.37%	906 / 1947 46.53%	2602 / 4189 62.11%
Current	43564 / 68816 63.3%	43564 / 68816 63.3%	906 / 1952 46.41%	2587 / 4177 61.93%
Diff	-46 / 7 -0.07%	-46 / 7 -0.07%	0 / 5 -0.12%	-15 / -12 -0.18%

github-actions · 2023-12-07T21:15:18Z

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

dmceachernmsft · 2023-12-08T17:39:04Z

packages/react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.tsx

@@ -109,7 +109,7 @@ const constructTSpanLine = (line: string, lineHeightPx: number): SVGTSpanElement
  const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
  tspan.textContent = line;
  tspan.setAttribute('x', '50%');
-  tspan.setAttribute('dy', _pxToRem(lineHeightPx));
+  tspan.setAttribute('dy', `${lineHeightPx}px`);


is this change happening because the SVG format does not like REM (Great band)

Specifically safari doesn't support rem as a dy value in svg

(bug in webkit)

...ge.test.ts-snapshots/call-configuration-page-camera-error-Mobile-Android-Landscape-linux.png

…-bash-fixes

github-actions · 2023-12-11T17:35:05Z

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

github-actions · 2023-12-11T17:43:36Z

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

github-actions · 2023-12-11T17:49:02Z

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

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

github-actions · 2023-12-11T17:53:33Z

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

JamesBurnside added 4 commits December 7, 2023 19:30

Fixups from bug bash

248188c

Change files

ca658e8

Duplicate change files for beta release

519c77a

fix typo

5ee988d

JamesBurnside added the update_snapshots Set this label to request automated update of UI snapshots label Dec 7, 2023

github-actions bot removed the update_snapshots Set this label to request automated update of UI snapshots label Dec 7, 2023

github-actions bot added 11 commits December 7, 2023 19:43

Update embed html bundle snapshots

0f55b1c

Update packages/react-composites CallWithChatComposite browser test s…

5d309fb

…napshots

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

25a8146

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

Update packages/react-composites CallWithChatComposite browser test s…

e4a7e0d

…napshots

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

cc1ff27

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

Update embed html bundle snapshots

e3c50e6

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

4b0ffe7

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

Update packages/react-composites CallComposite browser test snapshots

2b84186

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

6905ed0

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

Update packages/react-composites CallComposite browser test snapshots

2e5d6e1

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

7f405a2

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

JamesBurnside marked this pull request as ready for review December 7, 2023 20:34

JamesBurnside requested review from a team as code owners December 7, 2023 20:34

JamesBurnside requested a review from alkwa-msft December 7, 2023 20:34

JamesBurnside requested review from AmyL219, jimchou-dev, vhuseinova-msft, Leah-Xia-Microsoft, jpeng-ms, waynemo, emlynmac, JoshuaLai and palatter December 7, 2023 20:34

JamesBurnside assigned mgamis-msft and dmceachernmsft Dec 7, 2023

Fix svg rendering on safari

e5fd2e7

dmceachernmsft approved these changes Dec 8, 2023

View reviewed changes

mgamis-msft reviewed Dec 11, 2023

View reviewed changes

...ge.test.ts-snapshots/call-configuration-page-camera-error-Mobile-Android-Landscape-linux.png Outdated Show resolved Hide resolved

mgamis-msft approved these changes Dec 11, 2023

View reviewed changes

JamesBurnside added 2 commits December 11, 2023 17:31

fix errorbanner zband

6eb8c73

Merge remote-tracking branch 'origin/main' into jaburnsi/branding-bug…

c7f8e70

…-bash-fixes

JamesBurnside added the update_snapshots Set this label to request automated update of UI snapshots label Dec 11, 2023

github-actions bot removed the update_snapshots Set this label to request automated update of UI snapshots label Dec 11, 2023

Update packages/react-composites CallComposite browser test snapshots

96e1304

github-actions bot added 2 commits December 11, 2023 17:49

Update packages/react-composites CallComposite browser test snapshots

e2b052e

Merge branch 'jaburnsi/branding-bug-bash-fixes' of https://github.com…

5b0d212

…/Azure/communication-ui-library into jaburnsi/branding-bug-bash-fixes

JamesBurnside enabled auto-merge (squash) December 11, 2023 17:55

JamesBurnside merged commit 257b695 into main Dec 11, 2023
36 checks passed

JamesBurnside deleted the jaburnsi/branding-bug-bash-fixes branch December 11, 2023 18:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Branding bug bash fixes - Visual improvements to the call composite configuration page #3875

Custom Branding bug bash fixes - Visual improvements to the call composite configuration page #3875

JamesBurnside commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023

dmceachernmsft Dec 8, 2023

JamesBurnside Dec 8, 2023

JamesBurnside Dec 8, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

Custom Branding bug bash fixes - Visual improvements to the call composite configuration page #3875

Custom Branding bug bash fixes - Visual improvements to the call composite configuration page #3875

Conversation

JamesBurnside commented Dec 7, 2023 • edited Loading

What

Why

How Tested

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023 • edited Loading

Calling bundle size is increased❗.

github-actions bot commented Dec 7, 2023 • edited Loading

CallWithChat bundle size is increased❗.

github-actions bot commented Dec 7, 2023 • edited Loading

Chat bundle size is not changed.

github-actions bot commented Dec 7, 2023

github-actions bot commented Dec 7, 2023 • edited Loading

@azure/communication-react jest test coverage for stable.

github-actions bot commented Dec 7, 2023 • edited Loading

@azure/communication-react jest test coverage for beta.

github-actions bot commented Dec 7, 2023

dmceachernmsft Dec 8, 2023

Choose a reason for hiding this comment

JamesBurnside Dec 8, 2023

Choose a reason for hiding this comment

JamesBurnside Dec 8, 2023

Choose a reason for hiding this comment

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

github-actions bot commented Dec 11, 2023

JamesBurnside commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading

github-actions bot commented Dec 7, 2023 •

edited

Loading