primer_view_components 0.41.0 → 0.42.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c96d27c7589b44364a5dbcd2371bb0360b7fd629371fd224cde69914570055b
-  data.tar.gz: b33fc96b99c510c1efa1c421b20e21d5ce42e575b5b7f58472aef80d86f77c77
+  metadata.gz: 3cecb9c07526e9ed4c595b81ab2407709d46e00be974ce5ea60023f1091ff1c1
+  data.tar.gz: a4d50670d1294e10aaa8d249c87c8bea4d879bd1b9ca3cbe43ca4a082f265784
 SHA512:
-  metadata.gz: d9cc017ed5a8295dcf4576cf9aaa555b618d5e0c1629d09d50fd716aa9313e524ef717e3ad9f906002c060bba2ae7bdece9b026d4aeccce1e7f601cc017a912b
-  data.tar.gz: 3d7eb52d24074091b151573fd63f9324538866559b0b9cf395e9889847d5faa8b0a06cd0283c7cdb71140b109feda1bf13cc39cf8c4f1d6a2d2192024adb5f02
+  metadata.gz: 4d8c7cdb2e70078106522c2fe88a4ea8205dfbc0416a008f5bd8c9005305ea670b767a4ab26b9772392be13107136c26de8e840e999b23368f27d4d5a429072a
+  data.tar.gz: 73cf2a36f12cafabe4cdbfb6af9e720fabccdfcb8fb26eb9a6aeb5e18854e7cf0c6b49274bc03698b335273507d339046314e70a349cdd3a63f5d2126b1fab1c

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 0.42.0
+
+### Minor Changes
+
+- [#3428](https://github.com/primer/view_components/pull/3428) [`1ab1b06`](https://github.com/primer/view_components/commit/1ab1b06509763ea60fc89770754edf06229b4f63) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Create IncludeFragment component. Allow ConditionalWrapper to render components other than BaseComponent
+
+### Patch Changes
+
+- [#3429](https://github.com/primer/view_components/pull/3429) [`6ea9fd5`](https://github.com/primer/view_components/commit/6ea9fd5dc90c1964ab3882faf1733c6b49c80e21) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Create IncludeFragment linter to migrate <include-fragment> uses
+
 ## 0.41.0
 
 ### Minor Changes

data/app/components/primer/alpha/action_menu.html.erb

@@ -3,7 +3,7 @@
     <%= render(@overlay) do |overlay| %>
       <% overlay.with_body(padding: :none) do %>
         <% if @src.present? %>
-          <include-fragment src="<%= @src %>" loading="<%= preload? ? "eager" : "lazy" %>" data-target="action-menu.includeFragment">
+          <%= render(Primer::Alpha::IncludeFragment.new(src: @src, loading: preload? ? :eager : :lazy, "data-target": "action-menu.includeFragment")) do %>
             <%= render(Primer::Alpha::ActionMenu::List.new(id: "#{@menu_id}-list", menu_id: @menu_id)) do |list| %>
               <% list.with_item(
                 aria: { disabled: true },
@@ -18,7 +18,7 @@
                 <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }) %>
               <% end %>
             <% end %>
-          </include-fragment>
+          <% end %>
         <% else %>
           <%= render(@list) %>
         <% end %>

data/app/components/primer/alpha/include_fragment.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `IncludeFragment` to load HTML elements from the server.
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class IncludeFragment < Primer::Component
+      status :alpha
+
+      # @param src [String] The URL  from which to retrieve an HTML element fragment.
+      # @param loading [Symbol] <%= one_of([:lazy, :eager]) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src: nil, loading: :eager, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "include-fragment"
+        @system_arguments[:loading] = loading
+        @system_arguments[:src] = src
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/alpha/select_panel.html.erb

@@ -62,7 +62,7 @@
           )) do %>
             <div id="<%= @body_id %>">
               <% if @src.present? %>
-                <%= render(Primer::ConditionalWrapper.new(condition: @fetch_strategy == :eventually_local, tag: "include-fragment", data: { target: "select-panel.includeFragment" }, src: @src, loading: preload? ? "eager" : "lazy", accept: "text/fragment+html")) do %>
+                <%= render(Primer::ConditionalWrapper.new(condition: @fetch_strategy == :eventually_local, component: Primer::Alpha::IncludeFragment, data: { target: "select-panel.includeFragment" }, src: @src, loading: preload? ? "eager" : "lazy", accept: "text/fragment+html")) do %>
                   <%= render(Primer::BaseComponent.new(
                     tag: :div,
                     id: "#{@panel_id}-list",

data/app/components/primer/conditional_wrapper.rb

@@ -1,14 +1,16 @@
 # frozen_string_literal: true
 
 module Primer
-  # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
-  # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
+  # Conditionally renders a component around the given content. If the given condition
+  # is true, the component will render around the content. If the condition is false, only
   # the content is rendered.
   class ConditionalWrapper < Primer::Component
-    # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
-    # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
-    def initialize(condition:, **base_component_arguments)
+    # @param condition [Boolean] Whether or not to wrap the content in a component.
+    # @param component [Class] The component class to use as a wrapper, defaults to `Primer::BaseComponent`
+    # @param base_component_arguments [Hash] The arguments to pass to the component.
+    def initialize(condition:, component: Primer::BaseComponent, **base_component_arguments)
       @condition = condition
+      @component = component
       @base_component_arguments = base_component_arguments
       @trim = !!@base_component_arguments.delete(:trim)
     end
@@ -18,7 +20,7 @@ module Primer
         return @trim ? trimmed_content : content
       end
 
-      BaseComponent.new(trim: @trim, **@base_component_arguments).render_in(self) { content }
+      @component.new(trim: @trim, **@base_component_arguments).render_in(self) { content }
     end
   end
 end

data/lib/primer/view_components/linters/argument_mappers/include_fragment.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require_relative "base"
+
+module ERBLint
+  module Linters
+    module ArgumentMappers
+      # Maps attributes in the include-fragment element to arguments for the IncludeFragment component.
+      class IncludeFragment < Base
+        DEFAULT_TAG = "include-fragment"
+        ATTRIBUTES = %w[loading src accept role preload tabindex autofocus hidden].freeze
+
+        def attribute_to_args(attribute)
+          attr_name = attribute.name
+
+          { attr_name.to_sym => erb_helper.convert(attribute) }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative "base_linter"
+require_relative "autocorrectable"
+require_relative "argument_mappers/include_fragment"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML include-fragment is used instead of the component.
+    class IncludeFragmentComponentMigrationCounter < BaseLinter
+      include Autocorrectable
+
+      TAGS = %w[include-fragment].freeze
+      REQUIRED_ARGUMENTS = [].freeze
+      MESSAGE = "We are migrating include-fragment to use [Primer::Alpha::IncludeFragment](https://primer.style/view-components/lookbook/inspect/primer/alpha/include_fragment/default), please try to use that instead of raw HTML."
+      ARGUMENT_MAPPER = ArgumentMappers::IncludeFragment
+      COMPONENT = "Primer::Alpha::IncludeFragment"
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 41
+      MINOR = 42
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/include_fragment_preview.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module Alpha
+    # @label IncludeFragment
+    class IncludeFragmentPreview < ViewComponent::Preview
+      # @label Playground
+      # @param loading select [eager, lazy]
+      def playground(loading: :eager)
+        render(Primer::Alpha::IncludeFragment.new(loading: loading, src: UrlHelpers.include_fragment_deferred_path)) { "Loading..." }
+      end
+
+      # @label Default options
+      def default
+        render(Primer::Alpha::IncludeFragment.new(loading: :eager, src: UrlHelpers.include_fragment_deferred_path)) { "Loading..." }
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.41.0
+  version: 0.42.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-11 00:00:00.000000000 Z
+date: 2025-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -201,6 +201,7 @@ files:
 - app/components/primer/alpha/hellip_button.rb
 - app/components/primer/alpha/hidden_text_expander.rb
 - app/components/primer/alpha/image.rb
+- app/components/primer/alpha/include_fragment.rb
 - app/components/primer/alpha/layout.css
 - app/components/primer/alpha/layout.css.json
 - app/components/primer/alpha/layout.css.map
@@ -681,6 +682,7 @@ files:
 - lib/primer/view_components/linters/argument_mappers/conversion_error.rb
 - lib/primer/view_components/linters/argument_mappers/flash.rb
 - lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb
+- lib/primer/view_components/linters/argument_mappers/include_fragment.rb
 - lib/primer/view_components/linters/argument_mappers/label.rb
 - lib/primer/view_components/linters/argument_mappers/system_arguments.rb
 - lib/primer/view_components/linters/autocorrectable.rb
@@ -699,6 +701,7 @@ files:
 - lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb
 - lib/primer/view_components/linters/helpers/rubocop_helpers.rb
 - lib/primer/view_components/linters/helpers/rule_helpers.rb
+- lib/primer/view_components/linters/include_fragment_component_migration_counter.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb
 - lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
 - lib/primer/view_components/linters/migrations/iconbutton_component.rb
@@ -786,6 +789,7 @@ files:
 - previews/primer/alpha/form_control_preview/playground.html.erb
 - previews/primer/alpha/hellip_button_preview.rb
 - previews/primer/alpha/hidden_text_expander_preview.rb
+- previews/primer/alpha/include_fragment_preview.rb
 - previews/primer/alpha/layout_preview.rb
 - previews/primer/alpha/menu_preview.rb
 - previews/primer/alpha/menu_preview/default.html.erb