Fixing styles for euiKeyPadMenu

[ek-so]

Summary

This PR fixes an issue mentioned in issue #158. Based on the discussion there and also on Borealis new color token rules, the changes include:

• Remapping of the colors that are supported both in Amsterdam and Borealis;
• Conditionally adding different interactive states to Borealis only (Amsterdam remains the same).

Changes made for Borealis include:

• Removed jumping animation on hover
• Added background on hover in addition to underline
• Used a hovered background for the item on click, when it's not selected yet
• Removed shadow entirely

Showcasing:

Amsterdam

Borealis

QA:

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8294/
• Storybook: https://eui.elastic.co/pr_8294/storybook
• New docs: https://eui.elastic.co/pr_8294/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 526043c

History

• 💚 Build #3371 succeeded ed3123e

cc @ek-so

[mgadewoll]

Changes LGTM 👍
Thanks for the updates! 🎉