feat(sheet): Add Sheet component #7561

driskull · 2023-08-22T00:48:55Z

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: [Shell] Add "Sheet" Slot #7154
- PR: feat(shell): Add "Sheets" Slot #7579

Future

Resizable (need issue) @macandcheese

API

Example

<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.

packages/calcite-components/src/components/sheet/sheet.scss

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

packages/calcite-components/src/components/sheet/sheet.stories.ts

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

anveshmekala

Great work 👏 @driskull !

🏗️ 🏗️ 🏗️ 👷‍♂️

Looks good, other than nitpick comments and replacing css with tailwind util classes.

Needs a11y testing since we are using scrim and suggest getting reviewed from more eyes before we install. We can move forward with installing this in upcoming release since it is a new component and has low risk.

jcfranco

Awesome! ✨📄✨

jcfranco · 2023-08-28T15:06:55Z

packages/calcite-components/src/components/sheet/sheet.scss

+  transition: visibility 0ms linear var(--calcite-internal-animation-timing-medium),
+    opacity var(--calcite-internal-animation-timing-medium) $easing-function;
+  // the sheet should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
+  --calcite-sheet-scrim-background-internal: #{rgba($blk-240, 0.85)};


Could we move these to the .container level, to prevent overriding at the host level? We should also rename these to be --calcite-internal-<var-name> to align with other private CSS props and event. cc @macandcheese

Yeah I was wondering if we should do this as well. I copied this from Modal so maybe an issue for modal is needed as well? @jcfranco can you create a refactor issue for modal? Modal could use almost all of the same refactors from this review.

@macandcheese I removed these since they are already on the container. Seems to be fine but could you verify?

Yep - seems to still be overridable by setting --calcite-sheet-scrim-background either on the Sheet element directly, or a parent element:

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

packages/calcite-components/src/components/sheet/sheet.scss

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

jcfranco · 2023-08-28T15:47:52Z

packages/calcite-components/src/components/sheet/sheet.e2e.ts

