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

Create Menu component #2990

Open
wants to merge 41 commits into
base: develop
Choose a base branch
from
Open

Conversation

luiqor
Copy link
Contributor

@luiqor luiqor commented Dec 16, 2024

Add Menu Component

image

  • Disabled / Selected / Hovered as in old design
    image

  • Simple dropdown menu
    image

  • Menu with checkboxes
    image

  • Nested dropdowns
    image

  • Removable items (Absent in design, present in prod notification menu)
    image

Add MenuItem Component

  • Color variants + align variants
    image

  • Disabled, Danger color variant
    image

@luiqor luiqor added feature component design system task related to scss design system labels Dec 16, 2024
@luiqor luiqor self-assigned this Dec 17, 2024
@luiqor luiqor linked an issue Dec 17, 2024 that may be closed by this pull request
@luiqor luiqor marked this pull request as ready for review December 17, 2024 09:46
src/design-system/components/menu-item/MenuItem.tsx Outdated Show resolved Hide resolved
src/design-system/components/menu/Menu.tsx Outdated Show resolved Hide resolved
src/design-system/components/menu/Menu.tsx Outdated Show resolved Hide resolved
tests/unit/design-system/components/menu/Menu.spec.jsx Outdated Show resolved Hide resolved
tests/unit/design-system/components/menu/Menu.spec.jsx Outdated Show resolved Hide resolved
Comment on lines +37 to +47
if (graphicsRef.current) {
const interactiveElement =
graphicsRef.current.querySelector<HTMLInputElement>(
'input[type="radio"], input[type="checkbox"], [role="radio"], [role="checkbox"]'
)

if (interactiveElement) {
interactiveElement.click()
return
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we get same result with using the element? Its default behaviour that it is clicking on input that currently inside the label.

Copy link
Contributor Author

@luiqor luiqor Dec 18, 2024

Choose a reason for hiding this comment

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

If you mean like that:

const handleClick = () => {
    if (graphicsRef.current) {
      graphicsRef.current.click()
      return
    }

    onClick?.()
  }

: unfortunately, checkbox then is not marked as selected on click.
When I am changing the button tag to label here, I can't get rid of onClick triggering two times, even with event.stopPropagation()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component design system task related to scss design system feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(SP: ) Create Menu component aligned with design system
2 participants