fix: dragging floating ui components #8230
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
bug
|
@jcfranco this seems to fix the drag and drop issues with flying in from the right/left.
|
driskull
changed the title
|
Actually, if I add overflow hidden on elements that are dragged it seems to be good. Can you review/test? @jcfranco |
driskull
added
the
pr ready for visual snapshots
jcfranco
approved these changes
Nov 21, 2023
There was a problem hiding this comment.
🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈
🎈🆙🆙🆙🆙🎈🆙🎈🎈🎈🎈🎈🆙🎈🆙🆙🆙🆙🎈🎈🆙🆙🆙🎈🎈🆙🆙🎈🎈🆙🎈🎈🎈🆙🎈🆙🆙🆙🆙🎈🆙🎈
🎈🆙🎈🎈🆙🎈🆙🎈🎈🎈🎈🎈🆙🎈🆙🎈🎈🎈🎈🆙🎈🎈🎈🎈🆙🎈🎈🆙🎈🆙🆙🎈🆙🆙🎈🆙🎈🎈🎈🎈🆙🎈
🎈🆙🆙🆙🆙🎈🆙🎈🎈🆙🎈🎈🆙🎈🆙🆙🆙🎈🎈🎈🆙🆙🎈🎈🆙🎈🎈🆙🎈🆙🎈🆙🎈🆙🎈🆙🆙🆙🎈🎈🆙🎈
🎈🆙🎈🎈🆙🎈🆙🎈🆙🎈🆙🎈🆙🎈🆙🎈🎈🎈🎈🎈🎈🎈🆙🎈🆙🎈🎈🆙🎈🆙🎈🎈🎈🆙🎈🆙🎈🎈🎈🎈🎈🎈
🎈🆙🎈🎈🆙🎈🎈🆙🎈🎈🎈🆙🎈🎈🆙🆙🆙🆙🎈🆙🆙🆙🎈🎈🎈🆙🆙🎈🎈🆙🎈🎈🎈🆙🎈🆙🆙🆙🆙🎈🆙🎈
🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈
| top: "0", | ||
| left: "0", | ||
| transform, | ||
| transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : null, |
There was a problem hiding this comment.
Type-wise, should we pass "" vs null?
FYI, I only reviewed. Haven't had a chance to test. |
driskull
added
pr ready for visual snapshots
|
@jcfranco good to merge? |
driskull
added
pr ready for visual snapshots
Merged
benelan
added a commit
that referenced
this pull request
Nov 23, 2023
* origin/main: (30 commits) test: add token snapshot tests (#8050) chore: release next fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247) fix(list-item): Reserve space for empty open lists. (#8239) fix: dragging floating ui components (#8230) fix(list-item): an item with an empty slotted list should be openable. (#8240) fix(input): prevents mutating value on `blur` when `type="number"` (#8245) chore: release main (#8092) chore: downgrade eslint plugin after reverting breaking change (#8238) refactor(combobox): fix linting errors (#8235) chore: downgrade packages after reverting 2.0.0-next.0 change (#8237) chore: release next revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232) feat(stepper): enable responsive layout (#7744) feat(combobox): limit display of selected items with new selection-display prop (#7912) chore: release next build: update browserslist db (#8218) fix(list-item): fix rendering of open icon. (#8207) revert: feat(alert): make component responsive (#8195) fix(input-number): prevents mutating value on blur (#8226) ...
benelan
added a commit
that referenced
this pull request
Nov 23, 2023
* origin/main: (30 commits) test: add token snapshot tests (#8050) chore: release next fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247) fix(list-item): Reserve space for empty open lists. (#8239) fix: dragging floating ui components (#8230) fix(list-item): an item with an empty slotted list should be openable. (#8240) fix(input): prevents mutating value on `blur` when `type="number"` (#8245) chore: release main (#8092) chore: downgrade eslint plugin after reverting breaking change (#8238) refactor(combobox): fix linting errors (#8235) chore: downgrade packages after reverting 2.0.0-next.0 change (#8237) chore: release next revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232) feat(stepper): enable responsive layout (#7744) feat(combobox): limit display of selected items with new selection-display prop (#7912) chore: release next build: update browserslist db (#8218) fix(list-item): fix rendering of open icon. (#8207) revert: feat(alert): make component responsive (#8195) fix(input-number): prevents mutating value on blur (#8226) ...
benelan
pushed a commit
that referenced
this pull request
Nov 24, 2023
**Related Issue:** #8214 #7979 ## Summary - Update some component `open` handlers to call reposition before open and after open - Previously, they were just calling when open was set to true. - Update `floating-ui` utility - Handle device pixel ratio: https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Only set `top`, `left`, and `transform` when the component is open. - This makes it so that the positioned container is never going to "fly in" from anywhere. - Update sortable styles to hide any overflow on dragged elements.
benelan
pushed a commit
that referenced
this pull request
Nov 24, 2023
**Related Issue:** #8214 #7979 ## Summary - Update some component `open` handlers to call reposition before open and after open - Previously, they were just calling when open was set to true. - Update `floating-ui` utility - Handle device pixel ratio: https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Only set `top`, `left`, and `transform` when the component is open. - This makes it so that the positioned container is never going to "fly in" from anywhere. - Update sortable styles to hide any overflow on dragged elements.
benelan
pushed a commit
that referenced
this pull request
Nov 26, 2023
**Related Issue:** #8214 #7979 ## Summary - Update some component `open` handlers to call reposition before open and after open - Previously, they were just calling when open was set to true. - Update `floating-ui` utility - Handle device pixel ratio: https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Only set `top`, `left`, and `transform` when the component is open. - This makes it so that the positioned container is never going to "fly in" from anywhere. - Update sortable styles to hide any overflow on dragged elements.
benelan
added a commit
that referenced
this pull request
Dec 2, 2023
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (`import * as tokens from "@esri/calcite-design-tokens";`) - Use font name in core font family tokens - Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens - Core size tokens now use their pixel size in their name - Change `border-radius` to `corner-radius` - Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg` - Platform output - Remove component tokens from global output - Add new platform output - css - index - global - light - dark - core - breakpoint - typography classes - scss - index - global - light - dark - core - breakpoints - typography mixins - Replace "headless" with "global" - Remove "calcite" from filenames - Package.json exports - `@esri/calcite-design-tokens/css/headless` is now `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` is now `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` is now `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` is now `@esri/calcite-design-tokens/es6/global` - Token paths and values - Border - Use t-shirt sizing for border width tokens - `Border.border-width.0` is now `border.width.none` (--calcite-border-width-none) - `border.border-width.1` is now `border.width.sm` (--calcite-border-width-sm) - `border.border-width.2` is now `border.width.md` (--calcite-border-width-md) - `border.border-width.3` is now `border.width.lg` (--calcite-border-width-lg) - `border.border-width.4` is removed - Remove unused border radius tokens - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Use t-shirt sizing for border radius (now called corner radius) tokens - `semantic.ui.border.border-radius` is `semantic.corner.radius.default` - `Core.border.border-radius.1` is now `semantic.corner.radius.sharp` - `Core.border.border-radius.4` is now `semantic.corner.radius.round` - `Core.border.border-radius.5` is now `semantic.corner.radius.pill` - Sizing - `core.sizing.` tokens are now `core.size.default` - Breakpoints - Move breakpoint tokens to their own separate output file for most platform outputs (except JS) - Update breakpoint token path from `.breakpoint.` to `.container-size.` - Delete unused `breakpoint.cols` tokens - Box Shadow - Use t-shirt sizing for global box shadow tokens - `box-shadow.0` is now `shadow.none` - `box-shadow.1` is now `shadow.sm` - `box-shadow.2` is now `shadow.md` - Colors - Remove "palette" from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation` - Light Mode and Dark Mode - Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens. - `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the color scheme media queries are now provided via `calcite-design-tokens/css/index.css` - Provide light and dark mode mixins via `calcite-design-tokens/css/index.scss` - Remove "ui" from output platform names in favor of "color" - `--calcite-ui-background` is now `--calcite-color-background` - `--calcite-ui-brand` is now `--calcite-color-brand` - `--calcite-ui-success` is now `--calcite-color-status-success` - `--calcite-ui-danger` is now `--calcite-color-status-danger` - `--calcite-ui-warning` is now `--calcite-color-status-warning` - `--calcite-ui-hint` is now `--calcite-color-status-hint` - `--calcite-button-transparent-hover` is now `--calcite-color-transparent-press` ### Features - Add json to design token output ([#8290](#8290)) ([753061f](753061f)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - Update default main file output for design tokens ([#8299](#8299)) ([4050a91](4050a91)) - Update json shape for docs ([#8308](#8308)) ([6fac3e9](6fac3e9)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.0.0</summary> ## [1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) </details> <details><summary>@esri/calcite-components: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __tokens:__ Changes to `@esri/calcite-design-tokens`, including the names of CSS variables used to customize component styling. See the [breaking changes section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02) of the `@esri/calcite-design-tokens` changelog. ([#8311](#8311)) ([8d7cf3f](8d7cf3f)), ([#8299](#8299)) ([4050a91](4050a91)), ([#8215](#8215)) ([335d010](335d010)) - __button, list, pick-list, value-list:__ Setting `loading` prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set `disabled` along with `loading`. ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __dropdown:__ Dropdown's default `display` was changed from `inline-flex` to `inline-block` to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width __or__ setting `width: 100%` or `display: block` on the dropdown of a width-constrained parent). ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown, modal:__ For consistency, renames the `width` property to `widthScale`. ([#8251](#8251)) ([ab12968](ab12968)), ([#8252](#8252)) ([6b09245](6b09245)) - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. ([#8248](#8248)) ([0948c1a](0948c1a)) - __i18n:__ Reduced numbering system support to `latn`, `arab` and `arabext`. The following numbering systems were removed: `bali`, `beng`, `deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`, `limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`, `tibt`. ([#8217](#8217)) ([9946ac1](9946ac1)) - __stepper-item:__ Removed both `previousStep` and `nextStep` message properties. These are no longer overrideable via `messageOverrides`. ([#8234](#8234)) ([331aafb](331aafb)) - __card:__ Removed the `deselect` message property – this property was deprecated in [#6657](#6657) as it is no longer being rendered. This is no longer overrideable via `messageOverrides`. ([#8099](#8099)) ([1bab172](1bab172)) - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Features - __action-menu:__ Set max height of the action menu ([#8275](#8275)) ([ca1be28](ca1be28)) - __action-menu:__ Support action-groups ([#8273](#8273)) ([c07144f](c07144f)) - __combobox, checkbox, input-time-zone, select, text-area:__ Add `status` property ([#8304](#8304)) ([a44e9fe](a44e9fe)) - __handle:__ Add disabled property ([#8283](#8283)) ([7aeecd5](7aeecd5)) - __list-item:__ Add dragDisabled property ([#8285](#8285)) ([f091f26](f091f26)) - __list:__ Support multiple selection using the shift key ([#8301](#8301)) ([79538be](79538be)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - __stepper:__ Enable responsive layout ([#7744](#7744)) ([556b8bc](556b8bc)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) - __button, list, pick-list, value-list:__ Prevent loading prop from affecting interactivity ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __button:__ Sets aria-disabled instead of disabled on internal anchor element ([#8270](#8270)) ([0926eb6](0926eb6)) - __color-picker, popover, shell-panel, slider, tooltip:__ Register events on the window instead of the document ([#8247](#8247)) ([2aaf592](2aaf592)) - __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix positioning of component when component is moved ([#8296](#8296)) ([2b2506d](2b2506d)) - Dragging floating ui components ([#8230](#8230)) ([5a81f6c](5a81f6c)) - __dropdown:__ Change display to inline-block to ease truncation setup ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown:__ Restore trigger container height ([51d1ea8](51d1ea8)) - __input-time-zone:__ Update time zone items when item-dependent props change ([#8271](#8271)) ([f77532e](f77532e)) - __input:__ Prevents mutating value on `blur` when `type="number"` ([#8245](#8245)) ([58ededd](58ededd)) - __label:__ Associate label to component when `for` prop is set after initialization ([#8309](#8309)) ([e81b650](e81b650)) - __list-item:__ Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([ae9b083](ae9b083)) - __list-item:__ Adds border between last item in a group and slotted item ([#8262](#8262)) ([9b5cf76](9b5cf76)) - __list-item:__ An item with an empty slotted list should be openable. ([#8240](#8240)) ([d615b39](d615b39)) - __list-item:__ Focus on the first focusable element within the component when using arrow keys ([#8291](#8291)) ([b902365](b902365)) - __list-item:__ Reserve space for empty open lists. ([#8239](#8239)) ([484a5aa](484a5aa)) - __list:__ Add live region for dynamically changing list items ([#8148](#8148)) ([e3c0c06](e3c0c06)) - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) - __stepper:__ Typo in CSS variable for step bar's fill ([#8255](#8255)) ([2e643aa](2e643aa)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Code Refactoring - __card:__ Remove deprecated `deselected` message ([#8099](#8099)) ([1bab172](1bab172)) - __dropdown:__ Rename `width` property to `widthScale` ([#8251](#8251)) ([ab12968](ab12968)) - __i18n:__ Reduce list of supported numbering systems to `latn`, `arab`, and `arabext` ([#8217](#8217)) ([9946ac1](9946ac1)) - __modal:__ Rename `width` property to `widthScale` ([#8252](#8252)) ([6b09245](6b09245)) - __stepper-item:__ No longer supports previousStep and nextStep messages ([#8234](#8234)) ([331aafb](331aafb)) ### Dependencies - The following workspace dependencies were updated - devDependencies - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0 - @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to 1.0.0 </details> <details><summary>@esri/calcite-components-angular: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> <details><summary>@esri/calcite-components-react: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Bug Fixes - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.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> Co-authored-by: Ben Elan <no-reply@benelan.dev> Co-authored-by: Ali Stump <astump@esri.com> Co-authored-by: JC Franco <jfranco@esri.com>
driskull
added a commit
that referenced
this pull request
Dec 13, 2023
**Related Issue:** #7979 #8214 #8386 #8419 #5697 ## Summary - reverts #8001 - Keeps doc updates - reverts partially #8230 - Keeps drag classes that are setting `overflow:hidden` when a drag is occurring. - Keeps roundByDPR floating-ui fix. https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning - Hides overflow for `calcite-sortable--chosen` class - Only sets `top` and `left` on floating element once positioned. **This fixes native drag and drop issue**
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #8214 #7979
Summary
openhandlers to call reposition before open and after openfloating-uiutilitytop,left, andtransformwhen the component is open.