patternfly-design icon indicating copy to clipboard operation
patternfly-design copied to clipboard

Shadows that are only on one side of a box

Open mcoker opened this issue 1 year ago • 3 comments

Sometimes we want to show a shadow only on one side of a box, on the bottom of a sticky header or top of a sticky footer, or on the right of a vertical nav/sidebar. Our shadows (or at least the ones I checked) show on all sides of a box, even if the main shadow is on one side. Usually this is OK - we can use a "top" shadow on a sticky footer, and whatever the container is for the sticky footer will just cut off the left/right/bottom shadow on the footer box. But depending on where the shadow is used, the excess shadows aren't always cut off.

We have a custom shadow in the sidebar component that applies a bottom shadow to the sidebar panel on narrow screens when it's above the sidebar content. The shadow was modified so that it only applies to the bottom, because we can't always predictably hide any excess shadows on the top/left/right from our standard shadows. Here's a screenshot of the sidebar shadow:

Screenshot 2024-03-29 at 6 20 05 PM

And here's a screenshot if we remove the custom shadow and use one of the standard "bottom" shadows.

Screenshot 2024-03-29 at 6 19 35 PM

A downside to this is that the shadow doesn't visually extend to the full edges of the side it's applied to.

WDYT - is this worth investigating and supporting these types of shadows and potentially updating some of our uses of directional shadows to use this type of shadow?

mcoker avatar Mar 29 '24 23:03 mcoker

Saw a top-shadow on sticky page sections bleeding through from the use of --pf-t--global--box-shadow--sm--bottom on the section

Screenshot 2024-04-02 at 12 04 45 PM

Updated the shadow color to make it a little more obvious

Screenshot 2024-04-02 at 12 05 24 PM

mcoker avatar Apr 02 '24 18:04 mcoker

cc @lboehling @andrew-ronaldson

mcoker avatar May 20 '24 18:05 mcoker

yeah, let's do this! was noticing this happen in a few sticky demos

lboehling avatar Jun 12 '24 16:06 lboehling

Design token updates to support this: image image

I made these updates in this figma branch. If we're good with these changes, I can merge and create a follow up core/tokens issue to get these in!

@andrew-ronaldson @mcoker

lboehling avatar Sep 17 '24 21:09 lboehling

@lboehling lgtm! 🚀

mcoker avatar Sep 18 '24 02:09 mcoker

merged into main figma file and opened https://github.com/patternfly/design-tokens/issues/89

lboehling avatar Sep 18 '24 17:09 lboehling