import { GlobalProps } from '../../shared/global'; import { ComponentChildren } from '../../shared/children'; import { ActionSlots } from '../../shared/action'; import { BaseOverlayProps } from '../../shared/overlay'; import { ToggleEventProps } from '../../shared/events'; export interface SheetProps extends BaseOverlayProps, ToggleEventProps, GlobalProps, ActionSlots { /** * The content of the Sheet. */ children?: ComponentChildren; /** * Indicates whether the Sheet should be open by default. * This property is necessary in some cases, but its usage is generally discouraged due to potential negative impacts on user experience. * * Developers should: * - Only set this property to true when there are vitally important behaviors of the application that depend on the user interacting with the sheet. * - Make every effort to conditionally hide the sheet based on the state of checkout. An explicit example is custom privacy consent, where the sheet should only be displayed when consent is necessary and has not yet been explicitly given by the user. * * This property is useful for when the Sheet needs to be rendered on the page load and not triggered by a user action. * The property should only take effect when the `Sheet` is rendered for the first time. * To toggle the Sheet after it has been rendered, use the `ui.showOverlay()` method instead. */ defaultOpen?: boolean; /** * A title that describes the content of the sheet. */ heading?: string; /** * Adjust the padding of all edges. * * `base`: applies padding that is appropriate for the element. Note that it may result in no padding if Shopify * believes this is the right design decision in a particular context. * * `none`: removes all padding from the element. This can be useful when elements inside the Sheet need to span * to the edge of the Sheet. For example, a full-width image. In this case, rely on `Box` with a padding of 'base' * to bring back the desired padding for the rest of the content. * * @default 'base' */ padding?: 'base' | 'none'; }