Ability to pass in right justified title content for PageSectionBoxAc…

…tionRow (#14439) GitOrigin-RevId: 4e83b8ba47e14577513bc1820dc89ed4f61bd3d6
lightsparkdev · Dec 18, 2024 · 7c1d5b1 · 7c1d5b1
1 parent 517b346
commit 7c1d5b1
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/packages/ui/src/components/PageSection/PageSection.tsx b/packages/ui/src/components/PageSection/PageSection.tsx
@@ -193,6 +193,7 @@ type PageSectionBoxActionRowProps = {
   title?: string;
   titleBadge?: string | undefined;
   titleBadgeKind?: BadgeKind | undefined;
+  titleRightContent?: React.ReactNode;
   description?: string;
   separator?: boolean;
   children?: React.ReactNode;
@@ -203,6 +204,7 @@ export const PageSectionBoxActionRow = ({
   title,
   titleBadge,
   titleBadgeKind = "default",
+  titleRightContent,
   description,
   separator,
   children,
@@ -216,12 +218,15 @@ export const PageSectionBoxActionRow = ({
         smFlexColumn={Boolean(smFlexColumn)}
       >
         {title ? (
-          <div>
+          <div css={{ flex: 1 }}>
             <PageSectionBoxTitle>
-              {title}
-              {titleBadge ? (
-                <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
-              ) : null}
+              <div>
+                {title}
+                {titleBadge ? (
+                  <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
+                ) : null}
+              </div>
+              {titleRightContent}
             </PageSectionBoxTitle>
             {description ? (
               <PageSectionBoxDescription>
@@ -374,6 +379,8 @@ export const StyledPageSectionBox = styled.div`
 export const PageSectionBoxTitle = styled.div<{ lg?: boolean }>`
   display: flex;
   align-items: center;
+  width: 100%;
+  justify-content: space-between;
   font-size: ${({ lg }) => (lg ? 14 : 12)}px;
   font-weight: 600;
   line-height: ${({ lg }) =>