[Dialog] Add new component, deprecate modal component #7886

geospatialem · 2023-09-26T18:15:51Z

Check existing issues

I have checked for existing issues to avoid duplicates

Description

The ModelBuider Web team is seeking a movable, non-attached component in early 2024 to support a workflow not requiring an additional click and is not restrictive for the user experience, where the use case cannot use modal as a solution.

We should identify if the new dialog component should support:

Resizing
Moving

Or, if not, what the recommended workflow would be for support with docking or an alternative approach.

Acceptance Criteria

Design: Figma file 🎨

Dependency issues
- Panel
- Modal
  - [Modal] Deprecate docked property #7668
Add a new dialog component
- "Render a panel inside" paradigm - refer to popover, sheet, and shell-panel
- Properties
  - modal/non-modal
  - kind
  - placement
  - heading
  - description
  - scale
  - scale-width
  - fullscreen (under consideration 🚧 )
    - cc Dialog - improve user control over fullscreen behavior #6191
  - resizable (under consideration 🚧 )
  - draggable (under consideration 🚧 )
- Slots
  - content
  - header
Deprecate the modal component

Relevant Info

Originally reported in https://devtopia.esri.com/WebGIS/calcite-design-system/issues/163

Which Component

New component

Example Use Case

See the internal issue for additional context.

Priority impact

impact - p3 - not time sensitive

Calcite package

@esri/calcite-components
@esri/calcite-components-react
@esri/eslint-plugin-calcite-components

Esri team

N/A

The text was updated successfully, but these errors were encountered:

driskull · 2023-09-26T21:47:25Z

The use case cannot use modal as a solution.

Can you elaborate on this a bit? I don't see why a non blocking modal (scrim turned off) couldn't support this better.

It seems like modal would fit this use case better or if not, we need a new component that is just a dialog and can be dragged.

I could see popover supporting resizing but not being a movable draggable object. Modal would be better for that use case. The whole point of popover (and floating-ui) is to attach to another element.

driskull · 2023-09-26T21:57:38Z

@geospatialem can we separate resizing into their own unique issues? I do see resizing as valid requests for both modal and popover. However, the dragging is probably only valid for modal or another component that is visually equivalent to modal but non blocking.

driskull · 2023-09-26T22:30:17Z

I think the best solution would be to deprecate modal and add a dialog component. The dialog component could have a property for modal/non-modal as well as properties for resizing and dragging.

ethanbdev · 2023-09-28T18:12:27Z

Totally open to the best solution, whether its enhancing the modal or a new dialog component to meet the use case

ethanbdev · 2023-10-05T18:10:29Z

Hey @geospatialem - could this be assigned to a milestone for tracking? I am not sure how far out you plan

geospatialem · 2023-10-05T18:37:02Z

Hey @geospatialem - could this be assigned to a milestone for tracking? I am not sure how far out you plan

Hi @ethanbdev, this issue will need some design expertise prior to dev work, so there will likely be two milestones to address the effort. Design will be triaging issues late next week for consideration into an upcoming design sprint. cc @brittneytewks

ethanbdev · 2023-10-05T19:59:39Z

Perfect - thanks!

macandcheese · 2023-10-16T20:54:59Z

I think the best solution would be to deprecate modal and add a dialog component. The dialog component could have a property for modal/non-modal as well as properties for resizing and dragging.

I think this is a good idea. It would also allow the new component to follow the “slot a Panel inside” paradigm that Popover, Sheet, Shell Panel follow, instead of Modal’s current slot set up.

mjuniper · 2023-10-19T15:47:31Z

We have a use case for this. We want to show a non-modal privacy consent dialog positioned in the lower right of the screen like this:

macandcheese · 2023-10-25T22:37:01Z

@geospatialem maybe we can repurpose this issue to encompass the discussion above re: Modal -> Dialog.

macandcheese · 2023-11-16T20:21:00Z

If we explore Panel as the expected slotted element in this new Dialog - it would align more closely with Shell Panel / Sheet DX and UI. We'd likely want to rename "Action bar" and "Fab" slots in Panel to be more generic like Modal's "sticky top and bottom" ones.

We'd probably want to use the "placement" values from Alert as well as a "center (default)" value.

Azadirachta · 2023-11-30T01:44:19Z

Hello @geospatialem - Please could you suggest a possible timeline for this issue? Thank You!

Originally reported in https://devtopia.esri.com/WebGIS/calcite-design-system/issues/163

