fix(DataTable): fix small toolbar sizing and color bug

[jnm2377]

Closes #10058

Changelog

• cleans up data table stories in v10:
  • deletes DataTable-story.js since storybook wasn't using those stories
  • adds basic table examples (w/ sizes + zebra)
  • adds toolbar examples (w/ different sizes)
  • adds small batch actions example
  • renamed some examples to be more semantic
• adds v11 data table stories which were missing
• fixes small toolbar sizing issues
• fixes batch action sizing issues
• fixes "color" issues in overflow menu: OverflowMenu v11 refactor wasn't adding the icon class name to the trigger icon, so it wasn't getting icon fill theming, which was also present in DataTable

Testing / Reviewing

• View v10 and v11 toolbar examples to check styles are correct. We don't currently have a story that shows the bug, so can checkout locally and comment out the new styles to see what the existing bug looks like, if you need a reference on what to look for.
• Test out different theme colors for v11 DataTable, and check to see that overflow menu icon fill is now changing color according to theme

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: cf8a596

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61f85814943dea000879490d

😎 Browse the preview: https://deploy-preview-10296--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: cf8a596

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61f858141fc448000844a8b5

😎 Browse the preview: https://deploy-preview-10296--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: cf8a596

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61f858150b299400089895b8

😎 Browse the preview: https://deploy-preview-10296--carbon-components-react.netlify.app

[abbeyhrt]

@jnm2377 oof, the data table stories were so chaotic, thank you for taking that on and re-organizing so it worked with @carbon/react! I like the new arrangement overall but could we have some stories that aren't under folders? Just maybe like the Usage story or "Playground" story

[abbeyhrt]

Couple of spacing issues with the toolbar in @carbon/react but the v10 one looks all good!

[jnm2377]

@abbeyhrt updated the bugs you found 👍🏽

[abbeyhrt]

Nice! I think it looks mostly good but, at least comparing the v11 data table to v10, it looks like there is a little too much space to the left of the icon here:
v11:

v10:

[jnm2377]

@abbeyhrt and @tay1orjones updated the styles, so v11 toolbar search icon should be aligned now. Sorry the PR files might be a little confusing with all the story changes. The fixes pertaining to this bug were really in 3 files:

• packages/components/src/components/data-table/_data-table-action.scss
• packages/styles/scss/components/data-table/action/_data-table-action.scss
• packages/react/src/components/OverflowMenu/next/OverflowMenu.js

The rest are story updates.

[tay1orjones]

Checks were failing due to updates pulled in from #10535. I pushed an update converting $layer-disabled to use $layer instead 👍

[abbeyhrt]

Looks great!!