Skip to content

feat: Tray refactor#349

Open
hcopp wants to merge 42 commits intomasterfrom
hunter/tray2
Open

feat: Tray refactor#349
hcopp wants to merge 42 commits intomasterfrom
hunter/tray2

Conversation

@hcopp
Copy link
Contributor

@hcopp hcopp commented Jan 30, 2026

What changed? Why?

This PR updates our Tray, prioritizing backwards compatibility where possible

That said, there are a few expected breaking changes

  • Border radius is now 600
  • We use bgElevation2 instead of bg

Functionality added

Web

  • Handlebar with drag to close (opt in)
  • Overall design refresh (opt in by either change pin direction or showHandleBar)
    • Multiple styles (full bleed image, with illustration, or just text)
    • Divider on scroll
  • Pin to different sides

Mobile

  • New handlebar design
  • Overall design refresh (opt in via handleBarVariant)
    • Different spacing, shadows on scroll etc
    • Multiple styles (full bleed image, with illustration, or just text)

I could see us in v9 adopting this new version for mobile Select and Combobox (which uses Tray) and in v10 dropping support for the now deprecated versions.

UI changes

OG Tray Code Changes

Only expected change here is slight border radius change.

iOS Old Combobox iOS New Combobox
iOS Old Select iOS New Select
iOS Old Tray iOS New Tray
iOS Old Tray Fallback iOS New Tray Fallback
iOS Old Tray Promotional iOS New Tray Promotional
iOS Old Tray Scrolling iOS New Tray Scrolling
Android Old Android New
old screenshot new screenshot
Web Old Basic Web New Basic
image image
Web Old Scrolling Web New Scrolling
image image

New Tray Styles

Mobile

Web

image

Testing

Test out old tray examples to ensure they still work properly and compare new examples with design examples.

How has it been tested?

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

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

  • verified visreg changes with Terran (include link to visreg run/approval)
  • all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

@cb-heimdall
Copy link
Collaborator

cb-heimdall commented Jan 30, 2026

🟡 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

key: 'ATrayStandard',
getComponent: () =>
require('@coinbase/cds-mobile/overlays/__stories__/ATrayStandard.stories').default,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will move these down after bug bash

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will move them when we get closer to release

style={{ shadowOffset: { width: 0, height: -32 }, shadowOpacity: 0.05 }}
>
<Button compact onPress={() => setOpen(false)}>
<Button compact onPress={handleClose}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was a bug where when you click "done" it would immediately close, rather than animating.

return children;
}
return <LazyMotion features={domMax}>{children}</LazyMotion>;
};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We use LazyMotion with domMax for drag, this is needed for Carousel as well.

However, I didn't want to automatically add this, I worry it could potentially cause issues for the existing users. So it is opt in for now, curious on other's thoughts.

@hcopp hcopp marked this pull request as ready for review February 4, 2026 22:59
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.

2 participants