geospatialem · 2023-11-30T14:09:28Z

Hello @geospatialem - Please could you suggest a possible timeline for this issue? Thank You!

@Azadirachta Thanks for reaching out! The new component effort is currently in the design backlog for consideration with other high priority bug fixes and enhancements - Calcite does not have a timeline at this time, but will update the issue in the coming weeks on the design efforts (note that the dev efforts for implementation would be in addition to the design).

github-actions · 2024-06-17T16:49:40Z

cc @geospatialem, @brittneytewks

…onent. #7886

driskull · 2024-07-11T23:11:01Z

Can we get a separate issue for adding alerts slot on calcite-panel? This way it will be installed and documented as a separate feat PR.

driskull · 2024-07-18T17:26:42Z

@SkyeSeitz @geospatialem from Figma docs, it says keyboard user will get a live area notification and move via keyboard.

What should the text say for this aria-live area?

I'm assuming it would say something for moving and resizing via keyboard but I could use help with what exactly to say.

Arrow keys should move the dialog whereas arrow keys plus shiftKey should resize the dialog.

geospatialem · 2024-07-22T16:29:21Z

@SkyeSeitz @geospatialem from Figma docs, it says keyboard user will get a live area notification and move via keyboard.

What should the text say for this aria-live area?

I'm assuming it would say something for moving and resizing via keyboard but I could use help with what exactly to say.

Arrow keys should move the dialog whereas arrow keys plus shiftKey should resize the dialog.

@driskull The role should provide the context of how to interact with the component, but we should support a label to provide additional context to what the purpose of the component is. Maybe we should have a default label, and the developer could specify using a label attr/prop? cc @SkyeSeitz

