feat(shell-panel): Improve visibility of resizable functionality and allow resizable for all displayMode values by driskull · Pull Request #11983 · Esri/calcite-design-system

driskull · 2025-04-17T21:23:38Z

Related Issue: #5652

Summary

improve resize handle sizing for more space to drag (aligns with sheet component)
allows resizing for all displayMode values
refactor shell-panel to use interact.js for resizing to align with the sheet and dialog components
add dom util getStylePixelValue to convert CSS values to pixels.
- supports px, vw, vh for now since that is what we are taking advantage of
- updates other components to use this util for consistency (sheet/dialog)
- updates tests

…allow resizable for all displayMode values #5652

macandcheese

This is awesome! One of our most frequently requested features - this will help a lot of app use cases.

Some small style issues and a request to prevent default on Home / End - otherwise looks good.

macandcheese · 2025-04-21T17:40:03Z

+ * @param {string} value - The CSS style value to convert (e.g., "10px", "50vw", "30vh").
+ * @returns {number} The pixel equivalent of the provided value.
+ */
+export function getStylePixelValue(value: string): number {


Future support could include svh, dvh, etc. as needed for improved device support if devs opt for that.

macandcheese · 2025-04-21T17:50:34Z

+  --calcite-internal-shell-panel-shadow-inline-start:
+    -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-internal-shell-panel-shadow-inline-end:
+    4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);


Unrelated to this PR - It would be nice to have these directional shadows codified somewhere (or another shadow approach) - cc @matgalla @ashetland

macandcheese

Nice, changes look good! One small thing - seeing the border-block missing from Panels in latest Chromatic builds - https://www.chromatic.com/test?appId=6266d45509d7eb004aa254fb&id=6807c2828e3b61852cf88a2e

driskull · 2025-04-22T16:41:37Z

One small thing - seeing the border-block missing from Panels in latest Chromatic builds -

@macandcheese the resize handle provides the border in these cases. Is something not looking right? It looks fine to me in chromatic.

macandcheese · 2025-04-22T16:45:18Z

One small thing - seeing the border-block missing from Panels in latest Chromatic builds -

@macandcheese the resize handle provides the border in these cases. Is something not looking right? It looks fine to me in chromatic.

Chromatic isn't highlighting it 😒 - but the Panel in the new build don't have border on top or bottom:

driskull · 2025-04-22T16:46:16Z

Ok ill get that fixed!

nel11211 · 2025-04-29T03:11:03Z

We're seeing an issue in Charts Components that appears to have originated from this PR.

@driskull Do you happen to have any initial guess what the relationship is, or what might need to be changed on our end to correct it? Thanks

driskull · 2025-04-29T16:19:07Z

@nel11211 do you have something I can look at to see the issue? Or a sample?

nel11211 · 2025-04-29T17:09:31Z

@nel11211 do you have something I can look at to see the issue? Or a sample?

#12057

