Move selected icon position in MenuOptionGroup

Feature request

Is your feature request related to a problem? Please describe.

I want to be able to put the checkmark icon to the right of the option item

Describe the solution you’d like

We could add a iconPosition prop like this

<MenuOptionGroup defaultValue="asc" title="Order" type="radio" iconPosition="right">
      <MenuItemOption value="asc">Ascending</MenuItemOption>
      <MenuItemOption value="desc">Descending</MenuItemOption>
 </MenuOptionGroup>

or we could make the checkmark into its own component and we would use it like this

<MenuOptionGroup defaultValue="asc" title="Order" type="radio">
      <MenuItemOption value="asc">Ascending<MenuItemOption.Checkmark/></MenuItemOption>
      <MenuItemOption value="desc">Descending<MenuItemOption.Checkmark/></MenuItemOption>
 </MenuOptionGroup>

or we could make a leftSelectedIcon and rightSelectedIcon prop

<MenuOptionGroup defaultValue="asc" title="Order" type="radio" rightSelectedIcon={<CheckmarkIcon/>}>
      <MenuItemOption value="asc">Ascending</MenuItemOption>
      <MenuItemOption value="desc">Descending</MenuItemOption>
 </MenuOptionGroup>

[with-heart]

Yeah, I think we should add this functionality. Shouldn’t be a huge change.

[ljosberinn]

Sounds like a good idea - currently the right side is not used: https://github.com/chakra-ui/chakra-ui/blob/develop/packages/menu/src/menu.tsx#L271

I guess we can follow the example of Button and replace icon and iconSpacing with leftIcon and rightIcon + their corresponding spacing. The complexity would barely increase.

Downside:

• 0.75rem less width for content
• breaking change for MenuItemOption

Something like:

// omitted forwardRef here for readability
export const MenuItemOption = function MenuItemOption(props, ref) {
  const {
    leftIcon = <CheckIcon />,
    leftIconSpacing = "0.75rem",
    rightIcon,
    rightIconSpacing = "0.75rem",
    ...htmlProps
  } = props;

  const ownProps = useMenuOption(htmlProps);
  const ownRef = mergeRefs(ownProps.ref, ref);

  const visibility = props.isChecked ? "visible" : "hidden";

  return (
    <StyledMenuItem {...ownProps} ref={ownRef}>
      <MenuIcon fontSize="0.8em" mr={leftIconSpacing} visibility={visibility}>
        {leftIcon}
      </MenuIcon>

      <chakra.span flex="1">{ownProps.children}</chakra.span>

      <MenuIcon fontSize="0.8em" ml={rightIconSpacing} visibility={visibility}>
        {rightIcon}
      </MenuIcon>
    </StyledMenuItem>
  );
};