-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Support disable status for the Switch
component
#39874
Conversation
@thesahindia Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Thank you Jon for letting me know about the icon color mistake I fixed the icon colors and updated the screenshots in the OP. |
@hayata-suenaga Can you confirm the design for the light theme? |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / SafariMacOS: Desktop |
This comment has been minimized.
This comment has been minimized.
@cristipaval Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
src/styles/index.ts
Outdated
@@ -2889,6 +2891,11 @@ const styles = (theme: ThemeColors) => | |||
alignItems: 'center', | |||
}, | |||
|
|||
radioButtonLockIcon: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think a better name is toggleSwitchLockIcon, since this UI component is a toggle and not a radio button
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hayata-suenaga since you are working on this, would you mind updating the global toggle OFF style to use our icon color as the BG color? I think currently it's using our border color but we want to update it to match what we have in Figma, per Danny's comment above. Thanks! |
@cristipaval Please wait before merging here. |
src/styles/index.ts
Outdated
@@ -2861,7 +2861,7 @@ const styles = (theme: ThemeColors) => | |||
}, | |||
|
|||
switchInactive: { | |||
backgroundColor: theme.border, | |||
backgroundColor: theme.appBG, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
backgroundColor: theme.appBG, | |
backgroundColor: theme.icon, |
Small bug. cc @hayata-suenaga
Lookin' good! |
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/cristipaval in version: 1.4.63-0 🚀
|
🚀 Deployed to production by https://github.com/mountiny in version: 1.4.63-21 🚀
|
This PR supports the disabled/locked status for the
Switch
component. When theSwitch
component is disabled, the user cannot toggle it.Details
Fixed Issues
$ #39724
PROPOSAL: N/A
Tests
WorkspaceMoreFeaturesPage
: passtrue
as a value for thedisabled
prop to theToggleSettingOptionRow
component. Pass bothtrue
andfalse
as values to theisActive
prop.Figma source file screenshots
Offline tests
N/A
QA Steps
No QA
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectionBecause this PR simply adds an icon., I tested the UI on the web only
toggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Please see the screenshots in the testing step section.
MacOS: Desktop