import { BottomSheet } from '@uhg-abyss/mobile';Example
Scrolling
When the content of the BottomSheet becomes too long to display, scrolling is automatically enabled. In code, the height of the content is compared to the max height of the BottomSheet, which is 90% of the screen.
To manually disable scrolling, setting scrollEnabled to false will switch the component from a ScrollView to a View. Default is true, meaning the
height of the content will determine scrollability.
Closing on Background Press
By default, the BottomSheet will close when the user taps on the background overlay. This can be disabled by setting the disableOverlayPress prop to true.
Advanced Layout
Layouts like BottomSheet and Modal can be used in combination with each other to create flows.
BottomSheet Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The content of the BottomSheet |
| disableOverlayPress | boolean | false | Toggle closing the BottomSheet when the user clicks on the background overlay |
| footer | node | - | Content that will be at the bottom of the BottomSheet (generally used for buttons) |
| footerVariant | sticky | nested | nested | The variant of the footer |
| heading | string | - | The heading of the BottomSheet |
| hideBorder | boolean | false | Flag to hide the border at the top of the BottomSheet |
| isVisible | boolean | false | Variable used to control the visible state of the BottomSheet |
| onClose | function | - | Function called on BottomSheet close |
| scrollEnabled | boolean | true | Enable or disable ScrollView on the BottomSheet |
BottomSheet Classes
| Class Name | Description |
|---|---|
| abyss-bottom-sheet-background | BottomSheet background element |
| abyss-bottom-sheet-close-button | BottomSheet close button |
| abyss-bottom-sheet-close-icon | BottomSheet close icon |
| abyss-bottom-sheet-container | BottomSheet container element |
| abyss-bottom-sheet-content-container | BottomSheet content element |
| abyss-bottom-sheet-footer-container | BottomSheet footer element |
| abyss-bottom-sheet-header | BottomSheet header element |
| abyss-bottom-sheet-header-container | BottomSheet header container |
| abyss-bottom-sheet-heading | BottomSheet heading text |
| abyss-bottom-sheet-overlay | BottomSheet overlay element |
| abyss-bottom-sheet-root | BottomSheet root element |
| abyss-bottom-sheet-top-bar | BottomSheet top bar element |
BottomSheet Translations
| Translation Key | Value |
|---|---|
| close | Close |
Focus Guidance
Abyss does not control the focus of components on the screen when the BottomSheet is toggled off. To meet accessibility guidelines, the focus must be set to the previous node when closed. The useSetFocus hook can be used for this.
For example, if a button is pressed to open a BottomSheet, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.
BottomSheet Tokens
| Token Name | Value | |
|---|---|---|
| bottom-sheet.color.surface.container | #FFFFFF | |
| bottom-sheet.color.surface.handle | #CBCCCD | |
| bottom-sheet.color.surface.overlay | rgba(0,0,0,0.4) | |
| bottom-sheet.color.border.header | #CBCCCD | |
| bottom-sheet.color.text.heading | #002677 | |
| bottom-sheet.color.text.paragraph | #4B4D4F | |
| bottom-sheet.color.icon.close.rest | #4B4D4F | |
| bottom-sheet.color.icon.close.active | #323334 | |
| bottom-sheet.border-radius.top.header | 16 | |
| bottom-sheet.border-width.bottom.header | 1 | |
| bottom-sheet.sizing.all.icon.close | 24 | |
| bottom-sheet.sizing.width.handle | 80 | |
| bottom-sheet.sizing.height.handle | 4 | |
| bottom-sheet.spacing.padding.all.header-content | 16 | |
| bottom-sheet.spacing.padding.all.paragraph | 16 | |
| bottom-sheet.spacing.padding.top.header | 8 | |
| bottom-sheet.spacing.padding.top.container | 80 | |
| bottom-sheet.spacing.gap.horizontal.header-content | 24 |
BottomSheet Classes
| V2 | V1 | Status |
|---|---|---|
| bottom-sheet-background | bottom-sheet-background | Unchanged |
| bottom-sheet-close-button | bottom-sheet-close-button | Unchanged |
| bottom-sheet-close-icon | bottom-sheet-close-icon | Unchanged |
| bottom-sheet-container | bottom-sheet-container | Unchanged |
| bottom-sheet-content-container | bottom-sheet-content-container | Unchanged |
| bottom-sheet-footer-container | bottom-sheet-footer-container | Unchanged |
| bottom-sheet-header | bottom-sheet-header | Unchanged |
| bottom-sheet-header-container | bottom-sheet-header-container | Unchanged |
| bottom-sheet-heading | bottom-sheet-title | Renamed |
| bottom-sheet-overlay | bottom-sheet-overlay | Unchanged |
| bottom-sheet-root | bottom-sheet-root | Unchanged |
| bottom-sheet-top-bar | bottom-sheet-top-bar | Unchanged |
BottomSheet Props
| V2 | V1 | Status |
|---|---|---|
| children | children | Unchanged |
| disableOverlayPress | disableOverlayPress | Unchanged |
| footer | footer | Unchanged |
| heading | title | Renamed |
| isVisible | isVisible | Unchanged |
| onClose | onClose | Unchanged |
| scrollEnabled | scrollEnabled | Unchanged |