SplitButton: pt attribute doesn't behave as described in documentation

[dominikj111]

Describe the bug

SplitButton wireframe shows that number 2 and 3 are labeled as icon and button and it doesn't match the options table.

So the

<SplitButton
   label="This is button (3)"
   onClick={save}
   model={items}
   pt={{
      // 3 in doc, but 2 in reality
      button: { root: { style: { backgroundColor: "black" } } },
      // 2 in doc, but 3 in reality
      icon: { style: { backgroundColor: "red" } }
   }}
/>

colours the opposite sections.

Also the passed pt structure is quite inconsistent. I'm wondering if there is any purpose for this.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-dkrktv?file=/src/App.js

PrimeReact version

9.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

@dominikj111 so the wireframe is the only thing wrong correct?

[dominikj111]

The most easy fix would by to swap 2 and 3 in the wireframe. So I suppose I can give you positive answer @melloware, from that point of view.

But from my perspective, the wireframe is correct but in table row the icon (2) needs to swap with the the button (3). For me the most confusing thing are the labels. Both items are buttons, but one is marked as icon and both accepts different passthrough type.

[melloware]

OK let me assign this to PrimeTek.

[melloware]

Docs have been updated: https://primereact.org/splitbutton/