fix(button): block clicks and ENTER/SPACE on disabled anchor hosts (#DS-4364)

packages/components-dev/button/module.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
+import { KbqTitleModule } from '@koobiq/components/title';
 import { ButtonExamplesModule } from 'packages/docs-examples/components/button';
 
 @Component({
@@ -26,7 +27,7 @@ export class DevDocsExamples {}
 
 @Component({
     selector: 'dev-app',
-    imports: [KbqButtonModule, KbqIconModule, DevDocsExamples],
+    imports: [KbqButtonModule, KbqIconModule, DevDocsExamples, KbqTitleModule],
     templateUrl: 'template.html',
     styleUrls: ['styles.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

packages/components-dev/button/template.html

@@ -2,6 +2,66 @@
 
 <hr />
 
+<div id="icon-slots-demo">
+    <h4>Explicit prefix/suffix slots (source order is reversed on purpose)</h4>
+
+    <!-- prefix written AFTER the text, suffix written BEFORE — slots put them in place -->
+    <button kbq-button [color]="colors.Contrast">
+        Кнопка
+        <i kbqButtonPrefix kbq-icon="kbq-plus_16"></i>
+    </button>
+    &nbsp;
+    <button kbq-button [color]="colors.Contrast">
+        <i kbqButtonSuffix kbq-icon="kbq-chevron-down-s_16"></i>
+        Кнопка
+    </button>
+    &nbsp;
+    <button kbq-button [color]="colors.Contrast">
+        <i kbqButtonSuffix kbq-icon="kbq-chevron-down-s_16"></i>
+        Кнопка
+        <i kbqButtonPrefix kbq-icon="kbq-plus_16"></i>
+    </button>
+    &nbsp;
+    <!-- icon-only two-icon trigger, markers in reversed order -->
+    <button kbq-button class="kbq-dropdown-trigger" [color]="colors.Contrast">
+        <i kbqButtonSuffix kbq-icon="kbq-chevron-down-s_16"></i>
+        <i kbqButtonPrefix kbq-icon="kbq-play_16"></i>
+    </button>
+    &nbsp;
+    <!-- non-icon slot content: any element can be projected into a slot and is spaced from the text -->
+    <button kbq-button [color]="colors.Contrast">
+        <span kbqButtonPrefix>1</span>
+        Кнопка
+        <span kbqButtonSuffix>⌘K</span>
+    </button>
+</div>
+
+<hr />
+
+<div id="ellipsis-demo">
+    <h4>Text ellipsis (width-constrained)</h4>
+
+    <!-- text only -->
+    <button kbq-button style="max-width: 160px" kbq-title [color]="colors.Contrast">
+        Очень длинный текст кнопки, который не помещается
+    </button>
+    &nbsp;
+    <!-- with marker icons: icons stay, only the text is clipped -->
+    <button kbq-button style="max-width: 160px" kbq-title [color]="colors.Contrast">
+        <i kbqButtonPrefix kbq-icon="kbq-plus_16"></i>
+        Очень длинный текст кнопки, который не помещается
+        <i kbqButtonSuffix kbq-icon="kbq-chevron-down-s_16"></i>
+    </button>
+    &nbsp;
+    <!-- legacy: icon in default slot, nested inside .kbq-button-text -->
+    <button kbq-button style="max-width: 160px" kbq-title [color]="colors.Contrast">
+        <i kbq-icon="kbq-plus_16"></i>
+        Очень длинный текст кнопки, который не помещается
+    </button>
+</div>
+
+<hr />
+
 <div>
     <div>
         <button disabled kbq-button class="kbq-dropdown-trigger">

packages/components/button/_button-base.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/button';
+@use '../core/styles/common/list';
 
 @use '../core/styles/common/tokens' as *;
 
@@ -47,6 +48,17 @@
     & .kbq-button-wrapper {
         display: flex;
         align-items: center;
+
+        min-width: 0;
+    }
+
+    & .kbq-button-text {
+        @include list.kbq-truncate-line();
+
+        display: flex;
+        align-items: center;
+
+        min-width: 0;
     }
 
     & .kbq-icon_left {
@@ -56,4 +68,12 @@
     & .kbq-icon_right {
         margin-left: var(--kbq-button-size-content-padding);
     }
+
+    & .kbq-button-prefix {
+        margin-right: var(--kbq-button-size-content-padding);
+    }
+
+    & .kbq-button-suffix {
+        margin-left: var(--kbq-button-size-content-padding);
+    }
 }

packages/components/button/_button-theme.scss

@@ -46,10 +46,6 @@
 }
 
 @mixin kbq-button-theme() {
-    .kbq-button-overlay {
-        display: none;
-    }
-
     .kbq-button,
     .kbq-button-icon {
         -webkit-font-smoothing: antialiased;
@@ -87,7 +83,9 @@
         &.kbq-button_filled,
         &.kbq-button_outline,
         &.kbq-button_transparent {
-            &.cdk-keyboard-focused {
+            // :not(.kbq-disabled): a disabled <a kbq-button> can keep DOM focus (tabindex=-1 does
+            // not blur it), and FocusMonitor stays attached for the whole component lifetime.
+            &.cdk-keyboard-focused:not(.kbq-disabled) {
                 $focused-color: var(--kbq-states-line-focus-theme);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
@@ -101,10 +99,4 @@
     .kbq-button-icon {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
-
-    .kbq-button-icon.kbq-button-wrapper {
-        .kbq-icon {
-            @include kbq-css-font-variable(typography, body, line-height, '');
-        }
-    }
 }

packages/components/button/button-slots.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+
+/** Marks content to be projected into the prefix (leading) slot of a button. */
+@Directive({
+    selector: '[kbqButtonPrefix]',
+    host: {
+        class: 'kbq-button-prefix'
+    }
+})
+export class KbqButtonPrefix {}
+
+/** Marks content to be projected into the suffix (trailing) slot of a button. */
+@Directive({
+    selector: '[kbqButtonSuffix]',
+    host: {
+        class: 'kbq-button-suffix'
+    }
+})
+export class KbqButtonSuffix {}

packages/components/button/button.component.html

@@ -1,4 +1,12 @@
-<span #kbqTitleText class="kbq-button-wrapper" (cdkObserveContent)="projectContentChanged()">
-    <ng-content />
+<span
+    #parentTextElement
+    class="kbq-button-wrapper"
+    [cdkObserveContentDisabled]="!styler.icons().length"
+    (cdkObserveContent)="projectContentChanged()"
+>
+    <ng-content select="[kbqButtonPrefix]" />
+    <span #kbqTitleText class="kbq-button-text">
+        <ng-content />
+    </span>
+    <ng-content select="[kbqButtonSuffix]" />
 </span>
-<span class="kbq-button-overlay" (click)="haltDisabledEvents($event)"></span>