[ESLint] Resolve deprecation warnings
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
## Description
This issue is a follow-up to [this PR](https://github.com/elastic/eui/pull/8198).
After implementing [eslint-plugin-deprecation](https://www.npmjs.com/package/eslint-plugin-deprecation) there are linting warnings left around deprecated code.
We want to replace the deprecated usages with the expected alternatives **where already possible** to reduce the warnings.
>[!NOTE]
The are warnings around `EuiSelectFilterItem` being deprecated. For `EuiComboBox` this will be handled by updating it with `EuiSelectable` in [this separate issue](https://github.com/elastic/eui/issues/2841).
Guidance for picking up this task:
- Address the smaller deprecations, that can be cleaned up now, in a straightforward way.
- Anything larger that would take substantial effort is moved to a separate task.
## Additional insight
### ESLint output
```
eui/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx
44:3 warning 'color' is deprecated. - if a custom color is wanted, use the `css` prop to pass custom css deprecation/deprecation
150:7 warning 'color' is deprecated. - if a custom color is wanted, use the `css` prop to pass custom css deprecation/deprecation
eui/packages/eui/src/components/button/button_group/button_group.tsx
154:3 warning 'name' is deprecated. No longer needed. You can safely remove this prop entirely deprecation/deprecation
eui/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
205:8 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
eui/packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx
269:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
290:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
316:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
328:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
348:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
eui/packages/eui/src/components/datagrid/controls/full_screen_selector.stories.tsx
60:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
eui/packages/eui/src/components/datagrid/data_grid.stories.tsx
153:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
208:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
eui/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx
117:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
eui/packages/eui/src/components/filter_group/filter_select_item.test.tsx
17:29 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
20:35 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
eui/packages/eui/src/components/filter_group/filter_select_item.tsx
192:3 warning 'EuiFilterSelectItemClass' is deprecated. - Use EuiSelectable instead deprecation/deprecation
eui/packages/eui/src/components/filter_group/index.ts
19:10 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
19:10 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
eui/packages/eui/src/components/markdown_editor/markdown_actions.ts
271:35 warning 'execCommand' is deprecated. deprecation/deprecation
eui/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx
286:14 warning 'execCommand' is deprecated. deprecation/deprecation
eui/packages/eui/src/components/popover/popover.tsx
638:7 warning 'hasDragDrop' is deprecated. - use `usePortal` prop on children `EuiDraggable` components instead deprecation/deprecation
eui/packages/eui/src/services/color_picker/index.ts
10:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
10:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
eui/packages/eui/src/services/copy/copy_to_clipboard.ts
42:17 warning 'execCommand' is deprecated. deprecation/deprecation
eui/packages/eui/src/services/index.ts
66:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
66:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
✖ 29 problems (0 errors, 29 warnings)
```
### "`'color'` is deprecated" warning
Looks like `color` can be safely removed (no uses in Kibana or cloud). No mention in the https://github.com/elastic/eui/issues/1469. Verify the impact.
### `PlayFunctionContext` warning
Replace with `StoryContext`. Drop-in replacement.
### "Use `EuiSelectable` instead" warning
These warnings can only be removed with refactoring components to use `EuiSelectable`:
- `EuiComboBox` - https://github.com/elastic/eui/issues/2841
- `EuiFilterGroup` - requires a task
Skip for now.
### "`hasDragDrop` is deprecated" warning
Looks like `hasDragDrop` can be safely removed (no uses in Kibana or cloud). It is mentioned in https://github.com/elastic/eui/issues/1469.
### "`execCommand` is deprecated" warning
There is no clear, drop-in replacement to `execCommand` but it's recommended to move away from it if possible because the support can be dropped at any time ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)).
Functionalities needed and their replacements:
- `insertText` (`EuiMarkdown`)- alternative is [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [Range API](https://developer.mozilla.org/en-US/docs/Web/API/Range)
- `copy` (`copy_to_clipboard.ts`)- alternative is [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
Requires separate tasks to refactor the code and verify the functionality is working as expected.
### "`useColorStopsState` is deprecated" warning
Looks like `useColorStopsState` can be safely removed (no uses in Kibana or cloud). No mention in the https://github.com/elastic/eui/issues/1469. Verify the impact before removing.
Contributor guide
Assessment
This issue has not been assessed yet.