Investigate using the dialog element and popover attribute

[driskull]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Investigate using the dialog element and popover attribute in existing components.

Acceptance Criteria

Applicable components would use the popover attribute and dialog element. This would solve issues where z-index stacking can conflict. Since these two HTML api's will place the element above any other element, we wouldn't need to manage that z-index stacking any longer.

This may also affect the internal use of the scrim component. Since both the dialog element and popover attribute provide a ::backdrop pseudo element where styling can be provided. The scrim component would no longer be necessary to use internally in many of these components. https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

Relevant Info

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

All of these tokens could be deprecated:

  --calcite-z-index-tooltip: 901;
  --calcite-z-index-popup: 900;
  --calcite-z-index-modal: 800;
  --calcite-z-index-overlay: 700;
  --calcite-z-index-dropdown: 600;
  --calcite-z-index-toast: 500;

I think these tokens could be modified to be:

  --calcite-z-index-header: 400; // could be 3? Headers above sticky?
  --calcite-z-index-sticky: 300; // could be 2?
  --calcite-z-index: 1;

cc @alisonailea

Which Component

• The dialog element would be beneficial for:
  • dialog
  • sheet
  • alert
• The popover attribute would be beneficial for
  • popover
  • tooltip
  • combobox
  • dropdown
  • menu
  • input-date-picker
  • input-time-picker
  • input-timezone

Example Use Case

https://blog.logrocket.com/comparing-popover-api-dialog-element/ https://hidde.blog/dialog-modal-popover-differences/ https://frontendmasters.com/blog/menus-toasts-and-more/ https://levelup.gitconnected.com/dialogs-vs-popovers-understanding-the-key-differences-8919d5be0fcc https://www.oidaisdes.org/native-dialog-and-popover.en/

Priority impact

impact - p3 - not time sensitive

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [X] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

N/A

[alisonailea]

The z-index updates make sense to me. @ashetland and @SkyeSeitz what do you think?

[driskull]

Safari 18 has been released.