diff --git a/projects/demo/src/modules/experimental/avatar/avatar.component.ts b/projects/demo/src/modules/experimental/avatar/avatar.component.ts index 8ba22342dda6..374ec8513b4e 100644 --- a/projects/demo/src/modules/experimental/avatar/avatar.component.ts +++ b/projects/demo/src/modules/experimental/avatar/avatar.component.ts @@ -2,7 +2,7 @@ import {Component, Inject} from '@angular/core'; import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc'; -import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; +import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; @Component({ selector: 'example-avatar', @@ -50,8 +50,7 @@ export class ExampleTuiAvatarComponent { LESS: import('./examples/6/index.less?raw'), }; - readonly sizes: ReadonlyArray = [ - 'xxs', + readonly sizes: ReadonlyArray = [ 'xs', 's', 'm', diff --git a/projects/demo/src/modules/experimental/avatar/examples/3/index.html b/projects/demo/src/modules/experimental/avatar/examples/3/index.html index 58b3e218997a..103fd86f2817 100644 --- a/projects/demo/src/modules/experimental/avatar/examples/3/index.html +++ b/projects/demo/src/modules/experimental/avatar/examples/3/index.html @@ -4,4 +4,3 @@ M S XS -XXS diff --git a/projects/demo/src/modules/experimental/avatar/examples/4/index.ts b/projects/demo/src/modules/experimental/avatar/examples/4/index.ts index 8fdc73d4baed..ab52173acfb0 100644 --- a/projects/demo/src/modules/experimental/avatar/examples/4/index.ts +++ b/projects/demo/src/modules/experimental/avatar/examples/4/index.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; +import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; @Component({ selector: 'tui-avatar-example-4', @@ -11,13 +11,12 @@ import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; }) export class TuiAvatarExample4 { readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan']; - readonly sizes: ReadonlyArray = [ + readonly sizes: ReadonlyArray = [ 'xxl', 'xl', 'l', 'm', 's', 'xs', - 'xxs', ]; } diff --git a/projects/demo/src/modules/experimental/button-vertical/examples/1/index.html b/projects/demo/src/modules/experimental/button-vertical/examples/1/index.html index 86ed3c0c0f64..902d9051e1a0 100644 --- a/projects/demo/src/modules/experimental/button-vertical/examples/1/index.html +++ b/projects/demo/src/modules/experimental/button-vertical/examples/1/index.html @@ -4,7 +4,7 @@ tuiButtonVertical > Alex Inkin diff --git a/projects/demo/src/modules/experimental/button/examples/3/index.html b/projects/demo/src/modules/experimental/button/examples/3/index.html index aad338d5985b..ae34a4474812 100644 --- a/projects/demo/src/modules/experimental/button/examples/3/index.html +++ b/projects/demo/src/modules/experimental/button/examples/3/index.html @@ -3,7 +3,7 @@ tuiButton > Alex Inkin diff --git a/projects/experimental/components/avatar/avatar.component.ts b/projects/experimental/components/avatar/avatar.component.ts index b46823c4d8da..2d1f692894d2 100644 --- a/projects/experimental/components/avatar/avatar.component.ts +++ b/projects/experimental/components/avatar/avatar.component.ts @@ -30,7 +30,7 @@ export class TuiAvatarComponent { src: SafeResourceUrl | string | null = null; @Input() - appearance = ''; + appearance = this.options.appearance; constructor( @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions, diff --git a/projects/experimental/components/avatar/avatar.options.ts b/projects/experimental/components/avatar/avatar.options.ts index ec935f4e954b..931d3f2e3244 100644 --- a/projects/experimental/components/avatar/avatar.options.ts +++ b/projects/experimental/components/avatar/avatar.options.ts @@ -1,15 +1,17 @@ import {Provider} from '@angular/core'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; -import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; +import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; export interface TuiAvatarOptions { + readonly appearance: string; readonly round: boolean; - readonly size: TuiSizeXXL | TuiSizeXXS; + readonly size: TuiSizeXS | TuiSizeXXL; } export const TUI_AVATAR_DEFAULT_OPTIONS: TuiAvatarOptions = { + appearance: '', round: true, - size: 'm', + size: 'l', }; export const TUI_AVATAR_OPTIONS = tuiCreateToken(TUI_AVATAR_DEFAULT_OPTIONS); diff --git a/projects/experimental/components/avatar/avatar.style.less b/projects/experimental/components/avatar/avatar.style.less index 04ddadb26ecb..c696bcd780e8 100644 --- a/projects/experimental/components/avatar/avatar.style.less +++ b/projects/experimental/components/avatar/avatar.style.less @@ -26,8 +26,8 @@ mask: var(--t-mask) no-repeat center/60%; } - &[data-size='xxs'] { - --t-size: 1.5rem; + &[data-size='xs'] { + --t-size: var(--tui-height-xs); --t-radius: 0.5rem; font: var(--tui-font-text-xs); font-weight: bold; @@ -38,8 +38,8 @@ } } - &[data-size='xs'] { - --t-size: 2rem; + &[data-size='s'] { + --t-size: var(--tui-height-s); --t-radius: 0.5rem; font: var(--tui-font-text-s); font-weight: bold; @@ -50,8 +50,8 @@ } } - &[data-size='s'] { - --t-size: 2.5rem; + &[data-size='m'] { + --t-size: calc(var(--tui-height-m) - 0.25rem); --t-radius: 0.75rem; font: var(--tui-font-text-l); font-weight: bold; @@ -62,8 +62,8 @@ } } - &[data-size='m'] { - --t-size: 3.5rem; + &[data-size='l'] { + --t-size: var(--tui-height-l); --t-radius: 0.75rem; font: var(--tui-font-heading-5); @@ -73,7 +73,7 @@ } } - &[data-size='l'] { + &[data-size='xl'] { --t-size: 5rem; --t-radius: 0.75rem; font: var(--tui-font-heading-3); @@ -83,7 +83,7 @@ } } - &[data-size='xl'] { + &[data-size='xxl'] { --t-size: 6rem; --t-radius: 1rem; font: var(--tui-font-heading-3); @@ -93,7 +93,7 @@ } } - &[data-size='xxl'] { + &[data-size='xxxl'] { --t-size: 8rem; --t-radius: 1.25rem; font: var(--tui-font-heading-2); diff --git a/projects/experimental/components/chip/chip.directive.ts b/projects/experimental/components/chip/chip.directive.ts index e0ec9eb01106..7d2fdf385743 100644 --- a/projects/experimental/components/chip/chip.directive.ts +++ b/projects/experimental/components/chip/chip.directive.ts @@ -13,7 +13,7 @@ import {TUI_CHIP_OPTIONS, TuiChipOptions} from './chip.options'; providers: [ tuiToggleOptionsProvider({size: 's'}), tuiCheckboxOptionsProvider({size: 's'}), - tuiAvatarOptionsProvider({size: 'xxs'}), + tuiAvatarOptionsProvider({size: 'xs'}), tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon',