dohomi / tamagui-kitchen-sink

Problem: The space in LmFormFieldContainer can restrict styling.

Solution: Allow LmFormFieldContainer to take a prop that affects the space prop passed to the YStack. Without being able to change it the styling becomes a bit tricky, relying on inverse margins.

Re:

tamagui-kitchen-sink/packages/ui/src/form/LmFormFieldContainer.tsx

Line 63 in cb9b87c

I think a prop of something like inputSpace or inputHelperSpace would work:

export function LmFormFieldContainer({
  label,
  ...
  inputSpace = true, // inputSpace?: SpaceTokens | null | undefined
  ...rest
}: LmFormContainerProps) {
  return (
    <StackContainer space={!!rest.labelInline} {...rest}>
           ...
63:      <YStack space={inputSpace}>
64:        {children}
           ...
}

Alternatively, switching to gap instead of space and allowing a prop like inputGap or inputHelperGap would allow it to be overridden.

Also I'd like to say thanks for this creating and maintaining this project, its been massively helpful!

@roguealexander thanks for checking out this repo! Yeah now you mention that, I will need to rethink... maybe I just add a margin top to the helperText and dump the YStack? because the helperProps are already overwritable..? would that make sense?

Thats a good point, simply removing the space and leaving the styling to the helperText makes the most sense to me, and doesn't require any new props

great I will work on that in the next release. Today Storybook 7.0.5 got released which finally make the docs of the stories readable again, that hopefully make the examples easier to integrate

0.16.0 is released which now uses marginTop on helperText. the space prop is removed.

Introduce a prop to overwrite the `space` prop of the `YStack` in `LmFormFieldContainer`