Improve style of tag input type in submission form

[alanorth]

Description

Improve the style of the tag input type in the submission form by adding a subtle rounded border similar to other input fields. Without some style to differentiate the input field it is not clear where the text field is unless you are an experienced user who already knows.

Instructions for Reviewers

Please add a more detailed description of the changes made by your PR. At a minimum, providing a bulleted list of changes in your PR is helpful to reviewers.

List of changes in this PR:

• Use the border and rounded Bootstrap border helper classes on tag input elements

Video before:

tag-input-before.mp4

Video after:

tag-input-after.mp4

Include guidance for how to test or review your PR. This may include: steps to reproduce a bug, screenshots or description of a new feature, or reasons behind specific changes.

Test the DSpace 7 submission form with a tag input type, for example the "Subject Keywords" field in the default submission form. Make sure that the submission form works as expected and that the only change is the new style.

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using yarn lint
• My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[atarix83]

thanks @alanorth for this PR.

I taken a look and in my opinion is not the best solution in term of look and feel. On the other hand i can understand the reasons that led to this PR. So i'd propose a similar solution where the border are visible only on mouse hover. something linke the following

DSpace.Repository.__.Edit.Submission.mp4

@tdonohue @artlowel I'd appreciate you opinion on this topic

[alanorth]

Thanks for the review @atarix83. The main problem I want to solve is to make the field more obvious. We have hundreds of people submitting items to our repository and they are confused with this tag input field because it is not visually distinguished until it is active. My approach was to use the same style as other input fields, though the first one is ugly because of the spacing of the placeholder text.

[tdonohue]

@alanorth and @atarix83 : I agree with the idea behind this PR, but I also agree that "as-is" this PR needs a bit more work.

I'm OK with having the box appear immediately (the same as a text input field, like "Publisher" or "Author"), but the style of the "Subject Keywords" field should also match those other fields. Namely...

1. The new border of "Subject Keywords" appears thinner than all other fields
2. The "placeholder" text is misaligned
3. When clicking on the "Subject Keywords" field it does not get focus (highlighted). Try clicking on "Abstract" or "Author" and you'll see the entire field is highlighted.
4. (Ideally - not required) It'd also be nice to apply these styles via a CSS class, or use the tag-input class that already exists. I'd rather not have to hardcode "rounded" or similar in the HTML template. It'd be better to apply this via CSS so that other sites can modify it easier if they wish to do so.

So, I agree that this "Subject Keywords" text field should appear similar to other fields, but I feel this current PR needs more work before it can be merged.