add support for disabling data table selection (checkbox/radio)

meizibupt commented 1 year ago

Fixes #3125

Additional description

add option to disable radio/checkbox for datatable

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

[ ] First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
[x] npm run lint:fix has been run and linting passes.
[x] Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
[x] Tests have been added for new props to prevent regressions in the future. See readme.
[x] Review the appropriate Storybook stories. Open http://localhost:9001/.
[x] Review tests are passing in the browser. Open http://localhost:8001/.
[ ] Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

[ ] CircleCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
[ ] Tests have been added for new props to prevent regressions in the future. See readme.
[ ] Review the appropriate Storybook stories. Open http://localhost:9001/.
[ ] The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
[ ] Review tests are passing in the browser. Open http://localhost:8001/.
[ ] Review markup conforms to SLDS by looking at DOM snapshot strings.
Required only if there are markup / UX changes
[ ] Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
[ ] Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
[ ] Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
[ ] While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

interactivellama commented 1 year ago

@meizibupt I'm going to look at this a little more later tonight, but when I pulled it down and used it. The main issue I'm seeing is that Nav to Edit mode and try to set focus on the disabled item. To reproduce, navigate with the arrow keys and then press enter. Focus visually disappears/gets lost.

I would recommend disabling switching to edit mode, essentially ignoring the switch to edit mode

interactivellama commented 1 year ago

Demo: 2023-08-10 17 39 45

meizibupt commented 1 year ago

@meizibupt I'm going to look at this a little more later tonight, but when I pulled it down and used it. The main issue I'm seeing is that Nav to Edit mode and try to set focus on the disabled item. To reproduce, navigate with the arrow keys and then press enter. Focus visually disappears/gets lost.

I would recommend disabling switching to edit mode, essentially ignoring the switch to edit mode

thanks for reviewing. can you be more specific. what do you mean by disabling edit mode? do you mean disallowing navigating to the disabled checkbox?

interactivellama commented 1 year ago

Yes, as in ignore the enter key if the child is disabled which is what is done when the content is only text in a cell.

Please check me on this, but I believe returning a normal disabled <Checkbox> instead of <InteractiveCheckbox> here https://github.com/salesforce/design-system-react/blob/master/components/data-table/private/row.jsx#L145 would disable the focus and treat it as non-actionable / non-editable.

Same with Radio here https://github.com/salesforce/design-system-react/blob/master/components/data-table/private/row.jsx#L145

interactivellama commented 1 year ago

Great addition! @meizibupt

salesforce / design-system-react