fix(button group): fix border disappears in button group with disable (port of 1139)

.storybook/stories/button/button-group.stories.ts

@@ -17,6 +17,7 @@ const defaultStory: Story = args => ({
         <clr-button
           *ngFor="let _ of createArray(buttonCount); let i = index"
           [clrInMenu]="false"
+          [disabled]="disabledButtonsPosition.includes(i+1)"
         >
           {{content}} {{i + 1}}
         </clr-button>
@@ -48,6 +49,7 @@ const defaultParameters: Parameters = {
     createArray: { control: { disable: true }, table: { disable: true } },
     buttonCount: { control: { type: 'number', min: 1, max: 100 } },
     inMenuButtonCount: { control: { type: 'number', min: 1, max: 100 } },
+    disabledButtonsPosition: { description: 'Enter JSON array (e.g. `[2,3]`)', control: { type: 'array' } },
   },
   args: {
     // story helpers
@@ -56,9 +58,20 @@ const defaultParameters: Parameters = {
     content: 'Hello World!',
     buttonCount: 3,
     inMenuButtonCount: 3,
+    disabledButtonsPosition: [],
   },
 };
 
-const variants: Parameters[] = [];
+const variants: Parameters[] = [
+  {
+    disabledButtonsPosition: [],
+  },
+  {
+    disabledButtonsPosition: [2],
+  },
+  {
+    disabledButtonsPosition: [2, 3],
+  },
+];
 
 setupStorybook(ClrButtonGroupModule, defaultStory, defaultParameters, variants);

projects/angular/src/button/button-group/_button-group.clarity.scss

@@ -64,6 +64,10 @@
       &:not(:last-child) {
         @include square-off-btngroup-btns(right);
       }
+
+      &:disabled:not(:last-child) {
+        border-right: none;
+      }
     }
 
     .tooltip {
@@ -98,15 +102,15 @@
     }
 
     //To avoid double borders
-    .btn + .btn {
+    .btn:not([disabled]) + .btn {
       border-left: none;
     }
 
     .tooltip:not(:first-child) .btn {
       border-left: none;
     }
 
-    .btn + .btn-group-overflow {
+    .btn:not([disabled]) + .btn-group-overflow {
       .btn {
         border-left: none;
       }