Skip to content

Harryhao/cds 1513 consolidate listcell border props #352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haoruikun-cb wants to merge 4 commits into
base: cds-v9
Choose a base branch
from
+478 −13
Open

Harryhao/cds 1513 consolidate listcell border props #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b40f631
feat: consolidate border props in Cell component
haoruikun-cb Jan 29, 2026
f84b95d
fix: lint issues
haoruikun-cb Jan 29, 2026
c14a73a
chore: address code review feedback
haoruikun-cb Feb 11, 2026
370d69f
feat: refactored useResolveResponsiveProp
haoruikun-cb Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 67 additions & 4 deletions packages/mobile/src/cells/Cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,24 @@ export const Cell = memo(function Cell({
accessory,
accessoryNode,
alignItems = 'center',
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius = 200,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
children,
styles,
end,
Expand Down Expand Up @@ -143,9 +160,55 @@ export const Cell = memo(function Cell({

const { marginX: innerSpacingMarginX, ...innerSpacingWithoutMarginX } = innerSpacing;

// Border props must be applied to the internal Pressable wrapper for correct visual rendering.
// The outer Box was only meant to create padding outside the Pressable area; this behavior
// will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
const borderProps = useMemo(
Copy link
Contributor

@cb-ekuersch cb-ekuersch Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please leave a comment:

  • explaining why we need to collect the border props
  • a link to the linear issue we created to remove the outer Cell element (i believe we have one, if not lets create a breaking change cds-v10 issue for it)

() => ({
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
}),
[
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
],
);

const content = useMemo(() => {
const contentContainerProps = {
borderRadius,
...borderProps,
testID,
renderToHardwareTextureAndroid: disabled,
...(selected ? { background } : {}),
Expand Down Expand Up @@ -233,7 +296,7 @@ export const Cell = memo(function Cell({
</VStack>
);
}, [
borderRadius,
borderProps,
testID,
disabled,
selected,
Expand Down Expand Up @@ -281,7 +344,7 @@ export const Cell = memo(function Cell({
accessibilityState={{ disabled, ...accessibilityState }}
background="bg"
blendStyles={blendStyles}
borderRadius={borderRadius}
{...borderProps}
contentStyle={pressStyles}
disabled={disabled}
onPress={onPress}
Expand All @@ -304,7 +367,7 @@ export const Cell = memo(function Cell({
styles?.pressable,
accessibilityState,
blendStyles,
borderRadius,
borderProps,
]);

return (
Expand Down
74 changes: 74 additions & 0 deletions packages/mobile/src/cells/__stories__/ListCell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -794,6 +794,77 @@ const WithHelperText = () => (
</>
);

const BorderCustomization = () => {
const [isCondensed, setIsCondensed] = useState(true);
const spacingVariant = isCondensed ? 'condensed' : 'normal';

return (
<VStack gap={2} padding={2}>
<Switch
checked={isCondensed}
onChange={(_, nextChecked) => setIsCondensed(Boolean(nextChecked))}
>
Spacing variant: {spacingVariant}
</Switch>
<ListCell
Copy link
Contributor

@cb-ekuersch cb-ekuersch Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitL are this many examples necessary? Try to limit stories to a few key examples. Keep in mind the primary use case is visual regression testing and visual documentation/interaction.

Copy link
Contributor Author

@haoruikun-cb haoruikun-cb Feb 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok that make sense, I'll cut down the story here and only leave interesting/important examples

bordered
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="bordered"
/>
<ListCell
borderedTop
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderedTop"
/>
<ListCell
borderedHorizontal
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderedHorizontal"
/>
<ListCell
bordered
borderColor="accentBoldPurple"
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderColor"
/>
<ListCell
borderColor="bgLine"
borderWidth={200}
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderWidth"
/>
<ListCell
borderColor="bgLine"
borderTopWidth={200}
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderTopWidth"
/>
<ListCell
borderColor="bgLine"
borderRadius={200}
borderWidth={100}
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderRadius"
/>
<ListCell
borderColor="bgLine"
borderTopLeftRadius={300}
borderWidth={100}
onPress={onPressConsole}
spacingVariant={spacingVariant}
title="borderTopLeftRadius"
/>
</VStack>
);
};

const CustomSpacing = () => (
<>
<ListCell
Expand Down Expand Up @@ -1213,6 +1284,9 @@ const ListCellScreen = () => {
<Example inline title="WithHelperText" titlePadding={titlePadding}>
<WithHelperText />
</Example>
<Example inline title="BorderCustomization" titlePadding={titlePadding}>
<BorderCustomization />
</Example>
<Example inline title="CustomSpacing" titlePadding={titlePadding}>
<CustomSpacing />
</Example>
Expand Down
70 changes: 66 additions & 4 deletions packages/web/src/cells/Cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,24 @@ export const Cell: CellComponent = memo(
accessory,
accessoryNode,
alignItems = 'center',
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius = 200,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
children,
style,
styles,
Expand Down Expand Up @@ -255,11 +272,56 @@ export const Cell: CellComponent = memo(
const isButton = Boolean(onClick ?? onKeyDown ?? onKeyUp);
const linkable = isAnchor || isButton;
const contentTruncationStyle = cx(baseCss, shouldTruncate && truncationCss);
// Border props must be applied to the internal Pressable wrapper for correct visual rendering.
// The outer Box was only meant to create padding outside the Pressable area; this behavior
// will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
const borderProps = useMemo(
() => ({
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
}),
[
bordered,
borderedBottom,
borderedEnd,
borderedHorizontal,
borderedStart,
borderedTop,
borderedVertical,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomWidth,
borderColor,
borderEndWidth,
borderRadius,
borderStartWidth,
borderTopLeftRadius,
borderTopRightRadius,
borderTopWidth,
borderWidth,
],
);
const content = useMemo(() => {
// props for the entire inner container that wraps the top content
// (media, children, intermediary, detail, accessory) and the bottom content
const contentContainerProps = {
borderRadius,
...borderProps,
className: cx(contentClassName, classNames?.contentContainer),
testID,
...(selected ? { background } : {}),
Expand Down Expand Up @@ -361,7 +423,7 @@ export const Cell: CellComponent = memo(
</VStack>
);
}, [
borderRadius,
borderProps,
contentClassName,
classNames?.contentContainer,
classNames?.topContent,
Expand Down Expand Up @@ -410,7 +472,7 @@ export const Cell: CellComponent = memo(
accessibilityLabel,
accessibilityLabelledBy,
background: 'bg' as const,
borderRadius,
...borderProps,
className: cx(pressCss, insetFocusRingCss, classNames?.pressable),
disabled,
marginX: innerSpacingMarginX,
Expand Down Expand Up @@ -440,7 +502,7 @@ export const Cell: CellComponent = memo(
accessibilityHint,
accessibilityLabel,
accessibilityLabelledBy,
borderRadius,
borderProps,
classNames?.pressable,
disabled,
innerSpacingMarginX,
Expand Down
Loading