Add label_wrap param to Beta::Button (#2751)

Co-authored-by: Jon Rohan <[email protected]>
Co-authored-by: jonrohan <[email protected]>

.changeset/orange-flowers-rest.md

@@ -0,0 +1,7 @@
+---
+"@primer/view-components": patch
+---
+
+- Add `label_wrap` param to `Beta::Button`
+- Bug fix: text overflows in SegmentedControl instead of ellipses 
+

app/components/primer/alpha/segmented_control.pcss

@@ -123,6 +123,7 @@
     font-weight: var(--base-text-weight-normal);
     border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
     padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
+    min-width: fit-content;
 
     &:focus-visible {
       outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
@@ -133,6 +134,18 @@
   & .Button--invisible.Button--invisible-noVisuals .Button-label {
     color: var(--button-default-fgColor-rest);
   }
+
+  & .Button-content {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+
+  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
+  & .Button-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 /* fullWidth */

app/components/primer/beta/button.pcss

@@ -160,6 +160,43 @@ summary.Button {
   width: 100%;
 }
 
+/* allow button label text to wrap */
+
+.Button--labelWrap {
+  min-width: fit-content;
+  height: unset;
+  min-height: var(--control-medium-size);
+
+  & .Button-content {
+    flex: 1 1 auto;
+    align-self: stretch;
+    padding-block: calc(var(--control-medium-paddingBlock) - 2px);
+  }
+
+  & .Button-label {
+    white-space: unset;
+  }
+
+  &.Button--small {
+    height: unset;
+    min-height: var(--control-small-size);
+
+    & .Button-content {
+      padding-block: calc(var(--control-small-paddingBlock) - 2px);
+    }
+  }
+
+  &.Button--large {
+    height: unset;
+    min-height: var(--control-large-size);
+    padding-inline: var(--control-large-paddingInline-spacious);
+
+    & .Button-content {
+      padding-block: calc(var(--control-large-paddingBlock) - 2px);
+    }
+  }
+}
+
 /* variants */
 
 /* primary */

app/components/primer/beta/button.rb

@@ -101,6 +101,7 @@ class Button < Primer::Component
       # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
+      # @param label_wrap [Boolean] Whether or not the button label text wraps and the button height expands.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         base_button_class: Primer::Beta::BaseButton,
@@ -109,11 +110,13 @@ def initialize(
         block: false,
         align_content: DEFAULT_ALIGN_CONTENT,
         disabled: false,
+        label_wrap: false,
         **system_arguments
       )
         @base_button_class = base_button_class
         @scheme = scheme
         @block = block
+        @label_wrap = label_wrap
 
         @system_arguments = system_arguments
         @system_arguments[:disabled] = disabled
@@ -133,7 +136,8 @@ def initialize(
           SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
           SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
           "Button",
-          "Button--fullWidth" => @block
+          "Button--fullWidth" => @block,
+          "Button--labelWrap" => @label_wrap
         )
       end
 

previews/primer/beta/button_preview.rb

@@ -21,6 +21,7 @@ class ButtonPreview < ViewComponent::Preview
       # @param inactive toggle
       # @param align_content select [center, start]
       # @param tag select [a, summary, button]
+      # @param label_wrap toggle
       def playground(
         scheme: :default,
         size: :medium,
@@ -29,7 +30,8 @@ def playground(
         align_content: :center,
         tag: :button,
         disabled: false,
-        inactive: false
+        inactive: false,
+        label_wrap: false
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -39,7 +41,8 @@ def playground(
                  align_content: align_content,
                  tag: tag,
                  disabled: disabled,
-                 inactive: inactive
+                 inactive: inactive,
+                 label_wrap: label_wrap
                )) do |_c|
           "Button"
         end
@@ -194,6 +197,26 @@ def full_width(
         end
       end
 
+      # @label Label wrap
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param label_wrap toggle
+      # @snapshot
+      def label_wrap(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        label_wrap: true
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               label_wrap: label_wrap
+                             })
+      end
+
       # @label Link as button
       # @param scheme select [default, primary, danger, invisible, link]
       # @param size select [small, medium]

previews/primer/beta/button_preview/label_wrap.html.erb

@@ -0,0 +1,9 @@
+<div style="width: 200px;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: scheme,
+      size: size,
+      label_wrap: label_wrap
+  )) do %>
+    This button has a long label and will wrap
+  <% end %>
+</div>

static/classes.json

@@ -185,6 +185,9 @@
   "Button--invisible": [
     "Primer::Beta::Button"
   ],
+  "Button--labelWrap": [
+    "Primer::Beta::Button"
+  ],
   "Button--large": [
     "Primer::Beta::Button"
   ],