Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dialog] Add resizing and dragging to the component #9875

Closed
4 of 8 tasks
geospatialem opened this issue Jul 29, 2024 · 2 comments
Closed
4 of 8 tasks

[Dialog] Add resizing and dragging to the component #9875

geospatialem opened this issue Jul 29, 2024 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-08-27 - Aug ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jul 29, 2024 •
edited
Loading

Check existing issues

Description

Add resizing and dragging to the new dialog component.

Acceptance Criteria

Figma file

  • The component is resizable via mouse and keyboard
  • The component is draggable via mouse and keyboard

Relevant Info

Follow-up to #7886

Which Component

dialog

Example Use Case

https://codepen.io/geospatialem/pen/rNEjemQ

Priority impact

impact - p1 - need for current milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. p - high Issue should be addressed in the current milestone, impacts component or core functionality 2 - in development Issues that are actively being worked on. estimate - 8 Requires input from team, consider smaller steps. labels Jul 29, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jul 29, 2024
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Jul 29, 2024
This was referenced Jul 29, 2024
Closed
Merged
driskull added a commit that referenced this issue Aug 27, 2024
@driskull
feat(dialog): add resizable and dragEnabled properties (#9804)
e3e499e 
**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
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 27, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Aug 27, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 27, 2024
@geospatialem
Copy link
Member Author

geospatialem commented Aug 27, 2024 •
edited
Loading

Verified on the dev branch for drag-enabled and resizable with the following key combinations:

  • resizable: shift + arrow keys
  • drag-enabled: arrow keys

Note: There is no support at this time for either of the above when assistive technologies are active, and Calcite is exploring options with our accessibility vendor to determine next steps, if any, to achieve support.

Updated note: The above is achievable when in forms mode. Documentation will be provided on the Dialog component page by the close of the week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-08-27 - Aug Release
Development

No branches or pull requests
3 participants
@driskull @geospatialem @DitwanP