From c51f4552ff03f8d0d2b68d6c205d5d906dc1c916 Mon Sep 17 00:00:00 2001 From: Liam Simmons <160088184+Lsimmons98@users.noreply.github.com> Date: Mon, 9 Dec 2024 09:41:34 -0500 Subject: [PATCH] [PLAY-1652] Dark Mode Audit - File Upload Kit (#3954) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **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 Screenshot 2024-11-27 at 9 08 28 AM Screenshot 2024-11-27 at 9 09 56 AM **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 --- .../pb_kits/playbook/pb_file_upload/_file_upload.scss | 5 +++++ .../pb_kits/playbook/pb_file_upload/_file_upload.tsx | 9 +++++++-- .../playbook/pb_file_upload/file_upload.html.erb | 10 ++++++++-- 3 files changed, 20 insertions(+), 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 index f2e4a09712..8d50869dc0 100644 --- 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 index ec462deee5..72d3e55179 100644 --- 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()} > - + - + {isDragActive ?

{'Drop the files here ...'}

: 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 index 2dcb842395..7522d080a0 100644 --- 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 %> - + <%= 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) }) %>