[PLAY-1652] Dark Mode Audit - File Upload Kit (#3954)

**What does this PR do?** A clear and concise description with your runway ticket url. Updates to dark mode styling based on audit for the File Upload Kit component. [PLAY-1652](https://runway.powerhrg.com/backlog_items/PLAY-1652) **Screenshots:** Screenshots to visualize your addition/change <img width="1483" alt="Screenshot 2024-11-27 at 9 08 28 AM" src="https://github.com/user-attachments/assets/15866498-5991-464f-8e8a-82f3ba17aa95"> <img width="1544" alt="Screenshot 2024-11-27 at 9 09 56 AM" src="https://github.com/user-attachments/assets/edbdef87-9268-48a3-9246-6c3a818f7c7f"> **How to test?** Steps to confirm the desired behavior: 1. Navigate to the default variants Rails & React of the File Upload kit on Playbook Web 2. Enable dark mode #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. --------- Co-authored-by: Thomas Martin <[email protected]>
powerhome · Dec 9, 2024 · c51f455 · c51f455
1 parent 0f33085
commit c51f455
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_file_upload/_file_upload.scss b/playbook/app/pb_kits/playbook/pb_file_upload/_file_upload.scss
@@ -11,3 +11,8 @@
   }
 }
 
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
+    border: 1px $text_dk_lighter dashed;
+  }
+}
diff --git a/playbook/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx b/playbook/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx
@@ -13,6 +13,7 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
+  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
+    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card>
+      <Card dark={dark}>
         <input {...getInputProps()} />
-        <Body color="light">
+        <Body
+            color="light"
+            dark={dark}
+        >
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

diff --git a/playbook/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb b/playbook/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb
@@ -5,11 +5,17 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{object.label}" %>
+        </label>
         <%= pb_rails("text_input", props: {
           type: "file",
+          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}", 
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>