Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(web-components): enabling setting theme on an individual element and unsetting themes #31973

Merged
merged 67 commits into from
Aug 19, 2024
Merged

feat(web-components): enabling setting theme on an individual element and unsetting themes #31973

merged 67 commits into from
Aug 19, 2024

Conversation

marchbox
Copy link
Contributor

Previous Behavior

  • Unable to unset themes
  • Setting theme on an individual element would trigger many setProperty() calls, which isn't ideal for performance
  • Setting theme on an individual element requires calling setThemeFor()

New Behavior

  • Enable unsetting themes globally and locally
  • setTheme() accepts a second argument for the node to set theme on, defaulting to document for setting global theme
  • Setting theme on a light DOM element now uses CSS Scope (when supported)
  • Setting theme on a shadow root including element now uses ShadowRoot.adoptedStyleSheets

Related Issue(s)

  • Fixes #

@marchbox marchbox changed the title Users/machi/setthemefor feat(web-components): enabling setting theme on an individual element and unsetting themes Jul 11, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 11, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@marchbox marchbox self-assigned this Jul 23, 2024
@marchbox marchbox marked this pull request as ready for review August 15, 2024 18:45
@marchbox marchbox requested review from a team as code owners August 15, 2024 18:45
davatron5000
davatron5000 approved these changes Aug 19, 2024
View reviewed changes
Copy link
Contributor

@davatron5000 davatron5000 left a comment

Choose a reason for hiding this comment

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

Looks good. I have some questions but nothing blocking.

packages/web-components/src/theme/set-theme.spec.ts Outdated Show resolved Hide resolved
packages/web-components/playwright.config.ts Show resolved Hide resolved
packages/web-components/src/theme/set-theme.stories.ts Show resolved Hide resolved
@fabricteam
Copy link
Collaborator

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

@marchbox marchbox merged commit 07f70bd into microsoft:master Aug 19, 2024
18 checks passed
@marchbox marchbox deleted the users/machi/setthemefor branch August 19, 2024 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@Hotell Hotell Hotell left review comments

@davatron5000 davatron5000 davatron5000 approved these changes

Assignees

@marchbox marchbox

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@marchbox @fabricteam @davatron5000 @Hotell