Skip to content

fix(react-nav): only display actions on hover #34634

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

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

Conversation

marcosmoura
Copy link
Contributor

Previous Behavior

Nav split items were always displayed

New Behavior

Now only display split items on hover

@marcosmoura marcosmoura requested a review from a team as a code owner June 11, 2025 23:37
@marcosmoura marcosmoura self-assigned this Jun 11, 2025
@marcosmoura marcosmoura requested a review from dmytrokirpa June 11, 2025 23:45
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.263 MB
317.758 kB
1.264 MB
318.012 kB
851 B
254 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.732 kB
20.259 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
227.58 kB
65.885 kB
react-components
react-components: FluentProvider & webLightTheme
44.567 kB
14.62 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
110.6 kB
36.56 kB
🤖 This report was generated against 85480fcd7dc1db873728dcc3a992d2d49e6ac835

Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png 5 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 708 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 14 Changed

Copy link
Contributor

@dmytrokirpa dmytrokirpa left a comment

Choose a reason for hiding this comment

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

How the keyboard navigation should work for actions that are displayed only on hover? Right now they are focusable, but not visible:

Screen.Recording.2025-06-12.at.14.22.55.mov

@@ -92,6 +91,10 @@ const useStyles = makeStyles({
flexDirection: 'column',
gridRowGap: tokens.spacingVerticalS,
},
pinned: {
opacity: 1,
transform: 'translate3D(0, 0, 0)',
Copy link
Contributor

Choose a reason for hiding this comment

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

nit:

Suggested change
transform: 'translate3D(0, 0, 0)',
transform: 'translate3d(0, 0, 0)',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants