fix(SegmentedControls): allow for item in list to be disabled #1676
Conversation
✅ Deploy Preview for beta-fondue-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
✅ Deploy Preview for beta-fondue-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for fondue-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| const nextIndex = index + 1; | ||
| radioGroupState.setSelectedValue(items[nextIndex].id); |
There was a problem hiding this comment.
Goes out of bounds in case of the last item being disabled, also a disabled item should be able to be selected by default which makes the change in this function not necessary 🤔
What do you think?
There was a problem hiding this comment.
I had a look at it and it is very weird when the default item is not clickable. The UX is super weird.
I fixed the function to select the item to the left when the last one is default and disabled and to collapse the "cursor/hightlight" when all are disabled
|
Lead time: 82 days, 23 hours, 53 minutes, 14 seconds (1991.89 total hours) from first commit to close.
|
ClickUp Report
Report: Request to
disablesingle items in a group ofitemsSolution:
disabledprop to theitemtype.mapof theitemcomponent to referenceitem.disabled || disabled(default to the group disabled prop)selectedIndexmethod to by-pass the item if it isdisabled(this is the key index that sets theactiveBordermotion div)fieldsetand update the styles accordingly. The is required to allow the border to be the properz-indexelse the disabledbackgroundwill overlap the left border edge. Added bonus is it is much more responsive to the correct sizing.