diff --git a/.changeset/ninety-masks-report.md b/.changeset/ninety-masks-report.md new file mode 100644 index 0000000000..fc460384e4 --- /dev/null +++ b/.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. diff --git a/packages/paste-core/components/topbar/src/Topbar.tsx b/packages/paste-core/components/topbar/src/Topbar.tsx index f8596b5a03..08ec28b985 100644 --- a/packages/paste-core/components/topbar/src/Topbar.tsx +++ b/packages/paste-core/components/topbar/src/Topbar.tsx @@ -39,6 +39,7 @@ export const Topbar = React.forwardRef( display="flex" justifyContent="space-between" alignItems="center" + columnGap="space70" zIndex="zIndex40" > {children} diff --git a/packages/paste-core/components/topbar/src/TopbarActions.tsx b/packages/paste-core/components/topbar/src/TopbarActions.tsx index 9576428372..c8e04ec447 100644 --- a/packages/paste-core/components/topbar/src/TopbarActions.tsx +++ b/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( - ({ 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 ( { OverlayCompactTopbar.parameters = { padding: false, }; + +export const TopbarActionsExample: StoryFn = () => { + return ( + + + + Wizard title + + + + + {}}> + Label + + + {}}> + Label + + + {}} disabled> + Label + + + {}} disabled> + Label + + + {}} disabled> + Label + + + {}} disabled> + Label + + + + + + + + ); +}; +TopbarActionsExample.parameters = { + padding: false, +}; diff --git a/packages/paste-core/components/topbar/type-docs.json b/packages/paste-core/components/topbar/type-docs.json index 345b1d2385..c5478d2142 100644 --- a/packages/paste-core/components/topbar/type-docs.json +++ b/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",