feat(experimental): AppBar update and add desktop mode

taiga-family · Jan 30, 2024 · 4acf798 · 4acf798
1 parent 14da1e0
commit 4acf798
Show file tree

Hide file tree

Showing 35 changed files with 728 additions and 139 deletions.
diff --git a/projects/addon-mobile/styles/android/app-bar.less b/projects/addon-mobile/styles/android/app-bar.less
@@ -0,0 +1,19 @@
+tui-app-bar {
+    text-align: left;
+    font: var(--tui-font-heading-6);
+
+    > .t-content {
+        position: static;
+        padding: 0 0 0 1.375rem;
+        transform: none;
+        max-width: calc(100% - var(--sides, 0px) / 2);
+
+        > * {
+            max-width: calc(100% - var(--sides, 0px));
+        }
+    }
+
+    > *:empty + .t-content {
+        padding: 0 0 0 0.625rem;
+    }
+}
diff --git a/projects/addon-mobile/styles/taiga-ui-mobile.less b/projects/addon-mobile/styles/taiga-ui-mobile.less
@@ -1,6 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 [data-platform='android'] {
+    @import './android/app-bar';
     @import './android/checkbox';
     @import './android/radio';
     @import './android/toggle';

diff --git a/projects/core/components/button/button.style.less b/projects/core/components/button/button.style.less
@@ -136,7 +136,8 @@
         height: 1rem;
     }
 
-    :host[tuiIconButton][data-appearance='icon'][data-size='s'] & {
+    :host[tuiIconButton][data-appearance='icon'][data-size='s'] &,
+    :host[tuiIconButton][data-appearance='link'][data-size='s'] & {
         width: 1.5rem;
         height: 1.5rem;
     }

diff --git a/projects/core/styles/theme/appearance.less b/projects/core/styles/theme/appearance.less
@@ -3,6 +3,7 @@
 @import 'appearance/floating.less';
 @import 'appearance/glass.less';
 @import 'appearance/icon.less';
+@import 'appearance/link.less';
 @import 'appearance/opposite.less';
 @import 'appearance/outline.less';
 @import 'appearance/primary.less';

diff --git a/projects/core/styles/theme/appearance/link.less b/projects/core/styles/theme/appearance/link.less
@@ -0,0 +1,11 @@
+[tuiAppearance][data-appearance='link'] {
+    color: var(--tui-link);
+
+    .appearance-hover({
+        color: var(--tui-link-hover);
+    });
+
+    .appearance-active({
+        color: var(--tui-link-hover);
+    });
+}
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -215,6 +215,15 @@ export const ROUTES: Routes = [
             title: 'Amount ',
         },
     },
+    {
+        path: 'experimental/app-bar',
+        loadChildren: async () =>
+            (await import('../experimental/app-bar/app-bar.module'))
+                .ExampleTuiAppBarModule,
+        data: {
+            title: 'AppBar',
+        },
+    },
     {
         path: 'experimental/appearance',
         loadChildren: async () =>
@@ -1105,14 +1114,6 @@ export const ROUTES: Routes = [
             title: 'Preview',
         },
     },
-    {
-        path: 'navigation/app-bar',
-        loadChildren: async () =>
-            (await import('../components/app-bar/app-bar.module')).ExampleTuiAppBarModule,
-        data: {
-            title: 'AppBar',
-        },
-    },
     {
         path: 'navigation/tab-bar',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -858,6 +858,12 @@ export const pages: TuiDocPages = [
         route: '/icons/overview/Component',
     },
     // Experimental
+    {
+        section: 'Experimental',
+        title: 'AppBar',
+        keywords: 'mobile, ios, android, header, bar, navigation',
+        route: '/experimental/app-bar',
+    },
     {
         section: 'Experimental',
         title: 'Avatar ',
@@ -1138,12 +1144,6 @@ export const pages: TuiDocPages = [
         route: '/icons/marker-icon',
     },
     // Navigation
-    {
-        section: 'Navigation',
-        title: 'AppBar',
-        keywords: 'mobile, ios, android, header, bar, navigation',
-        route: '/navigation/app-bar',
-    },
     {
         section: 'Navigation',
         title: 'Breadcrumbs',

diff --git a/projects/demo/src/modules/components/app-bar/examples/1/index.html b/projects/demo/src/modules/components/app-bar/examples/1/index.html
diff --git a/...s/components/app-bar/app-bar.component.ts → ...experimental/app-bar/app-bar.component.ts b/...s/components/app-bar/app-bar.component.ts → ...experimental/app-bar/app-bar.component.ts
@@ -12,8 +12,17 @@ export class ExampleTuiAppBarComponent {
     readonly exampleHtml = import('./examples/import/insert-template.md?raw');
 
     readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),
         LESS: import('./examples/1/index.less?raw'),
     };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
 }
diff --git a/...ules/components/app-bar/app-bar.module.ts → ...es/experimental/app-bar/app-bar.module.ts b/...ules/components/app-bar/app-bar.module.ts → ...es/experimental/app-bar/app-bar.module.ts
@@ -2,27 +2,43 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiAppBarModule} from '@taiga-ui/addon-mobile';
-import {TuiPortalModule} from '@taiga-ui/cdk';
-import {TuiButtonModule, TuiLabelModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiPlatformModule, TuiPortalModule} from '@taiga-ui/cdk';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiAppBarModule,
+    TuiButtonModule,
+    TuiFadeModule,
+    TuiIconsModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
 import {TuiProgressModule} from '@taiga-ui/kit';
 
 import {ExampleTuiAppBarComponent} from './app-bar.component';
 import {TuiAppBarExample1} from './examples/1';
+import {TuiAppBarExample2} from './examples/2';
+import {TuiAppBarExample3} from './examples/3';
 
 @NgModule({
     imports: [
         CommonModule,
+        TuiIconsModule,
+        TuiPlatformModule,
         TuiButtonModule,
         TuiProgressModule,
-        TuiLabelModule,
         TuiNotificationModule,
         TuiAppBarModule,
         TuiPortalModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAppBarComponent)),
+        TuiTitleModule,
+        TuiFadeModule,
+    ],
+    declarations: [
+        ExampleTuiAppBarComponent,
+        TuiAppBarExample1,
+        TuiAppBarExample2,
+        TuiAppBarExample3,
     ],
-    declarations: [ExampleTuiAppBarComponent, TuiAppBarExample1],
     exports: [ExampleTuiAppBarComponent],
 })
 export class ExampleTuiAppBarModule {}
diff --git a/.../components/app-bar/app-bar.template.html → ...xperimental/app-bar/app-bar.template.html b/.../components/app-bar/app-bar.template.html → ...xperimental/app-bar/app-bar.template.html
@@ -1,18 +1,40 @@
 <tui-doc-page
     header="AppBar"
-    package="ADDON-MOBILE"
+    package="EXPERIMENTAL"
     type="components"
 >
     <ng-template pageTab>
-        <p>Component for mobile app header</p>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>Component for top level app bar with navigation/status</p>
 
         <tui-doc-example
-            id="variants"
-            heading="Variants"
+            id="mobile"
+            heading="Mobile: medium size"
             [content]="example1"
         >
             <tui-app-bar-example-1></tui-app-bar-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="desktop"
+            heading="Desktop: large size"
+            [content]="example2"
+        >
+            <tui-app-bar-example-2></tui-app-bar-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="variants"
+            heading="Variants"
+            [content]="example3"
+        >
+            <tui-app-bar-example-3></tui-app-bar-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab="Setup">