Summary

Fix spacing and alignment issues within the search fields.

Review Request #13920 — Created June 3, 2024 and submitted June 3, 2024, 9:08 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

The styling for rb-c-search-field now uses a more appropriate font
size for the FontAwesome-based icon, and a more appropriate spacing
between it and the text.

The issues in the Filter field were due to the lack of a type=
attribute, and the lack of default styling for an <input> without
type=. As fixing this globally for all type-less inputs would alter
precedence rules for other styles, I've opted not to touch those for
now. Instead, we now set the Filter field to type="search" explicitly.

Testing Done

Tested in light and dark modes for both of these fields.

Commits

Summary	ID
Fix spacing and alignment issues within the search fields. The Search field at the top of the page and the Filter field on the New Review Request page both had their own visual alignment and spacing issues, in part due to altered styling in Ink and bad browser defaults. The styling for `rb-c-search-field` now uses a more appropriate font size for the FontAwesome-based icon, and a more appropriate spacing between it and the text. The issues in the Filter field were due to the lack of a `type=` attribute, and the lack of default styling for an `<input>` without `type=`. As fixing this globally for all type-less inputs would alter precedence rules for other styles, I've opted not to touch those for now. Instead, we now set the Filter field to `type="search"` explicitly.	3bddd24f73bf957e408ab5d9217ee4cfd6d0eee3

Summary

Fix spacing and alignment issues within the search fields.

The Search field at the top of the page and the Filter field on the New Review Request page both had their own visual alignment and spacing issues, in part due to altered styling in Ink and bad browser defaults. The styling for `rb-c-search-field` now uses a more appropriate font size for the FontAwesome-based icon, and a more appropriate spacing between it and the text. The issues in the Filter field were due to the lack of a `type=` attribute, and the lack of default styling for an `<input>` without `type=`. As fixing this globally for all type-less inputs would alter precedence rules for other styles, I've opted not to touch those for now. Instead, we now set the Filter field to `type="search"` explicitly.

3bddd24f73bf957e408ab5d9217ee4cfd6d0eee3

Files

Issues

Description	From	Last Updated
I suspect this is a fontawesome issue, but it does not appear that the search icon is verticall centered. It …	david	June 3, 2024, 4:12 p.m.

flake8 passed.

JSHint passed.

Search field (Revision 1)

The issue has been dropped. Show all issues

I suspect this is a fontawesome issue, but it does not appear that the search icon is verticall centered. It feels like it needs to be bumped up just a bit.

chipx86 June 3, 2024, 4:10 p.m.

It's in part a FontAwesome issue, and in part a browser issue. My first stab at a fix was to move to an SVG for this, but it still fails alignment. The issue is that the placeholder text alignment is not vertically centered, and we have zero control over that fact. It's maintained entirely by the browser. Positioning of this is not allowed by CSS, and so we're kind of stuck on browser behavior, unless we decide to start making per-browser/version shims, which isn't the way forward.

david June 3, 2024, 4:12 p.m.
```
Noted.
```

Ship it!

Status:: Completed
Change Summary:: Pushed to release-7.x (3e9e5fc)