Allow selecting another slot in slotRecipe

[khanh-le-otsv]

const buttonRecipe = defineSlotRecipe({
  className: 'button',
  slots: ['base', 'spinner'],
  variants: {
    sm: {
	  base: {
		spinner: {
		  w: '20',
		  h: '20',
		}
	  }
	}
  }
});

And it will generates class like this:

.button-base .spinner {
....
}

By doing this I would be able to override the default size of spinner component.
Is there a way for me to nest slot like this? Thank you 🙏

[astahmer]

this should work

const buttonRecipe = defineSlotRecipe({
  className: 'button',
  slots: ['base', 'spinner'],
  variants: {
    sm: {
	  base: {
-               spinner: {
+		"& .spinner": {
		  w: '20',
		  h: '20',
		}
	  }
	}
  }
});

you could even do something like

// ...
[`& .${spinnerRecipe.className}`]: {
// ..

[segunadebayo]

I think this is a good use case for compound variants.

const buttonRecipe = defineSlotRecipe({
  className: 'button',
  slots: ['base', 'spinner'],
  variants: {
    sm: { }
  },
 compoundVariants: [
 {
   variant: ["sm"],
   css: {
       spinner: { 
          // ... overrides   
      }
   }
 }
 ]
});