Send a Message Modal in Phone number component

[micahmills]

In the phone number component it would be good to add a button in the label that would open a bottom sheet modal (see #134 ) that would then have links to various messaging services that would open the contacts number in the service (iMessage, WhatsApp, Viber, etc.) this would keep users from having to add the number as a contact on their phone.

We have this in the theme in the details pain already but the UI isn't great.

[cairocoder01]

Current UI

Proposal

• Add type="phone" attribute to multi-text input
  • This will give an option for more customized phone UI in the future
  • When this is present, an icon (mdi-phone-outgoing?) will be displayed inline with the label, aligned to the end of the line
  • Icon should only show if the component has a non-empty value
  • When icon is clicked, it will open a bottom-sheet modal with options for various messaging apps
• Bottom sheet modal
  • For every phone number and messaging service combo, show...
    • {msg-type-icon} Open +19995551234 with {service-name}
    • See https://github.com/DiscipleTools/disciple-tools-theme/blob/55eda3a95cb6e2230ef725b92099c76e3dbdd858/dt-assets/js/details.js#L1061 for current code to create links
  • Every item should be large enough for easy touch interactions (usually minimum of 50-60px height)
  • Options should scroll within bottom sheet

Modal Trigger Button

I'm not sure what's best for this. Here are a few options:

Bottom Sheet UI

[cairocoder01]

More trigger UI ideas:

[micahmills]

I like the button being inlined like you have in the most recent comment.