fix: refine arrowStyles CSS
#1812
Conversation
|
Bummer. 😢 Probably due to pixel rounding, there's a tiny gap on low-res screen at zoom 100% with
|
| @@ -54,65 +36,77 @@ const animationStyles = (position: ArrowPosition, modifier: string) => { | |||
|
|
|||
| const positionStyles = (position: ArrowPosition, size: string, inset: string) => { | |||
| const margin = math(`${size} / -2`); | |||
| const placement = math(`${margin} + ${inset}`); | |||
| const placement = math(`${margin} + ${inset} - 1`); | |||
| const _position = math(`${size} + 4`); | |||
There was a problem hiding this comment.
Where does the 4 come from?
Perhaps renaming _position to offset could help better differentiate it from arrow position? 🤷♂️
There was a problem hiding this comment.
Where does the 4 come from?
It was the unit needed to keep consistent with previous as it provided the means to bury a bigger arrow into the base element. TBH I'm not super happy about it.
| * 3. Arrow positioning on the base element. | ||
| */ | ||
| return css` | ||
| &::before { | ||
| ${propertyRadius!}: 100%; /* [1] */ |
| ${propertyRadius!}: 100%; /* [1] */ | ||
| clip-path: ${clipPath}; /* [2] */ | ||
| clip-path: ${clipPath}; /* [1] */ | ||
| ${borderCss}; /* [2] */ | ||
| } | ||
|
|
||
| &::before, | ||
| &::after { |
There was a problem hiding this comment.
We might not even need an ::after after all! 😉 🙌
There was a problem hiding this comment.
We need ::after to retain the box-shadow inheritance. Otherwise, the arrow pokes out un-shadowed. Not terrible, but the original designs wanted the shadow to follow the arrow.
There was a problem hiding this comment.
Totally missed that but after some CSS tweaking I see it now. Thanks!
| border-width: inherit; | ||
| border-style: inherit; | ||
| border-color: transparent; | ||
| border: inherit; | ||
| background-clip: content-box; | ||
| } | ||
|
|
||
| &::after { |
There was a problem hiding this comment.
Same as above. ::after might be superfluous.
Ugh. Nice find. |
|
Closing in favor of #1814 |
Description
Dark mode is highlighting a shadow overcast problem with Garden arrows. This PR update swaps the
::afterborder "peek-through" with the following:borderis inherited on the front side::beforepseudo (box-shadowcontinues to be inherited on the back side::after)nonefor the non-arrow sides of the elementclip-pathdoes the job for all supported browsersThe result is that the arrow must be sized and positioned in order to lay precisely over the base component's border line. All other changes are a result of the need for precision sizing/positioning.
Checklist
design updates will be Garden Designer approved (add the designer as a reviewer)npm start)renders as expected with reversed (RTL) directionrenders as expected with Bedrock CSS (?bedrock)tested for WCAG 2.1 AA accessibility compliance