bmcmahen/sancho

Skeleton bug with `css`, `style` and `className`

Opened this issue · 1 comments

Behavior:
"react": "16.12.0",
"sancho": "3.5.6"

The docs says that you should use Skeleton like that:

function Example() {
  return (
    <List>
      <ListItem
        interactive={false}
        aria-live="polite"
        aria-busy="true"
        primary={<Skeleton css={{ width: "100px" }} />}
        secondary={<Skeleton />}
        contentBefore={
          <Skeleton
            css={{ width: "3.27rem", height: "3.27rem", borderRadius: "50%" }}
          />
        }
      />
    </List>
  );
}

But in fact, Skeletons above with css property are not working properly. The styles described in css property completely override the Skeleton's own styles (background color, gradient, border, etc.).
As a result <Skeleton css={{ width: "100px" }} /> transforms into <span class="css-27wf7g-Skeleton">‌&zwnj</span> where css-27wf7g-Skeleton class contains only width: 100px.

Besides, I'd say that it will be great if Skeleton will support style and className props like other Sancho components do.

Good catch. This should be easy to fix. I probably won't have time to look at it until next week, though.