Feat(web, web-react): Introduce ActionGroup component #DS-1607

[pavelklibani]

Description

Additional context

Issue reference

Component ActionGroup | Web

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	5526c01
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/677d19c5ef2a3f000889abd7
😎 Deploy Preview	https://deploy-preview-1832--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	5526c01
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/677d19c5d73967000856d2ce

[adamkudrna]

Suggested change

	<a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a>
	<a href="#" class="Button Button--primary Button--medium">Primary Action</a>

Please avoid using role="button", using the <button> element is more appropriate in such case.

[adamkudrna]

We agreed in person to:

1. not implement the ActionGroup component in the web package at all,
2. instead, extend the Flex component:
   1. extend the Direction Dictionary with DirectionExtended which extends Direction with horizontalReversed and verticalReversed,
   2. deprecate row and column layouts of the Flex component in favor of the DirectionExtended dictionary, create codemod in React,
3. in React, reuse the updated Flex component to create the ActionGroup component.

[literat]

Just for the naming. Isn't the Orientation with the values vertical/horizontal better than Direction? I think the "direction" suggests more from/to path than "orientation", which I understand as position on some point, e.g. a 360-degree circle (I hope this is understandable).

[literat]

issue (blocking): We have nothing to say here?

[adamkudrna]

@pavelklibani left the README intentionally empty because he anticipated we would decide to discard the web component.

[literat]

suggestion (blocking): I am not quite satisfied with the naming. I expect the direction is from left to right, up and down, not column or row.

Maybe orientation as I saw it in Adobe Spectrum Button Group would sound better. Of course with values like horizontal or vertical. And I think horizontal-reversed or vertical-reversed work as well.

[adamkudrna]

The thing is we currently use direction everywhere, it comes from our Direction dictionary. I am certainly open to a discussion, just be aware it affects all components with this prop.

[literat]

suggestion: Maybe @adamkudrna wants to suggest this:

Suggested change

	<a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a>
	<button class="Button Button--primary Button--medium">Primary Action</a>

[adamkudrna]

Either of these, they are both correct, it doesn't matter. Just let's not use <a role="button"> 🙂.