OctantisWeb.Components.Polaris.Modal (octantis v0.1.12)

View Source

Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.

Polaris marks this component as Deprecated and suggests you use the AppBridge Modal instead. However, the AppBridge Modal is severly limited and it might be best to still use this for the time being.

See

Open a modal from the server 

Hooks.ShopifyModal = {
  mounted(){
    id = this.el.id
    this.handleEvent(`polaris:modal_show_${id}`, (event) => this.liveSocket.execJS(this.el, this.el.getAttribute("data-show")))
    this.handleEvent(`polaris:modal_hide_${id}`, (event) => this.liveSocket.execJS(this.el, this.el.getAttribute("data-hide")))
  }
}
<.modal id="my_modal_id" title="My Modal" phx_hook="ShopifyModal">
  Content
  <:action content="Ok"/>
</.modal>
{:noreply, socket |> Modal.push_open("my_modal_id")}

Summary

Functions

assign_background(assigns)
assign_color(assigns)
backdrop(assigns)

Attributes

  • phx_click (:string) - Defaults to nil.
backdrop_id(id)
class(attrs)
content_id(id)
footer_id(id)
header_id(id)
hide(js \\ %JS{}, id)
modal(assigns)

Attributes

  • id (:string) (required) - id of the modal.
  • title_hidden (:boolean) - Hide the title in the modal. Defaults to false.
  • icon (:any) - Status icon to display in the header. Defaults to nil.
  • open (:boolean) - Whether the modal is open or not. Defaults to false.
  • size (:string) - Set the size of the modal. Defaults to nil.
  • tone (:string) - Sets the status of the banner. Defaults to "tertiary".
  • title (:string) - The content for the title of the modal. Defaults to "".
  • limit_height (:boolean) - Limits modal height on large sceens with scrolling. Defaults to false.
  • loading (:boolean) - Replaces modal content with a spinner while a background action is being performed. Defaults to false.
  • show_backdrop (:boolean) - Should the backdrop be show with the modal?. Defaults to true.
  • on_close (:any) - Callback when the modal clsoe button is clicked.
  • phx_hook (:string) - Defaults to nil.
  • style (:string) - Style attribute.
  • display (:string) - Style attribute.
  • margin (:string) - Style attribute.
  • max_height (:string) - Style attribute.
  • min_height (:string) - Style attribute.
  • object_fit (:string) - Style attribute.
  • flex_grow (:string) - Style attribute.
  • justify_content (:string) - Style attribute.
  • grid_auto_rows (:string) - Style attribute.
  • grid_template_columns (:string) - Style attribute.
  • grid_template_rows (:string) - Style attribute.
  • align_items (:string) - Style attribute.
  • align_self (:string) - Style attribute.

Slots

  • inner_block
  • action - Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • secondary_action - Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • dismiss_action - A complext action to use insread of the standard dismiss X. Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
    • hidden (:boolean)
  • header - Pass attrs to the header wrapper, or override it completely.
  • content - Pass attrs to the content wrapper, or override it completely.
  • footer - Pass attrs to the header wrapper, or override it completely.
push_close(socket, id)
push_open(socket, id)
show(js \\ %JS{}, id)
wrapper_id(id)

Functions

assign_background(assigns)

assign_color(assigns)

backdrop(assigns)

Attributes

  • phx_click (:string) - Defaults to nil.

backdrop_id(id)

class(attrs)

content_id(id)

header_id(id)

hide(js \\ %JS{}, id)

modal(assigns)

Attributes

  • id (:string) (required) - id of the modal.
  • title_hidden (:boolean) - Hide the title in the modal. Defaults to false.
  • icon (:any) - Status icon to display in the header. Defaults to nil.
  • open (:boolean) - Whether the modal is open or not. Defaults to false.
  • size (:string) - Set the size of the modal. Defaults to nil.
  • tone (:string) - Sets the status of the banner. Defaults to "tertiary".
  • title (:string) - The content for the title of the modal. Defaults to "".
  • limit_height (:boolean) - Limits modal height on large sceens with scrolling. Defaults to false.
  • loading (:boolean) - Replaces modal content with a spinner while a background action is being performed. Defaults to false.
  • show_backdrop (:boolean) - Should the backdrop be show with the modal?. Defaults to true.
  • on_close (:any) - Callback when the modal clsoe button is clicked.
  • phx_hook (:string) - Defaults to nil.
  • style (:string) - Style attribute.
  • display (:string) - Style attribute.
  • margin (:string) - Style attribute.
  • max_height (:string) - Style attribute.
  • min_height (:string) - Style attribute.
  • object_fit (:string) - Style attribute.
  • flex_grow (:string) - Style attribute.
  • justify_content (:string) - Style attribute.
  • grid_auto_rows (:string) - Style attribute.
  • grid_template_columns (:string) - Style attribute.
  • grid_template_rows (:string) - Style attribute.
  • align_items (:string) - Style attribute.
  • align_self (:string) - Style attribute.

Slots

  • inner_block
  • action - Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • secondary_action - Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • dismiss_action - A complext action to use insread of the standard dismiss X. Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
    • hidden (:boolean)
  • header - Pass attrs to the header wrapper, or override it completely.
  • content - Pass attrs to the content wrapper, or override it completely.
  • footer - Pass attrs to the header wrapper, or override it completely.

push_close(socket, id)

push_open(socket, id)

show(js \\ %JS{}, id)

wrapper_id(id)