Skip to content

Commit 66ef4bd

Browse files
weronikaolejniczakweronikaolejniczak
committed
chore: wip
1 parent d60d245 commit 66ef4bd

File tree

3 files changed

+673
-25
lines changed

3 files changed

+673
-25
lines changed

‎packages/eslint-plugin/src/index.ts‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,54 +7,56 @@
77
*/
88

99

10+
import { AccessibleInteractiveElements } from './rules/a11y/accessible_interactive_element';
11+
import { CallOutAnnounceOnMount } from './rules/a11y/callout_announce_on_mount';
12+
import { ConsistentIsInvalidProps } from './rules/a11y/consistent_is_invalid_props';
1013
import { HrefOnClick } from './rules/href_or_on_click';
11-
import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
1214
import { NoCssColor } from './rules/no_css_color';
13-
15+
import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
16+
import { NoStaticZIndex } from './rules/no_static_z_index';
17+
import { NoUnnamedInteractiveElement } from './rules/a11y/no_unnamed_interactive_element';
18+
import { NoUnnamedRadioGroup } from './rules/a11y/no_unnamed_radio_group';
19+
import { PreferEuiIconTip } from './rules/a11y/prefer_eui_icon_tip';
1420
import { RequireAriaLabelForModals } from './rules/a11y/require_aria_label_for_modals';
15-
import { ConsistentIsInvalidProps } from './rules/a11y/consistent_is_invalid_props';
21+
import { RequireTableCaption } from './rules/a11y/require_table_caption';
1622
import { ScreenReaderOutputDisabledTooltip } from './rules/a11y/sr_output_disabled_tooltip';
17-
import { PreferEuiIconTip } from './rules/a11y/prefer_eui_icon_tip';
18-
import { NoUnnamedRadioGroup } from './rules/a11y/no_unnamed_radio_group';
19-
import { NoUnnamedInteractiveElement } from './rules/a11y/no_unnamed_interactive_element';
2023
import { TooltipFocusableAnchor } from './rules/a11y/tooltip_focusable_anchor';
21-
import { CallOutAnnounceOnMount } from './rules/a11y/callout_announce_on_mount';
22-
import { AccessibleInteractiveElements } from './rules/a11y/accessible_interactive_element';
23-
import { RequireTableCaption } from './rules/a11y/require_table_caption';
2424

