[BLOCKED][Enhancement] Responsive Actionsheet (On large screens)

[bommariusser]

Is your enhancement request related to a problem? Please describe.
The actionsheet looks the same on small and big screens, but thats not intended.

we want the actionsheet to be visually different on big screens.

See example in browser: https://cookbook.kirby.design/examples/page/custom-title
See also screenshot below

TODO:

• Wait for Added experimental "usePopover" input property to dropdown component #1671 to be merged to master.
• Modify Enhanced actionsheets to be usable on larger screens  #1442 to use popover functionality introduced by Added experimental "usePopover" input property to dropdown component #1671
• Make sure that it possible to opt-in to use the new popover implementation.
• Finish up PR Enhanced actionsheets to be usable on larger screens  #1442 - get it merged to Master

[labanos]

"parked" til after 1st release for now - might change if web is prioritized differently.

[bommariusser]

sure @labanos lad os tage det mandag :) det er nok mere >720 og ikke bare kun web :)

[jakobe]

Tech refinement:

• There should be a way to semantically place the action sheet below a button, i.e. a combination of button + action sheet:

<button kirby-button>
   <kirby-icon name="more"></kirby-icon>
   <kirby-action-sheet>[options...]</kirby-action-sheet>
</button>

This would make it possible to style the "popout" i.e. the card in a similar way we do it on the dropdown (absolute positioned with z-index, but without left-right-top-bottom, so it renders below the button)

The above should be wrapped in a kirby-action-sheet component that can be semantically inserted on canvas (i.e. the screenshot above).
The component should query the touch-capabilities of the device (i.e. PlatformService.isTouch) to figure out wether the actions sheet should be shown modally using ModalController.showActionSheet (when isTouch = true) or "on canvas" styled as mentioned above (isTouch = false).

Refactor: The existing kirby-action-sheet should be split into a new subcomponent/molecule (kirby-action-sheet-popout?) that only contains the popout/card and a new wrapper component (similar to the existing kirby-action-sheet) that wraps the card + a close/cancel button (to be displayed inside the modal window).

That would end up in target projects using the actions sheet as:

<kirby-action-sheet [items]="items" cancelButtonText ="Undo" [title]="My title" [subtitle]="Something else...">
  <kirby-icon name="more">
</kirby-action-sheet>

Consider:

• Should we default to iconName="more"? I.e. make it optional to slot an icon?
• Should we allow/enforce the target project to supply the button (with the icon inside)?

@bommariusser Do we always want to show the button as a falafal? Or could the button include text?

[RasmusKjeldgaard]

Semi-blocked by #1932 as we want to experiment with the ionic-popover before deciding on the implementation.

[RasmusKjeldgaard]

Replaced by the redesign described in #2807, where action sheet shares the dropdown-design and most of its behavior on both touch and desktop