Skip to content

Conversation

@marcopaulo7
Copy link
Contributor

What’s the purpose of this pull request?

This PR fixes the Preview tag styling when previews are shown in stores that use custom themes.
An example from a preview page in the heringhomolog account:

Before

Screenshot 2025-09-29 at 14 15 47 Screenshot 2025-09-29 at 14 16 04

After

Screenshot 2025-09-29 at 14 15 12 Screenshot 2025-09-29 at 17 43 18

How it works

It replaces styles inherited from the Badge, Tag, and Icon components with scoped custom styles, preventing overrides by store-specific theme customizations.

How to test

  1. Clone the heringhomolog store repository.
  2. Set the data source to Content Platform (CP).
  3. Run the store locally.
  4. In the heringhomolog Content Platform, set the preview URL to your local build.
  5. Preview a page. The Preview tag should initially appear with broken styling.
  6. Apply this PR locally by either:
    • Linking the faststore/core package from this PR into the store, or
    • Overriding the Preview tag stylesheet with the version from this PR.
  7. Refresh the preview. The Preview tag should display with the corrected styling.

Note: The preview tag is shown only on pages previewed from the Content Platform. This change doesn't apply to the preview flow for hCMS pages.

Starters Deploy Preview

References

@marcopaulo7 marcopaulo7 self-assigned this Sep 29, 2025
@marcopaulo7 marcopaulo7 requested a review from a team as a code owner September 29, 2025 20:48
@marcopaulo7 marcopaulo7 requested review from ommeirelles and renatamottam and removed request for a team September 29, 2025 20:48
@marcopaulo7 marcopaulo7 added the bug Something isn't working label Sep 29, 2025
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 29, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

.section [data-fs-preview-tag] {
position: fixed;
inset: 1rem 1rem auto auto;
z-index: 10000;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
z-index: 10000;
z-index: var(--fs-z-index-highest);

does it work using this token? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated in 4a3dc98

@hellofanny
Copy link
Contributor

@renatamottam a scenario that we can further analyze later :)

@matheusps matheusps changed the base branch from main to dev October 27, 2025 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants