Class: Primer::Alpha::Dialog

Inherits:
Component
  • Object
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 => "",
  :left => "Overlay--placement-left",
  :right => "Overlay--placement-right"
}.freeze
POSITION_OPTIONS = 
POSITION_MAPPINGS.keys
DEFAULT_POSITION_NARROW = 
:inherit
POSITION_NARROW_MAPPINGS = 
{
  DEFAULT_POSITION_NARROW => "",
  :bottom => "Overlay--placement-bottom-whenNarrow",
  :fullscreen => "Overlay--full-whenNarrow",
  :left => "Overlay--placement-left-whenNarrow",
  :right => "Overlay--placement-right-whenNarrow"
}.freeze
POSITION_NARROW_OPTIONS = 
POSITION_NARROW_MAPPINGS.keys

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Constants included from Primer::AttributesHelper

Primer::AttributesHelper::PLURAL_ARIA_ATTRIBUTES, Primer::AttributesHelper::PLURAL_DATA_ATTRIBUTES

Instance Attribute Summary collapse

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, #extract_data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Methods included from ExperimentalSlotHelpers

included

Methods included from ExperimentalRenderHelpers

included

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, disable_scroll: true, **system_arguments) ⇒ Dialog

Returns a new instance of Dialog.

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.

  • disable_scroll (Boolean) (defaults to: true) —

    When true, disables scrolling the page when the dialog is open.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
# File 'app/components/primer/alpha/dialog.rb', line 109

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,
  disable_scroll: true,
  **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
  @disable_scroll = disable_scroll

  @system_arguments[:tag] = "dialog"
  @system_arguments[:id] = @id
  @system_arguments[:aria] = { modal: true }
  @system_arguments[:aria] = merge_aria(
    @system_arguments, {
      aria: {
        labelledby: labelledby,
        describedby: "#{@id}-description"
      }
    }
  )
  @system_arguments[:classes] = class_names(
    "Overlay",
    "Overlay-whenNarrow",
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
    "Overlay--motion-scaleFade",
    POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
    POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
    system_arguments[:classes],
    "Overlay--disableScroll" => @disable_scroll
  )
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 



154
155
156
157
 
# File 'app/components/primer/alpha/dialog.rb', line 154

def before_render
  with_header unless header?
  with_body unless body?
end

#labelledby ⇒ Object 



159
160
161
 
# File 'app/components/primer/alpha/dialog.rb', line 159

def labelledby
  "#{@id}-title"
end