Carbon: Update DataTableSkeleton component to v10

[dallashudgens]

What package(s) are you using?

• [ ] carbon-components
• [ ] carbon-components-react

Detailed description

I'm using the DataTableSkeleton component as a loading pattern before the data from my DataTable renders. The difference in styles is creating a lot of jumping and repositioning.

Is this issue related to a specific component?

DataTableSkeleton component

What did you expect to happen? What happened instead? What would you like to
see changed?

I expected to see the v10 styles on the skeleton component. It still had v9 which caused the header styles and rows to be a bit different, and it didn't include the table title and description.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

This was discovered while working on the Developer Essentials tutorial

Steps to reproduce the issue

1. Run the 3rd Tutorial step (completed) to see the DataTableSkeleton load in with different styles.

Additional information

[asudoh]

CC @carbon-design-system/design just in case they have any insights wrt where we are at.

[aagonzales]

http://react.carbondesignsystem.com/?path=/story/datatableskeleton--default

Yeah looks like it wasn't updated in the code, entire skeleton table looks like its still in the V9 style. Good catch. This is what it should look like and should be using the new skeleton tokens:

@carbon-design-system/developers let me know if you need more specs to update.

[aagonzales]

@asudoh actually it looks like none of the Skeleton states in the react story book have been updated to v10

[asudoh]

Thanks @aagonzales for your insights - Yes, having specs will be great!

[aagonzales]

[aagonzales]

React data table skeleton is still doesn't match intended design list above:

As-is:

To-be:

[tw15egan]

Still has not been updated (http://react.carbondesignsystem.com/?path=/story/datatableskeleton--default)

[nictownsend]

Can this be conditional via props? I don't want to have a header or buttons but now I'm forced to, which has broken the loading state UX for my tables...

[richardpilot]

We also need this to be optional. This component seems to have regressed in function, as it is missing the headers, which we were providing so shouldn't be a skeleton and also add the top header title which we don't use. We now have to hide it in css or use the old version of this component as our own which is not very future proof.