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

Components: Remove Framer Motion from DropZone #62044

Merged
merged 24 commits into from
Jun 19, 2024
Merged

Components: Remove Framer Motion from DropZone #62044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9f9c042
Start implementingthe fadein/fadeout animation in pure CSS
fullofcaffeine May 28, 2024
e21e02b
First working iteration
fullofcaffeine May 31, 2024
9c3f6b4
Implement scale animation in the inner element
fullofcaffeine May 31, 2024
0b272a3
Remove unneeded CSS
fullofcaffeine May 31, 2024
a2e0fda
Make it closer to the original Framer Motion animation
fullofcaffeine May 31, 2024
a6eeeec
Refactor to support reducedMotion
fullofcaffeine Jun 1, 2024
f83ec4b
Simplify by moving the Fade component one level up
fullofcaffeine Jun 1, 2024
e85b204
Cleanup styles
fullofcaffeine Jun 1, 2024
d0d236b
Fix formatting issue
fullofcaffeine Jun 1, 2024
41a8b8e
Fix import category
fullofcaffeine Jun 1, 2024
4ac6e6e
Extract `MaybeFade` to its own component for easier further extractio…
fullofcaffeine Jun 4, 2024
7798cbc
Manually namespace CSS animation keyframe identifiers and classnames
fullofcaffeine Jun 4, 2024
54f7073
Remove debug code
fullofcaffeine Jun 4, 2024
df8713a
Cleanup
fullofcaffeine Jun 4, 2024
e607cee
Simplify by using CSS transition instead of keyframe and remove the `…
fullofcaffeine Jun 7, 2024
bd94189
American english spelling
ciampo Jun 19, 2024
3d86bc7
Switch to `has-dragged-out` instead of `inactive` class, less CSS
ciampo Jun 19, 2024
ae20e58
Add back legacy classnames
ciampo Jun 19, 2024
e6fb253
Remove "reduce" from prefers reduced motion
ciampo Jun 19, 2024
f2f556e
Add back safari pointer events fix
ciampo Jun 19, 2024
d7a1ab3
Add back root styles
ciampo Jun 19, 2024
e7f6372
Restore active class styles
ciampo Jun 19, 2024
60063ab
move back 'is-active- check inline
ciampo Jun 19, 2024
45b2d01
CHANGELOG
ciampo Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@

## Unreleased

### Enhancements

- DropZone: rewrite animation without depending on framer-motion. ([#62044](https://github.com/WordPress/gutenberg/pull/62044))

## 28.1.0 (2024-06-15)

### Enhancements

- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
- Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))
- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
- Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))

### Bug Fixes

Expand Down
93 changes: 17 additions & 76 deletions packages/components/src/drop-zone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,86 +10,14 @@ import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { upload, Icon } from '@wordpress/icons';
import { getFilesFromDataTransfer } from '@wordpress/dom';
import {
__experimentalUseDropZone as useDropZone,
useReducedMotion,
} from '@wordpress/compose';
import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';

/**
* Internal dependencies
*/
import {
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '../animation';
import type { DropType, DropZoneProps } from './types';
import type { WordPressComponentProps } from '../context';

const backdrop = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
type: 'tween',
duration: 0.2,
delay: 0,
delayChildren: 0.1,
fullofcaffeine marked this conversation as resolved.
Show resolved Hide resolved
},
},
exit: {
opacity: 0,
transition: {
duration: 0.2,
delayChildren: 0,
},
},
};

const foreground = {
hidden: { opacity: 0, scale: 0.9 },
show: {
opacity: 1,
scale: 1,
transition: {
duration: 0.1,
},
},
exit: { opacity: 0, scale: 0.9 },
};

function DropIndicator( { label }: { label?: string } ) {
const disableMotion = useReducedMotion();
const children = (
<motion.div
variants={ backdrop }
initial={ disableMotion ? 'show' : 'hidden' }
animate="show"
exit={ disableMotion ? 'show' : 'exit' }
className="components-drop-zone__content"
// Without this, when this div is shown,
// Safari calls a onDropZoneLeave causing a loop because of this bug
// https://bugs.webkit.org/show_bug.cgi?id=66547
style={ { pointerEvents: 'none' } }
ciampo marked this conversation as resolved.
Show resolved Hide resolved
>
<motion.div variants={ foreground }>
<Icon
icon={ upload }
className="components-drop-zone__content-icon"
/>
<span className="components-drop-zone__content-text">
{ label ? label : __( 'Drop files to upload' ) }
</span>
</motion.div>
</motion.div>
);

if ( disableMotion ) {
return children;
}

return <AnimatePresence>{ children }</AnimatePresence>;
}

/**
* `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
*
Expand Down Expand Up @@ -135,7 +63,7 @@ export function DropZoneComponent( {

/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
* The order of the checks is important to recognise the HTML drop.
* The order of the checks is important to recognize the HTML drop.
*/
if ( html && onHTMLDrop ) {
onHTMLDrop( html );
Expand All @@ -152,7 +80,7 @@ export function DropZoneComponent( {

/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
* The order of the checks is important to recognise the HTML drop.
* The order of the checks is important to recognize the HTML drop.
*/
if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
_type = 'html';
Expand Down Expand Up @@ -181,20 +109,33 @@ export function DropZoneComponent( {
setIsDraggingOverElement( false );
},
} );

const classes = clsx( 'components-drop-zone', className, {
'is-active':
( isDraggingOverDocument || isDraggingOverElement ) &&
( ( type === 'file' && onFilesDrop ) ||
( type === 'html' && onHTMLDrop ) ||
( type === 'default' && onDrop ) ),
'has-dragged-out': ! isDraggingOverElement,
// Keeping the following classnames for legacy purposes
'is-dragging-over-document': isDraggingOverDocument,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed these classes as I couldn't find where they were used. They don't seem to be needed for the component to function. If you know they are used somewhere, let me know, and I'll add them back.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like there is some 3rd party plugin usage in one of BuddyPress's component plugins:

https://github.com/buddypress/bp-attachments/blob/74a4af6c8c102f08716d09453c83d97084a92d15/bp-attachments/assets/media-library/style.css#L63

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added back those classnames

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is-dragging-over-document could possibly be unused, I didn't spot any usage when I was doing my wpdirectory.net search. Sounds good as a follow-up cleanup too.

'is-dragging-over-element': isDraggingOverElement,
[ `is-dragging-${ type }` ]: !! type,
} );

return (
<div { ...restProps } ref={ ref } className={ classes }>
{ isDraggingOverElement && <DropIndicator label={ label } /> }
<div className="components-drop-zone__content">
<div className="components-drop-zone__content-inner">
<Icon
icon={ upload }
className="components-drop-zone__content-icon"
/>
<span className="components-drop-zone__content-text">
{ label ? label : __( 'Drop files to upload' ) }
</span>
</div>
</div>
</div>
);
}
Expand Down
67 changes: 51 additions & 16 deletions packages/components/src/drop-zone/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,58 @@
opacity: 1;
visibility: visible;
}
}

.components-drop-zone__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
display: flex;
background-color: $components-color-accent;
align-items: center;
justify-content: center;
z-index: z-index(".components-drop-zone__content");
text-align: center;
color: $white;
.components-drop-zone__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
display: flex;
background-color: $components-color-accent;
align-items: center;
justify-content: center;
z-index: z-index(".components-drop-zone__content");
text-align: center;
color: $white;
opacity: 0;
ciampo marked this conversation as resolved.
Show resolved Hide resolved

// Without this, when this div is shown,
// Safari calls a onDropZoneLeave causing a loop because of this bug
// https://bugs.webkit.org/show_bug.cgi?id=66547
pointer-events: none;
}

.components-drop-zone__content-inner {
opacity: 0;
transform: scale(0.9);
}

&.is-active:not(.has-dragged-out) {
.components-drop-zone__content {
opacity: 1;

transition: opacity 0.2s ease-in-out;
@media (prefers-reduced-motion) {
transition: none;
}
}

.components-drop-zone__content-inner {
opacity: 1;
transform: scale(1);

transition:
opacity 0.1s ease-in-out 0.1s,
transform 0.1s ease-in-out 0.1s;

@media (prefers-reduced-motion) {
transition: none;
}
}
}
}

.components-drop-zone__content-icon,
Expand Down
Loading