openproject-primer_view_components 0.10.0 → 0.12.1

data/app/components/primer/open_project/drag_handle.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render(Primer::Beta::Octicon.new(
+    icon: :grabber,
+    size: @size
+    )) %>
+<% end %>

data/app/components/primer/open_project/drag_handle.pcss

@@ -0,0 +1,6 @@
+/* CSS for DragHandle  */
+
+.DragHandle {
+    cursor: move;
+    color: var(--fgColor-muted);
+}

data/app/components/primer/open_project/drag_handle.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class DragHandle < Primer::Component
+      status :open_project
+
+      DEFAULT_SIZE = Primer::Beta::Octicon::SIZE_DEFAULT
+      SIZE_OPTIONS = Primer::Beta::Octicon::SIZE_OPTIONS
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "DragHandle"
+          )
+
+        @size = fetch_or_fallback(Primer::OpenProject::DragHandle::SIZE_OPTIONS, size, Primer::OpenProject::DragHandle::DEFAULT_SIZE)
+      end
+    end
+  end
+end

data/app/components/primer/open_project/flex_layout.html.erb

@@ -0,0 +1,23 @@
+<% if rows.any? %>
+  <%= render(Primer::Box.new(**@system_arguments.merge(direction: :column))) do %>
+    <% rows.each do |row| %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if columns.any? %>
+  <%= render(Primer::Box.new(**@system_arguments.merge(direction: :row))) do %>
+    <% columns.each do |column| %>
+      <%= column %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if boxes.any? %>
+  <%= render(Primer::Box.new(**@system_arguments)) do %>
+    <% boxes.each do |box| %>
+      <%= box %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/flex_layout.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A layouting component used to arrange multiple components next / below each other
+    class FlexLayout < Primer::Component
+      status :open_project
+
+      renders_many :rows, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+      renders_many :columns, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+      # boxes are used when direction is set to row or column based on responsive breakpoints
+      renders_many :boxes, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        super
+
+        @system_arguments = deny_tag_argument(**system_arguments) || {}
+        @system_arguments[:display] = :flex
+      end
+
+      private
+
+      def render?
+        # no slot provided
+        raise ArgumentError, "You have to provide either rows, columns or boxes as a slot" if rows.empty? && columns.empty? && boxes.empty?
+
+        if [rows, columns, boxes].count { |arr| !arr.empty? } == 1
+          # only rows or columns or boxes are used
+          true
+        elsif [rows, columns, boxes].count { |arr| !arr.empty? } > 1
+          # rows, columns and boxes are used together, which is not allowed
+          raise ArgumentError, "You can't mix row, column and box slots"
+        end
+      end
+
+      def child_component(system_arguments, &block)
+        if system_arguments[:flex_layout] == true
+          Primer::OpenProject::FlexLayout.new(**system_arguments.except(:flex_layout), &block)
+        else
+          Primer::Box.new(**system_arguments || {})
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/grid_layout/area.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class GridLayout
+      # GridLayout::Area is an internal component that wraps the items in a div with the given new class and responding "grid-area"
+      class Area < Primer::Component
+        status :open_project
+
+        DEFAULT_TAG = :div
+        TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+        # @param css_class [String] The basic css class applied on the grid-container
+        # @param area_name [Symbol] The specific area name, used for creating the element class and the "grid-area" style
+        # @param component [ViewComponent::Base] The instance of the component to be rendered.
+        # @param tag [Symbol] <%= one_of(Primer::OpenProject::GridLayout::Area::TAG_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(css_class, area_name, component = ::Primer::BaseComponent, tag: DEFAULT_TAG, **system_arguments)
+          @component = component
+          @system_arguments = system_arguments
+          @styles = [
+            "grid-area: #{area_name}"
+          ]
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], *@styles)
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "#{css_class}--#{area_name}"
+          )
+        end
+
+        def call
+          render(@component.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/grid_layout.html.erb

@@ -0,0 +1,11 @@
+<% if @system_arguments[:tag] %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% areas.each do |row| %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% else %>
+  <% areas.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/grid_layout.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A layouting component used to arrange multiple components in a CSS Grid
+    # Note that this component only provides helpers (as the class names and grid-area styles).
+    # However, it does not define the actual Grid which should be done in a separate CSS-file.
+    class GridLayout < Primer::Component
+      status :open_project
+      attr_reader :css_class
+
+      renders_many :areas, lambda { |area_name, component = ::Primer::BaseComponent, **system_arguments, &block|
+        render(Primer::OpenProject::GridLayout::Area.new(@css_class, area_name, component, **system_arguments), &block)
+      }
+
+      # @param css_class [String] The basic css class applied on the grid-container
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(css_class:, **system_arguments)
+        super
+
+        @system_arguments = system_arguments
+        @css_class = css_class
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          css_class
+        )
+      end
+
+      def render?
+        areas.any?
+      end
+    end
+  end
+end

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDASF,CAHE,4BARF,YASI,eAEJ,CADE,CAGF,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/open_project/page_header.pcss

@@ -7,6 +7,10 @@
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
+
+  @media (max-width: 767.98px) {
+    border-bottom: 0;
+  }
 }
 
 .PageHeader-title {

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

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.pcss

@@ -43,3 +43,5 @@
 
 /* OP specifics */
 @import "./open_project/page_header.pcss";
+@import "./open_project/drag_handle.pcss";
+@import "./open_project/border_grid.pcss";

data/app/components/primer/primer.ts

@@ -6,7 +6,7 @@ import './anchored_position'
 import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
-import './alpha/nav_list'
+import './beta/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/helpers/primer/form_helper.rb

@@ -19,5 +19,15 @@ module Primer
         &block
       )
     end
