Positioning for search utils input close button #1617
Conversation
|
Setting to draft until mitodl/course-search-utils#131 is published and version updated here. |
|
|
||
| type Colors = { | ||
| [Severity in AlertColor]: string | ||
| [_Severity in AlertColor]: string |
There was a problem hiding this comment.
Just out of curiosity, what was this for?
Same question below for _key
There was a problem hiding this comment.
If was seeing an eslint error on the mapped type - a bug perhaps:
'Severity' is defined but never used. Allowed unused vars must match /^_/u.eslint[@typescript-eslint/no-unused-vars](https://typescript-eslint.io/rules/no-unused-vars)
| top: 50%; | ||
| transform: translateY(-50%); | ||
| right: 7px; | ||
| top: 9px; |
There was a problem hiding this comment.
This looks/works fine, so 👍
However, pixels for vertical centering always seem fragile to me. The reason this wasn't working as expected before is shown below
The issues were:
inputhad margin, which affected the content-box height of wrapper. If the margin goes on the wrapper instead, thentop: 50%; transform: translate(-50%)works as expected for centering the button- The button is slightly larger than the SVG.
- This seems to be because the SVG is
display: inline. If you change it to block, the button is same height as SVG. - I don't completely understand how the height of a container with inline contents is computed. If you know or can point me to a good reference, I'd love to understand better.
- I was trying to understand this the other day and ended up here: https://stackoverflow.com/questions/11126685/why-does-container-div-insist-on-being-slightly-larger-than-img-or-svg-content but that didn't really tell me how the container height is calculated, just that it's "different".
- This seems to be because the SVG is
Anyway: If you want to use the percentage approach, (1) put margin on wrapper, (2) make sure button is same size as SVG.
There was a problem hiding this comment.
I've pushed the change to center at 50% - I agree the positioning shouldn't be susceptible to anything that might change the container height.
Also, the facet heading were not centered, for the same reason you pointed out above, in this case the chevron svg was displayed inline. It will be due to line-height being accounted for for inline elements, though as always with css the exact rules are byzantine to me!
What are the relevant tickets?
Description (What does it do?)
Upgrades to latest course-search-utils with expend icon fixes and centers the close icon in the search utils input.
The close positioning issue is in the main branch as well, but this change depends on mitodl/course-search-utils#131, which replaces the Material
<i />icons with Remixicon SVGs.Currently in Prod:
With fix:
and hover:
How can this be tested?
Yarn install and run. Close icon should appear as above.
This issue with the facet search inputs visbile when closed should also be fixed:
Before:
After:
Additional Context
We need to update the
@mitodl/course-search-utilsversion once it's publish (it's currently pointing to the PR branch)