feat!: Range remove deprecated API for labels of segments (#2200)

taiga-family · Aug 6, 2022 · 46dd750 · 46dd750
1 parent c4c74e9
commit 46dd750
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 171 deletions.
diff --git a/projects/demo/src/modules/components/range/examples/3/index.html b/projects/demo/src/modules/components/range/examples/3/index.html
@@ -1,6 +1,5 @@
 <tui-range
     id="range-with-segments"
-    new
     size="m"
     class="range"
     [min]="min"

diff --git a/projects/demo/src/modules/components/range/examples/4/index.html b/projects/demo/src/modules/components/range/examples/4/index.html
@@ -1,6 +1,5 @@
 <tui-range
     id="range-with-key-steps"
-    new
     size="m"
     class="range"
     [min]="min"

diff --git a/projects/demo/src/modules/components/range/range.component.ts b/projects/demo/src/modules/components/range/range.component.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiPluralize, TuiSizeS} from '@taiga-ui/core';
+import {TuiSizeS} from '@taiga-ui/core';
 import {TuiKeySteps} from '@taiga-ui/kit';
 
 @Component({
@@ -68,17 +68,6 @@ export class ExampleTuiRangeComponent {
 
     steps = this.stepsVariants[0];
 
-    readonly pluralizeVariants: ReadonlyArray<TuiPluralize | Record<string, string>> = [
-        ['year', 'years', 'years'],
-        {one: 'thing', few: 'things', many: 'things', other: 'things'},
-        {
-            one: 'year',
-            other: 'years',
-        },
-    ];
-
-    pluralize: Record<string, string> | TuiPluralize | null = null;
-
     readonly keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]];
 
     keySteps: TuiKeySteps | null = null;

diff --git a/projects/demo/src/modules/components/range/range.template.html b/projects/demo/src/modules/components/range/range.template.html
@@ -6,29 +6,6 @@
     <ng-template pageTab>
         <p i18n>Component allows to choose a part of a range</p>
 
-        <tui-notification status="warning">
-            <p
-                i18n
-                class="tui-space_top-0"
-            >
-                This component is being refactored. Soon&nbsp;(next&nbsp;major&nbsp;release) you will see the fresh
-                version of it!
-            </p>
-            <p i18n>
-                Of course, we keep backward compatibility in mind (for 2.x.x). You can still use old version of
-                <code>Range</code>
-                .
-            </p>
-
-            <p i18n>
-                However, if you are going to use this component, we recommend to use new version. To enable the "new
-                version"-mode, add
-                <code>new</code>
-                directive. Example:&nbsp;
-                <code>&lt;tui&#8209;range&nbsp;new&nbsp;...&gt;</code>
-            </p>
-        </tui-notification>
-
         <tui-doc-example
             id="base"
             i18n-heading
@@ -92,7 +69,6 @@
                     [max]="max"
                     [steps]="steps"
                     [segments]="segments"
-                    [pluralize]="pluralize"
                     [keySteps]="keySteps"
                     [size]="size"
                     [quantum]="quantum"
@@ -177,30 +153,6 @@
             >
                 Size
             </ng-template>
-            <ng-template
-                i18n
-                documentationPropertyName="pluralize"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiPluralize | Record<string, string>"
-                [documentationPropertyDeprecated]="true"
-                [documentationPropertyValues]="pluralizeVariants"
-                [(documentationPropertyValue)]="pluralize"
-            >
-                Plural forms for labels. TuiPluralize array is deprecated. Use object that mimics the
-                <a
-                    tuiLink
-                    href="https://unicode-org.github.io/icu/userguide/format_parse/messages/"
-                >
-                    ICU format
-                </a>
-                for i18nPlural
-
-                <p>
-                    <strong>
-                        See examples how create labels for ticks without this property (outside of the component).
-                    </strong>
-                </p>
-            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 

diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts
@@ -49,19 +49,19 @@ import {Observable} from 'rxjs';
  * @deprecated TODO remove me in v3.0 and make `Range` and `InputRange` always "new".
  */
 @Directive({
-    selector: `tui-range[new], tui-input-range[new]`,
+    selector: 'tui-range[new], tui-input-range[new]',
 })
 export class TuiNewRangeDirective {}
 
 // @dynamic
 @Component({
-    selector: `tui-range`,
-    templateUrl: `./range.template.html`,
-    styleUrls: [`./range.style.less`],
+    selector: 'tui-range',
+    templateUrl: './range.template.html',
+    styleUrls: ['./range.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[attr.tabindex]': `-1`,
-        '[attr.aria-disabled]': `computedDisabled`,
+        '[attr.tabindex]': '-1',
+        '[attr.aria-disabled]': 'computedDisabled',
     },
     providers: [
         {
@@ -102,17 +102,17 @@ export class TuiRangeComponent
      * It can be done after removing backward compatibility code inside {@link computePureKeySteps} in v3.0
      * */
     @Input()
-    @tuiDefaultProp(nonNegativeFiniteAssertion, `Quantum must be a non-negative number`)
+    @tuiDefaultProp(nonNegativeFiniteAssertion, 'Quantum must be a non-negative number')
     quantum = 0;
 
     @Input()
-    @HostBinding(`attr.data-size`)
+    @HostBinding('attr.data-size')
     @tuiDefaultProp()
-    size: TuiSizeS = `m`;
+    size: TuiSizeS = 'm';
 
     @Input()
     @tuiDefaultProp()
-    segments = 0;
+    segments = 1;
 
     @Input()
     @tuiDefaultProp()
@@ -121,7 +121,7 @@ export class TuiRangeComponent
     @ViewChildren(TuiSliderComponent, {read: ElementRef})
     slidersRefs: QueryList<ElementRef<HTMLInputElement>> = EMPTY_QUERY;
 
-    lastActiveThumb: 'right' | 'left' = `right`;
+    lastActiveThumb: 'right' | 'left' = 'right';
 
     constructor(
         @Optional()
@@ -132,9 +132,6 @@ export class TuiRangeComponent
         @Inject(DOCUMENT) documentRef: Document,
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(TUI_FROM_TO_TEXTS) fromToTexts$: Observable<[string, string]>,
-        @Optional()
-        @Inject(TuiNewRangeDirective)
-        readonly isNew: TuiNewRangeDirective | null,
     ) {
         super(control, changeDetectorRef, documentRef, fromToTexts$);
     }
@@ -167,34 +164,38 @@ export class TuiRangeComponent
         return this.computePureKeySteps(this.keySteps, this.min, this.max);
     }
 
-    @HostBinding(`style.--left.%`)
+    get segmentWidthRatio(): number {
+        return 1 / this.segments;
+    }
+
+    @HostBinding('style.--left.%')
     get left(): number {
         return this.getPercentageFromValue(this.value[0]);
     }
 
-    @HostBinding(`style.--right.%`)
+    @HostBinding('style.--right.%')
     get right(): number {
         return 100 - this.getPercentageFromValue(this.value[1]);
     }
 
-    @HostListener(`focusin`, [`true`])
-    @HostListener(`focusout`, [`false`])
+    @HostListener('focusin', ['true'])
+    @HostListener('focusout', ['false'])
     onFocused(focused: boolean): void {
         this.updateFocused(focused);
     }
 
-    @HostListener(`keydown.arrowUp.prevent`, [`1`, `$event.target`])
-    @HostListener(`keydown.arrowRight.prevent`, [`1`, `$event.target`])
-    @HostListener(`keydown.arrowLeft.prevent`, [`-1`, `$event.target`])
-    @HostListener(`keydown.arrowDown.prevent`, [`-1`, `$event.target`])
+    @HostListener('keydown.arrowUp.prevent', ['1', '$event.target'])
+    @HostListener('keydown.arrowRight.prevent', ['1', '$event.target'])
+    @HostListener('keydown.arrowLeft.prevent', ['-1', '$event.target'])
+    @HostListener('keydown.arrowDown.prevent', ['-1', '$event.target'])
     changeByStep(coefficient: number, target: HTMLElement): void {
         const [sliderLeftRef, sliderRightRef] = this.slidersRefs;
         const leftThumbElement = sliderLeftRef.nativeElement;
         const rightThumbElement = sliderRightRef.nativeElement;
 
         const isRightThumb =
             target === this.elementRef.nativeElement
-                ? this.lastActiveThumb === `right`
+                ? this.lastActiveThumb === 'right'
                 : target === rightThumbElement;
         const activeThumbElement = isRightThumb ? rightThumbElement : leftThumbElement;
         const previousValue = isRightThumb ? this.value[1] : this.value[0];
@@ -218,7 +219,7 @@ export class TuiRangeComponent
             this.updateStart(guardedValue);
         }
 
-        this.lastActiveThumb = right ? `right` : `left`;
+        this.lastActiveThumb = right ? 'right' : 'left';
     }
 
     fractionGuard(fraction: number): number {
@@ -265,10 +266,10 @@ export class TuiRangeComponent
         // TODO replace all function by `return keySteps || [[0, min], [100, max]]` in v3.0
         tuiAssert.assert(
             !keySteps,
-            `\n` +
-                `Input property [keySteps] should contain min and max percents.\n` +
-                `We have taken [min] and [max] properties of your component for now (but it will not work in v3.0).\n` +
-                `See example how properly use [keySteps]: https://taiga-ui.dev/components/range#key-steps`,
+            '\n' +
+                'Input property [keySteps] should contain min and max percents.\n' +
+                'We have taken [min] and [max] properties of your component for now (but it will not work in v3.0).\n' +
+                'See example how properly use [keySteps]: https://taiga-ui.dev/components/range#key-steps',
         );
 
         return [[0, min], ...(keySteps || []), [100, max]];

diff --git a/projects/kit/components/range/range.module.ts b/projects/kit/components/range/range.module.ts
@@ -1,22 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {TuiFocusableModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
-import {TuiFormatNumberPipeModule} from '@taiga-ui/core';
+import {TuiFocusableModule} from '@taiga-ui/cdk';
 import {TuiSliderModule} from '@taiga-ui/kit/components/slider';
 
 import {TuiNewRangeDirective, TuiRangeComponent} from './range.component';
 import {TuiRangeChangeDirective} from './range-change.directive';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TuiRepeatTimesModule,
-        TuiFocusableModule,
-        TuiFormatNumberPipeModule,
-        TuiSliderModule,
-        FormsModule,
-    ],
+    imports: [CommonModule, TuiFocusableModule, TuiSliderModule, FormsModule],
     declarations: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective],
     exports: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective],
 })

diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less
@@ -2,6 +2,7 @@
 
 @track-height: 0.125rem;
 @extra-click-area-space: 0.4375rem;
+@tick-thickness: 0.25rem;
 
 :host {
     position: relative;
@@ -38,7 +39,7 @@
     height: 100%;
 
     /* Filled selected range */
-    &:after {
+    &:before {
         content: '';
         position: absolute;
         top: 0;
@@ -48,6 +49,22 @@
         background: var(--tui-primary);
         margin: 0 (-@thumb-width / 2);
     }
+
+    /* Ticks */
+    &:after {
+        .fullsize(absolute, inset);
+        content: '';
+        left: ((@thumb-width - @tick-thickness) / 2);
+        right: ((@thumb-width + @tick-thickness) / 2);
+        background-image: repeating-linear-gradient(
+            to right,
+            var(--tui-base-07) 0 @tick-thickness,
+            transparent 0 calc(var(--segment-width) / var(--bg-size-ratio))
+        );
+        background-position-x: right;
+        background-repeat: no-repeat;
+        background-size: calc(100% * var(--bg-size-ratio));
+    }
 }
 
 .track {
@@ -128,47 +145,3 @@
         opacity: 1; // prevent double overlay for disabled state
     }
 }
-
-// TODO delete in v3.0
-.segments {
-    .fullsize(absolute, inset);
-
-    :host[data-size='s'] & {
-        .tui-slider-ticks-labels(s);
-        padding: 0 (@thumb-diameters[ @s] / 2);
-    }
-
-    :host[data-size='m'] & {
-        .tui-slider-ticks-labels(m);
-        padding: 0 (@thumb-diameters[ @m] / 2);
-    }
-}
-
-// TODO Use background-image with repeating-linear-gradient to make ticks
-.segment:not(:last-of-type):not(:first-of-type):before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: auto;
-    background: var(--tui-base-07);
-    width: 0.25rem;
-    height: 100%;
-}
-
-// TODO delete in v3.0
-.segment {
-    &:last-of-type .number {
-        margin-right: (-@thumb-diameters[ @m] / 2);
-    }
-
-    &:first-of-type .number {
-        margin-left: (-@thumb-diameters[ @m] / 2);
-    }
-}
-
-// TODO delete in v3.0
-.number {
-    display: inline-block;
-    margin-top: 0.5rem;
-}