Page MenuHomePhabricator
Differential D3946

[web] Introduce custom `Radio` component
ClosedPublic
Actions

Authored by • jacek on May 6 2022, 7:19 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Nov 15, 6:10 AM
Unknown Object (File)
Sat, Nov 9, 11:40 PM
Unknown Object (File)
Sat, Nov 9, 9:45 PM
Unknown Object (File)
Sat, Nov 9, 7:42 PM
Unknown Object (File)
Sat, Nov 9, 5:53 PM
Unknown Object (File)
Sat, Nov 9, 5:08 PM
Unknown Object (File)
Sat, Nov 9, 5:03 PM
Unknown Object (File)
Sat, Nov 9, 4:23 PM
View All Files
Subscribers
• abosh
• adrian
ashoat
atul
tomek

Details

Reviewers
tomek
• benschac
atul
Commits
rCOMMa4570c8b558d: [web] Introduce custom `Radio` component
Summary

Introduce custom "Radio" component matching the one from our design system.

GIF:

Screenshot_Google Chrome_2022-05-06_162119.gif (152×174 px, 41 KB)

Test Plan

The component is not used yet, tested when introducing notification settings.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.May 6 2022, 7:19 AM
Herald added subscribers: • abosh, atul, • adrian and 2 others. · View Herald TranscriptMay 6 2022, 7:19 AM
• jacek edited the summary of this revision. (Show Details)May 6 2022, 7:22 AM
• jacek edited the test plan for this revision. (Show Details)
• jacek added reviewers: tomek, • benschac, atul.
• jacek edited the summary of this revision. (Show Details)
Harbormaster completed remote builds in B8858: Diff 12354.May 6 2022, 7:24 AM
• jacek requested review of this revision.May 6 2022, 7:24 AM
atul accepted this revision.May 6 2022, 7:59 AM

The animation looks great!

(Looks like we can use this for the "Visibility" tab of the ThreadSettingsModal as well)

web/components/radio.css
2 ↗(On Diff #12354)

"The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme."

Makes sense

This revision is now accepted and ready to land.May 6 2022, 7:59 AM
• jacek added a child revision: D3949: [web] Introduce `NotificationsOption` component.May 6 2022, 8:08 AM
tomek accepted this revision.May 9 2022, 8:24 AM
• jacek updated this revision to Diff 12605.May 13 2022, 1:58 AM

rebase

Harbormaster failed remote builds in B9059: Diff 12605!May 13 2022, 1:59 AM
• jacek updated this revision to Diff 12612.May 13 2022, 2:09 AM

rebase

Harbormaster failed remote builds in B9066: Diff 12612!May 13 2022, 2:10 AM
• jacek updated this revision to Diff 12618.May 13 2022, 2:21 AM

re-run CI

Harbormaster failed remote builds in B9072: Diff 12618!May 13 2022, 2:23 AM
• jacek updated this revision to Diff 12631.May 13 2022, 3:00 AM

re-run CI

Harbormaster completed remote builds in B9085: Diff 12631.May 13 2022, 3:10 AM
Closed by commit rCOMMa4570c8b558d: [web] Introduce custom `Radio` component (authored by • jacek). · Explain WhyMay 13 2022, 3:36 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMMa4570c8b558d: [web] Introduce custom `Radio` component.
atul added a comment.EditedMay 15 2022, 5:08 AM

Dang, looks like there is some visual weirdness on Safari (though it looks perfect on Chrome). Will take a quick look to see if it's easy to resolve since I plan on using the Radio component in the ThreadSettingsPrivacyTab component.

edit: Just kidding, looks like this issue was resolved after updating Safari (as part of updating macOS)

Revision Contents
Changeset List

PathSize
web/
components/
25 lines
15 lines
2 lines

Diff 12631

View Options

web/components/radio.css

Loading...
View Options

web/components/radio.react.js

Loading...
View Options

web/theme.css

Loading...