DropZone docs release audit (#5151)

Author: devongovett

packages/@react-spectrum/dropzone/docs/DropZone.mdx

@@ -45,7 +45,7 @@ import {Text} from 'react-aria-components';
 
 function Example() {
   let [isFilled, setIsFilled] = React.useState(false);
-  
+
   return (
     <>
       <Draggable />
@@ -57,16 +57,11 @@ function Example() {
           <Upload />
           <Heading>
             <Text slot="label">
-              Drag and drop your file
+              {isFilled ? 'You dropped something!' : 'Drag and drop your file'}
             </Text>
           </Heading>
         </IllustratedMessage>
       </DropZone>
-      {isFilled &&
-        <div className="dropped">
-          You dropped something!
-        </div>
-      }
     </>
   )
 }
@@ -96,7 +91,6 @@ function Draggable() {
   );
 }
 ```
-</details>
 
 <details>
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
@@ -116,18 +110,14 @@ function Draggable() {
 .draggable.dragging {
   opacity: 0.5;
 }
-
-.dropped {
-  margin-top: 20px;
-}
 ```
 </details>
-
+</details>
 
 
 ## Content
 
-A drop zone accepts an [IllustratedMessage](IllustratedMessage.html) as a child which is comprised of three areas:  an illustration, a title, and a body. Each of these sections can be populated by providing the following components to the IllustratedMessage as children: a SVG, a [Heading](Heading.html) (title), and a [Content](Content.html) (body). A [FileTrigger](../react-aria/FileTrigger.html) is commonly paired with a DropZone to allow a user to choose files from their device. 
+A DropZone accepts an [IllustratedMessage](IllustratedMessage.html) as a child which is comprised of three areas:  an illustration, a title, and a body. Each of these sections can be populated by providing the following components to the IllustratedMessage as children: a SVG, a [Heading](Heading.html) (title), and a [Content](Content.html) (body). A [FileTrigger](../react-aria/FileTrigger.html) is commonly paired with a DropZone to allow a user to choose files from their device.
 
 ```tsx example
 import {FileTrigger} from 'react-aria-components';
@@ -147,7 +137,7 @@ function Example() {
           <Upload />
           <Heading>
             <Text slot="label">
-              Drag and drop here
+              {isFilled ? 'You dropped something!' : 'Drag and drop here'}
             </Text>
           </Heading>
           <Content>
@@ -158,70 +148,67 @@ function Example() {
           </Content>
         </IllustratedMessage>
       </DropZone>
-      {isFilled &&
-        <div className="dropped">
-          You dropped something!
-        </div>
-      }
     </>
   )
 }
 ```
 
 ### Accessibility
 
-A visual label should be provided to `DropZone` using a `Text` element with a `label` slot. If it is not provided, then an `aria-label` or `aria-labelledby` prop must be passed to identify the visually hidden button to assistive technology. 
+A visual label should be provided to `DropZone` using a `Text` element with a `label` slot. If it is not provided, then an `aria-label` or `aria-labelledby` prop must be passed to identify the visually hidden button to assistive technology.
 
 ### Internationalization
 
-In order to internationalize a drop zone, a localized string should be passed to the `Text` element with a `label` slot or to the `aria-label` prop, in addition to the `replaceMessage` prop.
+In order to internationalize a DropZone, a localized string should be passed to the `Text` element with a `label` slot or to the `aria-label` prop, in addition to the `replaceMessage` prop.
 
 ## Events
 
-`DropZone` supports drop operations via mouse, keyboard, and touch. You can handle all of these via the `onDrop` prop. In addition, the `onDropEnter`, `onDropMove`, and `onDropExit` events are fired as the user enter and exists the dropzone during a drag operation. 
+`DropZone` supports drop operations via mouse, keyboard, and touch. You can handle all of these via the `onDrop` prop. In addition, the `onDropEnter`, `onDropMove`, and `onDropExit` events are fired as the user enter and exists the dropzone during a drag operation.
 
 The following example uses an `onDrop` handler to update the filled status stored in React state.
 
 ```tsx example
 import File from '@spectrum-icons/illustrations/File';
 import {Text} from 'react-aria-components';
+import {Flex} from '@react-spectrum/layout';
 
 function Example() {
-  let [isFilled, setIsFilled] = React.useState(false);
   let [filledSrc, setFilledSrc] = React.useState(null);
 
   return (
     <>
       <Draggable />
       <DropZone
         maxWidth="size-3000"
-        isFilled={isFilled}
+        isFilled={!!filledSrc}
         onDrop={async (e) => {
           e.items.find(async (item) => {
             if (item.kind === 'file') {
               setFilledSrc(item.name);
-              setIsFilled(true);
-              
+
             } else if (item.kind === 'text' && item.types.has('text/plain')) {
               setFilledSrc(await item.getText('text/plain'));
-              setIsFilled(true);
             }
           });
         }}>
-        <IllustratedMessage>
-          <Upload />
-          <Heading>
-            <Text slot="label">
-              Drag and drop here
-            </Text>
-          </Heading>
-        </IllustratedMessage>
+        {filledSrc
+          ? (
+            <Flex direction="column" alignItems="center" justifyContent="center" gap="size-100">
+              <File />
+              {filledSrc}
+            </Flex>
+          )
+          : (
+            <IllustratedMessage>
+              <Upload />
+              <Heading>
+                <Text slot="label">
+                  Drag and drop here
+                </Text>
+              </Heading>
+            </IllustratedMessage>
+          )}
       </DropZone>
-      {isFilled && 
-        <div className="dropped">
-          <File />
-          {filledSrc}
-        </div>}
     </>
   );
 }
@@ -236,7 +223,7 @@ function Example() {
 
 ### Filled state
 
-The user is responsible for both managing the filled state of a drop zone and handling the associated styling. To set the drop zone to a filled state, the user must pass the `isFilled` prop.
+The user is responsible for both managing the filled state of a DropZone and handling the associated styling. To set the DropZone to a filled state, the user must pass the `isFilled` prop.
 
 The example below demonstrates one way of styling the filled state.
 
@@ -245,13 +232,12 @@ import {Text} from 'react-aria-components';
 
 function Example() {
   let [filledSrc, setFilledSrc] = React.useState(null);
-  let [isFilled, setIsFilled] = React.useState(false);
 
   return (
     <>
       <DraggableImage />
       <DropZone
-        isFilled={isFilled}
+        isFilled={!!filledSrc}
         maxWidth="size-3000"
         height="size-2400"
         getDropOperation={(types) =>  (types.has('image/png') || types.has('image/jpeg')) ? 'copy' : 'cancel'}
@@ -260,23 +246,24 @@ function Example() {
             if (item.kind === 'file') {
               if (item.type === 'image/jpeg' || item.type === 'image/png') {
                 setFilledSrc(URL.createObjectURL(await item.getFile()));
-                setIsFilled(true);
               }
             } else if (item.kind === 'text') {
               setFilledSrc(await item.getText('image/jpeg'));
-              setIsFilled(true);
             }
           });
         }}>
-        <IllustratedMessage>
-            <Upload />
-            <Heading>
-              <Text slot="label">
-                Drag and drop photos
-              </Text>
-            </Heading>
-        </IllustratedMessage>
-        {isFilled && <img className={'images'} alt="" src={filledSrc} />}
+        {filledSrc
+          ? <img className="images" alt="" src={filledSrc} />
+          : (
+            <IllustratedMessage>
+              <Upload />
+              <Heading>
+                <Text slot="label">
+                  Drag and drop photos
+                </Text>
+              </Heading>
+            </IllustratedMessage>
+          )}
       </DropZone>
     </>
   );
@@ -335,7 +322,7 @@ function DraggableImage() {
 
 ### Replace message
 
-When a drop zone is in a filled state and has an object dragged over it, a message will appear in front of the drop zone. By default, this message will say "Drop file to replace". However, users can choose to customize this message through the `replaceMessage` prop. This message should describe the interaction that will occur when the object is dropped. It should also be internationalized if needed. 
+When a DropZone is in a filled state and has an object dragged over it, a message will appear in front of the DropZone. By default, this message will say "Drop file to replace". However, users can choose to customize this message through the `replaceMessage` prop. This message should describe the interaction that will occur when the object is dropped. It should also be internationalized if needed.
 
 
 ```tsx example
@@ -356,80 +343,66 @@ function Example() {
           <Upload />
           <Heading>
             <Text slot="label">
-              Drag and drop here
+              {isFilled ? 'You dropped something!' : 'Drag and drop here'}
             </Text>
           </Heading>
         </IllustratedMessage>
       </DropZone>
-      {isFilled &&
-        <div className="dropped">
-          You dropped something!
-        </div>
-      }
     </>
   );
 }
 ```
 
 ### Visual feedback
 
-A drop zone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `cancel` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true. [Read more about getDropOperation.](../react-aria/useDrop.html#getdropoperation)
+A DropZone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `'cancel'` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true. [Read more about getDropOperation.](../react-aria/useDrop.html#getdropoperation)
 
 ```tsx example
 import {FileTrigger} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 import {FileDropItem} from 'react-aria';
 
 function Example() {
-  let [isFilled, setIsFilled] = React.useState(false);
   let [filledSrc, setFilledSrc] = React.useState(null);
 
   return (
-    <>
-      <DropZone
-        maxWidth="size-3000"
-        isFilled={isFilled}
-        getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'}
-        onDrop={async (e) => { 
-          let item = e.items.find((item: FileDropItem) => item.kind === 'file' && item.type === 'image/png') as FileDropItem;
-          if (item) {
-            setFilledSrc({
-              type: item.type,
-              name: item.name});
-            setIsFilled(true);
-          }
-        }}>
-        <IllustratedMessage>
-          <Upload />
-          <Heading>
-            <Text slot="label">
-              Drag and drop here
-            </Text>
-          </Heading>
-          <Content>
-            <FileTrigger
-              acceptedFileTypes={['image/png']}
-              onSelect={(e) => {
-                let file = (Array.from(e)).find((file) => file.type === "image/png")
-                if (file) {
-                  setFilledSrc({
-                    type: file.type,
-                    name: file.name
-                  })
-                  setIsFilled(true);
-                }
-              }}>              
-              <Button variant="primary">Browse</Button>
-            </FileTrigger>
-          </Content>
-        </IllustratedMessage>
-      </DropZone>
-      {isFilled && 
-        <div className="dropped">
-          {`${filledSrc.type} ${filledSrc.name}`}
-        </div>
-      }
-    </>
+    <DropZone
+      maxWidth="size-3000"
+      isFilled={!!filledSrc}
+      getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'}
+      onDrop={async (e) => {
+        let item = e.items.find((item: FileDropItem) => item.kind === 'file' && item.type === 'image/png') as FileDropItem;
+        if (item) {
+          setFilledSrc({
+            type: item.type,
+            name: item.name
+          });
+        }
+      }}>
+      <IllustratedMessage>
+        <Upload />
+        <Heading>
+          <Text slot="label">
+            {filledSrc ? `${filledSrc.type} ${filledSrc.name}` : 'Drag and drop here'}
+          </Text>
+        </Heading>
+        <Content>
+          <FileTrigger
+            acceptedFileTypes={['image/png']}
+            onSelect={(e) => {
+              let file = (Array.from(e)).find((file) => file.type === "image/png")
+              if (file) {
+                setFilledSrc({
+                  type: file.type,
+                  name: file.name
+                })
+              }
+            }}>
+            <Button variant="primary">Browse</Button>
+          </FileTrigger>
+        </Content>
+      </IllustratedMessage>
+    </DropZone>
   );
 }
 ```