vmware-clarity/ng-clarity

Border disappears in button group with disabled button

Sadderp opened this issue · 2 comments

Sadderp commented

Describe the bug

The border between the buttons in a button group disappears when the first button is disabled

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ng14-pnqh9j?file=src%2Fapp%2Fapp.component.html

Steps to reproduce the behavior:

  1. Wait for the file to load
  2. See error

Expected behavior

The border should be visible even when the first button is disabled.

Versions

Clarity version:

  • v13.x
  • v15.x
  • Other:

Framework version:
Angular v.14.2.10

Device:

  • Type: PC
  • OS: Windows 10
  • Browser: Firefox
  • Version: 116.0.3
pawaru commented

This happens because of the selector:

    .btn + .btn {
      border-left: none;
    }

specified here:

The left borders are removed for 2nd button onwards to avoid double borders.
Hence for every disabled button followed by an enabled button on the right, will not have the border separating the 2 buttons.

github-actions commented

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.