feat(dialog): add resizable and dragEnabled properties #9804

driskull · 2024-07-17T16:57:32Z

Related Issue: #9875

Summary

adds dragEnabled property
adds resizable property
uses interact.js for dragging/resizing
- https://interactjs.io/
- https://www.npmjs.com/package/interactjs
fix animations when using dragging
adds e2e tests
- added themed e2e test
adds storybook

…onent. #7886

macandcheese

Looks great! Couple of small things:

I think we'd want to add max width / height css props at this time alongside "min" - just like with Shell Panel's resizable functionality - they may not need a default value (cc @ashetland @SkyeSeitz ?) but they should be able to be set.
There's a small one px wiggle as you adjust - maybe something to note and improve.
I still find it strange from a UX perspective that you can "click and press" on the Close Button, and that enables dragging. Maybe we can improve this in the future but it strikes me as unexpected.
Similarly, there's a 1/2px buffer "around" the close button where you can click to drag and resize, but it's not practical to use because of the small hit area and may lead to user frustration.

None of the above are blockers IMO, now that the resize scaling has been fixed, this is looking really good!

macandcheese · 2024-08-26T23:29:37Z

packages/calcite-components/src/components/dialog/dialog.scss

@@ -5,7 +5,9 @@
 *
 * @prop --calcite-dialog-scrim-background-color: Specifies the background color of the component's scrim.
 * @prop --calcite-dialog-size-x: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set.
