[native] introduce outerRingSelectedColor prop to ColorSelectorButton and ColorRows
ClosedPublic
Actions

Authored by ginsu on Apr 5 2023, 11:55 AM.

Details

Reviewers

ashoat
atul

Commits

rCOMM0072734eded4: [native] introduce outerRingSelectedColor prop to ColorSelectorButton and…

Summary

While working on the emoji avatar creation, I noticed a situation where the outer ring of the selected color was not visible. This was because the outer ring color matched the background color of the screen area. To fix this, I created an optional prop called outerRingSelectedColor that devs can use to override the outer ring color for situations like this

Test Plan

Please watch the demo videos to see the before and after

Before:

After (set the value of outerRingSelectedColor to #404040) :

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Apr 5 2023, 11:55 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptApr 5 2023, 11:55 AM

ginsu edited the summary of this revision. (Show Details)Apr 5 2023, 11:57 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: ashoat, atul.

ginsu attached a referenced file: F464365: Screen Recording 2023-04-05 at 2.52.25 PM.mov. (Show Details)

ginsu attached a referenced file: F464364: Screen Recording 2023-04-05 at 2.52.08 PM.mov. (Show Details)

ginsu edited the test plan for this revision. (Show Details)

ginsu attached a referenced file: F464390: Screen Recording 2023-04-05 at 2.58.56 PM.mov. (Show Details)

Harbormaster completed remote builds in B18017: Diff 24684.Apr 5 2023, 12:12 PM

ginsu requested review of this revision.Apr 5 2023, 12:12 PM

ginsu added a child revision: D7323: [native] introduce emoji avatar creation screen.Apr 5 2023, 12:13 PM

I can't tell what the issue is in the before video

I can't tell what the issue is in the before video

There is no outer ring for the selected emoji background color in the before video. The original ColorSelectorButton was being rendered on a black background so we could visually see the outer ring of the selected color:

The ColorSelectorButton in the emoji avatar creation was being rendered on a lighter background so the outer ring of the selected color is not visible: