Added "width" attribute to inputs

[apfohl]

https://community.openproject.org/wp/50740

This PR adds a new width attribute to inputs.

There are five possible values:

• xlarge: 96rem
• large: 72rem
• medium: 48rem
• narrow: 32rem
• small: 16rem

I chose these value arbitrarily with some looks at our specified designs. So feel free to suggest others or wait for input from design. We can change them at a later point.

The new attribute is active for:

• TextField
• Select

As I only need these right now. But it super easy to add them to other components as well.

You can use the attribute like this:

class SingleTextFieldForm < ApplicationForm
  form do |my_form|
    my_form.text_field(
      name: :ultimate_answer,
      label: "Ultimate answer",
      required: true,
      caption: "The answer to life, the universe, and everything",
      width: :narrow
    )
  end
end

[changeset-bot]

🦋 Changeset detected

Latest commit: 102a2ee

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@openproject/primer-view-components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[HDinger]

Hi @apfohl

Looks good 👍 As discussed, just some minor remarks:

• Please rename the width names. My suggestion would be to stick to the names Primer uses at other places: narrow, small, medium, large, xlarge and no full. In that. As you said, it may be worth to investigate whether we want to set the resulting classes on the same element as the full_width parameter.
• Please remove the changes to the form examples to minimize potential merge conflicts. Instead you can create a new file and show the examples there.
• In the playground preview of the component, we should add a width paramter to document it. `# @param width [Symbol] select [narrow, small, medium, ...]

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

[HDinger]

The failing test revealed an interesting fact: the autocomplete component already has a width attribute with the options auto, small, medium, large, xlarge, xxlarge . It might make sense to take those over. Unfortunately however, they use that attribute not for the input itself but for the dropdown.. I don't quite know how we want to deal with that. If you want to, we can discuss that later.

[HDinger]

Looks good to me 👍 Can we remove the changes to the Gemfile.lock? Other than that, it is good to merge from my side.