fix(DataGrid): add checkbox support #5380

AustinGitHub · 2024-05-31T00:15:06Z

Adds checkbox support

What did you change?

Adds checkbox support as an optional inline edit type.

Reason I made the PR is because NextGen DataStage needs this and doesn't seem there is much movement to get this implemented. Thanks!

How did you test and verify your work?

Verification

Screen.Recording.2024-05-30.at.5.11.01.PM.mov

I also validated that the data does get updated and set properly

see it isActive is set to true since it as checked

netlify · 2024-05-31T00:15:21Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`8b055dd`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6679851d9265c50008e15758
😎 Deploy Preview	https://deploy-preview-5380--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

AustinGitHub · 2024-05-31T00:16:56Z

...products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -485,7 +506,7 @@ export const InlineEditCell = ({
          config?.validator?.(cellValue),
      })}
    >
-      {!inEditMode && (
+      {!inEditMode && type !== 'checkbox' && (


Because on UI checkbox will always be visible, so no need to do any enter to edit mode here

AustinGitHub · 2024-06-04T14:58:21Z

Hi @kennylam and @sangeethababu9223 can you start the review process on this PR please? Thanks!

matthewgallo · 2024-06-04T15:06:31Z

Hey @AustinGitHub, there are some spacing issues in the cell with the checkbox, also the active cell is not able to navigate to the cells with the checkbox in it like it's able to in all of the other cells.

AustinGitHub · 2024-06-04T15:09:55Z

"there are some spacing issues in the cell with the checkbox"

How should the spacing be like?

"also the active cell is not able to navigate to the cells with the checkbox in it like it's able to in all of the other cells."

It shouldn't need to. The cell for the checkbox isn't like something that needs to be double clicked to activate and go into for the checkbox. It is not hidden behind the inline edit component. Otherwise we would need to double click for checkbox to work

matthewgallo · 2024-06-04T15:14:11Z

The spacing should match the screenshot in #5302. My expectation would be that moving the active cell would focus the checkbox, otherwise you lose context for the location of the active cell. I think this could probably use some design input as well.

AustinGitHub · 2024-06-04T15:16:02Z

Ok, I will fix the positioning

AustinGitHub · 2024-06-04T15:31:23Z

Fixed the checkbox styling, will check on the edit behavior and see if I can look into it

AustinGitHub · 2024-06-04T15:34:34Z

@matthewgallo I think the edit session is fine. I see these props

matthewgallo · 2024-06-04T15:38:38Z

Yes, but it visually disappears from what I am seeing. I think it could be confusing to be navigating through the datagrid and suddenly the active cell disappears when you move to a checkbox cell, giving the checkbox focus could fix this. @jjennings7 do you have any thoughts on this interaction?

AustinGitHub · 2024-06-04T15:41:03Z

I am not seeing this, can you provide video? Thanks!

Screen.Recording.2024-06-04.at.8.40.29.AM.mov

matthewgallo · 2024-06-04T15:43:58Z

Sure, this is with navigating via keyboard.
https://github.com/carbon-design-system/ibm-products/assets/10215203/18182fbc-63d4-44f8-94dd-3c49ae3adf28

AustinGitHub · 2024-06-04T15:44:42Z

Thanks, will take a look at this use case

fix: focus for the cell

AustinGitHub · 2024-06-04T16:05:00Z

Screen.Recording.2024-06-04.at.9.04.09.AM.mov

This is fixed in latest commit, let me resolve conflicts

Edit: Fixing some issues due to the conflicts, notice it isn't working anymore

AustinGitHub · 2024-06-04T16:51:28Z

It should be good now on the keyboard behavior

I went through and hit enter and escape to capture the behavior

Screen.Recording.2024-06-04.at.9.49.41.AM.mov

sangeethababu9223

@AustinGitHub ,
There seems to be some mismatch with focus behaviour in PR preview story and the Production one.
Using Up / Down / Right / Left keys on the keyboard works as expected, but the behaviour with the tab key is not the same as the one in Production

AustinGitHub · 2024-06-10T14:15:55Z

ok, I will check on tab behavior, thanks!

AustinGitHub · 2024-06-10T15:20:10Z

Hi @sangeethababu9223 I see production doesn't work properly for Tab either. I think that needs to be taken up in a separate issue

Screen.Recording.2024-06-10.at.8.19.22.AM.mov

sangeethababu9223

Hi @AustinGitHub,
The focus behaviour in the production is as per w3 standards.
Please refer the link for details.
As per the above reference navigation inside the grid is done by up/down/left/right keys.

AustinGitHub · 2024-06-11T14:01:04Z

Hi,
I am confused. So what is the issue with the focus behavior on mine compared to what is expected. Can you provide a video or some more info please?

Thanks!

sangeethababu9223 · 2024-06-12T05:15:47Z

Hi @AustinGitHub,
Please see the attached screen recordings:

Preview:

Screen.Recording.-.Preview.mov

Production:

Screen.Recording.-.Production.mov

Both preview and production works as expected while using up/down/left/right keys. The issue is while using tab key.

AustinGitHub · 2024-06-12T05:19:13Z

ok, I will check

AustinGitHub · 2024-06-12T05:29:08Z

So is this the expected behavior then?

Screen.Recording.2024-06-11.at.10.27.57.PM.mov

Though, I am still confused on why the behavior is like this and why design is asking for the tab to be like that as I would figure the tab would want to go into the next cell rather than this weird column selection it is doing

AustinGitHub · 2024-06-14T23:33:12Z

Hi, any update on this? Thanks!

AustinGitHub · 2024-06-21T15:08:59Z

Conflicts are fixed

sangeethababu9223

LGTM

AustinGitHub · 2024-06-24T14:40:00Z

Thanks! @sangeethababu9223 can you remove the conflicts tag and add the pending one more review tag please? Thanks!

fix(DataGrid): add checkbox support

f783081

AustinGitHub requested a review from a team as a code owner May 31, 2024 00:15

AustinGitHub requested review from kennylam and sangeethababu9223 and removed request for a team May 31, 2024 00:15

AustinGitHub commented May 31, 2024

View reviewed changes

Merge branch 'main' into support_checkbox

569321d

AustinGitHub and others added 2 commits June 4, 2024 08:17

Merge branch 'main' into support_checkbox

4dbada1

fix: design of checkbox

c1da28a

Merge branch 'main' into support_checkbox

97b460d

fix: focus for the cell

dcb2e15

fix: focus for the cell

AustinGitHub and others added 2 commits June 4, 2024 09:06

Merge branch 'main' into support_checkbox

2b1029e

fix: key movement behavior

5cd67da

Merge branch 'main' into support_checkbox

a55cf13

sangeethababu9223 reviewed Jun 10, 2024

View reviewed changes

Merge branch 'main' into support_checkbox

b82d544

sangeethababu9223 reviewed Jun 11, 2024

View reviewed changes

Merge branch 'main' into support_checkbox

7c0270b

Merge branch 'main' into support_checkbox

50f3363

AustinGitHub and others added 3 commits June 11, 2024 22:33

fix: tab button issues

59a8749

Merge branch 'main' into support_checkbox

aefdfd6

Merge branch 'main' into support_checkbox

70ce0c2

AustinGitHub requested a review from sangeethababu9223 June 17, 2024 14:03

Merge branch 'main' into support_checkbox

971c1a5

sangeethababu9223 added the status: merge conflict ✋ label Jun 21, 2024

fix: conflicts

cbbae56

sangeethababu9223 approved these changes Jun 24, 2024

View reviewed changes

Merge branch 'main' into support_checkbox

8b055dd

sangeethababu9223 added status: one more review 👀 and removed status: merge conflict ✋ labels Jun 25, 2024

matthewgallo approved these changes Jun 25, 2024

View reviewed changes

matthewgallo added this pull request to the merge queue Jun 25, 2024

Merged via the queue into carbon-design-system:main with commit b1761a0 Jun 25, 2024
19 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(DataGrid): add checkbox support #5380

fix(DataGrid): add checkbox support #5380

AustinGitHub commented May 31, 2024 •

edited by matthewgallo

Loading

netlify bot commented May 31, 2024 •

edited

Loading

AustinGitHub May 31, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024 •

edited

Loading

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024 •

edited

Loading

AustinGitHub commented Jun 4, 2024 •

edited

Loading

sangeethababu9223 left a comment

AustinGitHub commented Jun 10, 2024

AustinGitHub commented Jun 10, 2024 •

edited

Loading

sangeethababu9223 left a comment

AustinGitHub commented Jun 11, 2024

sangeethababu9223 commented Jun 12, 2024

AustinGitHub commented Jun 12, 2024

AustinGitHub commented Jun 12, 2024 •

edited

Loading

AustinGitHub commented Jun 14, 2024

AustinGitHub commented Jun 21, 2024

sangeethababu9223 left a comment

AustinGitHub commented Jun 24, 2024

fix(DataGrid): add checkbox support #5380

fix(DataGrid): add checkbox support #5380

Conversation

AustinGitHub commented May 31, 2024 • edited by matthewgallo Loading

What did you change?

How did you test and verify your work?

netlify bot commented May 31, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

AustinGitHub May 31, 2024

Choose a reason for hiding this comment

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024 • edited Loading

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

matthewgallo commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024

AustinGitHub commented Jun 4, 2024 • edited Loading

AustinGitHub commented Jun 4, 2024 • edited Loading

sangeethababu9223 left a comment

Choose a reason for hiding this comment

AustinGitHub commented Jun 10, 2024

AustinGitHub commented Jun 10, 2024 • edited Loading

sangeethababu9223 left a comment

Choose a reason for hiding this comment

AustinGitHub commented Jun 11, 2024

sangeethababu9223 commented Jun 12, 2024

AustinGitHub commented Jun 12, 2024

AustinGitHub commented Jun 12, 2024 • edited Loading

AustinGitHub commented Jun 14, 2024

AustinGitHub commented Jun 21, 2024

sangeethababu9223 left a comment

Choose a reason for hiding this comment

AustinGitHub commented Jun 24, 2024

AustinGitHub commented May 31, 2024 •

edited by matthewgallo

Loading

netlify bot commented May 31, 2024 •

edited

Loading

matthewgallo commented Jun 4, 2024 •

edited

Loading

AustinGitHub commented Jun 4, 2024 •

edited

Loading

AustinGitHub commented Jun 4, 2024 •

edited

Loading

AustinGitHub commented Jun 10, 2024 •

edited

Loading

AustinGitHub commented Jun 12, 2024 •

edited

Loading