Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(experimental): Icon add new component #5872

Merged
merged 3 commits into from
Nov 8, 2023
Merged

feat(experimental): Icon add new component #5872

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26c3a69
feat(experimental): `Icon` add new component
waterplea Nov 7, 2023
3bf6094
chore: fix example
waterplea Nov 8, 2023
cd2f60b
chore: comments
waterplea Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions projects/demo/src/modules/app/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,14 @@ export const ROUTES: Routes = [
title: `Fade`,
},
},
{
path: `experimental/icon`,
loadChildren: async () =>
(await import(`../experimental/icon/icon.module`)).ExampleTuiIconModule,
data: {
title: `Icon`,
},
},
{
path: `experimental/rating`,
loadChildren: async () =>
Expand Down
6 changes: 6 additions & 0 deletions projects/demo/src/modules/app/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -885,6 +885,12 @@ export const pages: TuiDocPages = [
keywords: `overflow, ellipsis, gradient, clamp, line`,
route: `/experimental/fade`,
},
{
section: `Experimental`,
title: `Icon`,
keywords: `icons, image, картинка, свг, svg, графика, иконка`,
route: `/experimental/icon`,
},
{
section: `Experimental`,
title: `Rating `,
Expand Down
4 changes: 4 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<tui-icon
[icon]="'tuiIconHeartLarge' | tuiIcon"
[style.color]="'var(--tui-primary)'"
></tui-icon>
11 changes: 11 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/1/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';

@Component({
selector: 'tui-icon-example-1',
templateUrl: './index.html',
changeDetection,
encapsulation,
})
export class TuiIconExample1 {}
12 changes: 12 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<tui-icon
icon="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
class="red"
></tui-icon>
<tui-icon
icon="https://cdn-icons-png.flaticon.com/64/12710/12710759.png"
class="hover"
></tui-icon>
<tui-icon
class="text"
[icon]="'telegram' | tuiIcon"
></tui-icon>
23 changes: 23 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/2/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@import 'taiga-ui-local';

:host {
display: flex;
gap: 1rem;
}

.red {
color: var(--tui-negative);
}

.hover {
.transition(color);
color: var(--tui-primary);

&:hover {
color: var(--tui-primary-hover);
}
}

.text {
color: var(--tui-text-02);
}
14 changes: 14 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/2/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIconResolverProvider} from '@taiga-ui/experimental';

@Component({
selector: 'tui-icon-example-2',
templateUrl: './index.html',
styleUrls: ['./index.less'],
providers: [tuiIconResolverProvider(icon => `/assets/icons/${icon}.svg`)],
changeDetection,
encapsulation,
})
export class TuiIconExample2 {}
4 changes: 4 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<tui-icon
icon="https://upload.wikimedia.org/wikipedia/commons/2/22/Wikipedia-Logo-black-and-white.png"
class="icon"
></tui-icon>
10 changes: 10 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/3/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.icon {
width: 3rem;
height: 3rem;
color: pink;
background: purple;

&:after {
mask-mode: luminance;
}
}
12 changes: 12 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/3/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';

@Component({
selector: 'tui-icon-example-3',
templateUrl: './index.html',
styleUrls: ['./index.less'],
changeDetection,
encapsulation,
})
export class TuiIconExample3 {}
13 changes: 13 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/import/import-module.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```ts
import {NgModule} from '@angular/core';
import {TuiIconModule} from '@taiga-ui/experimental';
// ...

@NgModule({
imports: [
// ...
TuiIconModule,
],
})
export class MyModule {}
```
3 changes: 3 additions & 0 deletions projects/demo/src/modules/experimental/icon/examples/import/insert-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<tui-icon>"Batman"</tui-icon>
waterplea marked this conversation as resolved.
Show resolved Hide resolved
```
35 changes: 35 additions & 0 deletions projects/demo/src/modules/experimental/icon/icon.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';

@Component({
selector: 'example-icon',
templateUrl: './icon.template.html',
changeDetection,
})
export class ExampleTuiIconComponent {
readonly exampleModule: TuiRawLoaderContent = import(
'./examples/import/import-module.md?raw'
);

readonly exampleHtml: TuiRawLoaderContent = import(
'./examples/import/insert-template.md?raw'
);

readonly example1: TuiDocExample = {
TypeScript: import('./examples/1/index.ts?raw'),
HTML: import('./examples/1/index.html?raw'),
};

readonly example2: TuiDocExample = {
TypeScript: import('./examples/2/index.ts?raw'),
HTML: import('./examples/2/index.html?raw'),
LESS: import('./examples/2/index.less?raw'),
};

readonly example3: TuiDocExample = {
TypeScript: import('./examples/3/index.ts?raw'),
HTML: import('./examples/3/index.html?raw'),
LESS: import('./examples/3/index.less?raw'),
};
}
27 changes: 27 additions & 0 deletions projects/demo/src/modules/experimental/icon/icon.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {tuiGetDocModules} from '@taiga-ui/addon-doc';
import {TuiNotificationModule} from '@taiga-ui/core';
import {TuiIconModule} from '@taiga-ui/experimental';

import {TuiIconExample1} from './examples/1';
import {TuiIconExample2} from './examples/2';
import {TuiIconExample3} from './examples/3';
import {ExampleTuiIconComponent} from './icon.component';

@NgModule({
imports: [
CommonModule,
TuiIconModule,
TuiNotificationModule,
tuiGetDocModules(ExampleTuiIconComponent),
],
declarations: [
ExampleTuiIconComponent,
TuiIconExample1,
TuiIconExample2,
TuiIconExample3,
],
exports: [ExampleTuiIconComponent],
})
export class ExampleTuiIconModule {}
62 changes: 62 additions & 0 deletions projects/demo/src/modules/experimental/icon/icon.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<tui-doc-page
header="Icon"
package="EXPERIMENTAL"
type="components"
>
<ng-template pageTab>
<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>A component to use icons and color them with CSS.</p>

<tui-doc-example
id="basic"
heading="Basic"
[content]="example1"
>
<tui-icon-example-1></tui-icon-example-1>
</tui-doc-example>

<tui-doc-example
id="external"
heading="External icons"
[content]="example2"
>
<tui-icon-example-2></tui-icon-example-2>
</tui-doc-example>

<tui-doc-example
id="duo"
heading="Two colors"
[content]="example3"
>
<tui-notification class="tui-space_bottom-4">This example only works in modern browsers</tui-notification>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add link to Can i use?

Suggested change
<tui-notification class="tui-space_bottom-4">This example only works in modern browsers</tui-notification>
<tui-notification class="tui-space_bottom-4">This example only works in <a tuiLink href="https://caniuse.com/?search=mask-mode">modern browsers</a></tui-notification>

I think this example can cause many questions from our users (chrome is modern browser but it does not support this feature)?

Copy link
Member

@nsbarsukov nsbarsukov Nov 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we hide this example if it does not support this feature ?

Something like the following:

@supports not (mask-mode: luminance) {
    .example {
        display: none;
    }
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea. I believe Chrome 120 actually should support it, even though it is not mentioned on caniuse. It comes out in a month, we'll see :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, tested in Canary, it will work starting next major version.

<tui-icon-example-3></tui-icon-example-3>
</tui-doc-example>
</ng-template>

<ng-template pageTab="Setup">
<ol class="b-demo-steps">
<li>
<p>Import module:</p>

<tui-doc-code
filename="myComponent.module.ts"
[code]="exampleModule"
></tui-doc-code>
</li>

<li>
<p>Add to the template:</p>

<tui-doc-code
filename="myComponent.template.html"
[code]="exampleHtml"
></tui-doc-code>
</li>
</ol>
</ng-template>
</tui-doc-page>
13 changes: 13 additions & 0 deletions projects/experimental/components/icon/icon.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';

@Component({
selector: 'tui-icon',
template: '',
host: {'[style.--t-mask]': '"url(" + icon + ")"'},
styleUrls: ['./icon.style.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TuiIconComponent {
@Input()
icon = '';
}
10 changes: 10 additions & 0 deletions projects/experimental/components/icon/icon.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {NgModule} from '@angular/core';

import {TuiIconComponent} from './icon.component';
import {TuiIconPipe} from './icon.pipe';

@NgModule({
declarations: [TuiIconComponent, TuiIconPipe],
exports: [TuiIconComponent, TuiIconPipe],
})
export class TuiIconModule {}
26 changes: 26 additions & 0 deletions projects/experimental/components/icon/icon.pipe.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import {Inject, Pipe, PipeTransform, Provider} from '@angular/core';
import {tuiCreateTokenFromFactory, TuiStringHandler} from '@taiga-ui/cdk';

export const TUI_ICON_RESOLVER = tuiCreateTokenFromFactory<TuiStringHandler<string>>(
() => icon => `/assets/taiga-ui/icons/${icon}.svg`,
);

export function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider {
return {
provide: TUI_ICON_RESOLVER,
useValue,
};
}

@Pipe({
name: `tuiIcon`,
})
export class TuiIconPipe implements PipeTransform {
constructor(
@Inject(TUI_ICON_RESOLVER) private readonly resolver: TuiStringHandler<string>,
) {}

transform(icon: string): string {
return this.resolver(icon);
}
}
17 changes: 17 additions & 0 deletions projects/experimental/components/icon/icon.style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@import 'taiga-ui-local';

:host {
position: relative;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
vertical-align: middle;
mask: var(--t-mask) no-repeat center/contain;

&:after {
.fullsize();
content: '';
mask: inherit;
background: currentColor;
}
}
3 changes: 3 additions & 0 deletions projects/experimental/components/icon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './icon.component';
export * from './icon.module';
export * from './icon.pipe';
8 changes: 8 additions & 0 deletions projects/experimental/components/icon/ng-package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"lib": {
"entryFile": "index.ts",
"styleIncludePaths": [
"../../../core/styles"
]
}
}
1 change: 1 addition & 0 deletions projects/experimental/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from '@taiga-ui/experimental/components/badged-content';
export * from '@taiga-ui/experimental/components/button';
export * from '@taiga-ui/experimental/components/checkbox';
export * from '@taiga-ui/experimental/components/compass';
export * from '@taiga-ui/experimental/components/icon';
export * from '@taiga-ui/experimental/components/radio';
export * from '@taiga-ui/experimental/components/rating';
export * from '@taiga-ui/experimental/components/thumbnail-card';
Expand Down
Loading