chore: comments

taiga-family · Jan 22, 2024 · d2396f4 · d2396f4
1 parent a185dd1
commit d2396f4
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 49 deletions.
diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html
@@ -1,23 +1,23 @@
 <h4>Desktop</h4>
 <p tuiPlatform="web">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
 
 <h4>Android</h4>
 <p tuiPlatform="android">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
 
 <h4>IOS</h4>
 <p tuiPlatform="ios">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html
@@ -1,4 +1,4 @@
-<tui-badge-notification>10</tui-badge-notification>
-<tui-badge-notification size="m">11</tui-badge-notification>
+<tui-badge-notification size="l">10</tui-badge-notification>
+<tui-badge-notification>11</tui-badge-notification>
 <tui-badge-notification size="s">12</tui-badge-notification>
 <tui-badge-notification size="xs"></tui-badge-notification>
diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html
@@ -48,7 +48,12 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-badged-content [style.--tui-radius]="radius">
-                <tui-badge-notification tuiSlot="top">1</tui-badge-notification>
+                <tui-badge-notification
+                    size="l"
+                    tuiSlot="top"
+                >
+                    1
+                </tui-badge-notification>
                 <tui-avatar
                     size="l"
                     [round]="radius === '50%'"

diff --git a/projects/demo/src/modules/experimental/badged-content/examples/1/index.html b/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
@@ -18,12 +18,7 @@
         src="tuiIconUserLarge"
         [round]="false"
     ></tui-avatar>
-    <tui-badge-notification
-        size="m"
-        tuiSlot="bottom"
-    >
-        120
-    </tui-badge-notification>
+    <tui-badge-notification tuiSlot="bottom">120</tui-badge-notification>
 </tui-badged-content>
 
 <tui-badged-content>

diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html
@@ -3,7 +3,7 @@
     tuiCell
 >
     <div tuiTitle>Notifications</div>
-    <tui-badge-notification>3</tui-badge-notification>
+    <tui-badge-notification size="l">3</tui-badge-notification>
     <tui-tooltip
         content="A cell can be a link"
         (click.prevent)="(0)"

diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html
@@ -1,7 +1,7 @@
 <div tuiCell>
     <tui-avatar
         src="tuiIconEyeLarge"
-        tuiCellSide
+        tuiAccessory
     ></tui-avatar>
     <div tuiTitle>
         Long title in a cell will wrap to multiple lines and so will the subtitle
@@ -10,11 +10,11 @@
             [style.display]="'block'"
         >
             Use
-            <strong>tuiCellSide</strong>
+            <strong>tuiAccessory</strong>
             to keep your side content properly aligned if you have many lines of text
         </div>
     </div>
-    <div tuiCellSide>
+    <div tuiAccessory>
         <tui-icon
             icon="tuiIconCheckLarge"
             [style.color]="'var(--tui-positive)'"
@@ -64,10 +64,10 @@
 <div tuiCell>
     <tui-avatar
         src="/assets/images/avatar.jpg"
-        tuiCellSide
+        tuiAccessory
     ></tui-avatar>
     <div
-        tuiCellSide
+        tuiAccessory
         tuiTitle
     >
         Alexander
@@ -83,15 +83,15 @@
 <div tuiCell>
     <tui-avatar
         src="tuiIconHomeLarge"
-        tuiCellSide
+        tuiAccessory
     ></tui-avatar>
     <div tuiTitle>
         <strong>Main account</strong>
         <div tuiSubtitle>USD</div>
         <tui-badge appearance="neutral">By default unless arrested</tui-badge>
     </div>
     <div
-        tuiCellSide
+        tuiAccessory
         tuiTitle
         [style.white-space]="'nowrap'"
         [style.width]="0"

diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.html b/projects/demo/src/modules/experimental/header/examples/1/index.html
@@ -5,7 +5,7 @@ <h1 tuiTitle>
     </h1>
 
     <div tuiAccessories>
-        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-badge-notification>1</tui-badge-notification>
         <button
             size="l"
             tuiButton
@@ -22,7 +22,7 @@ <h2 tuiTitle>
     </h2>
 
     <div tuiAccessories>
-        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-badge-notification>1</tui-badge-notification>
         <button
             size="m"
             tuiButton
@@ -39,7 +39,7 @@ <h3 tuiTitle>
     </h3>
 
     <div tuiAccessories>
-        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-badge-notification>1</tui-badge-notification>
         <button
             size="m"
             tuiButton
@@ -56,7 +56,7 @@ <h4 tuiTitle>
     </h4>
 
     <div tuiAccessories>
-        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-badge-notification>1</tui-badge-notification>
         <button tuiButton>Button</button>
     </div>
 </div>
@@ -68,7 +68,7 @@ <h5 tuiTitle>
     </h5>
 
     <div tuiAccessories>
-        <tui-badge-notification size="m">1</tui-badge-notification>
+        <tui-badge-notification>1</tui-badge-notification>
         <button tuiButton>Button</button>
     </div>
 </div>

diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.html b/projects/demo/src/modules/experimental/header/examples/2/index.html
@@ -7,7 +7,7 @@ <h5 tuiTitle>
         </h5>
 
         <div tuiAccessories>
-            <tui-badge-notification size="m">1</tui-badge-notification>
+            <tui-badge-notification>1</tui-badge-notification>
             <tui-tooltip content="Angular kit"></tui-tooltip>
             <tui-avatar
                 appearance="accent"
@@ -32,7 +32,7 @@ <h5 tuiTitle>
         </div>
 
         <div tuiAccessories>
