feat(ForgeLayout): add button action (#1548)

## 📝 Changes

- Adds a button type for the actions list

## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [x] Visuals match Design Specs in Figma
- [x] Stories accompany any component changes
- [x] Code is in accordance with our style guide
- [x] Design tokens are utilized
- [x] Unit tests accompany any component changes
- [ ] ~TSDoc is written for any API surface area~
- [ ] ~Specs are up-to-date
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.

.changeset/long-bananas-push.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+feat(ForgeLayout): add button action

easy-ui-react/src/ForgeLayout/ForgeLayout.stories.tsx

@@ -97,10 +97,10 @@ const Template = (args: Partial<ForgeLayoutProps>) => {
               accessibilityLabel="Action 3"
               iconSymbol={AccountCircleIcon}
             />
-            <ForgeLayout.LinkAction
-              href="/5"
+            <ForgeLayout.ButtonAction
               accessibilityLabel="Action 4"
               iconSymbol={DoorOpenIcon}
+              onPress={action("Button clicked!")}
             />
           </ForgeLayout.Actions>
         </ForgeLayout.Header>

easy-ui-react/src/ForgeLayout/ForgeLayout.test.tsx

@@ -155,6 +155,11 @@ function createForgeLayout(
             accessibilityLabel="Action 3"
             iconSymbol={Icon}
           />
+          <ForgeLayout.ButtonAction
+            accessibilityLabel="Action 4"
+            iconSymbol={Icon}
+            onPress={() => {}}
+          />
         </ForgeLayout.Actions>
       </ForgeLayout.Header>
       <ForgeLayout.Content>{content}</ForgeLayout.Content>

easy-ui-react/src/ForgeLayout/ForgeLayout.tsx

@@ -3,6 +3,7 @@ import { classNames, variationName } from "../utilities/css";
 import {
   ForgeLayoutActionBadge,
   ForgeLayoutActions,
+  ForgeLayoutButtonAction,
   ForgeLayoutLinkAction,
   ForgeLayoutMenuAction,
 } from "./ForgeLayoutActions";
@@ -262,6 +263,11 @@ ForgeLayout.MenuAction = ForgeLayoutMenuAction;
  */
 ForgeLayout.LinkAction = ForgeLayoutLinkAction;
 
+/**
+ * Represents a secondary button action of a `<ForgeLayout />`.
+ */
+ForgeLayout.ButtonAction = ForgeLayoutButtonAction;
+
 /**
  * Represents the main content of a `<ForgeLayout />`.
  */

easy-ui-react/src/ForgeLayout/ForgeLayoutActions.module.scss

@@ -17,11 +17,13 @@
   outline: none;
 }
 
-.focused {
+.focused,
+[data-focus-visible="true"] {
   @include native-focus-ring;
 }
 
-.hovered {
+.hovered,
+[data-hovered="true"] {
   background-color: design-token("color.neutral.050");
 }
 

easy-ui-react/src/ForgeLayout/ForgeLayoutActions.tsx

@@ -15,6 +15,8 @@ import {
   useLink,
   usePress,
 } from "react-aria";
+import { Button } from "react-aria-components";
+import { ButtonProps } from "../Button";
 import { HorizontalStack } from "../HorizontalStack";
 import { Icon } from "../Icon";
 import { Menu } from "../Menu";
@@ -62,6 +64,21 @@ export type ForgeLayoutLinkActionProps = {
   renderBadge?: () => ReactNode;
 } & AriaLinkOptions;
 
+export type ForgeLayoutButtonActionProps = {
+  /** Optional custom accessibility label describing the menu action. */
+  accessibilityLabel?: string;
+
+  /** Action button icon symbol. */
+  iconSymbol: IconSymbol;
+
+  /** Whether or not action button is selected. */
+  isSelected?: boolean;
+
+  /** Badge for the action. */
+  renderBadge?: () => ReactNode;
+} & ButtonProps &
+  React.RefAttributes<HTMLButtonElement>;
+
 export function ForgeLayoutActions(props: ForgeLayoutActionsProps) {
   const { children } = props;
   return (
@@ -142,6 +159,32 @@ export function ForgeLayoutLinkAction(props: ForgeLayoutLinkActionProps) {
   );
 }
 
+export function ForgeLayoutButtonAction(props: ForgeLayoutButtonActionProps) {
+  const {
+    accessibilityLabel = "Actions",
+    iconSymbol,
+    renderBadge,
+    isSelected,
+    ...buttonProps
+  } = props;
+  const ref = useRef(null);
+  const className = classNames(styles.button, isSelected && styles.selected);
+  return (
+    <Button
+      ref={ref}
+      className={className}
+      aria-current={isSelected ? "true" : undefined}
+      {...buttonProps}
+    >
+      <Text visuallyHidden>{accessibilityLabel}</Text>
+      <Icon symbol={iconSymbol} />
+      {renderBadge && (
+        <div className={styles.badgeContainer}>{renderBadge()}</div>
+      )}
+    </Button>
+  );
+}
+
 export function ForgeLayoutActionBadge(props: ForgeLayoutActionBadgeProps) {
   const { children } = props;
   return <div className={styles.badge}>{children}</div>;