From 0a384639a612e63ba6ff3bf449b3ab7bebecbf18 Mon Sep 17 00:00:00 2001 From: Tim Sullivan Date: Thu, 12 Dec 2024 12:02:36 -0700 Subject: [PATCH] [SharedUX] EUI visual refresh for SharedUX (#202780) ## Summary Part of https://github.com/elastic/kibana/issues/200620 1. Remove usage of deprecated color variables 2. Remove usage of `@kbn/ui-theme` 3. A few other changes as requested by @andreadelrio --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../components/form/bottom_bar/bottom_bar.tsx | 2 +- .../shared-ux/button_toolbar/kibana.jsonc | 4 +- .../toolbar_button/toolbar_button.styles.ts | 4 +- .../src/ui/components/panel/label_badge.tsx | 3 +- .../code_editor/impl/placeholder_widget.ts | 2 +- .../file/file_picker/impl/kibana.jsonc | 4 +- .../file/file_upload/impl/kibana.jsonc | 4 +- .../impl/src/components/cancel_button.tsx | 3 +- .../impl/src/components/upload_button.tsx | 1 + .../impl/src/file_upload.component.tsx | 30 +++++++----- .../file/file_upload/impl/tsconfig.json | 1 - .../public/components/guide_button.tsx | 4 +- .../components/guide_panel_step.styles.ts | 12 +++-- .../public/components/quit_guide_modal.tsx | 2 +- .../components/tutorial/instruction_set.js | 2 +- .../public/components/_overview.scss | 2 +- .../public/side_navigation/index.tsx | 48 +++++++++---------- src/plugins/navigation/tsconfig.json | 1 - .../save_modal/saved_object_save_modal.tsx | 6 ++- src/plugins/saved_objects/tsconfig.json | 15 ++++-- .../public/management/components/table.tsx | 13 +++-- .../saved_objects_tagging/tsconfig.json | 1 - .../serverless/public/navigation/index.tsx | 44 +++++++++-------- x-pack/plugins/serverless/tsconfig.json | 1 - 24 files changed, 115 insertions(+), 94 deletions(-) diff --git a/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx b/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx index e9947ac6f9306..dd300aad99c3a 100644 --- a/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx +++ b/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx @@ -87,7 +87,7 @@ export const BottomBar = ({ { borderColor: euiTheme.border.color, }, emptyButton: { - backgroundColor: euiTheme.colors.emptyShade, + backgroundColor: euiTheme.colors.backgroundBasePlain, border: `${euiTheme.border.thin}`, - color: `${euiTheme.colors.text}`, + color: `${euiTheme.colors.textParagraph}`, }, buttonPositions: { left: { diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx index 8ea6fc9718125..ceff96fde7ed6 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx @@ -25,14 +25,13 @@ export const LabelBadge = ({ className?: string; }) => { const { euiTheme } = useEuiTheme(); - return ( = ({ onClick, compressed }) /> ) : ( {i18nTexts.cancel} diff --git a/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx b/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx index ba712fefff537..447f6acfdcdaf 100644 --- a/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx +++ b/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx @@ -30,6 +30,7 @@ export const UploadButton: FunctionComponent = ({ onClick }) => { key="uploadButton" isLoading={uploading} color={done ? 'success' : 'primary'} + fill={true} iconType={done ? 'checkInCircleFilled' : undefined} disabled={Boolean(!files.length || error || done)} onClick={onClick} diff --git a/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx b/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx index 0cff9a248d135..d79bd18dc7516 100644 --- a/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx +++ b/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx @@ -7,27 +7,30 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ +import { css } from '@emotion/react'; import React from 'react'; +import useObservable from 'react-use/lib/useObservable'; + import { - EuiText, - EuiSpacer, - EuiFlexItem, - EuiFlexGroup, EuiFilePicker, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiText, useEuiTheme, useGeneratedHtmlId, + mathWithUnits, } from '@elastic/eui'; import type { EuiFilePickerClass, EuiFilePickerProps, } from '@elastic/eui/src/components/form/file_picker/file_picker'; -import { euiThemeVars } from '@kbn/ui-theme'; + import { useBehaviorSubject } from '@kbn/shared-ux-file-util'; -import { css } from '@emotion/react'; -import useObservable from 'react-use/lib/useObservable'; -import { i18nTexts } from './i18n_texts'; -import { ControlButton, ClearButton } from './components'; + +import { ClearButton, ControlButton } from './components'; import { useUploadState } from './context'; +import { i18nTexts } from './i18n_texts'; export interface Props { meta?: unknown; @@ -41,8 +44,6 @@ export interface Props { className?: string; } -const { euiFormMaxWidth, euiButtonHeightSmall } = euiThemeVars; - const styles = { horizontalContainer: css` display: flex; @@ -79,12 +80,15 @@ export const FileUpload = React.forwardRef( const id = useGeneratedHtmlId({ prefix: 'filesFileUpload' }); const errorId = `${id}_error`; + // FIXME: add a token for this on euiTheme.components. https://github.com/elastic/eui/issues/8217 + const formMaxWidth = mathWithUnits(euiTheme.size.base, (x) => x * 25); + return (
( css={css` display: flex; align-items: center; - min-height: ${euiButtonHeightSmall}; + min-height: ${euiTheme.size.xl}; `} size="s" color="danger" diff --git a/packages/shared-ux/file/file_upload/impl/tsconfig.json b/packages/shared-ux/file/file_upload/impl/tsconfig.json index 81d7704f03f7b..7fbdf2f04dc6f 100644 --- a/packages/shared-ux/file/file_upload/impl/tsconfig.json +++ b/packages/shared-ux/file/file_upload/impl/tsconfig.json @@ -15,7 +15,6 @@ ], "kbn_references": [ "@kbn/i18n", - "@kbn/ui-theme", "@kbn/shared-ux-file-context", "@kbn/shared-ux-file-util", "@kbn/shared-ux-file-types", diff --git a/src/plugins/guided_onboarding/public/components/guide_button.tsx b/src/plugins/guided_onboarding/public/components/guide_button.tsx index 7df5d03049f1f..32d78c1af545a 100644 --- a/src/plugins/guided_onboarding/public/components/guide_button.tsx +++ b/src/plugins/guided_onboarding/public/components/guide_button.tsx @@ -58,7 +58,7 @@ export const GuideButton = ({ {i18n.translate('guidedOnboarding.quitGuideModal.quitButtonLabel', { defaultMessage: 'Quit guide', diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/src/plugins/home/public/application/components/tutorial/instruction_set.js index a4c64894bea95..41104b6269895 100644 --- a/src/plugins/home/public/application/components/tutorial/instruction_set.js +++ b/src/plugins/home/public/application/components/tutorial/instruction_set.js @@ -28,7 +28,7 @@ import { import * as StatusCheckStates from './status_check_states'; import { injectI18n, FormattedMessage } from '@kbn/i18n-react'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { euiThemeVars } from '@kbn/ui-theme'; // FIXME: remove this, and access style variables from EUI context class InstructionSetUi extends React.Component { constructor(props) { diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index 85eebd7da2959..10b4b5a099dab 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -48,7 +48,7 @@ } &.securitySolution { .euiCard__image { - background-color: $euiColorSuccess; + background-color: $euiColorAccentSecondary; } } } diff --git a/src/plugins/navigation/public/side_navigation/index.tsx b/src/plugins/navigation/public/side_navigation/index.tsx index c6659ef1af6f2..5d476b09d1da5 100644 --- a/src/plugins/navigation/public/side_navigation/index.tsx +++ b/src/plugins/navigation/public/side_navigation/index.tsx @@ -8,34 +8,34 @@ */ import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import React, { Suspense, type FC } from 'react'; -import { EuiSkeletonRectangle } from '@elastic/eui'; +import { EuiSkeletonRectangle, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { Props as NavigationProps } from './side_navigation'; const SideNavComponentLazy = React.lazy(() => import('./side_navigation')); -export const SideNavComponent: FC = (props) => ( - - } - > - - -); +export const SideNavComponent: FC = (props) => { + const { euiTheme } = useEuiTheme(); + return ( + + } + > + + + ); +}; diff --git a/src/plugins/navigation/tsconfig.json b/src/plugins/navigation/tsconfig.json index 00b5186670cf1..1ee0462330954 100644 --- a/src/plugins/navigation/tsconfig.json +++ b/src/plugins/navigation/tsconfig.json @@ -27,7 +27,6 @@ "@kbn/config-schema", "@kbn/i18n", "@kbn/std", - "@kbn/ui-theme", ], "exclude": [ "target/**/*", diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx index a3e6d1cc22b2a..f56091a407fae 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx @@ -32,7 +32,6 @@ import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiThemeVars } from '@kbn/ui-theme'; export interface OnSaveProps { newTitle: string; @@ -405,7 +404,10 @@ export class SavedObjectSaveModal extends React.Component /> {this.props.mustCopyOnSaveMessage && ( - + ({ marginLeft: `-${euiTheme.size.base}` })} + grow={false} + > )} diff --git a/src/plugins/saved_objects/tsconfig.json b/src/plugins/saved_objects/tsconfig.json index 83e113a7e4e17..167a6e1c7551e 100644 --- a/src/plugins/saved_objects/tsconfig.json +++ b/src/plugins/saved_objects/tsconfig.json @@ -1,20 +1,25 @@ { "extends": "../../../tsconfig.base.json", "compilerOptions": { - "outDir": "target/types", + "outDir": "target/types" }, - "include": ["common/**/*", "public/**/*", "server/**/*"], + "include": [ + "common/**/*", + "public/**/*", + "server/**/*", + // Emotion theme typing + "../../../typings/emotion.d.ts" + ], "kbn_references": [ "@kbn/core", "@kbn/data-plugin", "@kbn/i18n", "@kbn/data-views-plugin", "@kbn/i18n-react", - "@kbn/ui-theme", "@kbn/react-kibana-mount", - "@kbn/test-jest-helpers", + "@kbn/test-jest-helpers" ], "exclude": [ - "target/**/*", + "target/**/*" ] } diff --git a/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx b/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx index cde4049a3a82b..4da2bc4841053 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx @@ -6,10 +6,16 @@ */ import React, { FC, ReactNode } from 'react'; -import { EuiInMemoryTable, EuiBasicTableColumn, EuiLink, Query, EuiIconTip } from '@elastic/eui'; +import { + EuiInMemoryTable, + EuiBasicTableColumn, + EuiLink, + Query, + EuiIconTip, + useEuiTheme, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { TagsCapabilities } from '../../../common'; import type { TagWithRelations } from '../../../common/types'; import { TagBadge } from '../../components'; @@ -59,6 +65,7 @@ export const TagTable: FC = ({ actionBar, actions, }) => { + const { euiTheme } = useEuiTheme(); const columns: Array> = [ { field: 'name', @@ -72,7 +79,7 @@ export const TagTable: FC = ({ <> {tag.managed && ( -
+
import('./navigation')); -export const SideNavComponent: FC = (props) => ( - - } - > - - -); +export const SideNavComponent: FC = (props) => { + const { euiTheme } = useEuiTheme(); + return ( + + } + > + + + ); +}; export { manageOrgMembersNavCardName, generateManageOrgMembersNavCard } from './nav_cards'; diff --git a/x-pack/plugins/serverless/tsconfig.json b/x-pack/plugins/serverless/tsconfig.json index 35cc5e554ceb3..ce60d39bef0f0 100644 --- a/x-pack/plugins/serverless/tsconfig.json +++ b/x-pack/plugins/serverless/tsconfig.json @@ -28,6 +28,5 @@ "@kbn/management-cards-navigation", "@kbn/react-kibana-mount", "@kbn/react-kibana-context-render", - "@kbn/ui-theme", ] }