Added "width" attribute to inputs

- TextField - Select
opf · Nov 9, 2023 · 21bff2a · 21bff2a
1 parent fa2a288
commit 21bff2a
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 5 deletions.
diff --git a/.changeset/added-width-to-inputs.md b/.changeset/added-width-to-inputs.md
@@ -0,0 +1,10 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Added a "width" attribute to control how wide an input is rendered on screen.
+
+It is active for:
+
+- TextField
+- Select
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,6 @@ tmp/
 # Simplecov folder
 coverage/
 demo/public/assets/
+
+# IDE folders
+.idea
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -216,11 +216,36 @@
   gap: var(--base-size-16);
 }
 
+/* widths */
+@define-mixin FormControl-input-width {
+  &.FormControl-full {
+    width: 100%;
+  }
+
+  &.FormControl-wide {
+    width: 72rem;
+  }
+
+  &.FormControl-half {
+    width: 48rem;
+  }
+
+  &.FormControl-narrow {
+    width: 32rem;
+  }
+
+  &.FormControl-slim {
+    width: 16rem;
+  }
+}
+
 /* positioning for leading/trailing items for TextInput */
 .FormControl-input-wrap {
   position: relative;
   display: grid;
 
+  @mixin FormControl-input-width;
+
   & .FormControl-input-leadingVisualWrap {
     position: absolute;
     top: var(--base-size-8);
@@ -479,6 +504,8 @@
   display: grid;
   grid-template-columns: minmax(0, auto) var(--base-size-16);
 
+  @mixin FormControl-input-width;
+
   /* mask allows for background-color to respect themes */
   &::after {
     width: var(--base-size-16);

diff --git a/app/forms/multi_text_field_form.rb b/app/forms/multi_text_field_form.rb
@@ -7,7 +7,8 @@ class MultiTextFieldForm < ApplicationForm
       name: :first_name,
       label: "First name",
       required: true,
-      caption: "That which we call a rose by any other name would smell as sweet."
+      caption: "That which we call a rose by any other name would smell as sweet.",
+      width: :narrow
     )
 
     my_form.separator
@@ -16,7 +17,8 @@ class MultiTextFieldForm < ApplicationForm
       name: :last_name,
       label: "Last name",
       required: true,
-      caption: "Bueller. Bueller. Bueller."
+      caption: "Bueller. Bueller. Bueller.",
+      width: :half
     )
 
     my_form.hidden(

diff --git a/app/forms/select_form.rb b/app/forms/select_form.rb
@@ -3,7 +3,7 @@
 # :nodoc:
 class SelectForm < ApplicationForm
   form do |select_form|
-    select_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
+    select_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true, width: :narrow) do |city_list|
       city_list.option(label: "Lopez Island", value: "lopez_island")
       city_list.option(label: "Bellevue", value: "bellevue")
       city_list.option(label: "Seattle", value: "seattle")

diff --git a/app/forms/single_text_field_form.rb b/app/forms/single_text_field_form.rb
@@ -7,7 +7,8 @@ class SingleTextFieldForm < ApplicationForm
       name: :ultimate_answer,
       label: "Ultimate answer",
       required: true,
-      caption: "The answer to life, the universe, and everything"
+      caption: "The answer to life, the universe, and everything",
+      width: :narrow
     )
   end
 end
diff --git a/lib/primer/forms/dsl/input.rb b/lib/primer/forms/dsl/input.rb
@@ -45,6 +45,15 @@ class Input
         }.freeze
         SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
+        DEFAULT_WIDTH = :full
+        WIDTH_MAPPINGS = {
+          :slim => "FormControl-slim",
+          :narrow => "FormControl-narrow",
+          :half => "FormControl-half",
+          :wide => "FormControl-wide",
+          DEFAULT_WIDTH => "FormControl-full"
+        }
+
         include Primer::ClassNameHelper
 
         attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control, :base_id
@@ -73,6 +82,7 @@ def initialize(builder:, form:, **system_arguments)
           @invalid = @input_arguments.delete(:invalid)
           @full_width = @input_arguments.delete(:full_width)
           @size = @input_arguments.delete(:size)
+          @width = @input_arguments.delete(:width)
 
           # If scope_name_to_model is false, the name of the input for eg. `my_field`
           # will be `my_field` instead of the Rails default of `model[my_field]`.
@@ -226,6 +236,10 @@ def size
           @size ||= SIZE_MAPPINGS.include?(@size) ? @size : DEFAULT_SIZE
         end
 
+        def width
+          @width ||= WIDTH_MAPPINGS.include?(@width) ? @width : DEFAULT_WIDTH
+        end
+
         def validation_messages
           @validation_messages ||=
             if validation_message

diff --git a/lib/primer/forms/select.rb b/lib/primer/forms/select.rb
@@ -14,7 +14,10 @@ def initialize(input:)
         )
 
         @field_wrap_arguments = {
-          class: "FormControl-select-wrap",
+          class: class_names(
+            "FormControl-select-wrap",
+            Primer::Forms::Dsl::Input::WIDTH_MAPPINGS[@input.width]
+          ),
           hidden: @input.hidden?
         }
       end

diff --git a/lib/primer/forms/text_field.rb b/lib/primer/forms/text_field.rb
@@ -23,6 +23,7 @@ def initialize(input:)
           class: class_names(
             "FormControl-input-wrap",
             INPUT_WRAP_SIZE[input.size],
+            Primer::Forms::Dsl::Input::WIDTH_MAPPINGS[@input.width],
             "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
             "FormControl-input-wrap--leadingVisual": @input.leading_visual?
           ),