Variant context for child components

[jjenzz]

Thinking aloud here but I was wondering what thoughts are on supplying an API so consumers can specify that child components should inherit parent variant props?

<Accordion size="small">
	<AccordionItem /> {/* inherit small */}
	<AccordionItem /> {/* inherit small */}

	{/* vs having to do this manually which means inconsistencies can creep in: */}
	<AccordionItem size="small" />
	<AccordionItem size="small" />
	<AccordionItem size="large" /> {/* a large item in a small accordion 🙅 */}
</Accordion>

This is a common requirement that currently consumers would need to piece together themselves.

I'm imagining something like:

// if we do the functional variants API

const Accordion = styled('ul', {}).variant('size', {
	small: {}
	large: {}
});


const AccordionItem = styled('li', {}).variant(Accordion, 'size', {
	small: { fontSize: 11 },
	large: { fontSize: 16 },
});

The thinking here is that this would wrap AccordionItem in some Context so that when someone does <Accordion size="small" /> we would do <AccordionItem size="small" /> for them.

If the first parameter passed to variant is a React Component then we would limit the variant definitions to the variants that exist on that component.

I also like the way this could improve DX with typing. For example, if someone removed "size" from Accordion the AccordionItem would error because you're telling it to style based on a parent variant that no longer exists.

There is probably a better API for this but as a concept I think it would be useful. Thoughts?

[secretlifeof]

That is a nice concept! I tried to build something like this.

The API that I felt made sense was

// merg variants from multiple parents
const AccordionItem = styled(‘li’, {}).mergeVariant([Accordion])

// merge styles from parents
// it is similar to styled(Accordion) but more flexible because you can merge multiple components
const AccordionItem = styled(‘li’, {}).merge([Accordion])

[funwithtriangles]

I came here looking for this exact thing. With the Toolbar primitive, I'm currently having to pass orientation props to all of the child components which feels a bit silly at times. Could the API not look something like the below, where you give a special!inherit string to whatever child component you want to inherit variants from above?

const StyledSeparator = styled(ToolbarPrimitive.Separator, {
  variants: {
    orientation: {
      horizontal: {
        borderLeft: borderDefault,
        height: "38%",
      },
      vertical: {
        borderTop: borderDefault,
        width: "38%",
      },
    },
  },
  defaultVariants: {
    orientation: "!inherit",
  },
})

[joseDaKing]

You could use css variables that are used by the child components but set in the parent component

[jjenzz]

Yeah this was some really old thinking and there are potentially clearer ways to achieve it like @joseDaKing suggests without any modifications to the API.

However, you would still need to pass the orientation as a prop to the Separator in your case because it is also used to configure a11y requirements which isn't a stitches concern.