feat(shell): Add "Sheets" Slot #7579

driskull · 2023-08-22T23:34:53Z

Related Issue: #7154

Summary

depends on feat(sheet): Add Sheet component #7561
Adds sheets slot to the shell where users can place calcite-sheet components
Adds screenshot test
Adds example HTML

@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 <adam@tirel.la>

# Conflicts: # packages/calcite-components/src/components/sheet/sheet.scss

@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 <adam@tirel.la>

anveshmekala · 2023-08-28T21:43:35Z

packages/calcite-components/src/components/shell/shell.tsx

@@ -129,6 +141,14 @@ export class Shell implements ConditionalSlotComponent {
    );
  }

+  renderSheets(): VNode {
+    return (
+      <div hidden={!this.hasSheets}>


Q: is hidden required here considering slotted elements are rendered only if user parses them.

This is because we don't want to display the div if no content is slotted here.

anveshmekala · 2023-08-28T21:43:37Z

packages/calcite-components/src/components/shell/shell.tsx

@@ -53,6 +54,8 @@ export class Shell implements ConditionalSlotComponent {

  @State() hasModals = false;

+  @State() hasSheets = false;


nitpick: can this be hasSheet or hasSlottedSheet instead of hasSheets.

I'd like to maintain consistency with the above hasModals. It can be multiple sheets.

makes sense. wasn't aware that users will slot multiple sheets.

anveshmekala

LGTM! 👍

driskull · 2023-08-28T21:48:11Z

@jcfranco let me know if I need to make any changes post merge.

…input * origin/main: chore: release next feat(shell): Add "Sheets" Slot (#7579)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.1...@esri/calcite-components@1.7.0) (2023-09-01) ### Features * **action-bar, action-pad, action-group:** Add label properties for group context ([#7415](#7415)) ([b34f36d](b34f36d)) * **combobox:** Add single-persist selection mode ([#7583](#7583)) ([dab06a3](dab06a3)) * **flow:** Add support for custom flow-item elements ([#7608](#7608)) ([197adfe](197adfe)) * **input-date-picker:** Normalize year to current century for user typed values only ([#7638](#7638)) ([a1db718](a1db718)) * **input-number:** Add integer property ([#7646](#7646)) ([cd66a6d](cd66a6d)) * **input-time-picker:** Support fractional seconds ([#7532](#7532)) ([c2bf34b](c2bf34b)) * **meter:** Add Meter component ([#7401](#7401)) ([47163ed](47163ed)) * **sheet:** Add Sheet component ([#7561](#7561)) ([f12a393](f12a393)) * **sheet:** Update default widths ([#7617](#7617)) ([47d2c0b](47d2c0b)) * **shell:** Add "Sheets" Slot ([#7579](#7579)) ([e798765](e798765)) * **table:** Add Table and related components ([#7607](#7607)) ([b067e72](b067e72)) ### Bug Fixes * **accordion, accordion-item:** Improve a11y ([#7560](#7560)) ([b5170b6](b5170b6)) * Add drag styles for improved UX ([#7644](#7644)) ([afbb764](afbb764)) * **block, block-section:** Improve a11y ([#7557](#7557)) ([1f44f6b](1f44f6b)) * **chip-group:** Add existence checks ([#7586](#7586)) ([5ca64f1](5ca64f1)) * **color-picker:** Update value when alphaChannel is toggled ([#7563](#7563)) ([1f753dd](1f753dd)) * **combobox:** Prevent deselecting items via keyboard in single-persist mode ([#7634](#7634)) ([4f5f8b0](4f5f8b0)) * **combobox:** Update combobox height to follow design spec ([#7558](#7558)) ([ec08845](ec08845)) * **date-picker:** Set start of week to monday in zh-CN ([#7578](#7578)) ([7e385cb](7e385cb)) * **dropdown:** Prevents navigating dropdown items with Tab key ([#7527](#7527)) ([3ea658d](3ea658d)) * Ensure label only focuses the first labelable child ([#7553](#7553)) ([426159c](426159c)) * **flow:** Catch error when beforeBack promise is rejected ([#7601](#7601)) ([cb70671](cb70671)) * **input-date-picker, input-time-picker:** Do not show dropdown affordance when read-only ([#7559](#7559)) ([5a3f19c](5a3f19c)) * **input, input-number:** Correctly sanitize numbers when pasting string with 'e' ([#7648](#7648)) ([b8bc11c](b8bc11c)) * **list, sortable-list, value-list:** Emit calciteListOrderChange when dragging between lists ([#7614](#7614)) ([4653581](4653581)) * **list:** Fixes dragging nested list items ([#7555](#7555)) ([c25f7b3](c25f7b3)) * **list:** Stop emitting calciteListChange when a list-item is disabled or closed. ([#7624](#7624)) ([7008463](7008463)) * **loader:** Tweak loading animations to work in Safari ([#7564](#7564)) ([2103654](2103654)) * **modal:** Catch error when beforeClose promise is rejected ([#7600](#7600)) ([70405d0](70405d0)) * **modal:** Handle removal of open attribute and prevent multiple beforeClose calls ([#7470](#7470)) ([f31588f](f31588f)) * **rating:** Adds focus outline on click ([#7341](#7341)) ([af30073](af30073)) * **segmented-control:** Refresh items when added dynamically ([#7567](#7567)) ([2e36eb3](2e36eb3)) * **split-button:** Update divider and borders to follow design spec ([#7568](#7568)) ([8df59ab](8df59ab)) * **tree-item:** Move focus outline to item label area ([#7581](#7581)) ([1327cef](1327cef)) * **tree-item:** Updates state when selection changes programmatically for `selection-mode='ancestors'` ([#7572](#7572)) ([40758c5](40758c5)) * **tree:** Improve keyboard navigation ([#7618](#7618)) ([826a5cb](826a5cb)) </details> <details><summary>@esri/calcite-components-react: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.1...@esri/calcite-components-react@1.7.0) (2023-09-01) ### Bug Fixes * Make sure components are defined in environments like in codesandbox ([#7632](#7632)) ([7005cce](7005cce)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.7.0-next.22 to ^1.7.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 14 commits August 11, 2023 10:02

feat(sheet): Add Sheet component. #6391

f860608

WIP

73e3f08

cleanup

2478913

cleanup

1c00f2a

docs, demos, cleanup

cb90f65

cleanup

de30b9e

WIP

c6239ef

cleanup

97af598

cleanup

8df0829

cleanup

37a20ba

cleanup

c9c3545

cleanup examples

0dea3a0

Merge branch 'main' into dris0000/sheet

00e7d63

feat(shell): Add "Sheets" Slot #7154

e7bff53

driskull changed the base branch from main to dris0000/sheet August 22, 2023 23:35

github-actions bot assigned driskull Aug 22, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 22, 2023

cleanup

7640da7

driskull mentioned this pull request Aug 22, 2023

feat(sheet): Add Sheet component #7561

Merged

driskull and others added 11 commits August 23, 2023 11:27

cleanup

fb7f9e8

wip - Add animation and height / width

25fd3af

Merge branch 'main' into dris0000/sheet

fb9c311

Merge branch 'dris0000/sheet' into dris0000/shell-sheet-slot

2bf6be8

Merge branch 'macandcheese/sheet-animation' into dris0000/sheet

adf1d77

fix tests

3db2b55

fix test

d1cf0cb

cleanup + add CSS rtl util class

7574ff5

test + bg color restore

f1baa65

cleanup

89b9210

cleanup beforeClose

6ac3516

driskull added 3 commits August 28, 2023 09:26

partial review fixes

b886d0b

review fixes

7895b45

Merge branch 'dris0000/sheet' into dris0000/shell-sheet-slot

60672b5

Base automatically changed from dris0000/sheet to main August 28, 2023 18:14

Merge branch 'main' into dris0000/shell-sheet-slot

c08851a

# Conflicts: # packages/calcite-components/src/components/sheet/sheet.scss

driskull marked this pull request as ready for review August 28, 2023 18:17

driskull requested a review from a team as a code owner August 28, 2023 18:17

driskull requested a review from macandcheese August 28, 2023 18:17

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 28, 2023

fix slotted in shell scrim styles.

5ef3197

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 28, 2023

add screenshot test

f1ac1f3

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 28, 2023

review fixes

61b0667

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 28, 2023

anveshmekala reviewed Aug 28, 2023

View reviewed changes

anveshmekala approved these changes Aug 28, 2023

View reviewed changes

driskull merged commit e798765 into main Aug 28, 2023
16 checks passed

driskull deleted the dris0000/shell-sheet-slot branch August 28, 2023 21:48

github-actions bot added this to the 2023 August Priorities milestone Aug 28, 2023

calcite-admin mentioned this pull request Aug 28, 2023

chore: release main #7571

Merged

benelan added a commit that referenced this pull request Aug 29, 2023

Merge remote-tracking branch 'origin/main' into benelan/6706-integer-…

59c6488

…input * origin/main: chore: release next feat(shell): Add "Sheets" Slot (#7579)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(shell): Add "Sheets" Slot #7579

feat(shell): Add "Sheets" Slot #7579

driskull commented Aug 22, 2023 •

edited

anveshmekala Aug 28, 2023

driskull Aug 28, 2023

anveshmekala Aug 28, 2023

driskull Aug 28, 2023

anveshmekala Aug 28, 2023

anveshmekala left a comment

driskull commented Aug 28, 2023

		@@ -53,6 +54,8 @@ export class Shell implements ConditionalSlotComponent {

		@State() hasModals = false;

		@State() hasSheets = false;

feat(shell): Add "Sheets" Slot #7579

feat(shell): Add "Sheets" Slot #7579

Conversation

driskull commented Aug 22, 2023 • edited

Summary

anveshmekala Aug 28, 2023

Choose a reason for hiding this comment

driskull Aug 28, 2023

Choose a reason for hiding this comment

anveshmekala Aug 28, 2023

Choose a reason for hiding this comment

driskull Aug 28, 2023

Choose a reason for hiding this comment

anveshmekala Aug 28, 2023

Choose a reason for hiding this comment

anveshmekala left a comment

Choose a reason for hiding this comment

driskull commented Aug 28, 2023

driskull commented Aug 22, 2023 •

edited