…allow resizable for all displayMode values (#11983) **Related Issue:** #5652 ## Summary - improve resize handle sizing for more space to drag (aligns with `sheet` component) - allows resizing for all `displayMode` values - refactor `shell-panel` to use interact.js for resizing to align with the `sheet` and `dialog` components - add dom util `getStylePixelValue` to convert CSS values to pixels. - supports `px`, `vw`, `vh` for now since that is what we are taking advantage of - updates other components to use this util for consistency (sheet/dialog) - updates tests

**Related Issue:** #12116 ## Summary Fixes regression introduced in #11983 where a resized panel would reset its size after collapsing and expanding.

driskull added 2 commits April 16, 2025 16:48

wip

26c0b06

WIP

bb21a7b

github-actions Bot assigned driskull Apr 17, 2025

feat(shell-panel): Improve visibility of resizable functionality and …

229ee2d

…allow resizable for all displayMode values #5652

driskull changed the title ~~Dris0000/shell panel resize fixes~~ feat(shell-panel): Improve visibility of resizable functionality and allow resizable for all displayMode values Apr 17, 2025

driskull added 2 commits April 17, 2025 15:50

wip

670ca1d

cleanup

98759bb

github-actions Bot added the enhancement Issues tied to a new feature or request. label Apr 17, 2025

driskull added 3 commits April 17, 2025 16:42

cleanup

9b83697

cleanup css

8425516

cleanup

7fe5c25

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 18, 2025

Merge branch 'dev' into dris0000/shell-panel-resize-fixes

de5651b

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 18, 2025

driskull marked this pull request as ready for review April 18, 2025 18:39

driskull requested review from jcfranco and macandcheese April 18, 2025 18:39

macandcheese requested changes Apr 21, 2025

View reviewed changes

macandcheese reviewed Apr 21, 2025

View reviewed changes

Comment thread packages/calcite-components/src/components/shell-panel/shell-panel.tsx

macandcheese reviewed Apr 21, 2025

View reviewed changes

Comment thread packages/calcite-components/src/components/shell-panel/shell-panel.scss

driskull added 3 commits April 21, 2025 11:28

review fixes

6727e54

fix styling

2f8700f

use common const for resize steps

6c4a74b

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 22, 2025

driskull requested a review from macandcheese April 22, 2025 16:20

macandcheese approved these changes Apr 22, 2025

View reviewed changes

fix border styling

282c1da

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 22, 2025

driskull merged commit a48e422 into dev Apr 22, 2025
14 checks passed

driskull deleted the dris0000/shell-panel-resize-fixes branch April 22, 2025 18:22

github-actions Bot added this to the 2025-04-29 - Apr Milestone milestone Apr 22, 2025

calcite-admin mentioned this pull request May 14, 2025

chore: release main #11890

Merged

This was referenced Aug 12, 2025

Calcite Shell Panel - Resizable shell panel forgets dragged size when closed #12116

Closed

fix(shell-panel): restore resized size after expanding #12691

Merged

jcfranco added a commit that referenced this pull request Aug 18, 2025

fix(shell-panel): restore resized size after expanding (#12691)

6716a2d

**Related Issue:** #12116 ## Summary Fixes regression introduced in #11983 where a resized panel would reset its size after collapsing and expanding.

benelan pushed a commit that referenced this pull request Sep 16, 2025

fix(shell-panel): restore resized size after expanding (#12691)

0779250

**Related Issue:** #12116 ## Summary Fixes regression introduced in #11983 where a resized panel would reset its size after collapsing and expanding.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(shell-panel): Improve visibility of resizable functionality and allow resizable for all displayMode values#11983

feat(shell-panel): Improve visibility of resizable functionality and allow resizable for all displayMode values#11983
driskull merged 13 commits intodevfrom
dris0000/shell-panel-resize-fixes

driskull commented Apr 17, 2025 •

edited

Loading

Uh oh!

macandcheese left a comment

Uh oh!

macandcheese Apr 21, 2025

Uh oh!

Uh oh!

macandcheese Apr 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

macandcheese left a comment •

edited

Loading

Uh oh!

driskull commented Apr 22, 2025

Uh oh!

macandcheese commented Apr 22, 2025 •

edited

Loading

Uh oh!

driskull commented Apr 22, 2025

Uh oh!

Uh oh!

nel11211 commented Apr 29, 2025

Uh oh!

driskull commented Apr 29, 2025

Uh oh!

nel11211 commented Apr 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

driskull commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

macandcheese left a comment

Choose a reason for hiding this comment

Uh oh!

macandcheese Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

macandcheese Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

macandcheese left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

driskull commented Apr 22, 2025

Uh oh!

macandcheese commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

driskull commented Apr 22, 2025

Uh oh!

Uh oh!

nel11211 commented Apr 29, 2025

Uh oh!

driskull commented Apr 29, 2025

Uh oh!

nel11211 commented Apr 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

driskull commented Apr 17, 2025 •

edited

Loading

macandcheese left a comment •

edited

Loading

macandcheese commented Apr 22, 2025 •

edited

Loading