fix: [M3-7002] Topbar Search fixes #9534
Conversation
abailly-akamai
force-pushed
the
fix-M3-7002
branch
from
6ca9bf8 to
d550566
Compare
| @@ -13,6 +13,7 @@ export const SelectPlaceholder = (props: Props) => { | |||
| data-qa-multi-select={ | |||
| props.isMulti ? props.selectProps.placeholder : false | |||
| } | |||
| className="select-placeholder" | |||
There was a problem hiding this comment.
Improvement: in order to target the placeholder opacity on active search (on focus).
| @@ -34,9 +35,11 @@ export const Tag = (props: TagProps) => { | |||
| // If maxLength is set, truncate display to that length. | |||
| const _label = maxLength ? truncateEnd(label, maxLength) : label; | |||
|
|
|||
| const tagProps = omit(props, ['asSuggestion', 'closeMenu']); | |||
|
|
|||
There was a problem hiding this comment.
In order to prevent forwarding two props responsible for console errors
| @@ -20,6 +20,9 @@ const useStyles = makeStyles((theme: Theme) => ({ | |||
| width: '100%', | |||
| }, | |||
| labelCell: { | |||
| '& a': { | |||
| display: 'inline-block', | |||
| }, | |||
There was a problem hiding this comment.
Styling the search row label link so it's not 100% with in the table cell. One should click on the title as expected to access the entity. this fix can help preventing clicking on en entity unexpectedly.
| paddingBottom: 2, | ||
| paddingTop: 2, | ||
| }, | ||
| paddingBottom: '2px !important', |
There was a problem hiding this comment.
adding a tiny bit of room to the table cell while reducing the description for a better feel when having a lot of search results especially.
| @@ -231,7 +231,7 @@ export const SearchLanding: React.FC<CombinedProps> = (props) => { | |||
| _privateImages, | |||
| regions, | |||
| nodebalancers, | |||
| searchableLinodes, | |||
| linodes, | |||
There was a problem hiding this comment.
This was creating the circular dep. linodes is preferable to be used as dependency here.
| '& .select-placeholder': { | ||
| opacity: 0.5, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
trying to improve slightly the experience by reducing the opacity of the placeholder on focus - this placeholder is a bit different having more contrast and it feels a bit like a value so I think this makes it more obvious since there's more contrast with the cursor when focusing on the field now
| Before | After |
|---|---|
 |
 |
| setValue({ label: q, value: q }); | ||
| } | ||
| }, [history.location]); | ||
|
|
There was a problem hiding this comment.
Fixing the search field value not being reset after a successful search and navigating away from the search results page
| @@ -333,6 +345,7 @@ export const SearchBar = (props: CombinedProps) => { | |||
| openMenuOnFocus={false} | |||
| options={finalOptions} | |||
| styles={selectStyles} | |||
| value={value} | |||
There was a problem hiding this comment.
Controlling to the field to be able to display and clear the value as needed
… main search field
| overflow: 'visible', | ||
| }, | ||
| fontSize: '0.875rem', |
There was a problem hiding this comment.
matching placeholder & field value font sizes, which was a bit odd when starting typing
bnussman-akamai
added
Add'tl Approval Needed
bnussman-akamai
added
Approved
* fix: [M3-7002] fix circular dep * fix: [M3-7002] focus behavior * fix: [M3-7002] styling improvements * fix: [M3-7002] styling improvements 2 * fix: [M3-7002] cleanup * fix: [M3-7002] moar cleanup * Added changeset: Issues with circular dependency and blur bhaviors on main search field
Description 📝
This PR addresses a few issues with the top search bar and the search landing page. Some (the circular dependency for instance) seem to be newer degradations while the others may have never been addressed or prioritized.
The task involves improvements to the basic search (not the dropdown search results who remained untouched).
Notably, the improvements made to the UX are related to the state of the search field value while interacting with the search field and navigating the application.
Please see the self review for details about the fixes
How to test 🧪