Fix missing data-step-id across SDK. Fix missing part props in Checklist.Collapsible

Author: dfltr

packages/react/src/components/Announcement/index.tsx

@@ -19,24 +19,15 @@ export interface AnnouncementProps extends FlowPropsWithoutChildren, DialogProps
   defaultOpen?: boolean
 }
 
-export function Announcement({ flowId, part, ...props }: AnnouncementProps) {
+export function Announcement({ flowId, ...props }: AnnouncementProps) {
   return (
-    <Flow
-      as={Dialog}
-      display="flex"
-      flexDirection="column"
-      flowId={flowId}
-      gap={5}
-      part={['announcement', part]}
-      textAlign="center"
-      {...props}
-    >
+    <Flow as={null} flowId={flowId} {...props}>
       {({
         flow,
         handleDismiss,
         handlePrimary,
         handleSecondary,
-        parentProps: { dismissible },
+        parentProps: { containerProps, dismissible },
         step,
       }) => {
         const primaryButtonTitle = step.primaryButton?.title ?? step.primaryButtonTitle
@@ -47,7 +38,15 @@ export function Announcement({ flowId, part, ...props }: AnnouncementProps) {
         const { videoProps } = getVideoProps(step.props ?? {})
 
         return (
-          <>
+          <Dialog
+            data-step-id={step.id}
+            display="flex"
+            flexDirection="column"
+            gap={5}
+            part="announcement"
+            textAlign="center"
+            {...containerProps}
+          >
             {dismissible && <Dialog.Dismiss onClick={handleDismiss} />}
             <Flex.Column gap={1} part="announcement-header">
               <Dialog.Title>{step.title}</Dialog.Title>
@@ -95,7 +94,7 @@ export function Announcement({ flowId, part, ...props }: AnnouncementProps) {
                 />
               )}
             </Flex.Row>
-          </>
+          </Dialog>
         )
       }}
     </Flow>

packages/react/src/components/Banner/index.tsx

@@ -5,30 +5,35 @@ import { Box } from '@/components/Box'
 
 export interface BannerProps extends FlowPropsWithoutChildren {}
 
-export function Banner({ flowId, part, ...props }: BannerProps) {
+export function Banner({ flowId, ...props }: BannerProps) {
   return (
-    <Flow
-      alignItems="center"
-      aria-label="Banner"
-      as={Card}
-      borderWidth="md"
-      display="flex"
-      flexDirection="row"
-      flowId={flowId}
-      gap={3}
-      justifyContent="flex-start"
-      part={['banner', part]}
-      role="complementary"
-      {...props}
-    >
-      {({ handleDismiss, handlePrimary, handleSecondary, parentProps: { dismissible }, step }) => {
+    <Flow as={null} flowId={flowId} {...props}>
+      {({
+        handleDismiss,
+        handlePrimary,
+        handleSecondary,
+        parentProps: { containerProps, dismissible },
+        step,
+      }) => {
         const primaryButtonTitle = step.primaryButton?.title ?? step.primaryButtonTitle
         const secondaryButtonTitle = step.secondaryButton?.title ?? step.secondaryButtonTitle
 
         const disabled = step.$state.blocked
 
         return (
-          <>
+          <Card
+            alignItems="center"
+            aria-label="Banner"
+            borderWidth="md"
+            data-step-id={step.id}
+            display="flex"
+            flexDirection="row"
+            gap={3}
+            justifyContent="flex-start"
+            part="banner"
+            role="complementary"
+            {...containerProps}
+          >
             {step.imageUri && (
               <Box
                 as="img"
@@ -50,7 +55,7 @@ export function Banner({ flowId, part, ...props }: BannerProps) {
             />
             <Card.Primary disabled={disabled} title={primaryButtonTitle} onClick={handlePrimary} />
             {dismissible && <Card.Dismiss onClick={handleDismiss} />}
-          </>
+          </Card>
         )
       }}
     </Flow>

packages/react/src/components/Checklist/CarouselStep.tsx

@@ -42,6 +42,7 @@ export function CarouselStep({ onPrimary, onSecondary, step }: CarouselStepProps
           flexBasis: '25%',
         },
       }}
+      data-step-id={step.id}
       flex="0 0 30%"
       gap="2"
       p="4"

packages/react/src/components/Checklist/Collapsible.tsx

@@ -76,7 +76,12 @@ function DefaultCollapsibleStep({
   const { videoProps } = getVideoProps(stepProps)
 
   return (
-    <CollapsibleStep.Root open={open} onOpenChange={onOpenChange} {...stepProps}>
+    <CollapsibleStep.Root
+      data-step-id={step.id}
+      open={open}
+      onOpenChange={onOpenChange}
+      {...stepProps}
+    >
       <CollapsibleStep.Trigger
         isBlocked={step.$state.blocked}
         isCompleted={completed || skipped}
@@ -183,17 +188,16 @@ export function Collapsible({
 
           return (
             <>
-              <Flex.Column gap={2}>
+              <Flex.Column gap={2} part="checklist-header">
                 <Card.Header
                   dismissible={dismissible}
                   handleDismiss={handleDismiss}
-                  part="checklist-header"
                   subtitle={flow.subtitle}
                   title={flow.title}
                 />
 
-                <Flex.Row alignItems="center" gap={2}>
-                  <Text.Body2 fontWeight="demibold">
+                <Flex.Row alignItems="center" gap={2} part="checklist-progress">
+                  <Text.Body2 fontWeight="demibold" part="progress-text">
                     {currentSteps}/{availableSteps}
                   </Text.Body2>
                   <Progress.Bar current={currentSteps} total={availableSteps} flexGrow={1} />

packages/react/src/components/Checklist/CollapsibleStep.tsx

@@ -49,6 +49,7 @@ function CheckIndicator({ checked = false }) {
       borderStyle="solid"
       borderColor="neutral.border"
       borderRadius="100%"
+      marginRight="2"
       padding="0"
       part="field-radio-value"
       position="relative"
@@ -100,7 +101,7 @@ export function Content({ children }) {
           It creates a flex gap at the top of this column, which animates smoothly.
           Other forms of whitespace like margin or padding? Not so smooth!
         */}
-        <Box />
+        <Box part="checklist-spacer" />
 
         {children}
       </Flex.Column>
@@ -139,7 +140,7 @@ export function Trigger({ isCompleted, isBlocked, title }) {
     <Collapsible.Trigger asChild>
       <Flex.Row
         alignItems="center"
-        justifyContent="space-between"
+        justifyContent="flex-start"
         margin={-5}
         padding={5}
         zIndex={1}
@@ -149,12 +150,10 @@ export function Trigger({ isCompleted, isBlocked, title }) {
         cursor={isBlocked ? 'not-allowed' : 'pointer'}
         part="collapsible-header"
       >
-        <Flex.Row alignItems="center" gap={2}>
-          <CheckIndicator checked={isCompleted} />
-          <Text.Body2 fontWeight="demibold" userSelect="none" part="collapsible-title">
-            {title}
-          </Text.Body2>
-        </Flex.Row>
+        <CheckIndicator checked={isCompleted} />
+        <Text.Body2 fontWeight="demibold" userSelect="none" part="collapsible-title">
+          {title}
+        </Text.Body2>
 
         <Box
           as={ChevronDownIcon}
@@ -166,6 +165,7 @@ export function Trigger({ isCompleted, isBlocked, title }) {
           }}
           display="block"
           height="16px"
+          marginLeft="auto"
           order={2}
           part="collapsible-step-icon"
           width="16px"

packages/react/src/components/Checklist/FloatingStep.tsx

@@ -11,7 +11,6 @@ import { useStepHandlers } from '@/hooks/useStepHandlers'
 
 import { floatingTransitionCSS } from '@/components/Checklist/Floating.styles'
 
-// TODO: Type props
 export function FloatingStep({ onPrimary, onSecondary, openStepId, setOpenStepId, step }) {
   const anchorPointerEnterTimeout = useRef<ReturnType<typeof setTimeout>>()
   const { handlePrimary, handleSecondary } = useStepHandlers(step, { onPrimary, onSecondary })
@@ -34,7 +33,6 @@ export function FloatingStep({ onPrimary, onSecondary, openStepId, setOpenStepId
     }
   }
 
-  // TODO: Handle tap while open on mobile to close step
   function handlePointerEnter() {
     clearTimeout(anchorPointerEnterTimeout.current)
 

packages/react/src/components/Flow/FlowProps.ts

@@ -81,6 +81,7 @@ export interface FlowProps extends FlowPropsWithoutChildren {
 }
 
 type ParentProps = {
+  as: FlowPropsWithoutChildren['as']
   containerProps: Record<string, unknown>
   dismissible: boolean
   flowId: string

packages/react/src/components/Flow/index.tsx

@@ -146,6 +146,7 @@ export function Flow({
         handlePrimary,
         handleSecondary,
         parentProps: {
+          as,
           dismissible,
           flowId,
           variables,