Environment Information

• Package version(s): /@fluentui/react-northstar 0.51.3
• Browser and OS versions: Windows

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/fluent-ui-example-forked-kbf3m?file=/example.js

Actual behavior:

When borderRadius is added in variables in button shorthand props in Button.Group, the borderRadius is not applied.
However, borderRadius in styles works.

 <Button.Group
    buttons={[
      {
        icon: <EmojiIcon />,
        key: "emoji",
        iconOnly: true,
        title: "Emoji",
        variables: {
          borderRadius: "8px"
        }
      },
      {
        icon: <TranslationIcon />,
        key: "translation",
        iconOnly: true,
        title: "Translation",
        styles: {
          borderRadius: "10px"
        }
      },
      {
        icon: <PlayIcon />,
        key: "play",
        iconOnly: true,
        title: "Play"
      }
    ]}
  />

Only the item in the middle has intended borderRadius (in codesandbox)

Expected behavior:

borderRadius should be applied as specified.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) Normal

Products/sites affected: (if applicable)