Skip to content

fix: fade tray overlay backdrop on close#736

Open
torkelrogstad wants to merge 2 commits into
coinbase:masterfrom
torkelrogstad:fix/tray-overlay-fade-out
Open

fix: fade tray overlay backdrop on close#736
torkelrogstad wants to merge 2 commits into
coinbase:masterfrom
torkelrogstad:fix/tray-overlay-fade-out

Conversation

@torkelrogstad

Copy link
Copy Markdown

What changed? Why?

The tray overlay has a fade in effect, but prior to this commit did not have a fade out effect.

UI changes

Web Old Web New
https://github.com/user-attachments/assets/99a47084-5835-47a9-a2b8-90e77152a176 https://github.com/user-attachments/assets/9430d02e-3012-470c-b084-3e154d59fc4e

Testing

How has it been tested?

  • Unit tests
  • Interaction tests
  • Pseudo State tests
  • Manual - Web
  • Manual - Android (Emulator / Device)
  • Manual - iOS (Emulator / Device)

Testing instructions

Change management

type=routine
risk=low
impact=sev5

automerge=false

@cb-heimdall

cb-heimdall commented May 28, 2026

Copy link
Copy Markdown
Collaborator

🟡 Heimdall Review Status

Requirement Status More Info
Reviews 🟡 0/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 1
Global minimum 0
Max 1
1
1 if commit is unverified 0
Sum 1
CODEOWNERS 🟡 See below

🟡 CODEOWNERS

Code Owner Status Calculation
ui-systems-eng-team 🟡 0/1
Denominator calculation
Additional CODEOWNERS Requirement
Show calculation
Sum 0
0
From CODEOWNERS 1
Sum 1

@torkelrogstad

Copy link
Copy Markdown
Author

@hcopp would it be possible to get this merged?

@hcopp hcopp left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for the ping @torkelrogstad, in the future you can reach out in #ask-cds to get a review faster 🙏🏻 .

You probably saw this already but we have this ready to merge we will need to bump changelogs, see https://github.com/coinbase/cds/blob/master/CONTRIBUTING.md#version-and-changelog for details.

<motion.div {...motionProps} data-testid={`${props.testID}-motion`}>
{content}
<motion.div ref={forwardedRef} {...motionProps} data-testid={`${props.testID}-motion`}>
<VStack background="bgOverlay" onClick={onClick} pin="all" {...props} />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I don't think we will be able to change the ref here @torkelrogstad.

While it would not have been recommended, someone could have been doing overlayRef.current?.classList.add('dimmed').

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@hcopp thanks for your review. I'm not a Coinbase employee, so I don't have access to what I assume is the private channel you're referring to. I've updated the implementation to take your feedback into consideration, and also updated the changelog.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants