Use generated IDs in EuiButtonGroup Buttons

[danedavid]

Fixes #4645

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cla-checker-service]

💚 CLA has been signed

[chandlerprall]

Thanks for making this change! After testing the modified example, the other options' ids would need to be made unique as well:

Which demonstrates how easy it is to build a UI with accidentally overlapping object IDs. It's trivial for an application to build separate panels on the same page and accidentally use the same IDs, or maybe they're provided by a user and the application has no control. Because the id concept in EuiButtonGroup is to track an option just within itself, I think we should avoid writing the provided id to the DOM and instead generate a random one for the component to use.

• undo the changes you made to styling.js (thank you again for picking this up and making the change requested in the issue)
• In button_group_button.tsx use the htmlIdGenerator utility to generate & store a random ID, see https://github.com/elastic/eui/blob/master/src-docs/src/views/form_layouts/form_rows.js#L21 for an example
• use the generated ID on the existing htmlFor: newId,, id={newId},, and id, (-> id: newId,) lines
• while we didn't intend to support this directly, it's possible unit or functional tests rely on that id to be present, so let's also add a data-test-subj: id to the singleInput and the else's elementProps, so tests can still find their target elements

This will separate the intended use of the ids - separately tracking options - from their DOM implementation and should fix the styling example.

Don't hesitate to ask for clarification if any of that doesn't make sense.

[danedavid]

@chandlerprall Made the changes. Had to update snapshots as the snapshot contained ids

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4657/

[chandlerprall]

Great, thank you for taking this & making additional changes! I also added an entry to CHANGELOG.md as it is no longer a documentation-only change.

Tested the datagrid styling example locally and all button groups now act as expected. Verified the ids in the DOM are generated at mount and not updated.