idea Make calcite-dialog responsive in Calcite Design System Ideas

Make calcite-dialog responsive

ForrestLin — Fri, 13 Sep 2024 12:05:00 GMT

Is it possible to make calcite-dialog like Widget Windows in ArcGIS Experience Builder?

https://experience.arcgis.com/experience/42818c03ae384edc91ab658faf2664e0

1. Add collapse button in calcite-dialog

2. Make calcite-dialog responsive like:

Thanks.

Forrest

Re: Make calcite-dialog responsive

fdeters — Fri, 13 Sep 2024 16:57:32 GMT

Hi, fellow Forrest,

For the first option (making a calcite-dialog collapsible), I don't see any options for that in the calcite-dialog documentation. You could try putting the dialog inside a collapsible component like Accordion or Block, but I think that would cause other issues. If you're working in a custom Calcite application, maybe you could try adding an Action or Button to the Dialog's "header-actions-end" or "header-actions-start" slot, then set the CSS variable --calcite-dialog-size-y when a user clicks the Action or Button?

For the second option (make a "Bottom Sheet"-like component), I don't believe Calcite currently has that sort of component available. However, you can get a similar effect by using the Shell Panel component inside a Shell.

Hopefully some of that is helpful!

Re: Make calcite-dialog responsive

ForrestLin — Fri, 13 Sep 2024 17:48:02 GMT

@fdeters

Thank you for your suggestion.

I'll try.

Forrest

Re: Make calcite-dialog responsive

ForrestLin — Fri, 13 Sep 2024 21:35:15 GMT

@fdeters

I think what I want is calcite-dialog can be resized like this way in Mobile/Phone:

Any idea how to do it?

Thanks.

Forrest

Re: Make calcite-dialog responsive

fdeters — Fri, 13 Sep 2024 21:53:27 GMT

@ForrestLin

Unfortunately, I don't think Calcite has any components that work like that on mobile yet. My team was looking for something very similar a few months ago, and we ended up changing our approach. There is an open issue on their GitHub page about this use case, but it doesn't look to be in their near-term product plan: https://github.com/Esri/calcite-design-system/issues/3737

If you're working in a custom JavaScript app, you might be able to find another library that has a Bottom Sheet component you could use. Here's the Material 3 page: https://m3.material.io/components/bottom-sheets/overview

Re: Make calcite-dialog responsive

ForrestLin — Sat, 14 Sep 2024 00:38:55 GMT

@fdeters

I find it's name: swipeable panel.

https://www.npmjs.com/package/ngx-swipeable-panel?activeTab=readme#ngx-swipeable-panel

I'll ask Calcite Team if they can make calcite-dialog swipeable.