chore(topbar): add justify center to topbar actions (#3584)

Author: nkrantz

.changeset/ninety-masks-report.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/topbar": minor
+"@twilio-paste/core": minor
+---
+
+[Topbar] Add third value to `justify` prop type on TopbarActions, "center", allowing actions within the topbar to be center justified. For use with ProgressSteps in the Wizard flow.

packages/paste-core/components/topbar/src/Topbar.tsx

@@ -39,6 +39,7 @@ export const Topbar = React.forwardRef<HTMLDivElement, TopbarProps>(
         display="flex"
         justifyContent="space-between"
         alignItems="center"
+        columnGap="space70"
         zIndex="zIndex40"
       >
         {children}

packages/paste-core/components/topbar/src/TopbarActions.tsx

@@ -4,7 +4,7 @@ import type { ResponsiveValue } from "@twilio-paste/styling-library";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
-type Justify = "start" | "end";
+type Justify = "start" | "end" | "center";
 export interface TopbarActionsProps extends HTMLPasteProps<"div"> {
   /**
    * Recommended: Account Switcher, User Dialog, Product Switcher, Search Input, etc.
@@ -22,10 +22,11 @@ export interface TopbarActionsProps extends HTMLPasteProps<"div"> {
    */
   element?: BoxElementProps["element"];
   /**
-   * Used to control where the actions are aligned visually, to the start or end of the container.
+   * Used to control where the actions are aligned visually, to the start or end or center of the container.
    *
    * @type {Justify}
    * @memberof TopbarActionsProps
+   * @default "end"
    */
   justify?: Justify;
   /**
@@ -36,13 +37,19 @@ export interface TopbarActionsProps extends HTMLPasteProps<"div"> {
    */
   display?: ResponsiveValue<"none" | "flex">;
 }
+
 const TopbarActions = React.forwardRef<HTMLDivElement, TopbarActionsProps>(
-  ({ children, element = "TOPBAR_ACTIONS", justify, display = "flex", ...props }, ref) => {
+  ({ children, element = "TOPBAR_ACTIONS", justify = "end", display = "flex", ...props }, ref) => {
+    const justifyContentValue = {
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+    };
     return (
       <Box
         {...safelySpreadBoxProps(props)}
         display={display}
-        justifyContent={justify === "start" ? "flex-start" : "flex-end"}
+        justifyContent={justifyContentValue[justify]}
         flexShrink={justify === "start" ? null : 0}
         flexWrap="wrap"
         flexGrow={1}

packages/paste-core/components/topbar/stories/topbar.stories.tsx

@@ -1,8 +1,17 @@
 import type { StoryFn } from "@storybook/react";
 import { Button } from "@twilio-paste/button";
+import { Heading } from "@twilio-paste/heading";
 import { ProductFlexIcon } from "@twilio-paste/icons/esm/ProductFlexIcon";
 import { UserIcon } from "@twilio-paste/icons/esm/UserIcon";
 import { Paragraph } from "@twilio-paste/paragraph";
+import {
+  ProgressStepComplete,
+  ProgressStepCurrent,
+  ProgressStepError,
+  ProgressStepIncomplete,
+  ProgressStepSeparator,
+  ProgressSteps,
+} from "@twilio-paste/progress-steps";
 import {
   Sidebar,
   SidebarBody,
@@ -271,3 +280,48 @@ export const OverlayCompactTopbar: StoryFn = () => {
 OverlayCompactTopbar.parameters = {
   padding: false,
 };
+
+export const TopbarActionsExample: StoryFn = () => {
+  return (
+    <Topbar id={useUID()}>
+      <TopbarActions justify="start">
+        <Heading as="h4" variant="heading30" marginBottom="space0">
+          Wizard title
+        </Heading>
+      </TopbarActions>
+      <TopbarActions justify="center">
+        <ProgressSteps>
+          <ProgressStepComplete as="button" onClick={() => {}}>
+            Label
+          </ProgressStepComplete>
+          <ProgressStepSeparator />
+          <ProgressStepCurrent as="button" onClick={() => {}}>
+            Label
+          </ProgressStepCurrent>
+          <ProgressStepSeparator />
+          <ProgressStepIncomplete as="button" onClick={() => {}} disabled>
+            Label
+          </ProgressStepIncomplete>
+          <ProgressStepSeparator />
+          <ProgressStepIncomplete as="button" onClick={() => {}} disabled>
+            Label
+          </ProgressStepIncomplete>
+          <ProgressStepSeparator />
+          <ProgressStepIncomplete as="button" onClick={() => {}} disabled>
+            Label
+          </ProgressStepIncomplete>
+          <ProgressStepSeparator />
+          <ProgressStepIncomplete as="button" onClick={() => {}} disabled>
+            Label
+          </ProgressStepIncomplete>
+        </ProgressSteps>
+      </TopbarActions>
+      <TopbarActions justify="end">
+        <Button variant="secondary">Cancel</Button>
+      </TopbarActions>
+    </Topbar>
+  );
+};
+TopbarActionsExample.parameters = {
+  padding: false,
+};

packages/paste-core/components/topbar/type-docs.json

@@ -2076,10 +2076,10 @@
     },
     "justify": {
       "type": "Justify",
-      "defaultValue": null,
+      "defaultValue": "end",
       "required": false,
       "externalProp": false,
-      "description": "Used to control where the actions are aligned visually, to the start or end of the container."
+      "description": "Used to control where the actions are aligned visually, to the start or end or center of the container."
     },
     "key": {
       "type": "Key",