class Primer::Alpha::Overlay

of the Overlay.
‘aria-labelledby` relationship between the title and the unique id
The combination of both `:title` and `:id` establishes an
generated.
setting `:id`. If no `:id` is given, a default randomize hex id is
- **Overlay unique id**: A Overlay should be unique. Give a unique id
used as the main heading inside the Overlay.
Give an accessible name setting `:title`. The accessible name will be
so screen readers are aware of the purpose of the Overlay when it opens.
- **Overlay Accessible Name**: An overlay should have an accessible name,
@accessibility
behavior.
specialized components, and mostly contain presentational logic and
as dialogs and menus. They are private components intended to be used by
Overlay components codify design patterns related to floating surfaces such

def before_render 

def before_render
  if @system_arguments[:role].present?
    if header?
      @system_arguments[:aria][:labelledby] ||= title_id
    else
      @system_arguments[:aria][:label] = @title
    end
  end
  with_body unless body?
end

def initialize(

Parameters:
  • system_arguments (Hash) -- <%= link_to_system_arguments_docs %>
  • role (String) -- The ARIA role. <%= one_of(Primer::Alpha::Overlay::ROLE_OPTIONS) %>
  • visually_hide_title (Boolean) -- If true will hide the heading title, while still making it available to Screen Readers.
  • allow_out_of_bounds (Boolean) -- Allow the Overlay to overflow its container.
  • anchor_offset (Symbol) -- The anchor offset to give the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_OFFSET_OPTIONS) %>
  • anchor_side (Symbol) -- The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
  • anchor_align (Symbol) -- The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
  • anchor (String) -- An ID of the element to anchor onto. Defaults to the `show_button`.
  • padding (Symbol) -- The padding given to the Overlay body. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
  • size (Symbol) -- The size of the Overlay. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
  • popover (Symbol) -- The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
  • subtitle (String) -- Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
  • title (String) -- Describes the content of the Overlay.
  • id (String) -- The id of the Overlay. 
def initialize(
  title:,
  role: nil,
  subtitle: nil,
  popover: DEFAULT_POPOVER,
  size: DEFAULT_SIZE,
  padding: DEFAULT_PADDING,
  anchor: nil,
  anchor_align: DEFAULT_ANCHOR_ALIGN,
  anchor_offset: DEFAULT_ANCHOR_OFFSET,
  anchor_side: DEFAULT_ANCHOR_SIDE,
  allow_out_of_bounds: false,
  visually_hide_title: false,
  id: self.class.generate_id,
  **system_arguments
)
  @system_arguments = deny_tag_argument(**system_arguments)
  @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role) if role.present?
  @system_arguments[:id] = id.to_s
  @wrapper_classes = class_names(
    "Overlay",
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
  )
  @system_arguments[:tag] = "anchored-position"
  @system_arguments[:anchor] = anchor || "overlay-show-#{@system_arguments[:id]}"
  @system_arguments[:align] = fetch_or_fallback(ANCHOR_ALIGN_OPTIONS, anchor_align, DEFAULT_ANCHOR_ALIGN)
  @system_arguments[:side] = ANCHOR_SIDE_MAPPINGS[fetch_or_fallback(ANCHOR_SIDE_OPTIONS, anchor_side, DEFAULT_ANCHOR_SIDE)]
  @system_arguments["anchor-offset"] = fetch_or_fallback(ANCHOR_OFFSET_OPTIONS, anchor_offset, DEFAULT_ANCHOR_OFFSET)
  @system_arguments["allow-out-of-bounds"] = true if allow_out_of_bounds
  @id = id.to_s
  @title = title
  @subtitle = subtitle
  @visually_hide_title = visually_hide_title
  @padding = padding
  @system_arguments[:popover] = popover
  @system_arguments[:aria] ||= {}
end

def show_button_id 

def show_button_id
  "overlay-show-#{@id}"
end

def title_id 

def title_id
  "overlay-title-#{@id}"
end