New Component - Sheet #6391

macandcheese · 2023-01-31T01:25:35Z

Description

As proposed, add a new "Sheet" component to our component roster.

User Stories

Functionally, this should behave similarly to a modal. The sheet should be used for content that is not displayed to a user until it is explicitly invoked. Consider displaying a bottom sheet, edge-of-page drawer, etc.

Acceptance Criteria

The component should include:

Page blocking scrim behind the content container.
4 placement options for each edge of the screen (default to left?)
Like modal, dismissal can occur due to user clicking / tapping on scrim.
Like modal, offer properties to disable outside click.
By default, covers the entire viewport.
Alternatively, like Modal, offers a slot within Shell to constrain to the extent of the Shell component.
When slotted in Shell, extends over header and footer slots. Scrim extends to extent of the Shell component.

Relevant Info

This differs from the proposed enhancement to add an "overlay" mode to Shell panel in the following ways:

"overlay" mode of Shell Panel has no blocking scrim.
"overlay" mode of Shell Panel does not extend past extent of Shell center content area (does not cover header or footer)

Modal has a docked property that could conflate with a "position bottom" sheet. Explore deprecation of the former and guidance for users as to use which, when.

Helpful Details

The expected child components should be a Panel, or Flow and Flow Item. Developers should control the open state in tandem with the closable / closed state of a Panel, like Shell Panel.

https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets/

Esri team

Calcite (design)

github-actions · 2023-01-31T01:25:49Z

cc @ashetland, @yelenakreyndel, @SkyeSeitz

macandcheese · 2023-02-01T03:17:25Z

@ashetland lets sync up on Figma spec for this once everyone's schedule calms down a bit.

ashetland · 2023-02-01T16:24:49Z

@ashetland lets sync up on Figma spec for this once everyone's schedule calms down a bit.

Sounds like a plan.

driskull · 2023-06-08T00:51:34Z

@macandcheese should sheet side placement be flipped in RTL direction?

driskull · 2023-06-08T00:53:37Z

Alternatively, like Modal, offers a slot within Shell to constrain to the extent of the Shell component.

I think we should have a separate issue that depends on this one to add a slot within the shell component. @macandcheese or @geospatialem do you want to create this follow up issue?

macandcheese · 2023-06-08T01:18:32Z

@macandcheese should sheet side placement be flipped in RTL direction?

Yep, I think we do this with Alert / Shell Panel slots, etc., with similar names.

I think we should have a separate issue that depends on this one to add a slot within the shell component.

Opened - #7154

driskull · 2023-08-10T16:08:44Z

@macandcheese does the sheet have a close button or any other UI/slots?

macandcheese · 2023-08-10T16:22:31Z

Nope - accepts a default content slot. The recommendation will be to use a Panel with closable and handle the Sheet in the same way a user handles the Panel closing within a Shell Panel, and provides the behavior of Scrim within modal - closing the scrim and hiding any slotted content when interacted with. This can be turned off the same way Modal does with a outside-close-disabled.

LMK if you think we should reconsider this, but the idea was to basically be a Shell Panel with Modal's page blocking scrim + positioning.

driskull · 2023-08-10T16:27:04Z

Do we need...

outsideCloseDisabled prop?
escapeDisabled prop?
scale prop?
width prop?
kind prop?
beforeClose prop?
Is this focus trapped?

cc @macandcheese

macandcheese · 2023-08-10T16:58:36Z

Do we need...

outsideCloseDisabled prop? ✅

escapeDisabled prop? ✅

scale prop? 🙅

width prop? 🅰️

kind prop? 🙅 / 🅱️

beforeClose prop? ✅

Is this focus trapped? ✅

cc @macandcheese

🅰️ - Shell Panel has W/H-scale props and css vars. Shell Panel also has horizontal / vertical layout. Since Sheet will have "position" (t/b/l/r) instead of layout - we can likely have a single scale and min/max css vars for resizing.

🅱️ - not to start at least.

Also from Shell Panel:

