Description
I'm loving this set of components, but I'm not loving how different each example is and how difficult it is for me to do some very common tasks. For context, I want to build a library of modals that fit a few scenarios that I consider very common.
Primary Scenario: Fixed Header / Footer w/ Scrollable content & form inputs
In this one, I have a header sticky to the top and content that fills the available space except for the height of the footer that should always stay in view as well. Think a save / dismiss type action. The header needs a left/center/right grid (easy to do, not a concern from me).
Why is this challenging?
I want to combine behavior for the long drawer and keyboard open, s
6FF2
ince the majority of my views have some form of text input that I use the modal for. They also typically have scrollable contents inside. Due to the 100lvh silk specific override and the 60px accounting of the overscroll for iOS, this becomes challenging to get right. To make it even harder, I want on medium/larger screens to have something like an 80% height version that is centered on the screen.
This is additionally challenging as we would likely want to take into account the safe-area-inset-bottom for accounting for the "chin" in Android if the 60px doesn't work; which I think is 2 different things. I want my bg to go over it but I'd like content to align to right at the bottom of the chin.
Another issue is I want to establish a container query for the full height of the content minus the header/footer area, but especially because of the Safari issue that is only recently fixed and the pretty strict DOM structure, it's quite hard.
I totally get giving folks power in how you compose, but some higher level layouts will drastically simplify onboarding of users for common scenarios.
Parameters
- size:
fitorfill. The sheet in fit will just fit the content, so bottom tracked items could be relatively small, while fill would always fill the screen height - the top safe area inset. - scrollableContent: "boolean".
Bonus ask: A dom queryable value when a sheet is fully open. This would be useful to indicate for browser tests like Chromatic, Percy, Playwright etc that mean that the sheet is "ready".
<BottomSheet size="fill" scrollableContent>
<BottomSheet.Header className="grid grid-cols-3> <-- These (header/content/footer) should ideally have named grid tracks
<div />
<BottomSheet.Title><h1>My title</h1></BottomSheet.Title>
<Autofocus.Root><button>Close</button></Autofocus.Root>
</BottomSheet.Header>
<BottomSheet.Content className="@content/size /* establish a container query for referencing height/size inside */">
</BottomSheet.Content>
<BottomSheet.Footer>
<button>Save</button>
</BottomSheet.Footer>
</BottomSheet>