[Bug]: Fix Split button styling issue

[fogelek]

Component

SplitButton

Package version

9.55.1

React version

18.2.0

Environment

System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 117.92 GB / 125.78 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Browsers:
    Chrome: 130.0.6723.69
  npmPackages:
    @types/react: ^17.0.39 => 17.0.39 
    @types/react-dom: ^17.0.11 => 17.0.25 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0

Current Behavior

Awkward divider in subtle and transparent mode

Expected Behavior

Remove vertical divider for subtle and transparent variants, and fix spacing with the removal of the divider

Reproduction

https://stackblitz.com/edit/ajpwkxza?file=src%2Fexample.tsx

Steps to reproduce

Styling issue, always reproducible while using subtle and transparent mode

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mainframev]

@fogelek hi 👋🏻

This needs confirmation from the design team. I found an older discussion directly in the Figma spec, but there is no clear confirmation on whether this needs to be updated in Figma or the code.

[lekoulekou]

Hihi! I would like to suggest matching the code to Figma. I would recommending having the divider stroke match whatever is happening to the button stroke (going to transparent). I worry about removing it outright because I don't want the hit target for the chevron part of the button to get any smaller.

[fogelek]

Hi,

@mainframev Yes, I plan to match the code to the Figma design.
@lekoulekou Thanks for the heads-up; I'll play around with it and see what will work the best