resizable : For now we can use the exact affordances of Shell Panel. In the future all of these should get an improvement ((#5652))
displayMode: overlay(default) / float :

Resizing and display-mode can follow up as well if needed, would consider them nice to have at launch.

Let me know what you think of the above - or if having this hybrid approach is too confusing. The main reason for not having slotted areas like Modal (header, content, footer, etc.) is to more easily allow Panel to be the main and expected content placed in a sheet - which itself has the same slots.

driskull · 2023-08-22T00:09:04Z

@macandcheese @jcfranco should sheet have the same zindex as modal or do we need another layer/token variable?

macandcheese · 2023-08-22T00:10:57Z

Same as Modal I'd think. Similarly we'd want to document / recommend a user only displays one Sheet at a time / not use with Modals active.

driskull · 2023-08-22T21:21:47Z

Lets do resizing as a followup next milestone, we can do displayMode for the initial release.

driskull · 2023-08-22T22:16:04Z

@macandcheese should sheet handle overflow to allow scrolling if the content is larger than the sheet? Modal does this so wanted to check.

Otherwise, the user would have to rely on something like panel to handle overflow of content.

@macandcheese

**Related Issue:** #6391 ## Summary - Adds new `calcite-sheet` component. - Adds e2e tests - Adds screenshot tests - Adds html page with examples - Modeled after the Modal component. - Added to index page - Added to stencil config ## After merged - [Shell] Add "Sheet" Slot - Will try to do for this release if it gets merged in time - Issue: #7154 - PR: #7579 ## Future - Resizable (need issue) @macandcheese ## API ### Example ```html <calcite-sheet open label="libero nunc" position="inline-start"> <calcite-panel closable heading="Ultrices neque" ><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button> <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button> </calcite-panel> <script> document.addEventListener("calcitePanelClose", () => { document.querySelector("calcite-sheet").open = false; }); </script> </calcite-sheet> ``` ## Properties | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- | | `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLCalciteSheetElement) => Promise<void>` | `undefined` | | `displayMode` | `display-mode` | Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). | `"float" \| "overlay"` | `"overlay"` | | `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` | | `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | | `heightScale` | `height-scale` | When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. | `"l" \| "m" \| "s"` | `"m"` | | `label` _(required)_ | `label` | Specifies the label of the component. | `string` | `undefined` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | | `position` | `position` | When `true`, disables the closing of the component when clicked outside. | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"inline-start"` | | `widthScale` | `width-scale` | When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Events | Event | Description | Type | | ------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | | `calciteSheetBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent<void>` | | `calciteSheetBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent<void>` | | `calciteSheetClose` | Fires when the component is closed and animation is complete. | `CustomEvent<void>` | | `calciteSheetOpen` | Fires when the component is open and animation is complete. | `CustomEvent<void>` | ## Methods ### `setFocus() => Promise<void>` Sets focus on the component's "close" button (the first focusable item). #### Returns Type: `Promise<void>` ### `updateFocusTrapElements() => Promise<void>` Updates the element(s) that are used within the focus-trap of the component. #### Returns Type: `Promise<void>` ## CSS Custom Properties | Name | Description | | ---------------------------------- | ---------------------------------------------------------------------------------------------------- | | `--calcite-sheet-height` | When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. | | `--calcite-sheet-max-height` | When `position` is `"block-start"` or `"block-end"`, specifies the maximum height of the component. | | `--calcite-sheet-max-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the maximum width of the component. | | `--calcite-sheet-min-height` | When `position` is `"block-start"` or `"block-end"`, specifies the minimum height of the component. | | `--calcite-sheet-min-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the minimum width of the component. | | `--calcite-sheet-scrim-background` | Specifies the background color of the sheet scrim. | | `--calcite-sheet-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. | --------- Co-authored-by: Adam <[email protected]>

github-actions · 2023-08-28T18:15:10Z

Installed and assigned for verification.

@macandcheese

**Related Issue:** #6391 ## Summary - Adds new `calcite-sheet` component. - Adds e2e tests - Adds screenshot tests - Adds html page with examples - Modeled after the Modal component. - Added to index page - Added to stencil config ## After merged - [Shell] Add "Sheet" Slot - Will try to do for this release if it gets merged in time - Issue: #7154 - PR: #7579 ## Future - Resizable (need issue) @macandcheese ## API ### Example ```html <calcite-sheet open label="libero nunc" position="inline-start"> <calcite-panel closable heading="Ultrices neque" ><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button> <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button> </calcite-panel> <script> document.addEventListener("calcitePanelClose", () => { document.querySelector("calcite-sheet").open = false; }); </script> </calcite-sheet> ``` ## Properties | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- | | `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLCalciteSheetElement) => Promise<void>` | `undefined` | | `displayMode` | `display-mode` | Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). | `"float" \| "overlay"` | `"overlay"` | | `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` | | `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | | `heightScale` | `height-scale` | When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. | `"l" \| "m" \| "s"` | `"m"` | | `label` _(required)_ | `label` | Specifies the label of the component. | `string` | `undefined` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | | `position` | `position` | When `true`, disables the closing of the component when clicked outside. | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"inline-start"` | | `widthScale` | `width-scale` | When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Events | Event | Description | Type | | ------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | | `calciteSheetBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent<void>` | | `calciteSheetBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent<void>` | | `calciteSheetClose` | Fires when the component is closed and animation is complete. | `CustomEvent<void>` | | `calciteSheetOpen` | Fires when the component is open and animation is complete. | `CustomEvent<void>` | ## Methods ### `setFocus() => Promise<void>` Sets focus on the component's "close" button (the first focusable item). #### Returns Type: `Promise<void>` ### `updateFocusTrapElements() => Promise<void>` Updates the element(s) that are used within the focus-trap of the component. #### Returns Type: `Promise<void>` ## CSS Custom Properties | Name | Description | | ---------------------------------- | ---------------------------------------------------------------------------------------------------- | | `--calcite-sheet-height` | When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. | | `--calcite-sheet-max-height` | When `position` is `"block-start"` or `"block-end"`, specifies the maximum height of the component. | | `--calcite-sheet-max-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the maximum width of the component. | | `--calcite-sheet-min-height` | When `position` is `"block-start"` or `"block-end"`, specifies the minimum height of the component. | | `--calcite-sheet-min-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the minimum width of the component. | | `--calcite-sheet-scrim-background` | Specifies the background color of the sheet scrim. | | `--calcite-sheet-width` | When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. | --------- Co-authored-by: Adam <[email protected]>

geospatialem · 2023-08-30T21:03:53Z

Verified in 1.7.0-next.13 with the following:

Properties

beforeClose
displayMode
escapeDisabled
heightScale
focusTrapDisabled
label
open
outsideCloseDisabled
position
widthScale

Events

calciteSheetBeforeClose
calciteSheetClose
calciteSheetBeforeOpen
calciteSheetOpen

Methods

setFocus
updateFocusTrapElements

cc @SkyeSeitz @ashetland @brittneytewks for Figma UI kit updates

macandcheese added new component Issues tied to a new component. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 31, 2023

github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Jan 31, 2023

macandcheese mentioned this issue Feb 9, 2023

[Shell / Shell Panel / Action Bar / Panel] Tracking Epic for upcoming enhancements #6449

Closed

9 tasks

alisonailea added airtable and removed airtable new component Issues tied to a new component. labels Feb 12, 2023

geospatialem assigned driskull Feb 27, 2023

geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Feb 27, 2023

geospatialem added this to the 2023 April Priorities - No breaking changes milestone Feb 27, 2023

alisonailea modified the milestone: 2023 April Priorities - No breaking changes Feb 28, 2023

alisonailea removed the airtable label Feb 28, 2023

brittneytewks added the p - medium Issue is non core or affecting less that 60% of people using the library label Mar 30, 2023

geospatialem modified the milestones: 2023 April Priorities - No breaking changes , 2023 May Priorities Apr 4, 2023

geospatialem modified the milestones: 2023 May Priorities , 2023 July Priorities May 1, 2023

macandcheese mentioned this issue Jun 1, 2023

[Nav / Menu] Tracking Epic for future enhancements #6606

Closed

6 tasks

macandcheese mentioned this issue Jun 8, 2023

[Shell] Add "Sheet" Slot #7154

Closed

geospatialem modified the milestones: 2023 July Priorities, 2023 August Priorities Jul 24, 2023

driskull added a commit that referenced this issue Aug 21, 2023

feat(sheet): Add Sheet component. #6391

f860608

driskull mentioned this issue Aug 22, 2023

feat(sheet): Add Sheet component #7561

Merged

driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Aug 28, 2023

github-actions bot assigned geospatialem and unassigned driskull Aug 28, 2023

geospatialem closed this as completed Aug 30, 2023

SkyeSeitz removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Oct 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Component - Sheet #6391

New Component - Sheet #6391

macandcheese commented Jan 31, 2023 •

edited

Loading

github-actions bot commented Jan 31, 2023

macandcheese commented Feb 1, 2023

ashetland commented Feb 1, 2023

driskull commented Jun 8, 2023

driskull commented Jun 8, 2023

macandcheese commented Jun 8, 2023 •

edited

Loading

driskull commented Aug 10, 2023

macandcheese commented Aug 10, 2023

driskull commented Aug 10, 2023

macandcheese commented Aug 10, 2023

driskull commented Aug 22, 2023

macandcheese commented Aug 22, 2023 •

edited

Loading

driskull commented Aug 22, 2023

driskull commented Aug 22, 2023

github-actions bot commented Aug 28, 2023

geospatialem commented Aug 30, 2023

New Component - Sheet #6391

New Component - Sheet #6391

Comments

macandcheese commented Jan 31, 2023 • edited Loading

Description

User Stories

Acceptance Criteria

Relevant Info

Helpful Details

Esri team

github-actions bot commented Jan 31, 2023

macandcheese commented Feb 1, 2023

ashetland commented Feb 1, 2023

driskull commented Jun 8, 2023

driskull commented Jun 8, 2023

macandcheese commented Jun 8, 2023 • edited Loading

driskull commented Aug 10, 2023

macandcheese commented Aug 10, 2023

driskull commented Aug 10, 2023

macandcheese commented Aug 10, 2023

driskull commented Aug 22, 2023

macandcheese commented Aug 22, 2023 • edited Loading

driskull commented Aug 22, 2023

driskull commented Aug 22, 2023

github-actions bot commented Aug 28, 2023

geospatialem commented Aug 30, 2023

Properties

Events

Methods

macandcheese commented Jan 31, 2023 •

edited

Loading

macandcheese commented Jun 8, 2023 •

edited

Loading

macandcheese commented Aug 22, 2023 •

edited

Loading