Search: match edge fade color with --color-surface variable
#65560
Conversation
matticbot
added
the
[Status] Needs Review
|
This PR does not affect the size of JS and CSS bundles shipped to the user's browser. Generated by performance advisor bot at iscalypsofastyet.com. |
vykes-mac
left a comment
vykes-mac
left a comment
There was a problem hiding this comment.
Works as expected, Tested in the gutenberg fix also.
wojtekn
left a comment
wojtekn
left a comment
There was a problem hiding this comment.
Looks good, works as expected. Note for testing steps - the Gutenberg branch is merged now, so we should use trunk when we prepare base-styles for Calypso for testing purposes.
zaguiini
force-pushed
the
update/search-fade-use-css-variable-as-color
branch
from
3e3b08c to
fb8317b
Compare
|
This PR modifies the release build for editing-toolkit To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-mMA-p2 |
noahtallen
left a comment
noahtallen
left a comment
There was a problem hiding this comment.
Pixel peeping a bit, I see small indents from the right and left elements along the top and bottom edges. I think this was already the case before, though. If it's an easy fix, might be worth adding!
I assume we have to also use #65598 to have the fade-out working correctly!
|
Great catch, @noahtallen! That's fixed, please re-review the PR! |
github-actions
bot
removed
the
[Status] Needs Review
|
It's looking a lot better! I did notice one bug we should probably fix: Screen.Recording.2022-08-08.at.1.21.21.PM.movIf you type in long text, the final characters (and the typing cursor) get hidden and you can't see what you're typing anymore. |
|
I see @noahtallen. It doesn't look like a bug, but definitely needs some love. Could you please create a separate issue for that? |
Proposed Changes
Setting the
--color-surfacevariable in the<Search />component styling doesn't change the color used in the edge fading gradient at the end of the input:This PR fixes that by matching the color of the
--color-surfacevariable in thelong-content-fademixin call:Testing Instructions
Install dependencies and run
yarn workspace @automattic/search run storybook. Check the "With Different Color" story and type a few characters so it overflows the container. The content should fade to the red background instead of white.Pre-merge Checklist
Complete applicable items on this checklist before merging into trunk. Inapplicable items can be left unchecked.
Both the PR author and reviewer are responsible for ensuring the checklist is completed.
Related to #65505 (comment).