+
+    def inline_form(*args, &block)
+      Primer::Forms.inline_form(*args, &block)
+    end
+
+    def render_inline_form(*args, &block)
+      # rubocop:disable GitHub/RailsViewRenderLiteral
+      render(inline_form(*args, &block))
+      # rubocop:enable GitHub/RailsViewRenderLiteral
+    end
   end
 end

data/lib/primer/deprecations.yml

@@ -5,6 +5,26 @@
 # See 'docs/contributors/deprecations.md' for information on configuration options.
 
 deprecations:
+  - component: "Primer::Alpha::NavList::Divider"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Divider"
+
+  - component: "Primer::Alpha::NavList::Item"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Item"
+
+  - component: "Primer::Alpha::NavList::Heading"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Heading"
+
+  - component: "Primer::Alpha::NavList::Group"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Group"
+
+  - component: "Primer::Alpha::NavList"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList"
+
   - component: "Primer::Alpha::AutoComplete"
     autocorrect: true
     replacement: "Primer::Beta::AutoComplete"

data/lib/primer/forms/check_box_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/dsl/check_box_group_input.rb

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class CheckBoxGroupInput < Input
-        attr_reader :label, :check_boxes
+        attr_reader :name, :label, :check_boxes
 
         def initialize(name: nil, label: nil, **system_arguments)
           @name = name
@@ -21,10 +21,6 @@ module Primer
           CheckBoxGroup.new(input: self)
         end
 
-        def name
-          nil
-        end
-
         def type
           :check_box_group
         end

data/lib/primer/forms/dsl/check_box_input.rb

@@ -26,6 +26,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # check boxes cannot be invalid, as both checked and unchecked are valid states
+        def valid?
+          true
+        end
+
         def to_component
           CheckBox.new(input: self)
         end

data/lib/primer/forms/dsl/radio_button_input.rb

@@ -17,6 +17,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # radio buttons cannot be invalid, as both selected and unselected are valid states
+        def valid?
+          true
+        end
+
         def to_component
           RadioButton.new(input: self)
         end

data/lib/primer/forms/form_control.html.erb

@@ -9,10 +9,7 @@
       <% end %>
     <% end %>
     <%= content %>
-    <%= content_tag(:div, **@input.validation_arguments) do %>
-      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
-    <% end %>
+    <%= render(ValidationMessage.new(input: @input)) %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>
 <% else %>

data/lib/primer/forms/radio_button_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/utils.rb

@@ -15,6 +15,8 @@ module Primer
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
       def const_source_location(class_name)
+        return nil unless class_name
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 

data/lib/primer/forms/validation_message.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:div, **@input.validation_arguments) do %>
+  <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>

data/lib/primer/forms/validation_message.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ValidationMessage < BaseComponent
+      attr_reader :input
+
+      def initialize(input:)
+        @input = input
+      end
+    end
+  end
+end

data/lib/primer/forms.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    def self.inline_form(builder, base = nil, &block)
+      base ||= defined?(ApplicationForm) ? ApplicationForm : Primer::Forms::Base
+
+      klass = Class.new(base) do
+        form(&block)
+      end
+
+      klass.new(builder)
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -73,6 +73,10 @@ module Primer
         Primer::Alpha::NavList::Item => { js: true, examples: false },
         Primer::Alpha::NavList::Group => { js: true, examples: false },
 
+        Primer::Beta::NavList => { js: true },
+        Primer::Beta::NavList::Item => { js: true, examples: false },
+        Primer::Beta::NavList::Group => { js: true, examples: false },
+
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own
         Primer::Alpha::ActionList => { js: true, examples: false },

data/previews/primer/alpha/check_box_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-check-group",
         label: "I would go into battle with:",
         caption: "Qa'pla!",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -41,6 +44,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::CheckBoxGroup.new(validation_message: "Please choose at least one", name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard4")
+          component.check_box(label: "Hikaru Sulu", value: "sulu4")
+          component.check_box(label: "Kathryn Janeway", value: "janeway4")
+          component.check_box(label: "Benjamin Sisko", value: "sisko4")
+        end
+      end
+
       # @!group Options
       # @snapshot
       #

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

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_header(show_divider: show_divider, variant: header_variant) %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -60,6 +60,23 @@ module Primer
         end
       end
 
+      # @label With Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param header_variant [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_header(title: "Test Dialog", subtitle: nil, header_variant: :medium, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               header_variant: header_variant,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
       # @label With Footer
       #
       # @param title [String] text

data/previews/primer/alpha/overlay_preview.rb

@@ -165,7 +165,7 @@ module Primer
       end
 
       # @label In an ActionMenu
-      def in_an_action_menu()
+      def in_an_action_menu
         render_with_template(locals: {})
       end
 

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-radio-group",
         label: "Question: what kind of bear is best?",
         caption: "There are basically two schools of thought",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -40,6 +43,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::Alpha::RadioButtonGroup.new(validation_message: "Please select an option", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears")
+          component.radio_button(label: "Beets", value: "beets")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg")
+        end
+      end
+
       # @!group Options
       #
       # @label With caption

data/previews/primer/alpha/radio_button_preview.rb

@@ -51,7 +51,7 @@ module Primer
       # @label Checked
       # @snapshot
       def checked
-        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true))
       end
 
       # @label Visually hidden label

data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb

@@ -0,0 +1,21 @@
+ 
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+    <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      <% menu.with_show_button(classes: "rounded-right-0 border-right-0") { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Filter" } %>
+      <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      <% menu.with_item(label: "Resolve") %>
+    <% end %>
+  <% end %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_leading_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-right-0 border-right-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>