fix: button-group replaced gap with background-clip (#DS-5112) (#1691)

Author: NikGurev

packages/components/button/__screenshots__/04-dark.png

@@ -3,15 +3,55 @@
 .kbq-button-group {
     &.kbq-button-group_horizontal {
         @include groups-mixins.group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-right-color: transparent;
+        }
     }
 
     &.kbq-button-group_vertical {
         @include groups-mixins.vertical-group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-bottom-color: transparent;
+        }
     }
 
     &:not(:has(> :not(.kbq-contrast-fade.kbq-button_filled))),
     &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) {
-        // @TODO tech debt (#DS-4847)
-        gap: var(--kbq-size-3xs);
+        :is(.kbq-button, .kbq-button-icon) {
+            background-clip: padding-box !important;
+        }
+    }
+
+    &.kbq-contrast-fade.kbq-button-group-root_filled {
+        // internal css variable, so don't prefixed with kbq
+        --button-group-divider-color: var(--kbq-line-contrast-fade);
+
+        &.kbq-button-group_horizontal {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                // offset by -1px because absolute positioning is relative to the padding edge,
+                // but the visual junction sits 1px to the left in the transparent border area
+                left: calc(-1 * var(--kbq-size-border-width));
+                top: 0;
+                bottom: 0;
+                width: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
+
+        &.kbq-button-group_vertical {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                top: calc(-1 * var(--kbq-size-border-width));
+                left: 0;
+                right: 0;
+                height: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
     }
 }

packages/components/button/__screenshots__/04-light.png

@@ -176,7 +176,7 @@ export class E2eButtonStateAndStyle {
             }
             <tr>
                 <td>
-                    <div class="layout-gap-3xs" kbq-button-group [kbqStyle]="style" [color]="color">
+                    <div kbq-button-group [kbqStyle]="style" [color]="color">
                         <button kbq-button>
                             <i kbq-icon="kbq-diamond_16"></i>
                             {{ data[0] }}