fix(split-button): outlined split button right border duplication on hover

[betavs]

Fix #4758

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Nov 9, 2023 2:31am

[melloware]

@betavs check this PR out: #4638

[FlipWarthog]

I also think this might actually be a theme issue rather than a core CSS issue: https://github.com/primefaces/primevue/blob/master/public/themes/lara-light-blue/theme.css#L1777C46-L1781

The issue isn't present if you switch to Material theme, and it's compounded in other themes, like Mira.

[betavs]

@betavs check this PR out: #4638

I know !important is bad, but I find that other components use it internally

I think changing this code will solve the problem

from

primevue/components/lib/splitbutton/style/SplitButtonStyle.js

Lines 10 to 17 in 14e8c29

	.p-splitbutton .p-splitbutton-defaultbutton,
	.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
	.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
	flex: 1 1 auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0 none;
	}

to

    .p-splitbutton .p-splitbutton-defaultbutton,
    .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
        flex: 1 1 auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0 none;
    }

[FlipWarthog]

I know !important is bad, but I find that other components use it internally

Yeah my PR is removing it from most of the core component CSS. The linked issue references an article that explains !important within CSS layers; it's takes even higher precedence and is harder to override

I think changing this code will solve the problem

If that works, I think it's probably a better change if you want to update the PR.

@melloware fyi looks like this same issue exists in PrimeReact as well.

[melloware]

@betavs i would update your PR with your suggestion.

[betavs]

@betavs i would update your PR with your suggestion.

I have updated the PR for your code review and testing.