[IndexTable] Allow row click when onClick is passed in on non-selectable tables

[sydturn]

WHY are these changes introduced?

Resolves #11518 and Relates to https://github.com/Shopify/credit/issues/1252 which needs to use clickable IndexTables but without checkboxes.

Here is the Figma I'm working off of. Currently these tables exist in Shopify Balance and Credit already but they're using our own custom css/html alongside ResourceList and it's
a) hard to manage (the columns don't have the context of the other columns and don't automatically adjust so we have to hardcode the column widths which is a pain whenever we need to add a new column
b) doesn't conform to Polaris aesthetics
So we're trying to migrate to using IndexTables to make maintenance on these tables easier, the transition to the new Figma easier, and the aesthetics of the tables look more like Polaris.
I have it mostly implemented but the only thing is that the rows need to be clickable without the checkboxes.

There are no aesthetic changes in this PR for including a screenshot.

WHAT is this pull request doing?

This pull requests makes it so that if an onClick event is provided to a IndexTable.Row that is in an IndexTable that has selectable={false} the onClick will still be called. Rows being selectable vs. clickable should not be mutually exclusive.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

☝️ TLDR;

1. git clone https://github.com/Shopify/polaris.git
2. yarn install && cd polaris-react
3. dev up && dev server

I have provided a code snippet that you can put in your playground for testing. Where in main clicking a row would do nothing, with the changes in this PR clicking on a row will log to the console.

    <Page title="Playground">
      <IndexTable
        itemCount={2}
        selectable={false}
        headings={[{title: 'date'}, {title: 'description'}, {title: 'amount'}]}
      >
        <IndexTable.Row onClick={handleOnClick} position={1} id="1">
          <IndexTable.Cell>Today</IndexTable.Cell>
          <IndexTable.Cell>Dollarama</IndexTable.Cell>
          <IndexTable.Cell>$30</IndexTable.Cell>
        </IndexTable.Row>
      </IndexTable>
    </Page>

You can also test it on this spin instance (the transaction table shown utilizes non-selectable but yes clickable)

🎩 checklist

I'm not so sure this needs to be added to the changeset, documentation, or readme, as it is just implementing a fix for something that should already exist but doesn't? I'm not sure. This isn't a new feature, it's just a fix for an existing one that rarely gets used I guess?

• Tested a snapshot
• 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

[etlgfx]

Oh I fixed this too here: #11652 but feel free to ship this if you have time to dedicate to it.

I took a slightly different approach, but also found a user created issue that I linked in my description.
(I'm not on Polaris team)

[sydturn]

Oh I fixed this too here: #11652 but feel free to ship this if you have time to dedicate to it.

I took a slightly different approach, but also found a user created issue that I linked in my description. (I'm not on Polaris team)

Oh nice! Yours makes a lot more sense, of course we would want to skip all the other "selectable" functionality if selectable={false} and only do the onClick stuff 🤦‍♀️

I added the extra check to mine too 😄 good callout!

[chloerice]

Thanks for contributing @sydturn! Changes 👀 👍🏽

[sydturn]

/snapit

[github-actions]

🫰✨ Thanks @sydturn! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/[email protected]

[etlgfx]

@sydturn Looks great so far, thanks for taking this on!!

[itwasmattgregg]

Looks great!