SegmentedControl always setting border-left/top-color to transparent ignoring orientation

[jksaunders]

What package has an issue

@mantine/core

Describe the bug

The SegmentedControl component's style API does not allow setting the borderLeftColor/borderRightColor for the control immediately to the left (or above if vertical) of the active control.

The color for both borders is being overwritten with a transparent value. Unless I'm misunderstanding something, I believe if horizontal, the borderTopColor should not be set to transparent, and if vertical, the borderLeftColor should not be set to transparent.

Use case: creating a nav that behaves like that Tabs component in Mantine, but has the sliding animation. Probably another way to achieve this, but happy to fix this anyway!

What version of @mantine/hooks page do you have in package.json?

6.0.0

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/jolly-heyrovsky-qrintp?file=/src/App.tsx

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

In this file: /src/mantine-core/src/SegmentedControl/SegmentedControl.styles.ts:

The control style should be:

controlActive: {
        borderLeftColor: 'transparent !important',
        borderTopColor: 'transparent !important',

        [`& + .${getStylesRef('control')}`]: {
          [vertical  ? 'borderTopColor' : ''borderLeftColor']: 'transparent !important', // This key changed to be only one of `borderTopColor` or `borderLeftColor`
        },
        borderRadius: theme.fn.radius(radius),
        boxShadow: shouldAnimate
          ? color || theme.colorScheme === 'dark'
            ? 'none'
            : theme.shadows.xs
          : undefined,
        backgroundColor: shouldAnimate
          ? color
            ? colors.background
            : theme.colorScheme === 'dark'
            ? theme.colors.dark[5]
            : theme.white
          : undefined,
      },