Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Shell] Add "Sheet" Slot #7154

Closed
macandcheese opened this issue Jun 8, 2023 · 2 comments
Closed

[Shell] Add "Sheet" Slot #7154

macandcheese opened this issue Jun 8, 2023 · 2 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. enhancement Issues tied to a new feature or request. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive
Milestone
2023 August Prior...

Comments

@macandcheese
Copy link
Contributor

Description

Similar to Alert, and Modal, we should offer a slot within Shell to accept a #6391.

Acceptance Criteria

Depends on #6391

Relevant Info

No response

Which Component

Sheet, Shell

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 8, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jun 8, 2023
@macandcheese macandcheese mentioned this issue Jun 8, 2023
Closed
@driskull driskull mentioned this issue Aug 22, 2023
Merged
driskull added a commit that referenced this issue Aug 22, 2023
@driskull
feat(shell): Add "Sheets" Slot #7154
e7bff53
@driskull driskull mentioned this issue Aug 22, 2023
Merged
@driskull driskull self-assigned this Aug 25, 2023
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Aug 25, 2023
@benelan benelan added this to the 2023 August Priorities milestone Aug 25, 2023
@benelan benelan removed the needs triage Planning workflow - pending design/dev review. label Aug 25, 2023
driskull added a commit that referenced this issue Aug 28, 2023
@driskull @macandcheese
feat(sheet): Add Sheet component (#7561)
f12a393 
**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>
benelan pushed a commit that referenced this issue Aug 28, 2023
@driskull @macandcheese @benelan
feat(sheet): Add Sheet component (#7561)
4de00e1 
**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>
driskull added a commit that referenced this issue Aug 28, 2023
@driskull @macandcheese
feat(shell): Add "Sheets" Slot (#7579)
e798765 
**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>
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 28, 2023
@github-actions github-actions bot assigned geospatialem and unassigned driskull Aug 28, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Aug 30, 2023
@geospatialem geospatialem mentioned this issue Aug 30, 2023
Merged
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 30, 2023
@geospatialem
Copy link
Member

Verified in 1.7.0-next.13.

geospatialem added a commit that referenced this issue Aug 30, 2023
@geospatialem
docs(shell): update sheets slot position (#7629)
f413b61 
**Related Issue:**
#7154

## Summary
Doc copyediting for the `shell`'s new `"sheets"` slot.
@SkyeSeitz 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. enhancement Issues tied to a new feature or request. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive
Projects
None yet
Milestone
2023 August Priorities
Development

No branches or pull requests
5 participants
@driskull @macandcheese @geospatialem @benelan @SkyeSeitz