ADDON FOR GROUP COLOR UI HOW TO

ADDON FOR GROUP COLOR UI HOW TO

I also show how to minimize the amount of code. I am going to show how selectors can be used in the sx prop to get really specific. It’s also possible to create a custom variant in MUI 5. There are three commonly used button variants: text, contained, and outlined. The sx prop impressed me while I was testing it out it can do everything the previous styling syntax could do, there are some new shortcuts, and there’s a lot less boiler-plate code. The sx prop is new in MUI 5 and replaces the makeStyles hook syntax. I used it in the previous section because it is the fastest way to style the Button. If you need to style a Button in just one place (or a few), you might want to style using the sx prop. Set Button Color By Variant With The MUI SX Prop I usually don’t use this prop because it only changes background color, and it only accepts string values of ‘primary’, ‘secondary’, and other theme palette field names. I don't understand the relative importance of item and group but does it make any sense to use the group as the primary source and 'pull' items from the list into the group and then move on to the next group.The Button component also has a color prop. The answers all appear to be based on taking an item and assigning it to a group. Chakra UI exports CInputGroup, CInputLeftAddon, CInputRightAddon to help with this use case. Development becomes somewhat longer but that is not your User's concern. Chakra also allows you to add addons to the left and right of the CInput component. The checkbox is a great idea for nearly any size grid and is better suited to those users who want to use keyboards rather than mice.Īs usual the suggestion of a combination of both methods would win my vote as it provides a solution to most users. If the drag and drop is click, slight turn of wrist, drop then most people will handle it with ease, even older folks with some movement problems.

A couple of systems I have worked on the feedback has been holding down mouse buttons while dragging long, (the feedback did say long), distances led to many errors as fingers came up before they should have. If this task is spread across the whole screen then drag and drop becomes an issue. Some consideration needs to be given to the physical size of the work you will be using. I'm wondering if anyone has any better ideas or improvements to this design? To be honest I'm not completely satisfied with either solution. This list can either be non-interactive or support drag-n-drop for moving items between groups. This can be remedied by providing a separate listing of the items in each group beside the assignment table UI. Also it's a bit more clumsy to move items between groups once assigned (2 step action: user has to uncheck one checkbox and check another one). The main disadvantage I see with this UI is that it's not immediately easy to see what items belong to a given group. Checkboxes rather than radio buttons are used because of the multiple group assignment per item requirement. Also I use color (coloured dot corresponding to the group label color) to help the user see which group(s) the item has been put under.Ī table-style UI where each item can be assigned to a group by checking the checkbox for that group's column. Items which have been assigned to groups appear darker.

Here is a possible design that tries to handle the above issues. Another consequence of this is that the uncategorised list never shrinks so it's not immediately clear which of the items in it have been grouped and which remain unassigned The main issue with this pattern is that because the same item can be placed into more than one group it means that it's not really a 'move' interaction, the item has to stay in the uncategorised list in order for the user to be able to also place it into another category. The tricky part is that the same item can be placed into more than one group (this is an edge case but needs to be supported).įrom what I can see there are two design patterns that apply:īasically user is provided with a list of drag-able items which he/she can then bucket inot groups

Problem: the user has a list of about 5-20 uncategorised items and needs to categorize them into 2-4 groups.

Addon for group color ui