Question: How to get properties from parent?

[RafaelAndeloci]

Hey Everyone 👋

So, i'm creating a design system using Radix ui primitives and i'm new to the library so sorry if I am being dumb here

So, my intention is to create a variant of size in the select input that by default have only one default variant, so by searching and trying things I extended the SelectPrimary.Root and added new things:

export type SelectSize = 'sm' | 'md' | 'lg';
export interface SelectProps extends SelectPrimitive.SelectProps {
  invalid?: boolean;
  size?: SelectSize;
}

const SelectRoot = React.forwardRef<
  React.ElementRef<React.FC<SelectProps>>,
  React.ComponentPropsWithoutRef<React.FC<SelectProps>>
>((props) => <SelectPrimitive.Root {...props} />);
SelectRoot.displayName = SelectPrimitive.Root.displayName;

then in my usage it is working as it should, I can now pass the property of size and invalid to the Select Root:

function SelectBasic() {
  return (
    <Select size="md">
      <Select.Trigger className="w-[280px]">
        <Select.Value className="bg-red-600" placeholder="Select a timezone" />
      </Select.Trigger>
      <Select.Content>
      ...

but then I want to retrieve the value of this property to style the children of the Root (i'm using class variance authority and tailwind to do the styling or the shadcn-ui style-like if you prefer).

i created a abstraction for the sizes variants in my formClass.ts:

export const formClass = {
  base: ...,
  variants: {
    size: {
      sm: 'h-8 px-3 py-2 text-sm leading-none',
      md: 'h-11 px-6 py-3 text-sm leading-normal',
      lg: 'h-14 px-6 py-4 text-base leading-normal',
    },
  },
  defaultVariants: {
    size: 'sm',
  },
} as const;

then in my index.ts:

const triggerVariants = cva([formClass.base, 'invalid:ring-error-600'], {
  variants: {
    size: {
      ...formClass.variants.size,
    },
  },
  defaultVariants: {
    size: 'sm',
  },
});

interface SelectTrigerProps
  extends Merge<
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
    VariantProps<typeof triggerVariants>
  > {}

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  SelectTrigerProps
>(({ className, size = 'sm', children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    data-size={size}
    className={cn(triggerVariants({ size }), 'inline-flex gap-2', className)}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="ml-auto h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

So, now i want the SelectTrigger size to have the same value of the SelectRoot size, but i don't know how to do it... can someone pls help me?

[RafaelAndeloci]

Sorry for the long question btw, i wanted to give the most context as possible

[laneschmidt]

+1, I cannot figure out how to do this as well.

maybe a dumb suggestion, but did you try cloning the element ie.

cloneElement(children, { size })

and passing along the prop that way?

[RafaelAndeloci]

Well, after spending some time trying things I went to the conclusion that using React Context is the best way to handle this.

I just created a context in the SelectRoot and then used the context value to set the size and invalid in the children components

[laneschmidt]

Yes I arrived at the same conclusion

[lukasklee]

@RafaelAndeloci I'm facing the exact same problem now. Could you post a code snippet of your solution? That would help a lot, thank you!