From c4a812a62f52c7d325c4f16c1ccfddae965e747c Mon Sep 17 00:00:00 2001 From: Cayla Horsey <168447749+cmhorsey@users.noreply.github.com> Date: Wed, 22 Jan 2025 09:38:30 -0500 Subject: [PATCH] [PLAY-1798] Enable Dark Mode in Loading Inline Text and Labels (#4130) 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. Dark mode enabled in React Loading Inline kit page, all text and labels are now using $text_dk_light. [Story PLAY-1798](https://runway.powerhrg.com/backlog_items/PLAY-1798) **Screenshots:** Screenshots to visualize your addition/change Screenshot 2025-01-16 at 8 16 05 AM **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change #### 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. - [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. --- .../pb_kits/playbook/pb_loading_inline/_loading_inline.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx index dea38518a0..81184e4fce 100644 --- a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +++ b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx @@ -12,6 +12,7 @@ type LoadingInlineProps = { aria?: { [key: string]: string }, className?: string, data?: { [key: string]: string }, + dark?: boolean, htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, text?: string, @@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => { aria = {}, className, data = {}, + dark = false, htmlOptions = {}, id, text = ' Loading', @@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => { className={classes} id={id} > - +