fix(kit): implement review notes

taiga-family · Sep 8, 2021 · a51859f · a51859f
1 parent 385b80d
commit a51859f
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 80 deletions.
diff --git a/projects/addon-table/components/table/providers/table.providers.ts b/projects/addon-table/components/table/providers/table.providers.ts
@@ -1,4 +1,4 @@
-import {forwardRef} from '@angular/core';
+import {forwardRef, SkipSelf} from '@angular/core';
 import {
     INTERSECTION_ROOT_MARGIN,
     INTERSECTION_THRESHOLD,
@@ -10,6 +10,7 @@ import {
     TUI_TEXTFIELD_LABEL_OUTSIDE,
     TUI_TEXTFIELD_SIZE,
 } from '@taiga-ui/core';
+import {InputCountOptions, TUI_INPUT_COUNT_OPTIONS} from '@taiga-ui/kit';
 import {TuiTableDirective} from '../directives/table.directive';
 import {TUI_STUCK_PROVIDER} from './stuck.provider';
 
@@ -19,6 +20,10 @@ export const TABLE_LABEL = {
     labelOutside: true,
 };
 
+export function inputCountOptionsFactory(options: InputCountOptions): InputCountOptions {
+    return {...options, hideButtons: true};
+}
+
 export const TUI_TABLE_PROVIDERS = [
     {
         provide: INTERSECTION_ROOT_MARGIN,
@@ -37,6 +42,11 @@ export const TUI_TABLE_PROVIDERS = [
         provide: TUI_TEXTFIELD_LABEL_OUTSIDE,
         useValue: TABLE_LABEL,
     },
+    {
+        provide: TUI_INPUT_COUNT_OPTIONS,
+        deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
+        useFactory: inputCountOptionsFactory,
+    },
     {
         provide: TUI_TEXTFIELD_SIZE,
         useExisting: forwardRef(() => TuiTableDirective),

diff --git a/projects/demo/src/modules/components/input-count/examples/3/index.ts b/projects/demo/src/modules/components/input-count/examples/3/index.ts
@@ -15,12 +15,8 @@ import {encapsulation} from '../../../../../view-encapsulation';
             useValue: {
                 ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
                 icons: {
-                    up: ({$implicit}: any) =>
-                        $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
-                    down: ({$implicit}: any) =>
-                        $implicit === 'm'
-                            ? 'tuiIconChevronDown'
-                            : 'tuiIconChevronDownLarge',
+                    up: 'tuiIconChevronUp',
+                    down: 'tuiIconChevronDown',
                 },
                 appearance: 'secondary',
                 step: 10,

diff --git a/projects/demo/src/modules/components/input-count/examples/import/define-options.txt b/projects/demo/src/modules/components/input-count/examples/import/define-options.txt
@@ -8,12 +8,8 @@ import {TUI_INPUT_COUNT_OPTIONS, TUI_INPUT_COUNT_DEFAULT_OPTIONS} from '@taiga-u
         useValue: {
             ...TUI_INPUT_COUNT_DEFAULT_OPTIONS,
             icons: {
-                up: ({$implicit}: any) =>
-                    $implicit === 'm' ? 'tuiIconChevronUp' : 'tuiIconChevronUpLarge',
-                down: ({$implicit}: any) =>
-                    $implicit === 'm'
-                        ? 'tuiIconChevronDown'
-                        : 'tuiIconChevronDownLarge',
+                up: 'tuiIconChevronUp',
+                down: 'tuiIconChevronDown',
             },
             appearance: 'secondary',
             step: 10,

diff --git a/projects/kit/components/input-count/input-count-options.ts b/projects/kit/components/input-count/input-count-options.ts
@@ -1,12 +1,10 @@
 import {InjectionToken} from '@angular/core';
-import {TuiContextWithImplicit} from '@taiga-ui/cdk';
-import {TuiSizeL} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 export interface InputCountOptions {
     readonly icons: Readonly<{
-        up: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
-        down: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+        up: PolymorpheusContent<{}>;
+        down: PolymorpheusContent<{}>;
     }>;
     appearance: string;
     hideButtons: boolean;

diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
@@ -20,16 +20,13 @@ import {
     setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TUI_IS_MOBILE,
-    TuiContextWithImplicit,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     tuiPure,
 } from '@taiga-ui/cdk';
 import {
     formatNumber,
-    TUI_TEXTFIELD_APPEARANCE,
     TUI_TEXTFIELD_SIZE,
-    TuiAppearance,
     tuiCreateNumberMask,
     TuiPrimitiveTextfieldComponent,
     TuiSizeL,
@@ -93,8 +90,6 @@ export class TuiInputCountComponent
         @Inject(NgControl)
         control: NgControl | null,
         @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
-        @Inject(TUI_TEXTFIELD_APPEARANCE)
-        private readonly appearance: string,
         @Inject(TUI_TEXTFIELD_SIZE)
         private readonly textfieldSize: TuiTextfieldSizeDirective,
         @Inject(TUI_PLUS_MINUS_TEXTS)
@@ -106,11 +101,11 @@ export class TuiInputCountComponent
         super(control, changeDetectorRef);
     }
 
-    get iconUp(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+    get iconUp(): PolymorpheusContent<{}> {
         return this.options.icons.up;
     }
 
-    get iconDown(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+    get iconDown(): PolymorpheusContent<{}> {
         return this.options.icons.down;
     }
 
@@ -131,7 +126,7 @@ export class TuiInputCountComponent
 
     @HostBinding('class._has-buttons')
     get hasButtons(): boolean {
-        return !this.hideButtons && this.appearance !== TuiAppearance.Table;
+        return !this.hideButtons;
     }
 
     get exampleText(): string {

diff --git a/projects/kit/components/input-count/input-count.style.less b/projects/kit/components/input-count/input-count.style.less
@@ -39,10 +39,11 @@
 .buttons .button {
     display: flex;
     width: calc(var(--tui-height-m) * 0.75);
-    height: 100%;
+    height: calc(50% - 0.0625rem);
 
     &_plus {
         border-radius: 0 var(--tui-radius-m) 0 0;
+        margin-bottom: 0.125rem;
     }
 
     &_minus {
@@ -53,11 +54,3 @@
         width: calc(var(--tui-height-l) * 0.75);
     }
 }
-
-.button-wrapper {
-    height: calc(50% - 0.0625rem);
-
-    &_plus {
-        margin-bottom: 0.125rem;
-    }
-}
diff --git a/projects/kit/components/input-count/input-count.template.html b/projects/kit/components/input-count/input-count.template.html
@@ -25,51 +25,33 @@
 </tui-primitive-textfield>
 <ng-container *ngIf="hasButtons && (minusTexts$ | async) as texts">
     <section class="buttons">
-        <span
-            class="button-wrapper button-wrapper_plus"
-            polymorpheus-outlet
-            [content]="iconUp"
-            [context]="{ $implicit: size }"
-        >
-            <ng-template let-icon>
-                <button
-                    tuiIconButton
-                    type="button"
-                    automation-id="tui-input-count__plus-button"
-                    size="s"
-                    [icon]="icon"
-                    class="button button_plus"
-                    [appearance]="options.appearance"
-                    [title]="texts[0]"
-                    [disabled]="plusButtonDisabled"
-                    [focusable]="false"
-                    (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
-                    (click)="increaseValue()"
-                ></button>
-            </ng-template>
-        </span>
-        <span
-            class="button-wrapper"
-            polymorpheus-outlet
-            [content]="iconDown"
-            [context]="{ $implicit: size }"
-        >
-            <ng-template let-icon>
-                <button
-                    tuiIconButton
-                    type="button"
-                    automation-id="tui-input-count__minus-button"
-                    size="s"
-                    [icon]="icon"
-                    class="button button_minus"
-                    [appearance]="options.appearance"
-                    [disabled]="minusButtonDisabled"
-                    [focusable]="false"
-                    [title]="texts[1]"
-                    (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
-                    (click)="decreaseValue()"
-                ></button>
-            </ng-template>
-        </span>
+        <button
+            tuiIconButton
+            type="button"
+            automation-id="tui-input-count__plus-button"
+            size="s"
+            [icon]="iconUp"
+            class="button button_plus"
+            [appearance]="options.appearance"
+            [title]="texts[0]"
+            [disabled]="plusButtonDisabled"
+            [focusable]="false"
+            (mousedown)="onButtonMouseDown($event, plusButtonDisabled)"
+            (click)="increaseValue()"
+        ></button>
+        <button
+            tuiIconButton
+            type="button"
+            automation-id="tui-input-count__minus-button"
+            size="s"
+            [icon]="iconDown"
+            class="button button_minus"
+            [appearance]="options.appearance"
+            [disabled]="minusButtonDisabled"
+            [focusable]="false"
+            [title]="texts[1]"
+            (mousedown)="onButtonMouseDown($event, minusButtonDisabled)"
+            (click)="decreaseValue()"
+        ></button>
     </section>
 </ng-container>