Group checkboxes by optgroup label #6
Conversation
|
@mahdiyazdani if you want to see it in action, switch wpforms to commit https://github.com/awesomemotive/wpforms-plugin/pull/8341/commits/de92bbc36e4406c2ac3a60a0dd858eeadf2845be and visit wpforms > entries > select any form with entries > click gear icon in the top right corner of the table |
There was a problem hiding this comment.
Thank you for your contribution. Please find my comments below:
-
Please consider converting the
<h3>label tag to a<span>. This change will make it easier to add additional styles and make customizations where necessary. Heading tags often have unique styles universally and may not be the best choice for controlling and making design adjustments. -
Additionally, it would be great if you could align the styles with the Figma design. The dropdown menu is designed with inspiration from the WPForms styling hierarchy.
-
One more important point is that the group label should be made unselectable to avoid interrupting the user when interacting with checkboxes. You can achieve this by adding
user-select: none;to the option group tag in the CSS.
@mahdiyazdani do you mean the Figma design @mattbrett has created for our rock ( this one ) or do you mean you have some other Figma design exactly for your library somewhere? If the other one, could you share a link? If the first one just please confirm it |
@kkarpieszuk I was referring to the Figma design that you were provided for your task. |
|
If you need various states for the checkboxes, you can find them in the Style Guide as part of the Settings Design Library. |
|
Thank you @mahdiyazdani ( and @mattbrett ), I changed this PR:
Mahdi, please continue your review
|
Fixes #5
See the #5 for the description how it works and how it looks.
Please notice I did not apply any styling for the
<h3>grouping elements, @mahdiyazdani if you want to have some styles, feel free to add the ones which will align with the rest of rules you already created. For the purposes of my task I will be re-styling your lib a bit so I will define<h3>styles there anyway.