Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PLAY-1798] Enable Dark Mode in Loading Inline Text and Labels #4130

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

cmhorsey
Copy link

@cmhorsey cmhorsey commented Jan 15, 2025

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

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:

  • LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See 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.

@cmhorsey cmhorsey self-assigned this Jan 15, 2025
@cmhorsey cmhorsey added milano 20 MAX - Deploy this PR to a review environment via Milano improvement This is used when your PR contains library upgrades or doc/site improvements. (USED IN CHANGELOG)) minor Semver Target labels Jan 16, 2025
@cmhorsey cmhorsey marked this pull request as ready for review January 16, 2025 13:21
@cmhorsey cmhorsey requested a review from a team as a code owner January 16, 2025 13:21
<Body color="light">
<Body
color="light"
dark
Copy link
Contributor

@kangaree kangaree Jan 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the right thinking! But, with this, it makes it so dark mode colors are applied even in "light" mode.

Screenshot 2025-01-16 at 9 05 09 AM

I would pass the dark prop to <Body />:

type LoadingInlineProps = {
  align?: "left" | "center" | "right",
  aria?: { [key: string]: string },
  className?: string,
  data?: { [key: string]: string },
  dark?: boolean
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
  id?: string,
  text?: string,
}

  const {
    align = 'left',
    aria = {},
    className,
    data = {},
    dark = false,
    htmlOptions = {},
    id,
    text = ' Loading',
  } = props
  
 <Body color="light" dark={dark}>

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course! Fixing now, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement This is used when your PR contains library upgrades or doc/site improvements. (USED IN CHANGELOG)) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants