8138 - Changed personalize columns design

[yohannahbautista]

Explain the details for making this change. What existing problem does the pull request solve?

Changed personalize columns design

Related github/jira issue (required):

Closes #8138

Steps necessary to review your pull request (required):

• Pull this branch, build and run the app
• Go to: http://localhost:4000/components/datagrid/example-grouped-headers.html
• Personalize button (gear icon) should be there
• Open to see menu
• Groups should show
• try here as well http://localhost:4000/components/datagrid/example-books.html or on any datagrid page with the personalize option

Included in this Pull Request:

• A note to the change log.

[tmcconechy]

@yohannahbautista I didn't take a very deep look at this but one flag for now. I dont think we want to add this button to every data grid.

a) Keep it as is in the ... menu when you click the personalize columns https://main-enterprise.demo.design.infor.com/components/datagrid/example-index.html then show the popup / modal from there
b) Can also add one example with a custom toolbar with the a button like that. Then provide a method (if not already one) to show the personalization dialog.

But be default we dont want the button added automatically to everyones grid toolbars by default. 👍🏻

[yohannahbautista]

@yohannahbautista I didn't take a very deep look at this but one flag for now. I dont think we want to add this button to every data grid.

a) Keep it as is in the ... menu when you click the personalize columns https://main-enterprise.demo.design.infor.com/components/datagrid/example-index.html then show the popup / modal from there b) Can also add one example with a custom toolbar with the a button like that. Then provide a method (if not already one) to show the personalization dialog.

But be default we dont want the button added automatically to everyones grid toolbars by default. 👍🏻

@tmcconechy @ericangeles
Should I use something like this for the list? https://main-enterprise.demo.design.infor.com/components/arrange/example-index.html

[tmcconechy]

@yohannahbautista yes for me thats what i would use so they can sort the items. SO if that works you can use it on the new popup.

Basically the old popup should be changed to this new design.

[ericangeles]

@yohannahbautista, I've merged the main to fix the build issue. Please update your branch. Thanks!

[tmcconechy]

@yohannahbautista looks pretty good but a few things

1. unneeded scrollbar
2. Cant seem to drag the items (important)
3. Cant seem to toggle the items (important)
4. Seem not centered in the focus state
5. The keyboard could also work (arrow up and down and enter/space to toggle)

[tmcconechy]

@yohannahbautista design probably forgot to add the search and i didnt notice until now. People will be loosing functionality and this will probably come back.

So overall this needs some fine tuning to make it perfect.

1. Go to https://8138-datagrid-personalize-enterprise.demo.design.infor.com/components/datagrid/example-books.html and resize the page shorter so it scrolls and see it has some issues
   
   ~ a. The scrollbar is positioned wrong LOOKS Fixed now~
   b. seems like too much room on the left (contents not centered)
   c. Text is a little off center
   d. text on the top is cut off
   2. I think we will still need the search bar but can add an issue for later and see. LATER
2. Lets see if just clicking the switch is possible. if not i think maybe it will work like this
3. When dragging try to remove that extra white space from the bottom
4. Also with the height when scrolling some items get lost at this height or when resizing the page test on http://localhost:4000/components/datagrid/example-books.html where it has more comments

[tmcconechy]

@yohannahbautista one comment from design "could add a bit of space between labels and switchbuttons (toggles) "

We can come back with the search designs later.

[tmcconechy]

@yohannahbautista i crossed out fixed items in my list

[n-ace-ancog]

Some issues found regarding the behavior of the personalized columns in http://localhost:4000/components/datagrid/example-grouped-headers.html:

1. When a hidden column is dragged to other group, the following column is transferred instead

• Activity column here is not visible and was dragged from Column Group Two
• At the background, Quantity column is now at the Column Group One
• In the Modal, Quantity column is undraggable and is at Column Group Three

• Once Activity column is shown, it is now at Column Group Four

Screen.Recording.2024-05-17.at.6.37.07.PM.mov

2. The parent group toggle also changes when only 1 column was changed - the rest are still in "on" state

Screen.Recording.2024-05-17.at.6.46.21.PM.mov

3. When searching, group are still displayed even if no columns matches under it
   

[yohannahbautista]

@tmcconechy @ericangeles @n-ace-ancog

The parent group toggle also changes when only 1 column was changed - the rest are still in "on" state

There's no details on actual behavior on the new design of personalize columns in the figma, just how it looks.

There's a discussion thread about it: https://jira.infor.com/browse/IDS-1616 so I based it off that. It acts as a "Toggle all in group" switch. If one column is disabled, the group toggles to off setting. If all the columns are enable, the group is toggled on. If you want to toggle on/off on all the columns in group, you can choose the group switch.

[tmcconechy]

@yohannahbautista even tho its not well defined in figma the pattern has been working for a while. At the simplest level its really just. Can i configure the columns in the grid with the dialog. A lot of this stuff is impossible to put in figma.

With that functionality i think it should work like this:

• if you click the parent it closes all the items in the group, if you click the parent again it shows them
• BUT if you click a child it should only toggle that child. Without this there is no way to turn the children off

Also issues remaining:

1. When you drag i'd like to get rid of the extra white space under it
2. Clicking the item still feels wierd. If you click the text it toggles BUT if you click the empty space between the text and switch it does not. I really think it should work only if you click the switch and it should have a bit of a bigger hit point around it. For example clicking the bar on the switch its hit or miss.

[ericangeles]

@tmcconechy, should the group header have an icon handle even if it's not draggable?

[ericangeles]

Honestly, I'm confused by the Figma file containing this feature, or am I just looking at the wrong link?
https://www.figma.com/design/JZdeun4ht1IsqZpV9xAW8Y/Colors?node-id=1382-13660&t=1QipAVdn265PTnMN-0

[jbrcna]

[n-ace-ancog]

Some re-test issues found:

1. When moving a column coming from a non-consecutive group to other group, the column on the consecutive group has additional columns

   Steps to replicate

   1. Open the modal
   2. Drag price from Column Group Three to Column Group One
   3. At the background, the Quantity column is now at Column Group Two - ISSUE
      
   4. Close the modal
   5. Open the modal again
   6. The entire Column Group One is at "off" state - ISSUE
      

2. Column Group toggle doesn't update when all of the columns under it are either off or on
   

• I think for this one, if all of the column has the same state, the group toggle will be updated as well

3. Columns can be dragged outside of a group
   

4. The Column Group has a drag icon indicating that its draggable, but they can't be dragged around
   

[tmcconechy]

Thanks @yohannahbautista Im going to call this one good for now. We can fix anything else later that comes up.

Thanks for your hardwork 💪🏻

[janahintal]

Modal is not centered in Responsive / Mobile view
https://8138-datagrid-personalize-enterprise.demo.design.infor.com/components/datagrid/example-grouped-headers.html