Remove wrapper prop?

[Sam Magura]

There are currently two ways to wrap a skeleton in another element, like a box with padding and a border.

function Box({ children }: PropsWithChildren<unknown>) (
    <div
        style={{
            border: '1px solid #ccc',
            display: 'block',
            lineHeight: 2,
            padding: '1rem',
            marginBottom: '0.5rem',
            width: 100,
        }}
    >
        {children}
    </div>
)

// Method 1: use the wrapper prop
const wrapped1 = <Skeleton wrapper={Box} />

// Method 2: do it "the normal way"
const wrapped2 = <Box><Skeleton /></Box>

Pros of wrapper prop

• You can use the count prop and the wrapper will be rendered that many times. This is only a minimal benefit.

Cons of wrapper prop

• It is making it unclear how to fix #65 since the wrapper can be either display: inline or display: block and <br /> behaves differently in these cases. See 9dc1100 for context.
• It could complicate other bug fixes / improvements in the future.

wrapper had the wrong type in the old type declarations and no one reported it, which suggests that the prop is not commonly used. In general, I'm in favor of removing functionality that doesn't have a clear value-add.

[Sam Magura]

I did remove wrapper but I'm keeping around a branch called v3-with-wrapper just in case.

[Dave Tang]

My thoughts on this is that:

• removing wrapper limits the usefulness of count; the two often go hand in hand.
• wrapper, or an API like it, is quite a powerful mechanism that the library can take more advantage of in the future. As an example, the circle prop always stood out to me as overly-specific. If we're allowing shapes, then why just circle and not square or diamond? wrapper would allow <Circle> to be separately defined – either in the library or user-space – to achieve the same result.
• I think the solution in 9dc1100 is a good one, but perhaps the story isn't showcasing the usage optimally. If you imagine a UI with a set of inline "tags", you'd want skeletons that appear on same line, but perhaps with a gap between each. The inline wrapper could be used to provide this spacing.

[Sam Magura]

Really great points!

I figured out why block wrappers were giving me trouble so I have added back wrapper. I put in a story that uses an inline wrapper to place a margin between skeletons, and another story that uses wrapper for something which I'm going to feature in the CodeSandbox example...