diff --git a/.changeset/curvy-onions-add.md b/.changeset/curvy-onions-add.md new file mode 100644 index 0000000000..447fec93ed --- /dev/null +++ b/.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 diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png index 94588fd91d..8a4780b874 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png index f097a1475e..58b3b55774 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png index 94588fd91d..8a4780b874 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png index f097a1475e..58b3b55774 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png index 14a599589f..cd4a39b12d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png index 6df284b022..569dfc274e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png index 412cc604fc..7aba497b1d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png index 4bb340095d..9502b59cff 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png index 250e175bca..d66f71be4c 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png index 250e175bca..d66f71be4c 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png index 0a2c49cd25..a07e13a84a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png index 2b6acb9e10..93e11befd9 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/default.png new file mode 100644 index 0000000000..7247da68fc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/focused.png new file mode 100644 index 0000000000..35d445952d Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/not_full_width/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png index 83e9548f5f..14c26c9f19 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png index ad8edbc067..002cb72b65 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png index b071214599..4dc68a34fe 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png index 760570db2e..14d6754d30 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/default.png index f9f8d2a30f..ee38689490 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/focused.png index 5f00830abd..6451977cfd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png index 7c8ea64c16..b03775f52e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png index 7c8ea64c16..b03775f52e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/default.png index 15976e1741..904bd670f7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/focused.png index cc0c9f2df7..20f7c3a449 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/invalid/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/default.png new file mode 100644 index 0000000000..188889f4eb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/focused.png new file mode 100644 index 0000000000..6fbbde5259 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/not_full_width/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/default.png index 9e698b67d1..83909601f4 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/focused.png index 9f5086bfe9..03eb37ae6f 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_caption/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/default.png index 97acbdfdf6..eb2cf6234f 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/focused.png index d8b8885fa4..e592b2923b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_validation_message/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/default.png index b3082c07f7..89ed21f1d0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/focused.png index bab338285a..cb2dca3a28 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png index 47c6d3ea16..72a66eacee 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png index 47c6d3ea16..72a66eacee 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png index 607d990e80..ce3d469278 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png index 9a9a8d8704..346b47ddfd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/default.png index 13eb041658..f6ae585542 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/focused.png index 9ca7c1130f..21d195805e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/invalid/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/default.png index b3082c07f7..89ed21f1d0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/focused.png index bab338285a..cb2dca3a28 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/monospace/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/default.png new file mode 100644 index 0000000000..66bddae30c Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/focused.png new file mode 100644 index 0000000000..1969af2aca Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/not_full_width/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/default.png index 4ff9a43358..e18639b0ae 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/focused.png index 8b190b4098..6a1b554bae 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/show_clear_button/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/default.png index 46b30129c3..0d168cfafe 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/focused.png index 5aa5e62998..ba0d5b24f1 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_caption/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/default.png index 8fcc2f946b..999f699008 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/focused.png index f7b190faff..d46ca7e905 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_leading_visual/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/default.png index 20d20758bb..daddff6f21 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/focused.png index 39d9a7d656..065460a80c 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_placeholder/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/default.png index 192960e8a1..3f34c4a4f6 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/focused.png index 0d60ebd322..57810f2f78 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_validation_message/focused.png differ diff --git a/lib/primer/forms/dsl/input.rb b/lib/primer/forms/dsl/input.rb index 8203dd3a8a..d1280e8aca 100644 --- a/lib/primer/forms/dsl/input.rb +++ b/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` diff --git a/lib/primer/forms/form_control.rb b/lib/primer/forms/form_control.rb index 2cbc73df6a..e36f305e6e 100644 --- a/lib/primer/forms/form_control.rb +++ b/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? ) } diff --git a/lib/primer/forms/select.html.erb b/lib/primer/forms/select.html.erb index 24a71f23bb..7d63390c55 100644 --- a/lib/primer/forms/select.html.erb +++ b/lib/primer/forms/select.html.erb @@ -3,3 +3,4 @@ <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %> <% end %> <% end %> + diff --git a/previews/primer/alpha/select_preview.rb b/previews/primer/alpha/select_preview.rb index 99f289b834..08886dbe5d 100644 --- a/previews/primer/alpha/select_preview.rb +++ b/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 diff --git a/previews/primer/alpha/text_area_preview.rb b/previews/primer/alpha/text_area_preview.rb index 7bbb273a9a..dd60440115 100644 --- a/previews/primer/alpha/text_area_preview.rb +++ b/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 diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb index 5f1b5230b9..63a91526a8 100644 --- a/previews/primer/alpha/text_field_preview.rb +++ b/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