borderRadius in ButtonVariables doesn't work in ButtonGroup

[spjtls9]

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)

[layershifter]

@spjtls9 thanks for report 👍

---

It's a valid bug that may require refactor ButtonGroup 🤔

When variables are passed to items:

• variables will be passed to a Button component and buttonStyles will be evaluated with them properly ✅
• then we will apply styles that will override borderRadius setting ❌

https://github.com/microsoft/fluentui/blob/474608f55ea17effdc807ae963e93cd08bb90528/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx#L108-L111

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.