Class: Primer::Alpha::Dialog

Inherits:

Component

Object
ViewComponent::Base
Component
Primer::Alpha::Dialog

show all

Defined in:: app/components/primer/alpha/dialog.rb,
app/components/primer/alpha/dialog/body.rb,
app/components/primer/alpha/dialog/footer.rb,
app/components/primer/alpha/dialog/header.rb

Overview

A Dialog is used to remove the user from the main application flow, to confirm actions, ask for disambiguation or to present small forms.

Defined Under Namespace

Classes: Body, Footer, Header

Constant Summary collapse

DEFAULT_SIZE =

:medium

SIZE_MAPPINGS =

{
  :small => "Overlay--size-small-portrait",
  :medium_portrait => "Overlay--size-medium-portrait",
  DEFAULT_SIZE => "Overlay--size-medium",
  :large => "Overlay--size-large",
  :xlarge => "Overlay--size-xlarge",
  :auto => "Overlay--size-auto"
}.freeze

SIZE_OPTIONS =

SIZE_MAPPINGS.keys

DEFAULT_POSITION =

:center

POSITION_MAPPINGS =

{
  DEFAULT_POSITION => "Overlay-backdrop--center",
  :left => "Overlay-backdrop--side Overlay-backdrop--placement-left",
  :right => "Overlay-backdrop--side Overlay-backdrop--placement-right"
}.freeze

POSITION_OPTIONS =

POSITION_MAPPINGS.keys

DEFAULT_POSITION_NARROW =

:inherit

POSITION_NARROW_MAPPINGS =

{
  DEFAULT_POSITION_NARROW => "",
  :bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
  :fullscreen => "Overlay-backdrop--full-whenNarrow",
  :left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
  :right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
}.freeze

POSITION_NARROW_OPTIONS =

POSITION_NARROW_MAPPINGS.keys

Instance Attribute Summary collapse

#id ⇒ Object readonly

The dialog’s ID value.

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Methods included from Primer::AttributesHelper

#aria, #data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Constructor Details

#initialize(title:, subtitle: nil, size: DEFAULT_SIZE, position: DEFAULT_POSITION, position_narrow: DEFAULT_POSITION_NARROW, visually_hide_title: false, id: self.class.generate_id, **system_arguments) ⇒ `Dialog`

Returns a new instance of Dialog.

Examples:

Dialog with Cancel and Submit buttons

@description
  An ID is provided which enables wiring of the open and close buttons to the dialog.
@code
  <%= render(Primer::Alpha::Dialog.new(
    title: "Dialog Example",
    id: "my-dialog",
  )) do |d| %>
    <% d.with_show_button { "Show Dialog" } %>
    <% d.with_body do %>
      <p>Some content</p>
    <% end %>
    <% d.with_footer do %>
      <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
      <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
    <% end %>
  <% end %>

Parameters:

id (String) (defaults to: self.class.generate_id) —

The id of the dialog.
title (String) —

Describes the content of the dialog.
subtitle (String) (defaults to: nil) —

Provides additional context for the dialog, also setting the aria-describedby attribute.
size (Symbol) (defaults to: DEFAULT_SIZE) —

The size of the dialog. <%= one_of(Primer::Alpha::Dialog::SIZE_OPTIONS) %>
position (Symbol) (defaults to: DEFAULT_POSITION) —

The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
position_narrow (Symbol) (defaults to: DEFAULT_POSITION_NARROW) —

The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
visually_hide_title (Boolean) (defaults to: false) —

If true will hide the heading title, while still making it available to Screen Readers.
system_arguments (Hash) —

<%= link_to_system_arguments_docs %>

# File 'app/components/primer/alpha/dialog.rb', line 125

def initialize(
  title:,
  subtitle: nil,
  size: DEFAULT_SIZE,
  position: DEFAULT_POSITION,
  position_narrow: DEFAULT_POSITION_NARROW,
  visually_hide_title: false,
  id: self.class.generate_id,
  **system_arguments
)
  @system_arguments = deny_tag_argument(**system_arguments)

  @id = id.to_s
  @title = title
  @subtitle = subtitle
  @size = size
  @position = position
  @position_narrow = position_narrow
  @visually_hide_title = visually_hide_title

  @system_arguments[:tag] = "modal-dialog"
  @system_arguments[:role] = "dialog"
  @system_arguments[:id] = @id
  @system_arguments[:aria] = { modal: true }
  @system_arguments[:aria] = merge_aria(
    @system_arguments, {
      aria: {
        disabled: true,
        describedby: "#{@id}-title #{@id}-description"
      }
    }
  )
  @system_arguments[:classes] = class_names(
    "Overlay",
    "Overlay-whenNarrow",
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
    "Overlay--motion-scaleFade",
    system_arguments[:classes]
  )
  @backdrop_classes = class_names(
    POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
    POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)]
  )
end

Instance Attribute Details

#id ⇒ `Object` (readonly)

The dialog’s ID value.



55
56
57

# File 'app/components/primer/alpha/dialog.rb', line 55

def id
  @id
end

Instance Method Details

#before_render ⇒ `Object`

# File 'app/components/primer/alpha/dialog.rb', line 170

def before_render
  with_header unless header?
  with_body unless body?
end

Class: Primer::Alpha::Dialog

Overview

Defined Under Namespace

Constant Summary collapse

Constants inherited from Component

Constants included from Status::Dsl

Constants included from ViewHelper

Constants included from TestSelectorHelper

Constants included from FetchOrFallbackHelper

Constants included from Primer::AttributesHelper