2525
const config = {
2626
rules: {
27+
'accessible-interactive-element': AccessibleInteractiveElements,
28+
'callout-announce-on-mount': CallOutAnnounceOnMount,
29+
'consistent-is-invalid-props': ConsistentIsInvalidProps,
2730
'href-or-on-click': HrefOnClick,
28-
'no-restricted-eui-imports': NoRestrictedEuiImports,
2931
'no-css-color': NoCssColor,
32+
'no-restricted-eui-imports': NoRestrictedEuiImports,
33+
'no-static-z-index': NoStaticZIndex,
34+
'no-unnamed-interactive-element': NoUnnamedInteractiveElement,
35+
'no-unnamed-radio-group' : NoUnnamedRadioGroup,
36+
'prefer-eui-icon-tip': PreferEuiIconTip,
3037
'require-aria-label-for-modals': RequireAriaLabelForModals,
31-
'consistent-is-invalid-props': ConsistentIsInvalidProps,
38+
'require-table-caption': RequireTableCaption,
3239
'sr-output-disabled-tooltip': ScreenReaderOutputDisabledTooltip,
33-
'prefer-eui-icon-tip': PreferEuiIconTip,
34-
'no-unnamed-radio-group' : NoUnnamedRadioGroup,
35-
'callout-announce-on-mount': CallOutAnnounceOnMount,
36-
'no-unnamed-interactive-element': NoUnnamedInteractiveElement,
3740
'tooltip-focusable-anchor': TooltipFocusableAnchor,
38-
'accessible-interactive-element': AccessibleInteractiveElements,
39-
'require-table-caption': RequireTableCaption,
4041
},
4142
configs: {
4243
recommended: {
4344
plugins: ['@elastic/eslint-plugin-eui'],
4445
rules: {
46+
'@elastic/eui/accessible-interactive-element': 'warn',
47+
'@elastic/eui/callout-announce-on-mount': 'warn',
48+
'@elastic/eui/consistent-is-invalid-props': 'warn',
4549
'@elastic/eui/href-or-on-click': 'warn',
46-
'@elastic/eui/no-restricted-eui-imports': 'warn',
4750
'@elastic/eui/no-css-color': 'warn',
51+
'@elastic/eui/no-restricted-eui-imports': 'warn',
52+
'@elastic/eui/no-static-z-index': 'warn',
53+
'@elastic/eui/no-unnamed-interactive-element': 'warn',
54+
'@elastic/eui/no-unnamed-radio-group': 'warn',
55+
'@elastic/eui/prefer-eui-icon-tip': 'warn',
4856
'@elastic/eui/require-aria-label-for-modals': 'warn',
49-
'@elastic/eui/consistent-is-invalid-props': 'warn',
57+
'@elastic/eui/require-table-caption': 'warn',
5058
'@elastic/eui/sr-output-disabled-tooltip': 'warn',
51-
'@elastic/eui/prefer-eui-icon-tip': 'warn',
52-
'@elastic/eui/no-unnamed-radio-group': 'warn',
53-
'@elastic/eui/callout-announce-on-mount': 'warn',
54-
'@elastic/eui/no-unnamed-interactive-element': 'warn',
5559
'@elastic/eui/tooltip-focusable-anchor': 'warn',
56-
'@elastic/eui/accessible-interactive-element': 'warn',
57-
'@elastic/eui/require-table-caption': 'warn',
5860
},
5961
},
6062
},

‎packages/eslint-plugin/src/rules/no_static_z_index.test.ts‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import dedent from 'dedent';
10+
import { RuleTester } from '@typescript-eslint/rule-tester';
11+
12+
import { NoStaticZIndex } from './no_static_z_index';
13+
14+
const languageOptions = {
15+
parserOptions: {
16+
ecmaFeatures: {
17+
jsx: true,
18+
},
19+
},
20+
};
21+
22+
const ruleTester = new RuleTester();
23+
24+
ruleTester.run('no-static-z-index', NoStaticZIndex, {
25+
valid: [
26+
{
27+
// Valid: Using euiTheme variable in inline style
28+
filename: 'test.tsx',
29+
code: dedent`
30+
import React from 'react';
31+
import { EuiCode } from '@elastic/eui';
32+
33+
function TestComponent() {
34+
const euiTheme = { levels: { mask: 1000 } };
35+
return (
36+
<EuiCode style={{ zIndex: euiTheme.levels.mask }}>test</EuiCode>
37+
)
38+
}`,
39+
languageOptions,
40+
},
41+
{
42+
// Valid: CSS keyword 'auto'
43+
filename: 'test.tsx',
44+
code: dedent`
45+
import React from 'react';
46+
47+
function TestComponent() {
48+
return (
49+
<div style={{ zIndex: 'auto' }}>test</div>
50+
)
51+
}`,
52+
languageOptions,
53+
},
54+
{
55+
// Valid: Emotion css with euiTheme variable
56+
filename: 'test.tsx',
57+
code: dedent`
58+
import React from 'react';
59+
import { css } from '@emotion/react';
60+
61+
function TestComponent() {
62+
const theme = { zIndex: { modal: 2000 } };
63+
return (
64+
<div css={css\`
65+
z-index: \${theme.zIndex.modal};
66+
\`}>test</div>
67+
)
68+
}`,
69+
languageOptions,
70+
},
71+
{
72+
// Valid: Object style with variable
73+
filename: 'test.tsx',
74+
code: dedent`
75+
import React from 'react';
76+
77+
function TestComponent() {
78+
const zIndexValue = someDynamicValue;
79+
const style = { zIndex: zIndexValue };
80+
return <div style={style}>test</div>
81+
}`,
82+
languageOptions,
83+
},
84+
],
85+
86+
invalid: [
87+
{
88+
// Invalid: Inline style with static number
89+
filename: 'test.tsx',
90+
code: dedent`
91+
import React from 'react';
92+
93+
function TestComponent() {
94+
return (
95+
<div style={{ zIndex: 100 }}>test</div>
96+
)
97+
}`,
98+
languageOptions,
99+
errors: [{ messageId: 'noStaticZIndexSpecific' }],
100+
},
101+
{
102+
// Invalid: Inline style with static string number
103+
filename: 'test.tsx',
104+
code: dedent`
105+
import React from 'react';
106+
107+
function TestComponent() {
108+
return (
109+
<div style={{ zIndex: '999' }}>test</div>
110+
)
111+
}`,
112+
languageOptions,
113+
errors: [{ messageId: 'noStaticZIndexSpecific' }],
114+
},
115+
{
116+
// Invalid: Emotion css prop with static value
117+
filename: 'test.tsx',
118+
code: dedent`
119+
import React from 'react';
120+
import { css } from '@emotion/react';
121+
122+
function TestComponent() {
123+
return (
124+
<div css={css\`
125+
z-index: 50;
126+
\`}>test</div>
127+
)
128+
}`,
129+
languageOptions,
130+
errors: [{ messageId: 'noStaticZIndex' }],
131+
},
132+
{
133+
// Invalid: Variable with static value used in style
134+
filename: 'test.tsx',
135+
code: dedent`
136+
import React from 'react';
137+
138+
function TestComponent() {
139+
const myStyle = { zIndex: 10 };
140+
return <div style={myStyle}>test</div>
141+
}`,
142+
languageOptions,
143+
errors: [{ messageId: 'noStaticZIndexSpecificDeclaredVariable' }],
144+
},
145+
{
146+
// Invalid: Variable with static value used in css prop (object style)
147+
filename: 'test.tsx',
148+
code: dedent`
149+
import React from 'react';
150+
import { css } from '@emotion/react';
151+
152+
const myCss = css({ zIndex: 100 });
153+
154+
function TestComponent() {
155+
return <div css={myCss}>test</div>
156+
}`,
157+
languageOptions,
158+
errors: [{ messageId: 'noStaticZIndexSpecificDeclaredVariable' }],
159+
},
160+
{
161+
// Invalid: css template literal with static z-index
162+
filename: 'test.tsx',
163+
code: dedent`
164+
import { css } from '@emotion/css';
165+
166+
const codeCss = css\` z-index: 10; \`
167+
`,
168+
languageOptions,
169+
errors: [{ messageId: 'noStaticZIndex' }],
170+
},
171+
{
172+
// Invalid: css object with static z-index
173+
filename: 'test.tsx',
174+
code: dedent`
175+
import { css } from '@emotion/react';
176+
177+
function TestComponent() {
178+
return <div css={css({ zIndex: 5 })}>test</div>
179+
}
180+
`,
181+
languageOptions,
182+
errors: [{ messageId: 'noStaticZIndexSpecific' }],
183+
},
184+
{
185+
// Invalid: arrow function returning object with static z-index
186+
filename: 'test.tsx',
187+
code: dedent`
188+
import { css } from '@emotion/react';
189+
190+
function TestComponent() {
191+
return <div css={() => ({ zIndex: 5 })}>test</div>
192+
}
193+
`,
194+
languageOptions,
195+
errors: [{ messageId: 'noStaticZIndexSpecific' }],
196+
},
197+
],
198+
});

0 commit comments

Comments
 (0)