+    expect(documentClass).toEqual(false);
+  });
+
+  describe("opening and closing behavior", () => {


@Elijbet One more case for the open/close test util to cover. ✨🧪✨

jcfranco · 2023-08-28T15:50:05Z

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

+  @Prop() slottedInShell: boolean;
+
+  /**
+   * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.


Doc question, does this affect height when the writing-mode is changed? We might need to fine-tune both modal and sheet's doc separately depending on this.

@macandcheese do you know the answer to this one?

AFAIK it would still just set the container width to the supplied default or overwritten css vars - maybe we could test for this? Any changes or doc could also apply to Shell Panel where we have similar width / height props / css vars.

macandcheese · 2023-08-28T17:00:22Z

packages/calcite-components/src/components/sheet/sheet.stories.ts

+  `;
+simpleDarkMode.parameters = { modes: modesDarkDefault };
+
+export const inlineStartfloat_TestOnly = (): string =>


More of a curiosity - Chromatic seems to crop the screenshot so we don't actually see the float inset position, just the border radius. It looks correct in associated Storybook build and locally though:

@macandcheese could it be a browser version difference?

Can't seem to replicate the positioning of the screenshot in FF / Safari - but we may need another rule to fix the border radius in Safari, I think maybe due to the container css changes?

Ill put back some host styles and see if that fixes the screenshots.

@macandcheese I think the screens are good now. Let me know if its good to merge

Can you kick off another Chromatic? Inset looks good locally but wasn't showing up before outside of Chromatic. I do still see the non-rounded border in Safari. Modal / Shell Panel in 'float' don't show this so maybe we just missed one of the styles?

@macandcheese when we set the border radius, we need to set overflow:hidden so the panel doesn't go outside of where it should.

macandcheese

Awesome! Approved on Chromatic - Safari border radius issue in float is resolved looking locally.

@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>

…input * origin/main: chore: release next feat(sheet): Add Sheet component (#7561)

@macandcheese

**Related Issue:** #7154 ## Summary - depends on #7561 - Adds `sheets` slot to the shell where users can place `calcite-sheet` components - Adds screenshot test - Adds example HTML cc @macandcheese --------- Co-authored-by: Adam <adam@tirel.la>

🤖 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 3 commits August 11, 2023 10:02

feat(sheet): Add Sheet component. #6391

f860608

WIP

73e3f08

cleanup

2478913

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

github-actions bot assigned driskull Aug 22, 2023

driskull added 10 commits August 22, 2023 10:35

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

driskull mentioned this pull request Aug 22, 2023

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

Merged

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

cleanup

fb7f9e8

wip - Add animation and height / width

25fd3af

Merge branch 'main' into dris0000/sheet

fb9c311

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

adf1d77

fix tests

3db2b55

fix test

d1cf0cb

driskull commented Aug 24, 2023

View reviewed changes

packages/calcite-components/src/components/sheet/sheet.scss Show resolved Hide resolved

driskull added 4 commits August 24, 2023 11:46

cleanup + add CSS rtl util class

7574ff5

test + bg color restore

f1baa65

cleanup

89b9210

cleanup beforeClose

6ac3516

driskull marked this pull request as ready for review August 24, 2023 19:14

driskull requested a review from a team as a code owner August 24, 2023 19:14

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

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

driskull commented Aug 25, 2023

View reviewed changes

packages/calcite-components/src/components/sheet/sheet.tsx Outdated Show resolved Hide resolved

anveshmekala reviewed Aug 25, 2023

View reviewed changes

packages/calcite-components/src/components/sheet/sheet.stories.ts Show resolved Hide resolved

review fixes

5c960cb

anveshmekala reviewed Aug 25, 2023

View reviewed changes

packages/calcite-components/src/components/sheet/sheet.tsx Show resolved Hide resolved

anveshmekala approved these changes Aug 25, 2023

View reviewed changes

driskull requested a review from jcfranco August 25, 2023 21:36

jcfranco approved these changes Aug 28, 2023

View reviewed changes

driskull added 2 commits August 28, 2023 09:26

partial review fixes

b886d0b

review fixes

7895b45

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

macandcheese reviewed Aug 28, 2023

View reviewed changes

put back some host styles.

c04e3e7

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

driskull added 2 commits August 28, 2023 10:40

fix border radius

aead538

consistency

698638a

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

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

macandcheese approved these changes Aug 28, 2023

View reviewed changes

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

driskull deleted the dris0000/sheet branch August 28, 2023 18:14

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 28, 2023

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

991c074

…input * origin/main: chore: release next feat(sheet): Add Sheet component (#7561)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sheet): Add Sheet component #7561

feat(sheet): Add Sheet component #7561

driskull commented Aug 22, 2023 •

edited

anveshmekala left a comment •

edited

jcfranco left a comment

jcfranco Aug 28, 2023

driskull Aug 28, 2023 •

edited

driskull Aug 28, 2023

macandcheese Aug 28, 2023

jcfranco Aug 28, 2023

jcfranco Aug 28, 2023

driskull Aug 28, 2023

macandcheese Aug 28, 2023

macandcheese Aug 28, 2023

driskull Aug 28, 2023

macandcheese Aug 28, 2023

driskull Aug 28, 2023

driskull Aug 28, 2023

macandcheese Aug 28, 2023

driskull Aug 28, 2023

macandcheese left a comment

feat(sheet): Add Sheet component #7561

feat(sheet): Add Sheet component #7561

Conversation

driskull commented Aug 22, 2023 • edited

Summary

After merged

Future

API

Example

Properties

Events

Methods

setFocus() => Promise<void>

Returns

updateFocusTrapElements() => Promise<void>

Returns

CSS Custom Properties

anveshmekala left a comment • edited

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull Aug 28, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese left a comment

Choose a reason for hiding this comment

driskull commented Aug 22, 2023 •

edited

`setFocus() => Promise<void>`

`updateFocusTrapElements() => Promise<void>`

anveshmekala left a comment •

edited

driskull Aug 28, 2023 •

edited