🖍 Bento Lightbox: Customizable styles#31565
Conversation
| position: fixed; | ||
| visibility: hidden; | ||
| box-sizing: border-box; | ||
| background-color: rgba(0, 0, 0, 0.9); |
There was a problem hiding this comment.
Weird that we have a background color with transparency. Are we ok with some very bright content seen through?
There was a problem hiding this comment.
I think so, given publishers can change this now. It should be somewhat translucent so end users know there is more content on the page than the lightbox modal they have open - but maybe not necessary if we do not allow it to be open on load. I was actually thinking 0.9 might be too opaque.
| className={classes.lightboxContainWrapper} | ||
| part="lightbox" | ||
| wrapperClassName={`${classes.defaultStyles} ${classes.wrapper}`} | ||
| wrapperStyle={{visibility: 'hidden'}} |
There was a problem hiding this comment.
FYI: this is not great. But I guess we will fix in a followup PRs. Ideally we always set "final" values on the rendering level and modify whatever is needed for animation during the animation side effect.
There was a problem hiding this comment.
Moved to jss wrapper class - verified this is overridden by inline styles applied during animations.
There was a problem hiding this comment.
Still seeing it here. But what I actually want is a little different:
- No
wrapperStyle={{visibility: hidden}}. - No
visibility:hidden(or opposite, onlyvisibility:visible) in JSS. - All animation nuances are applied within the corresponding
useLayoutEffect. E.g. the opening animation starts by setting style tovisibility:hiddenand finishes by setting it tovisible.
Basically, if we disable animation effect - the styles are fully correct from the start.
There was a problem hiding this comment.
Done - however I removed the visibility for the wrapper styles in JSS since it is visible by default. In another PR it could be nice to move some of the style setting callbacks to the doc or to useCallback so they are not defined every time they are used.
| className={classes.lightboxContainWrapper} | ||
| part="lightbox" | ||
| wrapperClassName={`${classes.defaultStyles} ${classes.wrapper}`} | ||
| wrapperStyle={{visibility: 'hidden'}} |
There was a problem hiding this comment.
Still seeing it here. But what I actually want is a little different:
- No
wrapperStyle={{visibility: hidden}}. - No
visibility:hidden(or opposite, onlyvisibility:visible) in JSS. - All animation nuances are applied within the corresponding
useLayoutEffect. E.g. the opening animation starts by setting style tovisibility:hiddenand finishes by setting it tovisible.
Basically, if we disable animation effect - the styles are fully correct from the start.
Partial for #31052