Overview
I’m trying to build a menu item component and reduce the number of variants through the use of nested components, but I’ve run into an issue.
Within the set, I have two variants which are both selectable, so I’ve created a ‘isSelectable = true / false’ prop, and an ‘isSelected = true / false’ prop. In a bid to reduce variants, I then created two nested components where the choice over style would be made:
Default (by default placed within the component):
- ‘isSelected = false’ - no visual
- ‘isSelected = true’ - tick icon
Checkbox:
- ‘isSelected = false’ - unselected checkbox
- ‘isSelected = true’ - selected checkbox
Problem
The problem is, that when I override the nested component to use the checkbox variant instead of the default, when prototyping, and transitioning from ‘isSelected = true / false’ it will revert back to default nested component variant rather than retaining the override i’ve selected.
Does anyone have any ideas?
