Shadows that are only on one side of a box

[mcoker]

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:

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

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]

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

Updated the shadow color to make it a little more obvious

[mcoker]

cc @lboehling @andrew-ronaldson

[lboehling]

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

[lboehling]

Design token updates to support this:

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

[mcoker]

@lboehling lgtm! 🚀

[lboehling]

merged into main figma file and opened patternfly/design-tokens#89