diff --git a/.changeset/added-width-to-inputs.md b/.changeset/added-width-to-inputs.md new file mode 100644 index 0000000000..949e894265 --- /dev/null +++ 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 index f48032404c..3505ad1055 100644 --- 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 index 49d622d36a..cf716a346c 100644 --- 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 index 7aa198d784..bebab24701 100644 --- 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 index 8cd5b59cf1..3c49e23204 100644 --- 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 index 968316cc82..e346b96e21 100644 --- 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 index d357b5f7aa..f629a02746 100644 --- 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 index 6c76a789f1..4b1b31b421 100644 --- 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 index 1840f92434..8cec9fcf74 100644 --- 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? ),