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.

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

fix(web-components): update switch to use margin for checked state to support RTL #29505

Conversation

chrisdholt
Copy link
Member

Previous Behavior

Switch used a transform to move the indicator to the checked state which led to an issue where there wasn't immediate support for RTL.

New Behavior

This PR updates the code to leverage margin-inline-start instead which allows for this to be automatically accommodated in RTL scenarios.

Related Issue(s)

@chrisdholt chrisdholt requested a review from a team as a code owner October 11, 2023 23:20
@fabricteam
Copy link
Collaborator

📊 Bundle size report

🤖 This report was generated against 66952983572126c1c609a00511c5a89cadc91f28

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots

Switch 2 screenshots
Image Name Diff(in Pixels) Image Type
Switch.Checked - RTL.hover.chromium.png 104 Changed
Switch.Checked - RTL.normal.chromium.png 97 Changed

Copy link
Member Author

Choose a reason for hiding this comment

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

image

Copy link
Member

Choose a reason for hiding this comment

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

Switch.Checked - RTL.normal.chromium.png
image

Switch.Checked - RTL.hover.chromium.png
image

@size-auditor
Copy link

size-auditor bot commented Oct 11, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 66952983572126c1c609a00511c5a89cadc91f28 (build)

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e39e186:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
fuiwc-switch-rtl Issue #28933

@mohamedmansour
Copy link
Contributor

Lgtm

@chrisdholt chrisdholt merged commit af42938 into microsoft:web-components-v3 Oct 12, 2023
32 checks passed
chrisdholt added a commit that referenced this pull request Apr 29, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024
… support RTL (microsoft#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024
… support RTL (microsoft#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 30, 2024
… support RTL (microsoft#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request Apr 30, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 2, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 2, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 2, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 3, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 6, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 6, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 8, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
radium-v pushed a commit that referenced this pull request May 10, 2024
… support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
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.

None yet

6 participants