openproject-primer_view_components 0.48.2 → 0.49.0

data/app/components/primer/beta/timeline_item.pcss

@@ -3,7 +3,9 @@
 .TimelineItem {
   position: relative;
   display: flex;
+  /* stylelint-disable-next-line primer/spacing */
   padding: var(--stack-padding-normal) 0;
+  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--stack-gap-normal);
 
   /* The Timeline */
@@ -15,11 +17,13 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--borderColor-muted);
   }
 
   &:target .TimelineItem-badge {
     border-color: var(--borderColor-accent-emphasis);
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
   }
 }
@@ -30,11 +34,14 @@
   display: flex;
   width: var(--control-medium-size);
   height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
   margin-right: var(--controlStack-medium-gap-condensed);
+  /* stylelint-disable-next-line primer/spacing */
   margin-left: calc(var(--control-medium-size) / -2 + 1px);
   color: var(--fgColor-muted);
   align-items: center;
   background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
   border: var(--borderWidth-thick) solid var(--bgColor-default);
   border-radius: 50%;
   justify-content: center;
@@ -57,6 +64,7 @@
 
 .TimelineItem-avatar {
   position: absolute;
+  /* stylelint-disable-next-line primer/spacing */
   left: -72px;
   z-index: 1;
 }
@@ -66,7 +74,9 @@
   z-index: 1;
   height: var(--stack-gap-spacious);
   margin: 0;
+  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--stack-gap-normal) * -1);
+  /* stylelint-disable-next-line primer/spacing */
   margin-left: -56px;
   background-color: var(--bgColor-default);
   border: 0;
@@ -79,6 +89,7 @@
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
+    /* stylelint-disable-next-line primer/spacing */
     padding-bottom: var(--stack-gap-normal);
   }
 

data/app/components/primer/beta/truncate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,6CACE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/components/primer/beta/truncate.pcss

@@ -13,6 +13,7 @@
     white-space: nowrap;
 
     & + .Truncate-text {
+      /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--control-small-gap);
     }
 

data/app/components/primer/dialog_helper.js

