[DataTable] Add prop to disable scroll indicator

[devonpmack]

WHY are these changes introduced?

Needed in Web because we are using the DataTable in a modal and the scroll indicator doesn't look very good.

WHAT is this pull request doing?

Adding a prop showNavigationOnCollapse (default true), that when false, hides the scroll indicator.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Card, DataTable, Page} from '@shopify/polaris';

export function Playground() {
  return (
    <Page title="Sales by product">
      <Card sectioned>
        <Card.Section>
          <DataTable
            columnContentTypes={[Array(30).fill('text')]}
            headings={Array(30).fill('Header')}
            rows={[Array(30).fill('Content')]}
            hideScrollIndicator
          />
        </Card.Section>

        <Card.Section>
          <DataTable
            columnContentTypes={[Array(30).fill('text')]}
            headings={Array(30).fill('Header')}
            rows={[Array(30).fill('Content')]}
          />
        </Card.Section>
      </Card>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

No significant changes to src/**/*.tsx were detected.

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[dleroux]

@chloerice since you have TONES of context on the DataTable, do you see an issue with doing this?

[chloerice]

Thanks for contributing @devonpmack, allowing the table navigation to be optional totally makes sense. Suggested a couple edits to more clearly indicate that the navigation isn't toggled on and off by the prop alone, since the navigation is only visible when the table collapses to fit its container. Naming is hard though 😅so pinging @sadiesaurus for extra input 🙏

[devonpmack]

Thanks for your insight @chloerice!

[kyledurand]

Code looks good to me. The prop name caught me off-guard at first though. I'm wondering if hideScrollIndicator would be a better name and default to false.

I'm not held to this opinion but I feel like showNavigationOnCollapse sounds like it forces the navigation to show when the data table is collapsed which is the default behaviour anyway.

[chloerice]

Code looks good to me. The prop name caught me off-guard at first though. I'm wondering if hideScrollIndicator would be a better name and default to false.

I'm not held to this opinion but I feel like showNavigationOnCollapse sounds like it forces the navigation to show when the data table is collapsed which is the default behaviour anyway.

Hmm, yeah I think your right @kyledurand. hideScrollIndicator better indicates that showing the navigation is the default.

[PabloVallejo]

I like the idea of hideScrollIndicator too. It's a bit easier to read.

[devonpmack]

Changed to hideScrollIndicator and default to false :)