Upgrade path: October 2021 deprecations

updates.md

October 2021 deprecations upgrade path

Remove EuiCodeEditor

In Kibana

• Remove i18n tokens
• Update import statement to point to es_shared_ui

- import { EuiCodeEditor } from '@elastic/eui';
+ import { EuiCodeEditor } from '<path>/src/plugins/es_ui_shared/public';

See elastic/kibana#108318 for more info

In other apps

The recommended path is to use an implementation of the Monaco editor

Remove betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTitle props from EuiCard

Move each into the betaBadgeProps prop, which accepts an object

<EuiCard
-  betaBadgeLabel="label"
-  betaBadgeTooltipContent="content"
-  betaBadgeTitle="title"
+  betaBadgeProps={{
+    label: 'label',
+    toolTipContent: 'content',
+    title: 'title',
+ }}
 />

Remove EuiLoadingKibana

Replace with EuiLoadingLogo

- <EuiLoadingKibana />
+ <EuiLoadingLogo logo="logoKibana" />

Remove secondary color prop options

JS

Replace with success.

• Component props: EuiButton.color, EuiButtonGroup.color, EuiExpression.color, EuiLink.color, EuiNotificationEvent.badgeColor, EuiIcon.color, EuiProgress.color, EuiStat.titleColor, EuiText.color, EuiTextColor.color
• Because they inherit from IconColor: EuiHealth.color, EuiAvatar.iconColor, EuiEmptyPrompt.iconColor

- <EuiButton fill color="secondary" />
+ <EuiButton fill color="success" />

Sass

- $euiColorSecondary
+ $euiColorSuccess

- $euiColorSecondaryText
+ $euiColorSuccessText

Remove subdued color prop option from EuiButtonIcon

Replace with text.

- <EuiButtonIcon color="subdued" />
+ <EuiButtonIcon color="text" />

Remove panelPaddingSize from EuiPageContent

Replace with paddingSize.

- <EuiPageContent panelPaddingSize="l" />
+ <EuiPageContent paddingSize="l" />

Remove makeId

Probably not in use anywhere, but replace with htmlIdGenerator.

- import { makeId } from '@elastic/eui';
+ import { htmlIdGenerator } from '@elastic/eui';

- const id = makeId();
+ const id = htmlIdGenerator()();

Remove hideForMobile, header, isMobileHeader, fullWidth, and isMobileFullWidth from EuiTableRowCell

Move each into the mobileOptions prop, which accepts an object

• hideForMobile -> mobileOptions: { show: false }
• header -> mobileOptions: { header: string | false }
• isMobileHeader -> mobileOptions: { only: true, header: false }
• fullWidth -> mobileOptions: { width: '100%' }
• isMobileFullWidth -> mobileOptions: { width: '100%' }

To enlarge the content on mobile without the column header

<EuiTableRowCell
-  header={false}
-  fullWidth
-  isMobileFullWidth
+  mobileOptions={{
+    header: false
+    enlarge: true,
+    width: '100%'
+  }}
 />

To show as an enlarged mobile version only:

<EuiTableRowCell
-  isMobileHeader
-  fullWidth
-  isMobileFullWidth
+  mobileOptions={{
+    header: false,
+    only: true,
+    enlarge: true,
+    width: '100%'
+  }}
 />

To remove from mobile version completely:

<EuiTableRowCell
-  hideForMobile={true}
+  mobileOptions={{
+    show: false,
+  }}
 />