feat(core): add new appearances (#9526)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 18, 2024 · c3cd8f2 · c3cd8f2
1 parent f507d2e
commit c3cd8f2
Show file tree

Hide file tree

Showing 118 changed files with 550 additions and 406 deletions.
diff --git a/projects/addon-charts/components/legend-item/legend-item.template.html b/projects/addon-charts/components/legend-item/legend-item.template.html
@@ -1,5 +1,5 @@
 <button
-    appearance="whiteblock"
+    appearance="outline-grayscale"
     size="s"
     tuiButton
     type="button"

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -11,6 +11,7 @@
     display: block;
     inline-size: var(--t-size);
     block-size: var(--t-size);
+    border-radius: 100%;
 
     &[data-size='xs'] {
         --t-size: @size-xs;

diff --git a/projects/addon-charts/components/ring-chart/ring-chart.style.less b/projects/addon-charts/components/ring-chart/ring-chart.style.less
@@ -12,6 +12,7 @@
     inline-size: var(--t-size);
     block-size: var(--t-size);
     flex-shrink: 0;
+    border-radius: 100%;
 
     &[data-size='xs'] {
         --t-size: @size-xs;

diff --git a/projects/addon-doc/components/code/index.html b/projects/addon-doc/components/code/index.html
@@ -12,7 +12,7 @@
     <div class="t-code-actions">
         <button type="button"
             tuiIconButton
-            appearance="whiteblock"
+            appearance="outline-grayscale"
             size="s"
             class="t-copy-button"
             [iconStart]="icon()"

diff --git a/projects/addon-doc/components/code/tests/code.component.spec.ts b/projects/addon-doc/components/code/tests/code.component.spec.ts
@@ -55,7 +55,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">5</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="outline-grayscale" size="s" class="t-copy-button" data-appearance="outline-grayscale" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem
@@ -71,7 +71,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">10</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="outline-grayscale" size="s" class="t-copy-button" data-appearance="outline-grayscale" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem
@@ -89,7 +89,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">15</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="outline-grayscale" size="s" class="t-copy-button" data-appearance="outline-grayscale" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem

diff --git a/projects/addon-doc/components/documentation/documentation.template.html b/projects/addon-doc/components/documentation/documentation.template.html
@@ -46,7 +46,7 @@
                     </tui-badge>
                     <tui-badge
                         *ngIf="propertyConnector.documentationPropertyDeprecated"
-                        appearance="error"
+                        appearance="negative"
                         size="s"
                     >
                         Deprecated

diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts
@@ -146,7 +146,7 @@ export class TuiDocExample {
     protected copyExampleLink(target: EventTarget | null): void {
         this.clipboard.copy((target as HTMLAnchorElement | null)?.href ?? '');
         this.alerts
-            .open(this.texts[1], {label: this.texts[2], appearance: 'success'})
+            .open(this.texts[1], {label: this.texts[2], appearance: 'positive'})
             .subscribe();
     }
 

diff --git a/projects/addon-doc/components/example/example.style.less b/projects/addon-doc/components/example/example.style.less
@@ -97,6 +97,7 @@
 .t-demo {
     .customize-scroll();
 
+    position: relative;
     padding: 2rem;
     max-inline-size: 100%;
     box-sizing: border-box;

diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html
@@ -8,7 +8,7 @@
     />
 
     <button
-        appearance="whiteblock"
+        appearance="outline-grayscale"
         size="s"
         tuiButtonSelect
         tuiIconButton

diff --git a/projects/addon-doc/components/navigation/navigation.providers.ts b/projects/addon-doc/components/navigation/navigation.providers.ts
@@ -35,7 +35,7 @@ export const NAVIGATION_ITEMS = tuiCreateToken<readonly TuiDocRoutePages[]>();
 
 export const NAVIGATION_PROVIDERS: Provider[] = [
     tuiAutoFocusOptionsProvider({preventScroll: true}),
-    tuiLinkOptionsProvider({appearance: 'icon'}),
+    tuiLinkOptionsProvider({appearance: 'action-grayscale'}),
     {
         provide: NAVIGATION_TITLE,
         deps: [Router, ActivatedRoute, TUI_DOC_TITLE],

diff --git a/projects/addon-mobile/styles/common/button.less b/projects/addon-mobile/styles/common/button.less
@@ -14,17 +14,17 @@
         --t-radius: 0.75rem;
     }
 
-    &[data-appearance='primary']:disabled:not(._loading),
-    &[data-appearance='secondary']:disabled:not(._loading),
-    &[data-appearance='accent']:disabled:not(._loading),
-    &[data-appearance='destructive']:disabled:not(._loading),
-    &[data-appearance='opposite']:disabled:not(._loading),
-    &[data-appearance='flat']:disabled:not(._loading) {
+    &[data-appearance^='primary']:disabled:not(._loading),
+    &[data-appearance^='secondary']:disabled:not(._loading),
+    &[data-appearance^='accent']:disabled:not(._loading),
+    &[data-appearance^='destructive']:disabled:not(._loading),
+    &[data-appearance^='opposite']:disabled:not(._loading),
+    &[data-appearance^='flat']:disabled:not(._loading) {
         background: var(--tui-background-neutral-1);
-        color: var(--tui-background-neutral-1-pressed);
+        color: var(--tui-text-tertiary);
         opacity: 1;
 
-        &[data-appearance='flat'] {
+        &[data-appearance^='flat'] {
             background: transparent;
         }
     }

diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts
@@ -26,7 +26,6 @@ import {TUI_TABLE_OPTIONS} from '../table.options';
     host: {
         '[style.width.px]': 'width',
         '[class._sticky]': 'sticky',
-        '[attr.requiredSort]': 'requiredSort',
     },
 })
 export class TuiTableTh<T extends Partial<Record<keyof T, any>>> {

diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts
@@ -36,11 +36,6 @@ export const ATTR_WITH_VALUES_TO_REPLACE: ReplacementAttributeValue[] = [
         newAttrName: 'tuiHintAppearance',
         valueReplacer: [{from: 'onDark', to: 'dark'}],
     },
-    {
-        attrNames: ['appearance'],
-        newAttrName: 'appearance',
-        valueReplacer: [{from: 'secondary-destructive', to: 'destructive'}],
-    },
     {
         attrNames: ['[pseudoActive]'],
         newAttrName: '[tuiAppearanceState]',

diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts
@@ -66,7 +66,7 @@ export function migrateButtonAppearance({
 
             recorder.insertLeft(
                 startOffset + templateOffset,
-                ` ${appearanceInputName}="whiteblock"`,
+                ` ${appearanceInputName}="outline-grayscale"`,
             );
             recorder.insertLeft(
                 startOffset + templateOffset,
@@ -90,6 +90,6 @@ export function migrateButtonAppearance({
 function addTodo(recorder: UpdateRecorder, templateOffset: number): void {
     recorder.insertRight(
         templateOffset,
-        '<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use \'appearance="whiteblock" tuiAppearanceMode="checked"\' -->\n',
+        '<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use \'appearance="outline-grayscale" tuiAppearanceMode="checked"\' -->\n',
     );
 }
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts
@@ -62,18 +62,18 @@ const TEMPLATE_WITH_CONDITION_BEFORE = `
 const TEMPLATE_AFTER = `
 <button tuiButton></button>
 
-<button tuiButton appearance="whiteblock" tuiAppearanceMode="checked"></button>
+<button tuiButton appearance="outline-grayscale" tuiAppearanceMode="checked"></button>
 
-<button tuiButton appearance="whiteblock" tuiAppearanceMode="checked"></button>
+<button tuiButton appearance="outline-grayscale" tuiAppearanceMode="checked"></button>
 
-<a tuiIconButton appearance="whiteblock" tuiAppearanceMode="checked"></a>
+<a tuiIconButton appearance="outline-grayscale" tuiAppearanceMode="checked"></a>
 
 <a tuiButton [appearance]="
   'flat'
 "></a>
 `;
 
-const TEMPLATE_WITH_CONDITION_AFTER = `<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use 'appearance="whiteblock" tuiAppearanceMode="checked"' -->
+const TEMPLATE_WITH_CONDITION_AFTER = `<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use 'appearance="outline-grayscale" tuiAppearanceMode="checked"' -->
 
 <a tuiButton [appearance]="
   true ? appearance : 'flat'

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button.spec.ts
@@ -82,7 +82,7 @@ const TEMPLATE_BEFORE = `
 const TEMPLATE_AFTER = `
 <!-- TODO: (Taiga UI migration) [shape] input has been removed. Please use border-radius css property for rounding borders https://taiga-ui.dev/components/button -->
 <button
-    appearance="destructive"
+    appearance="secondary-destructive"
     tuiButton
     type="button"
     [iconStart]="icon"

diff --git a/projects/cdk/utils/miscellaneous/provide-options.ts b/projects/cdk/utils/miscellaneous/provide-options.ts
@@ -1,5 +1,5 @@
 import type {FactoryProvider, InjectionToken} from '@angular/core';
-import {Optional, SkipSelf} from '@angular/core';
+import {inject} from '@angular/core';
 
 export function tuiProvideOptions<T>(
     provide: InjectionToken<T>,
@@ -8,9 +8,8 @@ export function tuiProvideOptions<T>(
 ): FactoryProvider {
     return {
         provide,
-        deps: [[new Optional(), new SkipSelf(), provide]],
-        useFactory: (parent: T | null): T => ({
-            ...(parent || fallback),
+        useFactory: (): T => ({
+            ...(inject(provide, {optional: true, skipSelf: true}) || fallback),
             ...options,
         }),
     };

diff --git a/projects/core/components/alert/alert.tokens.ts b/projects/core/components/alert/alert.tokens.ts
@@ -1,4 +1,4 @@
-import type {Type} from '@angular/core';
+import type {FactoryProvider, Type} from '@angular/core';
 import {inject} from '@angular/core';
 import type {TuiPopover} from '@taiga-ui/cdk/services';
 import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
@@ -53,3 +53,17 @@ export const TUI_ALERTS_GROUPED = tuiCreateTokenFromFactory(() =>
         }),
     ),
 );
+
+export function tuiAlertOptionsProvider(
+    options: Partial<TuiAlertOptions>,
+): FactoryProvider {
+    return {
+        provide: TUI_ALERT_OPTIONS,
+        useFactory: (): TuiAlertOptions => ({
+            ...TUI_ALERT_DEFAULT_OPTIONS,
+            ...(inject(TUI_ALERT_OPTIONS, {optional: true, skipSelf: true}) ||
+                inject(TUI_NOTIFICATION_OPTIONS)),
+            ...options,
+        }),
+    };
+}
diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
@@ -97,6 +97,7 @@
 
 .t-heading {
     margin: 0 0 0.5rem;
+    padding-inline-end: 2rem;
     overflow-wrap: break-word;
     font: var(--tui-font-heading-4);
 

diff --git a/projects/core/components/link/link.options.ts b/projects/core/components/link/link.options.ts
@@ -7,7 +7,7 @@ export interface TuiLinkOptions extends TuiAppearanceOptions {
 }
 
 export const TUI_LINK_DEFAULT_OPTIONS: TuiLinkOptions = {
-    appearance: 'link',
+    appearance: 'action',
     pseudo: false,
 };
 

diff --git a/projects/core/components/notification/notification.directive.ts b/projects/core/components/notification/notification.directive.ts
@@ -41,7 +41,7 @@ class TuiNotificationStyles {}
             pseudo: true,
         }),
         tuiButtonOptionsProvider({
-            appearance: 'whiteblock',
+            appearance: 'outline-grayscale',
             size: 's',
         }),
     ],

diff --git a/projects/core/components/notification/notification.options.ts b/projects/core/components/notification/notification.options.ts
@@ -11,10 +11,14 @@ export interface TuiNotificationOptions extends TuiAppearanceOptions {
 
 const ICONS: Record<string, string> = {
     info: '@tui.info',
-    success: '@tui.circle-check',
-    error: '@tui.circle-x',
+    positive: '@tui.circle-check',
+    negative: '@tui.circle-x',
     warning: '@tui.circle-alert',
     neutral: '@tui.info',
+    /* TODO @deprecated remove in v5 */
+    success: '@tui.circle-check',
+    /* TODO @deprecated remove in v5 */
+    error: '@tui.circle-x',
 };
 
 /** Default values for the notification options. */

diff --git a/projects/core/directives/appearance/appearance.options.ts b/projects/core/directives/appearance/appearance.options.ts
@@ -7,23 +7,30 @@ import {tuiCreateToken, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
  */
 type Appearance = TuiLooseUnion<
     | 'accent'
-    | 'destructive'
-    | 'error'
+    | 'action-destructive'
+    | 'action-grayscale'
+    | 'action'
+    | 'flat-destructive'
+    | 'flat-grayscale'
     | 'flat'
     | 'floating'
     | 'glass'
     | 'icon'
     | 'info'
-    | 'link'
+    | 'negative'
     | 'neutral'
-    | 'opposite'
+    | 'outline-destructive'
+    | 'outline-grayscale'
     | 'outline'
+    | 'positive'
+    | 'primary-destructive'
+    | 'primary-grayscale'
     | 'primary'
+    | 'secondary-destructive'
+    | 'secondary-grayscale'
     | 'secondary'
-    | 'success'
     | 'textfield'
     | 'warning'
-    | 'whiteblock'
 >;
 
 export interface TuiAppearanceOptions {

diff --git a/projects/core/styles/components/link.less b/projects/core/styles/components/link.less
@@ -14,6 +14,7 @@
  * Icons, Appearance, Button
  */
 [tuiLink] {
+    // TODO: Remove in v5
     --tui-text-tertiary: var(--tui-text-secondary);
 
     padding: 0;
@@ -27,6 +28,7 @@
     text-decoration-thickness: 0.7px;
     text-decoration-color: color-mix(in lch, currentColor, transparent);
 
+    // TODO: Remove in v5
     &:hover {
         --tui-text-secondary: var(--tui-text-primary);
     }

diff --git a/projects/core/styles/components/notification.less b/projects/core/styles/components/notification.less
@@ -11,7 +11,7 @@
  * data-size — size (default: 'l') ('s' | 'm' | 'l')
  *
  * @example
- * <tui-notification tuiAppearance data-appearance="error">
+ * <tui-notification tuiAppearance data-appearance="negative">
  *   <span tuiTitle>
  *     Error
  *     <span tuiSubtitle>Something went wrong</span>