+ * @prop --calcite-dialog-min-size-x: Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`.
 * @prop --calcite-dialog-size-y: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set.


I think we'll want corresponding -max-size-x props, currently you can resize to perhaps undesired heights.

macandcheese · 2024-08-26T23:30:58Z

packages/calcite-components/src/components/dialog/dialog.scss

-  --calcite-internal-dialog-content-text: theme("fontSize.0");
+  --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));
+  --calcite-internal-dialog-min-size-x: 288px;
+  --calcite-internal-dialog-min-size-y: 140px;


cc @SkyeSeitz @ashetland I think we may need to make these a bit taller - by default it allows shrinking too much with a common header / footer set up (it's the two lines wrapping in header ...) :

Updated the Figma specs with adjusted min-heights:
sm 140px
md 180px
lg 220px

SkyeSeitz · 2024-08-27T00:04:47Z

I think we'd want to add max width / height css props at this time alongside "min" - just like with Shell Panel's resizable functionality - they may not need a default value (cc @ashetland @SkyeSeitz ?) but they should be able to be set.

Agreed this may be something users need to set

I still find it strange from a UX perspective that you can "click and press" on the Close Button, and that enables dragging. Maybe we can improve this in the future but it strikes me as unexpected.

Though I have oddly seen this possible in other systems, I do land on the side of restricting this interaction if possible.

Can this focus ring be placed above (visible around entire Dialog)?

Yay dragging & resizing looking so great!

jcfranco

Aside from a few comments, this...

👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
👍😎👍👍👍😎😎😎😎👍😎😎😎😎😎👍😎👍👍👍😎👍😎👍
👍😎👍👍👍😎👍👍👍👍👍👍😎👍👍👍😎😎👍😎😎👍😎👍
👍😎👍👍👍😎👍😎😎👍👍👍😎👍👍👍😎👍😎👍😎👍😎👍
👍😎👍👍👍😎👍👍😎👍👍👍😎👍👍👍😎👍👍👍😎👍👍👍
👍😎😎😎👍😎😎😎😎👍👍👍😎👍👍👍😎👍👍👍😎👍😎👍
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

packages/calcite-components/src/components/dialog/dialog.scss

packages/calcite-components/src/components/dialog/resources.ts

packages/calcite-components/src/components/dialog/dialog.tsx

driskull · 2024-08-27T16:31:50Z

I think we'll want corresponding -max-size-x props, currently you can resize to perhaps undesired heights.

Added these. @macandcheese @SkyeSeitz @alisonailea

driskull · 2024-08-27T18:21:16Z

I think we'd want to add max width / height css props at this time alongside "min" - just like with Shell Panel's resizable functionality - they may not need a default value (cc @ashetland @SkyeSeitz ?) but they should be able to be set.

We may want to document that when resizing is enabled, these values should be pixel values. cc @DitwanP @geospatialem

There's a small one px wiggle as you adjust - maybe something to note and improve.

I couldn't get this one fixed. Its because the placement option is justifying and aligning the dialog. When resized, the dialog wobbles a bit because of this. If you place the dialog to a corner, you won't see it resizing some sides.

driskull · 2024-08-27T18:47:22Z

Screenshots look good. Only changes were related to the min-height.

…oating-point-issue * origin/dev: build(deps): update nrwl monorepo to v19.6.2 (#10151) docs: update component READMEs (#10103) feat(dialog): add resizable and dragEnabled properties (#9804) refactor(themed): tidy up types (#10166) chore(segmented-control): remove empty and irrelevant `describe` block (#10157)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> **Related Issue:** # ## Summary Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 30 commits July 8, 2024 14:29

dialog WIP

57dd466

WIP

595df41

WIP

587952d

WIP

204b1a4

Merge branch 'dev' into dris0000/dialog

8662fa9

scale

224cdd3

wip

150b792

WIP

ef470f4

WIP

59e1891

WIP

5408e5c

WIP

5047695

WIP

0cf10dc

WIP

c4c7044

WIP

f0b1c0a

cleanup

209e072

WIP

2b8c4af

WIP

bc17fe2

WIP

9840498

feat(dialog): adds new dialog component and deprecates the modal comp…

56e0efa

…onent. #7886

cleanup

1a3cfe3

WIP

5b4ab5a

cleanup

3d08942

cleanup

c7e237c

fix tests

af40f98

no disabled prop, fix tests

624337e

cleanup

f6d0f5f

WIP

3b8ddc8

modal swapping

5a03a15

tests

fdb891e

cleanup

c5b52df

driskull added 2 commits August 26, 2024 16:02

cleanup

d8755e8

cleanup

9ea8042

macandcheese approved these changes Aug 26, 2024

View reviewed changes

cleanup

68c5588

SkyeSeitz approved these changes Aug 27, 2024

View reviewed changes

update sizes

c3deaf7

jcfranco approved these changes Aug 27, 2024

View reviewed changes

driskull added 3 commits August 27, 2024 09:11

review fixes

a341351

update test

5af511c

add css vars

8fd4fd2

driskull added 4 commits August 27, 2024 09:41

cleanup

6817a26

Merge branch 'dev' into dris0000/dialog-resizable

b9d5187

cleanup

c9308e0

fix resize keyboard direction for up/down arrows

84fd0bb

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 27, 2024

driskull merged commit e3e499e into dev Aug 27, 2024
13 checks passed

driskull deleted the dris0000/dialog-resizable branch August 27, 2024 18:47

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10172

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10173

Closed

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dialog): add resizable and dragEnabled properties #9804

feat(dialog): add resizable and dragEnabled properties #9804

driskull commented Jul 17, 2024 •

edited

Loading

macandcheese left a comment

macandcheese Aug 26, 2024

macandcheese Aug 26, 2024 •

edited

Loading

SkyeSeitz Aug 27, 2024

SkyeSeitz commented Aug 27, 2024

jcfranco left a comment

driskull commented Aug 27, 2024

driskull commented Aug 27, 2024 •

edited

Loading

driskull commented Aug 27, 2024

feat(dialog): add resizable and dragEnabled properties #9804

feat(dialog): add resizable and dragEnabled properties #9804

Conversation

driskull commented Jul 17, 2024 • edited Loading

Summary

macandcheese left a comment

Choose a reason for hiding this comment

macandcheese Aug 26, 2024

Choose a reason for hiding this comment

macandcheese Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

SkyeSeitz Aug 27, 2024

Choose a reason for hiding this comment

SkyeSeitz commented Aug 27, 2024

jcfranco left a comment

Choose a reason for hiding this comment

driskull commented Aug 27, 2024

driskull commented Aug 27, 2024 • edited Loading

driskull commented Aug 27, 2024

driskull commented Jul 17, 2024 •

edited

Loading

macandcheese Aug 26, 2024 •

edited

Loading

driskull commented Aug 27, 2024 •

edited

Loading