type check and refactor

primer · Jun 10, 2024 · de87b0d · de87b0d
1 parent ed80257
commit de87b0d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 38 deletions.
diff --git a/packages/react/src/PageHeader/PageHeader.stories.tsx b/packages/react/src/PageHeader/PageHeader.stories.tsx
@@ -189,14 +189,14 @@ export default meta
 
 export const Playground: Story = args => (
   <Box sx={{padding: 3}}>
-    <PageHeader>
-      <PageHeader.TitleArea
-        variant={{
-          narrow: args['Title.variant'],
-          regular: args['Title.variant'],
-          wide: args['Title.variant'],
-        }}
-      >
+    <PageHeader
+      variant={{
+        narrow: args['Title.variant'],
+        regular: args['Title.variant'],
+        wide: args['Title.variant'],
+      }}
+    >
+      <PageHeader.TitleArea>
         <PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
         <PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
           {args.Title}

diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
@@ -321,40 +321,33 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
     </Box>
   )
 }
-
-type TitleAreaProps = {
-  // variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
-} & ChildrenPropTypes
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.
 // PageHeader.TitleArea Sub Components: PageHeader.LeadingVisual, PageHeader.Title, PageTitle.TrailingVisual
 // ---------------------------------------------------------------------
 
-const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
-  ({children, sx = {}, hidden = false}, forwardedRef) => {
-    return (
-      <Box
-        ref={forwardedRef}
-        data-component="TitleArea"
-        sx={merge<BetterSystemStyleObject>(
-          {
-            gridRow: GRID_ROW_ORDER.TitleArea,
-            gridArea: 'title-area',
-            display: 'flex',
-            gap: '0.5rem',
-            ...getBreakpointDeclarations(hidden, 'display', value => {
-              return value ? 'none' : 'flex'
-            }),
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-          },
-          sx,
-        )}
-      >
-        {children}
-      </Box>
-    )
-  },
-) as PolymorphicForwardRefComponent<'div', TitleAreaProps>
+const TitleArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+  return (
+    <Box
+      data-component="TitleArea"
+      sx={merge<BetterSystemStyleObject>(
+        {
+          gridRow: GRID_ROW_ORDER.TitleArea,
+          gridArea: 'title-area',
+          display: 'flex',
+          gap: '0.5rem',
+          ...getBreakpointDeclarations(hidden, 'display', value => {
+            return value ? 'none' : 'flex'
+          }),
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+        },
+        sx,
+      )}
+    >
+      {children}
+    </Box>
+  )
+}
 
 // PageHeader.LeadingAction and PageHeader.TrailingAction should only be visible on regular viewports.
 // So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.