@@ -115,7 +115,6 @@ export class DialogHelperElement extends HTMLElement {
 _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
     if (!this.dialog)
         return;
-    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'));
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
         // eslint-disable-next-line no-restricted-syntax

data/app/components/primer/dialog_helper.ts

@@ -96,7 +96,6 @@ export class DialogHelperElement extends HTMLElement {
 
   #handleDialogOpenAttribute() {
     if (!this.dialog) return
-    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'))
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
       // eslint-disable-next-line no-restricted-syntax

data/app/components/primer/primer.d.ts

@@ -9,7 +9,6 @@ import './focus_group';
 import './scrollable_region';
 import './aria_live';
 import './shared_events';
-import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -21,9 +20,9 @@ import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './beta/relative_time';
 import './alpha/tab_container';
-import '../../../lib/primer/forms/primer_multi_input';
-import '../../../lib/primer/forms/primer_text_field';
-import '../../../lib/primer/forms/toggle_switch_input';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './open_project/page_header_element';

data/app/components/primer/primer.js

@@ -9,7 +9,6 @@ import './focus_group';
 import './scrollable_region';
 import './aria_live';
 import './shared_events';
-import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -21,9 +20,9 @@ import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './beta/relative_time';
 import './alpha/tab_container';
-import '../../../lib/primer/forms/primer_multi_input';
-import '../../../lib/primer/forms/primer_text_field';
-import '../../../lib/primer/forms/toggle_switch_input';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './open_project/page_header_element';

data/app/components/primer/primer.pcss

@@ -4,17 +4,19 @@
 @import "./alpha/action_list.pcss";
 @import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/button_marketing.pcss";
 @import "./alpha/dialog.pcss";
 @import "./alpha/dropdown.pcss";
 @import "./alpha/layout.pcss";
+@import "./alpha/menu.pcss";
+@import "./alpha/segmented_control.pcss";
+@import "./alpha/select_panel.pcss";
+@import "./alpha/stack.pcss";
+@import "./alpha/stack_item.pcss";
 @import "./alpha/tab_nav.pcss";
 @import "./alpha/text_field.pcss";
-@import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
-@import "./alpha/select_panel.pcss";
-@import "./alpha/segmented_control.pcss";
-@import "./alpha/menu.pcss";
 
 /* beta */
 @import "./beta/avatar.pcss";

data/app/components/primer/primer.ts

@@ -9,7 +9,6 @@ import './focus_group'
 import './scrollable_region'
 import './aria_live'
 import './shared_events'
-import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
@@ -21,9 +20,9 @@ import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
 import './beta/relative_time'
 import './alpha/tab_container'
-import '../../../lib/primer/forms/primer_multi_input'
-import '../../../lib/primer/forms/primer_text_field'
-import '../../../lib/primer/forms/toggle_switch_input'
+import '../../lib/primer/forms/primer_multi_input'
+import '../../lib/primer/forms/primer_text_field'
+import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'
 import './open_project/page_header_element'

data/app/components/primer/responsive_arg.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Primer
+  # Base class for responsive Stack and StackItem arguments. Used internally.
+  class ResponsiveArg
+    BREAKPOINTS = [:narrow, :regular, :wide].freeze
+
+    include FetchOrFallbackHelper
+
+    class << self
+      def for(values)
+        cache[[values, arg_name].hash] ||= new(values)
+      end
+
+      # :nocov:
+      def arg_name
+        raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+      end
+      # :nocov:
+
+      private
+
+      def cache
+        Thread.current[:pvc_stack_cache] ||= {}
+      end
+    end
+
+    def to_data_attributes
+      @data_attributes ||= data_attributes_for(self.class.arg_name, values)
+    end
+
+    private
+
+    def data_attributes_for(property, values)
+      if values.is_a?(Hash)
+        values.slice(*BREAKPOINTS).each_with_object({}) do |(key, value), memo|
+          next unless value
+          property_with_breakpoint = "#{property}-#{key}"
+          memo[property_with_breakpoint] = value
+        end
+      else
+        values ? { property => values } : {}
+      end
+    end
+
+    def fetch_or_fallback_all(options, values, default)
+      if values.is_a?(Hash)
+        values.each_with_object({}) do |(key, value), memo|
+          memo[key] = fetch_or_fallback(options, value, default).yield_self do |value|
+            block_given? ? yield(value) : value
+          end
+        end
+      else
+        fetch_or_fallback(options, values, default).yield_self do |value|
+          block_given? ? yield(value) : value
+        end
+      end
+    end
+
+    # :nocov:
+    def values
+      raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+    end
+    # :nocov:
+  end
+end

data/app/forms/caption_template_form/places_bellevue_caption.html.erb

@@ -0,0 +1 @@
+<span>Bellevue caption</span>

data/app/forms/caption_template_form/places_lopez_caption.html.erb

@@ -0,0 +1 @@
+<span>Lopez caption</span>

data/app/forms/caption_template_form/places_seattle_caption.html.erb

@@ -0,0 +1 @@
+<span>Seattle caption</span>

data/app/forms/caption_template_form.rb

@@ -18,5 +18,11 @@ class CaptionTemplateForm < ApplicationForm
       age_radios.radio_button(value: "young", label: "10-15")
       age_radios.radio_button(value: "middle_aged", label: "16-21")
     end
+
+    name_form.check_box_group(name: "places", label: "Cool places") do |check_group|
+      check_group.check_box(value: "lopez", label: "Lopez Island")
+      check_group.check_box(value: "bellevue", label: "Bellevue")
+      check_group.check_box(value: "seattle", label: "Seattle")
+    end
   end
 end

data/app/forms/check_box_group_form.rb

@@ -3,7 +3,7 @@
 # :nodoc:
 class CheckBoxGroupForm < ApplicationForm
   form do |check_form|
-    check_form.check_box_group(label: "I like to eat, eat, eat:") do |check_group|
+    check_form.check_box_group(label: "I like to eat, eat, eat:", caption: "Nom nom nom") do |check_group|
       check_group.check_box(
         name: "long_a",
         label: "Ey-ples and ba-naynays",

data/app/forms/radio_button_group_form.rb

@@ -3,7 +3,11 @@
 # :nodoc:
 class RadioButtonGroupForm < ApplicationForm
   form do |radio_form|
-    radio_form.radio_button_group(name: "channel", label: "How did you hear about us?") do |radio_group|
+    radio_form.radio_button_group(
+      name: "channel",
+      label: "How did you hear about us?",
+      caption: "We love our listeners"
+    ) do |radio_group|
       radio_group.radio_button(value: "online", label: "Online advertisement", caption: "Facebook maybe?")
       radio_group.radio_button(value: "radio", label: "Radio advertisement", caption: "We love us some NPR")
       radio_group.radio_button(value: "friend", label: "From a friend", caption: "Wow, what a good person")

data/app/lib/primer/attributes_helper.rb

@@ -4,7 +4,7 @@ module Primer
   # :nodoc:
   module AttributesHelper
     PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
-    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
+    PLURAL_DATA_ATTRIBUTES = %i[target targets action].freeze
 
     def aria(val, system_arguments)
       system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)

data/{lib → app/lib}/primer/forms/base_component.rb

@@ -61,14 +61,6 @@ module Primer
         self.class.compile! unless self.class.instance_methods(false).include?(:render_template)
         render_template
       end
-
-      def content_tag_if(condition, tag, **kwargs, &block)
-        if condition
-          content_tag(tag, **kwargs, &block)
-        else
-          capture(&block)
-        end
-      end
     end
   end
 end

data/{lib → app/lib}/primer/forms/button.rb

@@ -54,11 +54,14 @@ module Primer
       private
 
       def tag_attributes
+        attrs = { name: @input.name }
+        attrs[:value] = @input.value if @input.value
+
         case @type
         when :submit
-          ButtonAttributeGenerator.submit_tag_attributes(@input.label, name: @input.name)
+          ButtonAttributeGenerator.submit_tag_attributes(@input.label, **attrs)
         else
-          ButtonAttributeGenerator.button_tag_attributes(@input.label, name: @input.name)
+          ButtonAttributeGenerator.button_tag_attributes(@input.label, **attrs)
         end
       end
     end

data/{lib → app/lib}/primer/forms/check_box_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.check_boxes.each do |check_box| %>
         <%= render(check_box.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

data/{lib → app/lib}/primer/forms/check_box_group.rb

@@ -8,7 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb

@@ -50,14 +50,10 @@ module Primer
           false
         end
 
-        private
-
-        def caption_template_name
-          @caption_template_name ||= if @scheme == :array
-                                       :"#{name}_#{value}"
-                                     else
-                                       name.to_sym
-                                     end
+        def values_disambiguate_template_names?
+          # Check boxes submitted as an array all have the same name, so we return true here
+          # to ensure different caption templates can be attached to individual check box inputs.
+          @scheme == :array
         end
       end
     end

data/{lib → app/lib}/primer/forms/dsl/input.rb

@@ -263,6 +263,10 @@ module Primer
           @input_arguments[:id]
         end
 
+        def value
+          @input_arguments[:value]
+        end
+
         # :nocov:
         def name
           raise_for_abstract_method!(__method__)
@@ -314,6 +318,14 @@ module Primer
           ""
         end
 
+        # Whether or not the `value:` argument should be used to determine the caption template
+        # for a given field. This is useful in especially radio button groups where each option
+        # has the same name but a different value. Check box groups where the values are submitted
+        # as an array also use this feature, since each check box also has the same name.
+        def values_disambiguate_template_names?
+          false
+        end
+
         private
 
         def input_data
@@ -323,7 +335,7 @@ module Primer
         def caption_template_name
           return nil unless name
 
-          @caption_template_name ||= if respond_to?(:value)
+          @caption_template_name ||= if values_disambiguate_template_names? && respond_to?(:value) && value.present?
                                        :"#{name}_#{value}"
                                      else
                                        name.to_sym

data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb

@@ -42,6 +42,10 @@ module Primer
         def supports_validation?
           false
         end
+
+        def values_disambiguate_template_names?
+          true
+        end
       end
     end
   end

data/{lib → app/lib}/primer/forms/group.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag_if(horizontal?, :div, class: "FormControl-horizontalGroup") do %>
+<%= render(Primer::Box.new(**@system_arguments)) do %>
   <% @inputs.each do |input| %>
     <%= render(input.to_component) %>
   <% end %>

data/{lib → app/lib}/primer/forms/group.rb

@@ -17,6 +17,11 @@ module Primer
         @form = form
         @layout = layout
         @system_arguments = system_arguments
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "FormControl-horizontalGroup" => horizontal?
+        )
       end
 
       def horizontal?

data/{lib → app/lib}/primer/forms/radio_button_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.radio_buttons.each do |radio_button| %>
         <%= render(radio_button.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

data/{lib → app/lib}/primer/forms/radio_button_group.rb

@@ -8,7 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

data/{lib → app/lib}/primer/forms/select.html.erb

@@ -3,4 +3,3 @@
     <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
   <% end %>
 <% end %>
-

data/lib/primer/view_components/linters/details_menu_migration.rb

@@ -16,7 +16,7 @@ module ERBLint
 
           # Allow custom pattern matching for ERB nodes
           class ConfigSchema < LinterConfig
-            property :custom_erb_pattern, accepts: array_of?(Regexp),
+            property :custom_erb_pattern, accepts: array_of?(String),
               default: -> { [] }
           end
           self.config_schema = ConfigSchema
@@ -51,7 +51,8 @@ module ERBLint
                 if @config.custom_erb_pattern.empty?
                   nil
                 else
-                  Regexp.new(@config.custom_erb_pattern.join("|"), true)
+                  regexes = @config.custom_erb_pattern.map { |pattern| Regexp.new(pattern, true) }
+                  Regexp.new(regexes.join("|"), true)
                 end
             end
 

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 48
-      PATCH = 2
+      MINOR = 49
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -14,7 +14,6 @@ module Primer
         Primer::Alpha::HellipButton => {},
         Primer::Alpha::Image => {},
         Primer::Alpha::OcticonSymbols => {},
-        Primer::Alpha::ImageCrop => { js: true },
         Primer::IconButton => { js: true },
         Primer::Beta::AutoComplete => { js: true },
         Primer::Beta::AutoComplete::Item => {},

data/previews/primer/alpha/action_bar_preview/inline.html.erb

@@ -1,6 +1,6 @@
 
 <%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
-  <%= render(Primer::Beta::Heading.new(tag: :h1, font_size: 3, mr: 2)) { "Title" }%>
+  <%= render(Primer::Beta::Heading.new(tag: :h1, font_size: 3, mr: 2)) { "Title" } %>
   <%= render(Primer::Alpha::ActionBar.new) do |component| %>
     <% component.with_item_icon_button(icon: :search, label: "Search") %>
     <% component.with_item_icon_button(icon: :pencil, label: "Edit") %>

data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb

@@ -2,7 +2,7 @@
   <% d.with_show_button { "Show Dialog" } %>
   <% d.with_body do %>
     <form>
-      <input type="text" placeholder="This element is focused on open" autofocus>
+      <input type="text" placeholder="This element is focused on open" autofocus autocomplete="off">
     </form>
   <% end %>
 <% end %>

data/previews/primer/alpha/dialog_preview/custom_header.html.erb

@@ -1,6 +1,8 @@
 <%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
   <% d.with_header(show_divider: show_divider) do %>
-    <button class="btn">Custom Header Controls</button>
+    <%= render(Primer::Beta::Button.new) do %>
+      Custom Header Controls
+    <% end %>
   <% end %>
   <% d.with_show_button { button_text } %>
   <% d.with_body { "Hello World" } %>

data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb

@@ -5,16 +5,16 @@
       <% d.with_show_button { button_text } %>
       <% d.with_body { body_text } %>
       <% d.with_footer(show_divider: true) do %>
-        <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "dialog-one" })) { "Cancel" } %>
+        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "dialog-one" })) { "Cancel" } %>
       <% end %>
     <% end %>
   <% end %>
 <% end %>
 
