feat(uirefresh): component refresh - collapsible receipt

[moo-onthelawn]

I tried to animate the collapse but it was giving me some weird jumpy things due to the parent flex positioning. Decided that for now it's more work than it's worth, but happy to follow up post launch!

• Will follow up in separate task to auto collapse receipt when screen is short enough

receiptFlag.mov

---

Views

• ClosePositionForm, TradeForm
  • Use updated PlaceOrderButtonAndReceipt component

Components

• DropdownSelectMenu

  • Replace triangle icon dropdown with caret when uiRefresh enabled

• Icon

  • Clean up props

• Tabs

  • Don't override default 0.5ch gap from tabTriggerStyle

• WithReceipt

  • Nothing really changed - just changed implementation to show/hide from opacity/height to grid-template-rows. Ideally was trying to animate via grid template rows but didn't look great due to parent flex height (instead of fixed). Kept around to make it easier to animate later

• PlaceOrderButtonAndReceipt

  • Bundle in the Clear and HideReceipt buttons into this component
  • Add HideButton only when uiRefresh enabled

Packages

• v4-localization

[linear]

CT-1284 Make receipt collapsible

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
v4-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 3:37pm
v4-testnet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 3:37pm

[tyleroooo]

seems reasonable but I don't really get why we want this

[moo-onthelawn]

seems reasonable but I don't really get why we want this

ah it's cuz on smaller screens (i.e. 14 inch macbook) the trade form bar can feel really short + tight when our receipt takes up 50% of the space