Make calcite-dialog responsive

[ForrestLin]

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

[fdeters]

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!

[ForrestLin]

@fdeters 

Thank you for your suggestion.

I'll try.

Forrest

[ForrestLin]

@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

[fdeters]

@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 

[ForrestLin]

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