-            <tui-badge-notification size="m">1</tui-badge-notification>
+            <tui-badge-notification>1</tui-badge-notification>
             <tui-tooltip content="Mask it"></tui-tooltip>
             <a
                 href="https://maskito.dev/"

diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.less b/projects/demo/src/modules/experimental/header/examples/3/index.less
@@ -8,12 +8,12 @@
     & > tui-icon {
         .transition(transform);
     }
-}
 
-.interactive-title:hover {
-    color: var(--tui-link);
+    &:hover {
+        color: var(--tui-link);
 
-    & > tui-icon {
-        transform: translate(0.25rem);
+        & > tui-icon {
+            transform: translate(0.25rem);
+        }
     }
 }
diff --git a/projects/experimental/components/badge-notification/badge-notification.component.ts b/projects/experimental/components/badge-notification/badge-notification.component.ts
@@ -6,6 +6,10 @@ import {
     TuiSizeL,
     TuiSizeXS,
 } from '@taiga-ui/core';
+import {
+    TUI_BADGE_NOTIFICATION_OPTIONS,
+    TuiBadgeNotificationOptions,
+} from '@taiga-ui/experimental/components';
 
 @Component({
     selector: 'tui-badge-notification',
@@ -20,7 +24,11 @@ import {
 })
 export class TuiBadgeNotificationComponent {
     @Input()
-    size: TuiSizeL | TuiSizeXS = 'l';
+    size: TuiSizeL | TuiSizeXS = this.options.size;
 
-    constructor(@Inject(TUI_ANIMATION_OPTIONS) readonly animation: TuiAnimationOptions) {}
+    constructor(
+        @Inject(TUI_ANIMATION_OPTIONS) readonly animation: TuiAnimationOptions,
+        @Inject(TUI_BADGE_NOTIFICATION_OPTIONS)
+        private readonly options: TuiBadgeNotificationOptions,
+    ) {}
 }
diff --git a/projects/experimental/components/badge-notification/badge-notification.options.ts b/projects/experimental/components/badge-notification/badge-notification.options.ts
@@ -0,0 +1,25 @@
+import {Provider} from '@angular/core';
+import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
+
+export interface TuiBadgeNotificationOptions {
+    readonly size: TuiSizeL | TuiSizeXS;
+}
+
+export const TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS: TuiBadgeNotificationOptions = {
+    size: 'm',
+};
+
+export const TUI_BADGE_NOTIFICATION_OPTIONS = tuiCreateToken(
+    TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS,
+);
+
+export function tuiBadgeNotificationOptionsProvider(
+    options: Partial<TuiBadgeNotificationOptions>,
+): Provider {
+    return tuiProvideOptions(
+        TUI_BADGE_NOTIFICATION_OPTIONS,
+        options,
+        TUI_BADGE_NOTIFICATION_DEFAULT_OPTIONS,
+    );
+}
diff --git a/projects/experimental/components/badge-notification/index.ts b/projects/experimental/components/badge-notification/index.ts
@@ -1,2 +1,3 @@
 export * from './badge-notification.component';
 export * from './badge-notification.module';
+export * from './badge-notification.options';
diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less
@@ -15,7 +15,7 @@
     padding: var(--t-padding);
     min-height: var(--t-height);
 
-    [tuiCellSide] {
+    [tuiAccessory] {
         position: relative;
         display: flex;
         max-height: var(--t-height);
@@ -84,14 +84,14 @@
         }
 
         & > *:not(:first-child),
-        & > [tuiCellSide] > *:not(:first-child) {
+        & > [tuiAccessory] > *:not(:first-child) {
             margin-inline-start: 0.5rem;
         }
 
         & > tui-avatar,
         & > tui-avatar-stack tui-avatar,
-        & > [tuiCellSide] tui-avatar,
-        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+        & > [tuiAccessory] tui-avatar,
+        & > [tuiAccessory] tui-avatar-stack tui-avatar {
             --t-size: 1.5rem;
         }
     }
@@ -110,14 +110,14 @@
         }
 
         & > *:not(:first-child),
-        & > [tuiCellSide] > *:not(:first-child) {
+        & > [tuiAccessory] > *:not(:first-child) {
             margin-inline-start: 0.75rem;
         }
 
         & > tui-avatar,
         & > tui-avatar-stack tui-avatar,
-        & > [tuiCellSide] tui-avatar,
-        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+        & > [tuiAccessory] tui-avatar,
+        & > [tuiAccessory] tui-avatar-stack tui-avatar {
             --t-size: 2rem;
         }
     }
@@ -127,14 +127,14 @@
         --t-padding: 0.5rem 1rem;
 
         & > *:not(:first-child),
-        & > [tuiCellSide] > *:not(:first-child) {
+        & > [tuiAccessory] > *:not(:first-child) {
             margin-inline-start: 1rem;
         }
 
         & > tui-avatar,
         & > tui-avatar-stack tui-avatar,
-        & > [tuiCellSide] tui-avatar,
-        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+        & > [tuiAccessory] tui-avatar,
+        & > [tuiAccessory] tui-avatar-stack tui-avatar {
             --t-size: 2.5rem;
         }
     }

diff --git a/projects/experimental/directives/header/header.styles.less b/projects/experimental/directives/header/header.styles.less
@@ -26,17 +26,14 @@
         }
     }
 
-    [tuiSubtitle],
-    [tuiCaption] {
-        color: var(--tui-text-02);
-    }
-
     [tuiSubtitle] {
         font: var(--tui-font-text-m);
+        color: var(--tui-text-02);
     }
 
     [tuiCaption] {
         font: var(--tui-font-text-s);
+        color: var(--tui-text-02);
         font-weight: 500;
         text-transform: uppercase;
     }