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

fix(menu): Styling active menu in SPA navigation #25533

Merged
merged 5 commits into from
Dec 4, 2023

Conversation

justinpark
Copy link
Member

SUMMARY

Fixes the addressed issue (no. 2) on #25151 (comment)

This commit replaces Link with NavLink to fix outdated highlighted menu. This commit replaces the ant-menu-item-selected style by NavLink active style to sync the router active link status.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

before--navlink.mov

After:

after--navlink.mov

TESTING INSTRUCTIONS

Click Chart (or Dashboard) link
Click Query History menu under the SQL Link
Navigate back by the browser button
See the highlighted menu on the header

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@justinpark justinpark changed the title fix(menu): Active menu style during SPA navigation fix(menu): Styling active menu in SPA navigation Oct 5, 2023
@john-bodley john-bodley added the review:checkpoint Last PR reviewed during the daily review standup label Oct 5, 2023
@justinpark justinpark removed the review:checkpoint Last PR reviewed during the daily review standup label Oct 6, 2023
@EugeneTorap
Copy link
Contributor

Hi @michael-s-molina @john-bodley @craig-rueda! Can you approve this PR?

@@ -154,6 +154,29 @@ const globalStyles = (theme: SupersetTheme) => css`
margin-left: ${theme.gridUnit * 1.75}px;
}
}
.ant-menu-item-selected {
background-color: transparent !important;
Copy link
Member

Choose a reason for hiding this comment

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

Is it possible to avoid !important here? Maybe using a more specific class?

Copy link
Member Author

Choose a reason for hiding this comment

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

@michael-s-molina I just removed all these redundant !important

Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

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

LGTM

@justinpark justinpark merged commit 86304ab into apache:master Dec 4, 2023
26 checks passed
@michael-s-molina michael-s-molina added the v3.1 Label added by the release manager to track PRs to be included in the 3.1 branch label Dec 6, 2023
michael-s-molina pushed a commit that referenced this pull request Dec 8, 2023
josedev-union pushed a commit to Ortege-xyz/studio that referenced this pull request Jan 22, 2024
@mistercrunch mistercrunch added 🍒 3.1.0 🍒 3.1.1 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels labels Mar 8, 2024
sfirke pushed a commit to sfirke/superset that referenced this pull request Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/M v3.1 Label added by the release manager to track PRs to be included in the 3.1 branch 🍒 3.1.0 🍒 3.1.1
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants