fix: Allow Breadcrumb items to wrap (#2869)

Co-authored-by: smockle <smockle@users.noreply.github.com>

.changeset/tiny-penguins-roll.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+fix: Allow breadcrumb items to wrap.

app/components/primer/beta/breadcrumbs.pcss

@@ -1,7 +1,6 @@
 .breadcrumb-item {
   display: inline-block;
   margin-left: -0.35em;
-  white-space: nowrap;
   list-style: none;
 
   &::after {

previews/primer/beta/breadcrumbs_preview.rb

@@ -26,6 +26,18 @@ def default(number_of_links: 2)
           end
         end
       end
+
+      # @label WithBetaTruncate
+      # @snapshot
+      def with_beta_truncate
+        render_with_template
+      end
+
+      # @label WithDeprecatedTruncate
+      # @snapshot
+      def with_deprecated_truncate
+        render_with_template
+      end
     end
   end
 end

previews/primer/beta/breadcrumbs_preview/with_beta_truncate.html.erb

@@ -0,0 +1,15 @@
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Beta::Truncate.new) do |truncate| %>
+        <% truncate.with_item(max_width: 135) { text } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb

@@ -0,0 +1,14 @@
+<%# erblint:counter DeprecatedComponentsCounter 1 %>
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Truncate.new(inline: true, max_width: 135)) { text } %>
+    <% end %>
+  <% end %>
+<% end %>