Rationale behind style props like padding for components like ListBoxItem?

[AgarwalPragy]

Currently there are multiple ways of providing a padding to the ListBoxItem

1. Provide a padding prop to the containing ListBox

   <ListBox padding='!p-10'>
       {#each [1, 2, 3, 4] as index}
           <ListBoxItem
             bind:group={selected}
             name={index}
             value={index}
           >
               {index}
           </ListBoxItem>
       {/each}
   </ListBox>

   This solution is confusing, since the name padding seems to suggest that it is the padding for the ListBox. The docs make it clear that this padding prop is for the contained ListBoxItems, but that is not obvious without reading the docs.

2. Provide a padding prop to the ListBoxItem.

   <ListBox>
       {#each [1, 2, 3, 4] as index}
           <ListBoxItem
             bind:group={selected}
             name={index}
             value={index}
             padding='!p-10'
           >
               {index}
           </ListBoxItem>
       {/each}
   </ListBox>

3. Provide a class prop to the ListBoxItem with the padding

   <ListBox>
       {#each [1, 2, 3, 4] as index}
           <ListBoxItem
             bind:group={selected}
             name={index}
             value={index}
             class='!p-10'
           >
               {index}
           </ListBoxItem>
       {/each}
   </ListBox>

   This solution is natural, obvious, and works well.

Any user who did not know about the helper prop padding would go with the 3rd solution. This raises the question - are helper props like padding, hover really needed?

PS: Note that since the default value of this prop is px-4 py-2, setting the prop to padding='p-10' doesn't work - it needs to be marked important padding='!p-10'

[AgarwalPragy]

@endigo9740 thoughts, please 😄

[endigo9740]

Sorry, this one got past me somehow. This was a user requested change. They wanted a way to set the child padding once on the parent and have it inherited down.

This solution is confusing, since the name padding seems to suggest that it is the padding for the ListBox. The docs make it clear that this padding prop is for the contained ListBoxItems, but that is not obvious without reading the docs.

Is IntelliSense not working for you? We've put a lot of work into ensuring that this information is passed to the IntelliSense popups so you don't have to check the docs for each prop setting.

PS: Note that since the default value of this prop is px-4 py-2, setting the prop to padding='p-10' doesn't work - it needs to be marked important padding='!p-10'

I'd have to test this to confirm that, but unfortunately that's how Tailwind inheritance works sometimes.

Overall I agree there's some room for improvement here to meet expectations. We've been slowly moving towards setting child settings on on the children only rather than passing everything down through the parent. I'd welcome a feature request for this - but it would need to be a wide reaching change that affects any and all components that use the parent/child component strategy (there's a number of these)

[AgarwalPragy]

This was a user requested change. They wanted a way to set the child padding once on the parent and have it inherited down.

Ah.. my concern was that the prop padding was redundant since we can always use the class prop to configure the padding. If someone wants to set the padding directly through the parent ListBox, then it makes sense to have a padding prop since any class="p-[X]" will apply to the listbox rather than the items.

Thanks for clarifying.

Is IntelliSense not working for you? We've put a lot of work into ensuring that this information is passed to the IntelliSense popups so you don't have to check the docs for each prop setting.

IntelliSense works great.

My suggestion was more towards renaming it from padding to itemPadding or something 😅

Overall I agree there's some room for improvement here to meet expectations. We've been slowly moving towards setting child settings on on the children only rather than passing everything down through the parent. I'd welcome a feature request for this - but it would need to be a wide reaching change that affects any and all components that use the parent/child component strategy (there's a number of these)

Fair enough. 👍