search

taiga-family / taiga-ui

Angular UI Kit and components library for awesome people
https://taiga-ui.dev
Apache License 2.0
3.1k stars 408 forks source link

🤖 - 4.0 migrations #5808

Open vladimirpotekhin opened 8 months ago

vladimirpotekhin commented 8 months ago

Description

In this discussion we will be listing breaking changes we plan for the next major version. No clear forecast on when it will happen yet. Besides obviously dropping all deprecated stuff, these things will also take place:

This list will be updated as we collect more necessary migrations.

We need to cover as many breaking changes with migrations as possible.

Migration list

Experimental

CDK

Core

Kit

Addon-table

waterplea commented 6 months ago

Small migrations

waterplea commented 6 months ago

Before:

<tui-hosted-dropdown
  [content]="template"
  [sided]="sided"
  [canOpen]="canOpen"
  [(open)]="open"
>
  <button>One</button>
  <button tuiHostedDropdownHost>Two</button>
</tui-hosted-dropdown>
<ng-template #template>Wow</ng-template>

After:

<div
  [tuiDropdown]="template"
  [tuiDropdownSided]="sided"
  [tuiDropdownEnabled]="canOpen"
  [(tuiDropdownOpen)]="open"
>
  <button>One</button>
  <button #tuiDropdownHost>Two</button>
</div>
<ng-template #template>Wow</ng-template>

2) tuiHostedDropdownHost is now #tuiDropdownHost 3) sided is now tuiDropdownSided directive 4) content is now tuiDropdown directive 5) canOpen input is now tuiDropdownEnabled input 6) open banana is now tuiDropdownOpen banana 7) If wrapping just one element — directives can be moved directly on that element 8) If open tracking is not needed, it can be just attribute tuiDropdownOpen without any binding

waterplea commented 5 months ago

ResizeObserver

PR: https://github.com/taiga-family/taiga-ui/pull/6537

waterplea commented 5 months ago
waterplea commented 4 months ago

Portals and Popovers

Renamed tags

Changes to abstract dialog class

It used to be defaultOptions and this:

@Injectable({
    providedIn: 'root',
})
export class TuiDialogService extends AbstractTuiDialogService<TuiDialogOptions<any>> {
    protected readonly component = DIALOG;
    protected readonly defaultOptions: TuiDialogOptions<any> = {
        ...inject(TUI_DIALOG_OPTIONS),
        data: undefined,
    };
}

Now it is options and this:

@Injectable({
    providedIn: 'root',
    useFactory: () =>
        new TuiDialogService(TUI_DIALOGS, TuiDialogComponent, inject(TUI_DIALOG_OPTIONS)),
})
export class TuiDialogService extends TuiPopoverService<TuiDialogOptions<any>> {}
waterplea commented 4 months ago

InputFiles

See examples for the last 3 points, they are probably not 100% migratable so we will need some comment added.

waterplea commented 4 months ago

Toggles (checkboxes, radiobuttons, toggles)

Toggle

PrimitiveCheckbox

Block

This:

<tui-radio-block
  formControlName="control"
  item="value"
>
    Label
</tui-radio-block>

to this:

<label tuiBlock>
  <input
    formControlName="control"
    tuiRadio
    type="radio"
    value="value"
  />
  Label
</label>

And with hideCheckbox/Radio, this:

<tui-checkbox-block
  size="m"
  [hideCheckbox]="true"
  [(ngModel)]="value"
>
  Label
</tui-checkbox-block>

to this:

<label
  appearance=""
  tuiBlock="m"
>
  Label
  <input
    tuiBlock
    type="checkbox"
    [(ngModel)]="value"
  />
</label>

Label

This:

<tui-checkbox-labeled [(ngModel)]="value">
  Label
</tui-checkbox-labeled>

to this:

<label tuiLabel>
  <input type="checkbox" size="s" tuiCheckbox />
  Label
</label>

This:

<tui-radio-labeled size="l" [formControl]="control" [item]="value" [identityMatcher]="matcher">
  Label
</tui-radio-labeled>

to this:

<label tuiLabel>
  <input type="radio" tuiRadio [value]="value" [identityMatcher]="matcher">
  Label
</label>
splincode commented 3 months ago
waterplea commented 3 months ago
vladimirpotekhin commented 3 months ago

before

<tui-progress-segmented
      [colors]="color"
      [max]="max"
      [size]="size"
      [value]="value"
 >

after

<progress
    tuiProgressBar
    [segments]="max"
    [tuiProgressColorSegments]="color"
    [max]="max"
    [size]="size"
    [value]="value"
></progress>
vladimirpotekhin commented 3 months ago

before

<tui-rating
    iconFilled="tuiIconHeartLarge"
    iconNormal="tuiIconHeart"
    class="red"
    [(ngModel)]="thirdRate"
></tui-rating>

after

// TODO: for custom icons see example ...
<tui-rating
    [icon]="icon"
    class="red"
    [(ngModel)]="thirdRate"
></tui-rating>

// TODO: for rating size and gap customization use css, see example ...
--tui-rating-size
--tui-rating-gap
waterplea commented 3 months ago

Buttons migration:

splincode commented 3 months ago

Color migration:

splincode commented 3 months ago

Proprietary migration:

waterplea commented 3 months ago
waterplea commented 2 months ago

Link

waterplea commented 2 months ago
waterplea commented 2 months ago
vladimirpotekhin commented 2 months ago

disabled, separator, leftContent - ?

before

 <tui-tag
    [size]="size"
    [status]="status"
    [value]="item"
/>

after

<tui-chip
    [size]="size"
    [appearance]="status"
>{{ value }}</tui-chip>

editable, removable, hoverable, maxLength ---> <input tuiChip />, <button tuiChip /> see interactive example

splincode commented 2 months ago

before

<tui-table-pagination
    [total]="237"
    [(page)]="page"
    [(size)]="size"
></tui-table-pagination>

after

 <tui-table-pagination
    [page]="page"
    [size]="size"
    [total]="237"
    (paginationChange)="page = $event.page; size = $event.size"
></tui-table-pagination>
waterplea commented 1 month ago
splincode commented 1 month ago

Before

imports: [TuiMobileCalendarDialogModule]

After

providers: [
   tuiProvideMobileCalendar()
],
waterplea commented 1 month ago
splincode commented 1 month ago

Proprietary

waterplea commented 4 weeks ago

For appearance="whiteblock" [class._checked]="condition" has to be changed to [attr.data-mode]="condition ? 'checked' : null"

splincode commented 3 weeks ago
waterplea commented 2 weeks ago
splincode commented 2 weeks ago
waterplea commented 2 days ago
waterplea commented 21 hours ago