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

[FullscreenBar] Fix invisible BackButton color within Styleguide #13054

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

beefchimi
Copy link
Contributor

@beefchimi beefchimi commented Jan 17, 2025

WHY are these changes introduced?

I noticed while reviewing the Polaris Styleguide that the FullscreenBar > BackButton was... invisible. I then noticed:

  1. It looks totally fine within the Code Sandbox
  2. It also looks totally fine if the Styleguide is toggled to "light mode".

So, there must be some styling from outside the <iframe /> that is causing this...

dark-mode-bug.mov

WHAT is this pull request doing?

I've simply applied color: var(--p-color-text) to the BackButton. This appears to resolve the issue without introducing any negative side effects... but of course, I may have gone about this incorrectly.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Please tophat this by running the Styleguide locally. You will want to make sure you blow away any previous polaris bundle that the Styleguide consumers. I simply did the following:

  • pnpm clean
  • pnpm install
  • pnpm build
  • pnpm turbo run dev --filter=polaris.shopify.com
  • Then, visit the FullscreenBar page and toggle between light/dark mode from the Styleguide header.

🎩 checklist

@beefchimi beefchimi added the Bug Something is broken and not working as intended in the system. label Jan 17, 2025
@beefchimi beefchimi self-assigned this Jan 17, 2025
@@ -6,7 +6,7 @@ import {motion, AnimatePresence} from 'framer-motion';

import GlobalSearch from '../GlobalSearch';
import nav from '../../../.cache/nav';
import {NavItem, Breakpoints} from '../../types';
import {type NavItem, Breakpoints} from '../../types';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I made this change because the IDE was complaining. We define NavItem as a component elsewhere in the file.

@beefchimi beefchimi marked this pull request as ready for review January 17, 2025 21:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something is broken and not working as intended in the system.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant