feat(js): wrap item action buttons in container

[francoischalifour]

Description

This adds a container that wraps the item action button. It enables designs with multiple actions.

Preview

Using a dummy additional icon for Query Suggestions:

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9e20533:

Sandbox	Source
@algolia/js-example	Configuration
@algolia/react-renderer-example	Configuration

[Haroenv]

in theory you could also do this using flexbox without the wrappers https://codepen.io/Haroenv/pen/YzpWqWp

[francoischalifour]

@Haroenv Yep, but we want to make it easy to design themes, and to have clear visual sections to separate elements in the UI when creating layouts.

[francoischalifour]

FWIW here's another example with an "Add to cart" button that sends a conversion event:

[shortcuts]

LGTM! Just wondering, it seems that we use singular for every class names, shouldn't we use aa-ItemAction instead?

[Haroenv]

it's plural, since there can be multiple, it's more ItemActionContainer (but that's too long)

[shortcuts]

Considering the existing classes, I felt like we were mostly naming what the container is rather than what the content could be. Like aa-ItemContent, even though there could be multiple in it. Not sure if it make sense 🤔