ListBox cannot override padding

[coryvirok]

Current Behavior

The docs say that you can provide ListBox and ListBoxItem with custom padding. However, the built-in padding, px-4 py-2 is always included first. Which means the only way to override is to use a !px-2 !py-2 for e.g.

Steps To Reproduce

Create a new ListBox with custom padding:

<ListBox multiple padding="px-2 py-2">
  ...
</ListBox>

You'll notice that the rendered HTML contains both built in and "overridden" values:

e.g.
<label class="listbox-item px-4 py-2 cursor-pointer rounded-token px-2 py-2 hover:variant-soft " ...

Anything else?

No response

[Zantonius]

The same is true for regionCell when it comes to Table 🙂

Steps To Reproduce

<Table regionCell="px-2" />

"px-2" will be overwritten by the default style.

If we want this to be separated to its' own issue, please do tell.

[endigo9740]

@coryvirok There's a bit of and overlap for setting the Listbox parent padding and the padding padding down to the child. We do need to give this another review.

@Zantonius not quite the same. With regionCell you can use Tailwind's arbitrary syntax to access child elements:
https://www.skeleton.dev/docs/styling#tailwinds-arbitrary-variants

[endigo9740]

@coryvirok ok this one ended up being a very simple fix. Essentially we have base classes we apply to each element within the component template, then we append the prop classes immediately following. Looks like we forgot to nix the base padding for this so both the base + prop padding were being added.

I've removed this the base padding in favor of the prop now, so this should now behave as expected.

The fix is merged into our dev branch which will drop as part of our new release on Tuesday of next week. Thanks for bringing this to our attention!