Skip to content

Commit 0cc75df

Browse files
JonasBawedamija
authored andcommitted
feat(data-forwarding): add padding prop to FieldLayout components (#108803)
Adds an optional `padding` prop to `FieldLayout.Row` and `FieldLayout.Stack` in `static/app/components/core/form/layout/index.tsx`. Needed by the data forwarding form migration (follow-up PRs) where form fields rendered inside a `Disclosure` require padding to match the surrounding layout. Since these are layout components, I think it is reasonable for us to forward the props
1 parent 3247a7e commit 0cc75df

File tree

1 file changed

+25
-5
lines changed
  • static/app/components/core/form/layout

1 file changed

+25
-5
lines changed

static/app/components/core/form/layout/index.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import {FieldMeta} from '@sentry/scraps/form/field/meta';
22
import {useFieldContext} from '@sentry/scraps/form/formContext';
3-
import {Container, Flex, Stack} from '@sentry/scraps/layout';
3+
import {
4+
Container,
5+
Flex,
6+
Stack,
7+
type FlexProps,
8+
type StackProps,
9+
} from '@sentry/scraps/layout';
410

511
interface LayoutProps {
612
children: React.ReactNode;
@@ -10,12 +16,22 @@ interface LayoutProps {
1016
variant?: 'compact';
1117
}
1218

13-
function RowLayout(props: LayoutProps) {
19+
interface RowLayoutProps extends LayoutProps {
20+
padding?: FlexProps<'div'>['padding'];
21+
}
22+
23+
function RowLayout(props: RowLayoutProps) {
1424
const isCompact = props.variant === 'compact';
1525
const field = useFieldContext();
1626

1727
return (
18-
<Flex id={field.name} gap="sm" align="center" justify="between">
28+
<Flex
29+
id={field.name}
30+
gap="sm"
31+
align="center"
32+
justify="between"
33+
padding={props.padding}
34+
>
1935
<Stack width="50%" gap="xs">
2036
<Flex gap="xs" align="center">
2137
<FieldMeta.Label
@@ -35,12 +51,16 @@ function RowLayout(props: LayoutProps) {
3551
);
3652
}
3753

38-
function StackLayout(props: LayoutProps) {
54+
interface StackLayoutProps extends LayoutProps {
55+
padding?: StackProps<'div'>['padding'];
56+
}
57+
58+
function StackLayout(props: StackLayoutProps) {
3959
const isCompact = props.variant === 'compact';
4060
const field = useFieldContext();
4161

4262
return (
43-
<Stack id={field.name} gap="md">
63+
<Stack id={field.name} gap="md" padding={props.padding}>
4464
<Flex gap="xs" align="center">
4565
<FieldMeta.Label
4666
required={props.required}

0 commit comments

Comments
 (0)