From 1092f5d5a3f027052651b4ece9107f5be2dae9ad Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Thu, 2 Jul 2026 17:18:11 +0300 Subject: [PATCH 1/5] fix(button): replaced gap with background-clip --- packages/components/button/button-group.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/button/button-group.scss b/packages/components/button/button-group.scss index a18a50f48b..bedf586dd4 100644 --- a/packages/components/button/button-group.scss +++ b/packages/components/button/button-group.scss @@ -11,7 +11,9 @@ &: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), + :is(.kbq-button, .kbq-button-icon):hover { + background-clip: padding-box; + } } } From 0e7909249933cd0cc5256e5161f2132ca3451d33 Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Fri, 3 Jul 2026 14:09:07 +0300 Subject: [PATCH 2/5] chore: fixed overlapping border and border color for contrast-fade group --- packages/components/button/button-group.scss | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/components/button/button-group.scss b/packages/components/button/button-group.scss index bedf586dd4..15a0776e35 100644 --- a/packages/components/button/button-group.scss +++ b/packages/components/button/button-group.scss @@ -3,10 +3,18 @@ .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))), @@ -16,4 +24,34 @@ background-clip: padding-box; } } + + &.kbq-contrast-fade.kbq-button-group-root_filled { + --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: 1px; + 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: 1px; + background: var(--button-group-divider-color); + } + } + } } From d9127b3a4edace0ae90b71a4ab0ec0aeae0e0c6e Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Fri, 3 Jul 2026 14:24:13 +0300 Subject: [PATCH 3/5] chore: override default button styles --- packages/components/button/button-group.scss | 2 +- packages/components/button/e2e.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/button/button-group.scss b/packages/components/button/button-group.scss index 15a0776e35..9c9b841d70 100644 --- a/packages/components/button/button-group.scss +++ b/packages/components/button/button-group.scss @@ -21,7 +21,7 @@ &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) { :is(.kbq-button, .kbq-button-icon), :is(.kbq-button, .kbq-button-icon):hover { - background-clip: padding-box; + background-clip: padding-box !important; } } diff --git a/packages/components/button/e2e.ts b/packages/components/button/e2e.ts index a63ecf83ef..b4251ccd3b 100644 --- a/packages/components/button/e2e.ts +++ b/packages/components/button/e2e.ts @@ -176,7 +176,7 @@ export class E2eButtonStateAndStyle { } -
+