Make text field and other form inputs respect the full_width: option (

#2673)

Co-authored-by: camertron <[email protected]>

.changeset/curvy-onions-add.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Make text field and other form inputs respect the full_width: option

lib/primer/forms/dsl/input.rb

@@ -31,7 +31,7 @@ class Input
         #   @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
 
         # @!macro [new] form_full_width_arguments
-        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container.
+        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
@@ -73,7 +73,7 @@ def initialize(builder:, form:, **system_arguments)
           @caption = @input_arguments.delete(:caption)
           @validation_message = @input_arguments.delete(:validation_message)
           @invalid = @input_arguments.delete(:invalid)
-          @full_width = @input_arguments.delete(:full_width)
+          @full_width = @input_arguments.delete(:full_width) { true }
           @size = @input_arguments.delete(:size)
 
           # If scope_name_to_model is false, the name of the input for eg. `my_field`

lib/primer/forms/form_control.rb

@@ -16,8 +16,7 @@ def initialize(input:, tag: :div, **system_arguments)
             system_arguments[:class],
             system_arguments[:classes],
             "FormControl",
-            "width-full",
-            "FormControl--fullWidth" => @input.full_width?
+            "width-full FormControl--fullWidth" => @input.full_width?
           )
         }
 

lib/primer/forms/select.html.erb

@@ -3,3 +3,4 @@
     <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
   <% end %>
 <% end %>
+

previews/primer/alpha/select_preview.rb

@@ -25,7 +25,7 @@ def playground(
         required: false,
         visually_hide_label: false,
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil
@@ -97,6 +97,17 @@ def full_width
         end
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

previews/primer/alpha/text_area_preview.rb

@@ -23,7 +23,7 @@ def playground(
         caption: "You can trust me, I'm a website",
         required: false,
         visually_hide_label: false,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil
@@ -70,6 +70,12 @@ def full_width
         render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

previews/primer/alpha/text_field_preview.rb

@@ -33,7 +33,7 @@ def playground(
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
         clear_button_id: "my-text-field-clear-button",
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil,
@@ -125,6 +125,12 @@ def full_width
         render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled