feat: add Menu Icons variation

[alinais]

API Proposal

This API extends the Menu component

icon

  <Menu icon>
      <Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
          <Icon name='gamepad' />
      </Menu.Item>

      <Menu.Item
          name='video camera'
          active={activeItem === 'video camera'}
          onClick={this.handleItemClick}
      >
          <Icon name='video camera' />
      </Menu.Item>

      <Menu.Item
          name='video play'
          active={activeItem === 'video play'}
          onClick={this.handleItemClick}
      >
          <Icon name='video play' />
      </Menu.Item>
  </Menu>

[levithomason]

Note, our use cases for the icon menu should be styled a bit differently. There is no background, shadows, or borders:

In this case, a background color matching the message is applied to the menu to occlude the timestamp:

Also with a white background:

There was some discussion in the Icon component about adding a background prop to handle these kind of cases. See #86. We could either allow the icons in the screenshots above to take on a background color, or pass it through the Menu.

For now, we may just leave the background color out of the equation. This could be something that we introduce by allowing components to take on colors from their context. So, the Menu might be able to take on the background of the surrounding context, which is the Message component.

[kuzhelov]

what I do see as a solution here is to allow merged variables to be consumed inside renderComponent() method. Currently we are passing, essentially, only class names there (if we would speak about visual aspects). With that this problem seems to be easily solvable:

class ChatMessage extends UIComponent {
   ... 
   // note that 'variables' are merged ones
   renderComponent({ classNames, variables } => (
     <Menu variables={background: variables.background}>
     ...
    </Menu>
  ))
}

This mechanism is explicit, easy to debug and, to my mind, is able to accomplish the tasks you've mentioned.

@levithomason, @alinais, please, let me know what do you think?

[miroslavstastny]

Done in microsoft/fluent-ui-react/pull/73