fix(file-dropzone): improve examples

src/components/file-dropzone/examples/file-dropzone-type-filtering.tsx

@@ -25,10 +25,24 @@ export class FileDropzoneTypeFilteringExample {
     @State()
     private files: FileInfo[] = [];
 
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private value: string;
+
     @State()
     private rejectedFiles: FileInfo[] = [];
 
     public render() {
+        const MAX_LENGTH = 500;
+
         return [
             <limel-file-dropzone
                 onFilesSelected={this.handleAcceptedFiles}
@@ -41,6 +55,12 @@ export class FileDropzoneTypeFilteringExample {
                     type="textarea"
                     placeholder="What is your dream pet? Describe it here and attach a picture of it."
                     helperText="To attach files, simply drag & drop them here!"
+                    maxlength={MAX_LENGTH}
+                    value={this.value}
+                    required={this.required}
+                    onChange={this.handleChange}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
                 />
             </limel-file-dropzone>,
             <limel-file-dropzone
@@ -62,6 +82,10 @@ export class FileDropzoneTypeFilteringExample {
         ];
     }
 
+    private handleChange = (event: CustomEvent<string>) => {
+        this.value = event.detail;
+    };
+
     private handleAcceptedFiles = (event: CustomEvent<FileInfo[]>) => {
         this.files = [...this.files.concat(event.detail)];
     };

src/components/file-dropzone/examples/file-dropzone.scss

@@ -1,7 +1,7 @@
 limel-file-dropzone {
-    height: 2.25rem;
+    height: 3rem;
     background-color: rgb(var(--contrast-300));
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     border: 1px solid rgb(var(--contrast-800));
     margin-bottom: 0.5rem;
 }