Move hitSlop into expandable logic

department-of-veterans-affairs · Jan 14, 2025 · 837e3db · 837e3db
1 parent 28a7e1b
commit 837e3db
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
@@ -168,20 +168,20 @@ export const Alert: FC<AlertProps> = ({
       </Text>
     )
 
-    const hitSlop: Insets = {
-      // left border/padding + spacer + icon width
-      left: spacing.vadsSpaceLg + spacing.vadsSpaceXs + spacing.vadsSpaceXl,
-      top: spacing.vadsSpaceLg,
-      // bottom spacing changes depending on expanded state
-      bottom: expanded ? spacing.vadsSpaceSm : spacing.vadsSpaceLg,
-      right: spacing.vadsSpaceLg,
-    }
-
     /**
      * Wrap header text and expand icon in Pressable if the Alert is expandable
      * Otherwise just return header text
      */
     if (expandable) {
+      const hitSlop: Insets = {
+        // left border/padding + spacer + icon width
+        left: spacing.vadsSpaceLg + spacing.vadsSpaceXs + spacing.vadsSpaceXl,
+        top: spacing.vadsSpaceLg,
+        // bottom spacing changes depending on expanded state
+        bottom: expanded ? spacing.vadsSpaceSm : spacing.vadsSpaceLg,
+        right: spacing.vadsSpaceLg,
+      }
+
       return (
         <Pressable
           onPress={toggleExpand}