ref(onboarding): Extract ScmSelectableContainer for border compensation

Author: jaydgoss

static/app/views/onboarding/components/scmAlertOptionCard.tsx

@@ -1,8 +1,9 @@
-import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
+import {Flex, Grid, Stack} from '@sentry/scraps/layout';
 import {Radio} from '@sentry/scraps/radio';
 import {Text} from '@sentry/scraps/text';
 
 import {ScmCardButton} from 'sentry/views/onboarding/components/scmCardButton';
+import {ScmSelectableContainer} from 'sentry/views/onboarding/components/scmSelectableContainer';
 
 interface ScmAlertOptionCardProps {
   icon: React.ReactNode;
@@ -22,20 +23,15 @@ export function ScmAlertOptionCard({
   return (
     <ScmCardButton aria-checked={isSelected} onClick={onSelect}>
       <Stack gap="lg">
-        <Container
-          border={isSelected ? 'accent' : 'secondary'}
-          padding="lg"
-          radius="md"
-          style={isSelected ? {marginBottom: 1} : {borderBottomWidth: 2}}
-        >
+        <ScmSelectableContainer isSelected={isSelected} padding="lg">
           <Grid gap="md" align="center" columns="min-content 1fr min-content">
             <Radio size="sm" readOnly checked={isSelected} tabIndex={-1} />
             <Text bold={isSelected} size="md" density="comfortable">
               {label}
             </Text>
             <Flex align="center">{icon}</Flex>
           </Grid>
-        </Container>
+        </ScmSelectableContainer>
         {children}
       </Stack>
     </ScmCardButton>

static/app/views/onboarding/components/scmFeatureCard.tsx

@@ -8,6 +8,7 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 import type {SVGIconProps} from 'sentry/icons/svgIcon';
 
 import {ScmCardButton} from './scmCardButton';
+import {ScmSelectableContainer} from './scmSelectableContainer';
 
 interface ScmFeatureCardProps {
   description: string;
@@ -42,12 +43,11 @@ export function ScmFeatureCard({
         disabled={disabled}
         style={{width: '100%', height: '100%'}}
       >
-        <Container
-          border={isSelected ? 'accent' : 'secondary'}
+        <ScmSelectableContainer
+          isSelected={isSelected}
           padding="xl"
-          radius="md"
           height="100%"
-          style={isSelected ? {marginBottom: 2} : {borderBottomWidth: 3}} // this prevents el height from changing when switching border variant
+          borderCompensation={3}
         >
           <Flex>
             <Grid
@@ -90,7 +90,7 @@ export function ScmFeatureCard({
               />
             </Flex>
           </Flex>
-        </Container>
+        </ScmSelectableContainer>
       </ScmCardButton>
     </Tooltip>
   );

static/app/views/onboarding/components/scmPlatformCard.tsx

@@ -1,11 +1,12 @@
 import {PlatformIcon} from 'platformicons';
 
-import {Container, Grid, Stack} from '@sentry/scraps/layout';
+import {Grid, Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import type {PlatformKey} from 'sentry/types/project';
 
 import {ScmCardButton} from './scmCardButton';
+import {ScmSelectableContainer} from './scmSelectableContainer';
 
 interface ScmPlatformCardProps {
   isSelected: boolean;
@@ -24,7 +25,7 @@ export function ScmPlatformCard({
 }: ScmPlatformCardProps) {
   return (
     <ScmCardButton onClick={onClick} role="radio" aria-checked={isSelected}>
-      <Container border={isSelected ? 'accent' : 'secondary'} padding="lg" radius="md">
+      <ScmSelectableContainer isSelected={isSelected} padding="lg">
         <Grid gap="md" align="center" columns="max-content min-content">
           <PlatformIcon platform={platform} size={28} />
           <Stack gap="0">
@@ -36,7 +37,7 @@ export function ScmPlatformCard({
             </Text>
           </Stack>
         </Grid>
-      </Container>
+      </ScmSelectableContainer>
     </ScmCardButton>
   );
 }

static/app/views/onboarding/components/scmSelectableContainer.tsx

@@ -0,0 +1,36 @@
+import type {ComponentProps} from 'react';
+
+import {Container} from '@sentry/scraps/layout';
+
+interface ScmSelectableContainerProps extends ComponentProps<typeof Container> {
+  isSelected: boolean;
+  /**
+   * Accent borders are thicker than secondary borders, causing a layout
+   * shift when toggling selection. This compensation value offsets the
+   * difference via marginBottom (selected) / borderBottomWidth (unselected).
+   * Will be unnecessary once the design system provides a stable-height
+   * selected border variant.
+   */
+  borderCompensation?: number;
+}
+
+export function ScmSelectableContainer({
+  isSelected,
+  borderCompensation = 2,
+  style,
+  ...props
+}: ScmSelectableContainerProps) {
+  return (
+    <Container
+      border={isSelected ? 'accent' : 'secondary'}
+      radius="md"
+      style={{
+        ...(isSelected
+          ? {marginBottom: borderCompensation - 1}
+          : {borderBottomWidth: borderCompensation}),
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}