New buttons guidelines

[ek-so]

Summary

This PR restructures the Button guidelines according to this document. I also brought Buttons a level up under the Navigation menu, because it isn't Navigation specifically, and it's not intuitive to search for it there.

PR closes the https://github.com/elastic/platform-ux-team/issues/719

Why are we making this change?

With the buttons update, we're doing documents clean up. This PR consolidates all the sources of truth for info related to buttons in one place.

Screenshots

Impact to users

It might break some links that were pointing to the pages before.

General checklist

• Browser QA
  • [x] Checked in both light and dark modes
  • [x] Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • [ ] Checked in mobile
  • [x] Checked in Chrome, Safari, Edge, and Firefox
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • [x] Added documentation
  • [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles
  • [x] Checked Code Sandbox works for any docs examples
• Code quality checklist
  • [x] Added or updated jest and cypress tests
  • [x] Updated visual regression tests
• Release checklist
  • [x] A changelog entry exists and is marked appropriately.
  • [x] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • [x] 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)

[ek-so]

Hey @ryankeairns could you please take a look — how does it feel to you? Is one page better? (also, I didn't add Figma frame into the page – I'm not sure if we are ready to expose the file yet (and maybe we want just give a lint for designers only on some dedicated page?)

[ryankeairns]

The single page feels good :)

One quick note, it looks like Buttons slipped out of the Navigation category in the main nav:

[ryankeairns]

This icon piece feels out of place and makes more sense as either its own section under usage or mixed with the Icon type. However, the latter is really about a specific component. I recommend adding a section about icons under Usage.

[ek-so]

One quick note, it looks like Buttons slipped out of the Navigation category in the main nav>

I wrote it in the description, that was intentionally:

I also brought Buttons a level up under the Navigation menu, because it isn't Navigation specifically, and it's not intuitive to search for it there.

Do you think it doesn't make sense?

[ryankeairns]

Ah, my bad. It felt, to me, like a mistake with a component at the topmost level. I understand how it could be seen the other way, now. That said, I think we should leave that change for a larger IA update, so that we don't end up moving it again.

Personally, I would like to try a flat, alphabetical list.

[weronikaolejniczak]

@ryankeairns @ek-so I agree with "flat, alphabetical list", it's the easiest to traverse. But it's a big change at the same time, so I'd leave the Button inside Navigation for now.

[ek-so]

@ryankeairns @weronikaolejniczak fyi, I already added the changes Ryan proposed, and moved Button back under the Navigation for now

[weronikaolejniczak]

@ek-so in favor of keeping the hierarchy flat and avoiding deeply nested folders, do we want to move Button, Button group, Key pad menu and Filter group out of "Buttons"? Just directly in "Navigation"?

[weronikaolejniczak]

@ek-so this is so great, Kate! Thanks for contributing 🙌🏻 Did you find working with Markdown easy (-ier?)?

[ek-so]

@ek-so in favor of keeping the hierarchy flat and avoiding deeply nested folders, do we want to move Button, Button group, Key pad menu and Filter group out of "Buttons"? Just directly in "Navigation"?

Navigation as a section also raises some questions to me, and I'd like to to discuss the whole IA of the left sidebar going forward. Maybe all the elements will be listed in alphabetical order (as mentioned), and all these elements also go there... I would say, I'd maybe also leave it as is for now.

[ek-so]

@ek-so this is so great, Kate! Thanks for contributing 🙌🏻 Did you find working with Markdown easy (-ier?)?

The thing is, I haven't updated EUI site before 😁 So I can't compare, but it seems to be quite straightforward even for designer 😊

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 72bb72f2dc165ad899305fdf2668c4d82ca4c439
• Documentation website

History

• :green_heart: Build #550 succeeded ca7251a136fb256e1e5667c5ec5b284e3e86b0ad
• :green_heart: Build #541 succeeded a894d94d2a2d2ee43e9bced8f092f1d3723cc267
• :green_heart: Build #533 succeeded 5fec7ceccd027b49ad1e20db5b29dcc7f5fd581c
• :green_heart: Build #529 succeeded 79769020f21b9f57f4f1d9fee91044fb6614c45e
• :green_heart: Build #527 succeeded 83b553e2841949b81c284b5cf8117418f3aaa270

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 72bb72f2dc165ad899305fdf2668c4d82ca4c439

History

• :green_heart: Build #4212 succeeded ca7251a136fb256e1e5667c5ec5b284e3e86b0ad
• :green_heart: Build #4203 succeeded a894d94d2a2d2ee43e9bced8f092f1d3723cc267
• :green_heart: Build #4196 succeeded 5fec7ceccd027b49ad1e20db5b29dcc7f5fd581c
• :green_heart: Build #4194 succeeded 79769020f21b9f57f4f1d9fee91044fb6614c45e
• :green_heart: Build #4192 succeeded 83b553e2841949b81c284b5cf8117418f3aaa270