-
Notifications
You must be signed in to change notification settings - Fork 91
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
feat: add utility for menu styles #655
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some comments, but overall this looks good.
We will also need to bump the peerDependency
versions for react-theming
to ^8.1.0
in all packages. I can do that in #651
const animationName = keyframes` | ||
0%, 66% { | ||
${property}: 2px; | ||
border: transparent; /* [1] */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So this was the trick when I first moved over to transform: translate
for the animation. Good find.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome, the animation looks great. Noticed a couple weird things:
- In the Tree Menu usage, if I select an item from the nested menu, I see a flash of the parent menu as it fades out. https://share.getcloudapp.com/rRu67RyB
- In the Multiselect, selecting an item adds it as a tag and text. This happens on garden.zendesk.com too, so it’s outside the scope of this branch, but I thought I’d flag it. https://share.getcloudapp.com/JruW6BX9
Nice finds @ginnywood. I'm going to add an issue for us to treat these as follow-on bugs 🐛 |
Description
With the new
menuStyles
utility, menus in Garden are now clearly:Features
menuStyles
utility added toreact-theming
and shared betweenreact-datepickers
andreact-dropdowns
Fixes
useEffect
with timeouts) to restore fade-out animation for both datepicker and dropdown menus – providing subtle, important feedback that a user's action was effectiveStyledMenuAnimation
div.static
allows arrow to display beyondoverflow-y
and got rid ofStyledMaxHeightWrapper
div.<ul>
-<li>
menu structure in dropdowns.Other
Detail
Demo site is pre-published for review. Notable links include:
menuStyles
functionalityMerge of this PR will be paired with #651 to publish
react-components
v8.1.Checklist
designer as a reviewer)
yarn start
)