Button (Tailwind): Theming Documentation is missing attributes for button without label

[sdwillbrand]

Describe the bug

The documentation describes a different button as used in the library. By default a labeless button hides the label span. But when importing the theming from the documentation, this feature is missing and the label span is rendered. Resulting in an uncentered icon in the button.

Reproducer

https://codesandbox.io/p/sandbox/primereact-bug-labeless-button-no-centered-icon-zjyc47

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Go to PrimeReact Documentation
2. Go to Button > Theming
3. Inspect Tailwind theming

Expected behavior

Centered icon in labeless default button.

[github-actions]

Please fork the CodeSandbox project or Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[sdwillbrand]

Codesandbox example updated in the issue. We replaced the default styling of the button with the theming presented in the documentation. If you inspect the button you can see a gap next to the icon. We suspect it is caused by the label tag which it still not invisible. The documentation of the button theming might be insufficient.

[sdwillbrand]

{ 'w-0': !props.label }

This is our current workaround to hide the label when no text is used.

[melloware]

Where did you put { 'w-0': !props.label } can you update your sandbox? Also shouldn't it be hidden instead of width-0 ?

[sdwillbrand]

I've updated the sandbox. You can find the adjustments where the comment "HERE" is. By default the tailwind theme has the additional classes for the button "invisible" and "w-0" where "w-0" is the crucial class for hiding the label. "invisible" only hides the element but it still takes up space in the DOM. It could also be "hidden".

[melloware]

Got it the code already has this { 'invisible w-0': props.label == null }

label: ({ props }) => ({
            className: classNames(
                'flex-1',
                'duration-200',
                'font-bold',
                {
                    'hover:underline': props.link
                },
                { 'invisible w-0': props.label == null }
            )
        })