…onent (#9751) **Related Issue:** #7886 ## Summary - Adds new `calcite-dialog` component. - Includes e2e, stories, demos, resources - Updates stencil config to note new component - Panel esc key should emit close event - Adds `dialogs` slot to `calcite-shell` for slotting dialogs. - Deprecates `calcite-modal` component. - cleans up global style imports - makes `focusTrapDisabled` optional on FocusTrapComponent ## Notes - Animations need review

github-actions · 2024-07-26T15:44:19Z

Installed and assigned for verification.

geospatialem · 2024-07-29T16:09:44Z

Verified in 2.11.0-next.25 in https://codepen.io/geospatialem/pen/rNEjemQ with the following (listed as attributes below, where applicable):

Default slot
placement for "top-start", "top", "top-end", "center" (default), "bottom-start", "bottom", and "bottom-end"
kind for "brand", "danger", "info", "none" (default), "success", "warning"
heading
description
scale
width-scale
open
close-disabled
loading
menu-open
modal
overlay-positioning

Of note the resizing and dragging of the component will be handled in #9875 anticipated for the August release.

There looks to be something off when overlay-positioning="fixed" and menu-open is present: https://codepen.io/geospatialem/pen/ZEdLWNZ, opened via #9876. cc @driskull

…onent (#9751) **Related Issue:** #7886 ## Summary - Adds new `calcite-dialog` component. - Includes e2e, stories, demos, resources - Updates stencil config to note new component - Panel esc key should emit close event - Adds `dialogs` slot to `calcite-shell` for slotting dialogs. - Deprecates `calcite-modal` component. - cleans up global style imports - makes `focusTrapDisabled` optional on FocusTrapComponent ## Notes - Animations need review

github-actions bot added impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive calcite-components Issues specific to the @esri/calcite-components package. labels Sep 26, 2023

ethanbdev added the ArcGIS Web Analysis Issues logged by ArcGIS Web Analysis team members label Sep 26, 2023

geospatialem added new component Issues tied to a new component. and removed discussion Issues relating to a conversation where feedback is optional. labels Oct 26, 2023

geospatialem changed the title ~~[Popover] Support free-floating, movable, non-modal/attached component~~ [Dialog] Add new component, deprecate modal component Oct 26, 2023

geospatialem mentioned this issue Oct 26, 2023

Modal - Avoid the use of implicit headings - (2036570034) #7802

Closed

brittneytewks added the p - high Issue should be addressed in the current milestone, impacts component or core functionality label Nov 16, 2023

brittneytewks added the estimate - design - md Medium design effort; 5-10 days of design work label Nov 16, 2023

brittneytewks added this to the Design Backlog milestone Nov 16, 2023

brittneytewks removed the needs triage Planning workflow - pending design/dev review. label Nov 16, 2023

brittneytewks removed this from the Design Backlog milestone Dec 14, 2023

github-actions bot added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 17, 2024

geospatialem added the estimate - 8 Requires input from team, consider smaller steps. label Jun 18, 2024

geospatialem added this to the 2024-07-30 - Jul Release milestone Jun 18, 2024

geospatialem removed needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p4 - not time sensitive labels Jun 18, 2024

geospatialem assigned driskull Jun 27, 2024

geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jun 27, 2024

driskull added a commit that referenced this issue Jul 9, 2024

feat(dialog): adds new dialog component and deprecates the modal comp…

56e0efa

…onent. #7886

driskull mentioned this issue Jul 9, 2024

feat(dialog): adds new dialog component and deprecates the modal component #9751

Merged

driskull mentioned this issue Jul 12, 2024

panel: add alerts slot #9772

Closed

6 tasks

SkyeSeitz mentioned this issue Jul 22, 2024

[Sheet, Shell Panel, Popover] Automatically render Panel #9828

Open

6 tasks

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 Jul 26, 2024

github-actions bot assigned geospatialem and DitwanP Jul 26, 2024

github-actions bot unassigned driskull Jul 26, 2024

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 Jul 29, 2024

geospatialem mentioned this issue Jul 29, 2024

[Dialog] Add resizing and dragging to the component #9875

Closed

8 tasks

geospatialem closed this as completed Jul 29, 2024

geospatialem mentioned this issue Jul 29, 2024

[Dialog] When overlay-position="fixed" and menu-open is present the menu is not positioned as-expected #9876

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dialog] Add new component, deprecate modal component #7886

[Dialog] Add new component, deprecate modal component #7886

geospatialem commented Sep 26, 2023 •

edited by SkyeSeitz

Loading

driskull commented Sep 26, 2023 •

edited

Loading

driskull commented Sep 26, 2023

driskull commented Sep 26, 2023

ethanbdev commented Sep 28, 2023

ethanbdev commented Oct 5, 2023 •

edited

Loading

geospatialem commented Oct 5, 2023

ethanbdev commented Oct 5, 2023

macandcheese commented Oct 16, 2023 •

edited

Loading

mjuniper commented Oct 19, 2023

macandcheese commented Oct 25, 2023

macandcheese commented Nov 16, 2023 •

edited

Loading

Azadirachta commented Nov 30, 2023

geospatialem commented Nov 30, 2023

github-actions bot commented Jun 17, 2024

driskull commented Jul 11, 2024

driskull commented Jul 18, 2024

geospatialem commented Jul 22, 2024

github-actions bot commented Jul 26, 2024

geospatialem commented Jul 29, 2024 •

edited

Loading

[Dialog] Add new component, deprecate modal component #7886

[Dialog] Add new component, deprecate modal component #7886

Comments

geospatialem commented Sep 26, 2023 • edited by SkyeSeitz Loading

Check existing issues

Description

Acceptance Criteria

Relevant Info

Which Component

Example Use Case

Priority impact

Calcite package

Esri team

driskull commented Sep 26, 2023 • edited Loading

driskull commented Sep 26, 2023

driskull commented Sep 26, 2023

ethanbdev commented Sep 28, 2023

ethanbdev commented Oct 5, 2023 • edited Loading

geospatialem commented Oct 5, 2023

ethanbdev commented Oct 5, 2023

macandcheese commented Oct 16, 2023 • edited Loading

mjuniper commented Oct 19, 2023

macandcheese commented Oct 25, 2023

macandcheese commented Nov 16, 2023 • edited Loading

Azadirachta commented Nov 30, 2023

geospatialem commented Nov 30, 2023

github-actions bot commented Jun 17, 2024

driskull commented Jul 11, 2024

driskull commented Jul 18, 2024

geospatialem commented Jul 22, 2024

github-actions bot commented Jul 26, 2024

geospatialem commented Jul 29, 2024 • edited Loading

geospatialem commented Sep 26, 2023 •

edited by SkyeSeitz

Loading

driskull commented Sep 26, 2023 •

edited

Loading

ethanbdev commented Oct 5, 2023 •

edited

Loading

macandcheese commented Oct 16, 2023 •

edited

Loading

macandcheese commented Nov 16, 2023 •

edited

Loading

geospatialem commented Jul 29, 2024 •

edited

Loading