-<script type="module">
-document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
+<script>
+  document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
     setTimeout(() => {
-        document.getElementById('first-overlay').querySelector('button')?.click()
+      document.getElementById('first-overlay').querySelector('button')?.click()
     });
   });
 </script>

data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb

@@ -14,7 +14,7 @@
 <% end %>
 
 <div style="margin-top:2rem">
-<%= render(Primer::Beta::Flash.new(scheme: :warning)) do %>
+<%= render(Primer::Alpha::Banner.new(scheme: :warning)) do %>
   <p>Please be careful nesting dialogs! Note that in this example, opening the second dialog does not close the first.</p>
   <p>Closing a dialog while opening a dialog inside, will cause both to be invisible which will lead to undesired effects!</p>
 <% end %>

data/previews/primer/alpha/dialog_preview/scroll_container.html.erb

@@ -1,6 +1,15 @@
-<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+<%= render(Primer::Alpha::Dialog.new(
+  id: "dialog-one",
+  title: title,
+  subtitle: subtitle,
+  size: size,
+  position: position,
+  position_narrow: position_narrow,
+  visually_hide_title: visually_hide_title,
+  disable_scroll: disable_scroll
+)) do |d| %>
   <% d.with_show_button { button_text } %>
-  <% d.with_body { body_text} %>
+  <% d.with_body { body_text } %>
 <% end %>
 
 <!-- just some lorem ipsum -->

data/previews/primer/alpha/dialog_preview/with_footer.html.erb

@@ -2,7 +2,7 @@
   <% d.with_show_button { button_text } %>
   <% d.with_body { "Content" } %>
   <% d.with_footer(show_divider: show_divider) do %>
-    <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
-    <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+    <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Submit" } %>
   <% end %>
 <% end %>

data/previews/primer/alpha/dialog_preview/with_form.html.erb

@@ -5,8 +5,8 @@
       This is a custom dialog with the body and footer wrapped in a form tag.
     <% end %>
     <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: show_divider)) do %>
-      <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
-      <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+      <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+      <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Submit" } %>
     <% end %>
   </form>
 <% end %>