Allow :link Button scheme text label to wrap (#2750)

Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Apr 5, 2024 · ba87524 · ba87524
1 parent 6d0e233
commit ba87524
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 0 deletions.
diff --git a/.changeset/swift-fans-march.md b/.changeset/swift-fans-march.md
@@ -0,0 +1,6 @@
+---
+"@primer/view-components": patch
+---
+
+Allow `:link` Button scheme text label to wrap
+
diff --git a/...apshots.test.ts-snapshots/primer/beta/button/link_scheme_label_wrap/default.png b/...apshots.test.ts-snapshots/primer/beta/button/link_scheme_label_wrap/default.png
diff --git a/...apshots.test.ts-snapshots/primer/beta/button/link_scheme_label_wrap/focused.png b/...apshots.test.ts-snapshots/primer/beta/button/link_scheme_label_wrap/focused.png
diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss
@@ -293,6 +293,7 @@ summary.Button {
   border: none;
   height: unset;
   padding: 0;
+  min-width: fit-content;
 
   &:hover:not(:disabled, .Button--inactive) {
     text-decoration: underline;
@@ -310,6 +311,10 @@ summary.Button {
     border-color: transparent;
     fill: var(--control-fgColor-disabled);
   }
+
+  & .Button-label {
+      white-space: unset;
+  }
 }
 
 /* danger */

diff --git a/previews/primer/beta/button_preview.rb b/previews/primer/beta/button_preview.rb
@@ -361,6 +361,12 @@ def inactive(
           "Button"
         end
       end
+
+      # @label Link scheme with long label
+      # @snapshot
+      def link_scheme_label_wrap
+        render_with_template(locals: {})
+      end
     end
   end
 end
diff --git a/previews/primer/beta/button_preview/link_scheme_label_wrap.html.erb b/previews/primer/beta/button_preview/link_scheme_label_wrap.html.erb
@@ -0,0 +1,8 @@
+<div style="width: 200px;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: :link,
+      size: :medium,
+  )) do %>
+    This is a button styled to look like a link that wraps like a link
+  <% end %>
+</div>