Commits

Yury Bondarenko authored 08a5443cc20
Add generated docs to source
No tags

docs/lint/html/rules/themed-component-usages.md

Added
1 +[DSpace ESLint plugins](../../../../lint/README.md) > [HTML rules](../index.md) > `dspace-angular-html/themed-component-usages`
2 +_______
3 +
4 +Themeable components should be used via the selector of their `ThemedComponent` wrapper class
5 +
6 +This ensures that custom themes can correctly override _all_ instances of this component.
7 +The only exception to this rule are unit tests, where we may want to use the base component in order to keep the test setup simple.
8 +
9 +
10 +_______
11 +
12 +[Source code](../../../../lint/src/rules/html/themed-component-usages.ts)
13 +
14 +### Examples
15 +
16 +
17 +#### Valid code
18 +
19 +##### use no-prefix selectors in HTML templates
20 +
21 +```html
22 +<ds-test-themeable/>
23 +<ds-test-themeable></ds-test-themeable>
24 +<ds-test-themeable [test]="something"></ds-test-themeable>
25 +```
26 +
27 +##### use no-prefix selectors in TypeScript templates
28 +
29 +```html
30 +@Component({
31 + template: '<ds-test-themeable></ds-test-themeable>'
32 +})
33 +class Test {
34 +}
35 +```
36 +
37 +##### use no-prefix selectors in TypeScript test templates
38 +
39 +Filename: `lint/test/fixture/src/test.spec.ts`
40 +
41 +```html
42 +@Component({
43 + template: '<ds-test-themeable></ds-test-themeable>'
44 +})
45 +class Test {
46 +}
47 +```
48 +
49 +##### base selectors are also allowed in TypeScript test templates
50 +
51 +Filename: `lint/test/fixture/src/test.spec.ts`
52 +
53 +```html
54 +@Component({
55 + template: '<ds-base-test-themeable></ds-base-test-themeable>'
56 +})
57 +class Test {
58 +}
59 +```
60 +
61 +
62 +
63 +
64 +#### Invalid code &amp; automatic fixes
65 +
66 +##### themed override selectors are not allowed in HTML templates
67 +
68 +```html
69 +<ds-themed-test-themeable/>
70 +<ds-themed-test-themeable></ds-themed-test-themeable>
71 +<ds-themed-test-themeable [test]="something"></ds-themed-test-themeable>
72 +```
73 +Will produce the following error(s):
74 +```
75 +Themeable components should be used via their ThemedComponent wrapper's selector
76 +Themeable components should be used via their ThemedComponent wrapper's selector
77 +Themeable components should be used via their ThemedComponent wrapper's selector
78 +```
79 +
80 +Result of `yarn lint --fix`:
81 +```html
82 +<ds-test-themeable/>
83 +<ds-test-themeable></ds-test-themeable>
84 +<ds-test-themeable [test]="something"></ds-test-themeable>
85 +```
86 +
87 +
88 +##### base selectors are not allowed in HTML templates
89 +
90 +```html
91 +<ds-base-test-themeable/>
92 +<ds-base-test-themeable></ds-base-test-themeable>
93 +<ds-base-test-themeable [test]="something"></ds-base-test-themeable>
94 +```
95 +Will produce the following error(s):
96 +```
97 +Themeable components should be used via their ThemedComponent wrapper's selector
98 +Themeable components should be used via their ThemedComponent wrapper's selector
99 +Themeable components should be used via their ThemedComponent wrapper's selector
100 +```
101 +
102 +Result of `yarn lint --fix`:
103 +```html
104 +<ds-test-themeable/>
105 +<ds-test-themeable></ds-test-themeable>
106 +<ds-test-themeable [test]="something"></ds-test-themeable>
107 +```
108 +
109 +
110 +

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut