fix(shell-panel): Fix visual issues in displayMode="float-all"
#11410
Conversation
github-actions
bot
added
the
bug
macandcheese
added
the
pr ready for visual snapshots
macandcheese
requested review from
jcfranco,
driskull,
josercarcamo,
SkyeSeitz and
ashetland
macandcheese
added
pr ready for visual snapshots
macandcheese
added
pr ready for visual snapshots
packages/calcite-components/src/components/shell-panel/shell-panel.scss
Outdated
Show resolved
Hide resolved
| .float-all { | ||
| max-block-size: var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem)); | ||
| box-shadow: var(--calcite-shadow-sm); | ||
| border-radius: var(--calcite-corner-radius-round); |
There was a problem hiding this comment.
Does this need a token for customization?
There was a problem hiding this comment.
Added this in - it exposes what may be a common thing across our components - unintentional clipping of children that don't have similar corner-radius adjustments. A more severe example of what I mentioned in the title post:
Lot of ways to solve this...
-
Pass responsibility to user to set corner-radius overrides as needed on slotted Panel, Action Bar, Action, etc. (I think they can do this with current functionality, could double check the internally-rendered expand button).
-
Look to solve this somehow across components through some kind of clipping / overflow settings. I'm not sure if it's possible (or desirable) - and seems like it'd be challenging to work with how many "levels" of nesting we have where children need to validly escape.
-
Add a handful of internal custom css properties for action-group and action-bar. We’d then need to conditionally set the corner radius of those components, and slotted panels - for what would probably be a dozen or more configurations of: Shell Panel position, layout, if the Actions are slotted directly in Action Bar vs. in groups, etc.
I kind of lean towards the first one, for simplicities sake - but curious if this has cropped up anywhere else yet.
There was a problem hiding this comment.
I see this happen in Popover and also in Dialog (see the top corners)
Spoke to @jcfranco about this a while ago and he had similar concerns you outline in your second bullet, but also thought it could be worth looking into. Might adversely affect floating ui slotted into a Dialog...
There was a problem hiding this comment.
Yeah, we could approach it in a few ways, all have pros / cons. For now, I think I'll leave this as-is, since it's not unique to Shell Panel, and should be done in a way that addresses all patterns like this.
There was a problem hiding this comment.
@jcfranco ok to proceed for now (with option 1 - not handling this from Shell Panel for now) ?
packages/calcite-components/src/components/shell-panel/shell-panel.scss
Outdated
Show resolved
Hide resolved
|
Screenshots are looking good, but the sizing behavior is weird. The edge floats in space. |
|
I see we removed that requirement from the issue, so maybe this can be ignored in this pr? |
Yeah, the original issue asked to remove, but that would be breaking - I think we should leave as-is, since this PR doesn't change that behavior. This issue should be additive improvement: #5652 |
macandcheese
added
pr ready for visual snapshots
Related Issue: #9926
Summary
Adds some styling to address the visual issues in Shell Panel.
Note - I went down the rabbit hole of trying to conditionally pass corner-radius to slotted Actions, Panels, etc. - it would involve a lot of internal tokens and conditional states to handle various arrangements of components. This could be something to look at in the future but I'm not sure we want to handle this here.