diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx index 00a8b5588a61c..ab212c4cad610 100644 --- a/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx +++ b/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx @@ -17,7 +17,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public'; import { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; import { getManagedContentBadge } from '@kbn/managed-content-badge'; import moment from 'moment'; -import { EuiCallOut, UseEuiTheme, useEuiBreakpoint } from '@elastic/eui'; +import { EuiCallOut, UseEuiTheme, euiBreakpoint } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { SerializedStyles, css } from '@emotion/react'; import { LENS_APP_LOCATOR } from '../../common/locator/locator'; @@ -103,8 +103,8 @@ function getSaveButtonMeta({ } } -const NavItemWithDividerStyles = (euiThemeContext: UseEuiTheme) => css` - ${useEuiBreakpoint(['m', 'l', 'xl'])} { +const navItemWithDividerStyles = (euiThemeContext: UseEuiTheme) => css` + ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} { margin-right: ${euiThemeContext.euiTheme.size.m}; position: relative; &:after { @@ -177,7 +177,7 @@ function getLensTopNavConfig(options: { values: { contextOriginatingApp }, }), disableButton: !actions.goBack.enabled, - css: NavItemWithDividerStyles, + css: navItemWithDividerStyles, }); } @@ -195,7 +195,7 @@ function getLensTopNavConfig(options: { tooltip: actions.getUnderlyingDataUrl.tooltip, target: '_blank', href: actions.getUnderlyingDataUrl.getLink?.(), - css: NavItemWithDividerStyles, + css: navItemWithDividerStyles, }); } @@ -235,7 +235,7 @@ function getLensTopNavConfig(options: { description: i18n.translate('xpack.lens.app.settingsAriaLabel', { defaultMessage: 'Open the Lens settings menu', }), - css: NavItemWithDividerStyles, + css: navItemWithDividerStyles, }); if (actions.cancel.visible) { diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/common/datapanel.styles.ts b/x-pack/platform/plugins/shared/lens/public/datasources/common/datapanel.styles.ts index 8dc302eeaea93..29bac5630c265 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/common/datapanel.styles.ts +++ b/x-pack/platform/plugins/shared/lens/public/datasources/common/datapanel.styles.ts @@ -6,9 +6,10 @@ */ import { UseEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; export const dataPanelStyles = ({ euiTheme }: UseEuiTheme) => { - return ` + return css` padding: ${euiTheme.size.base} ${euiTheme.size.base} 0; .unifiedFieldListItemButton.kbnFieldButton { background: none; @@ -17,5 +18,6 @@ export const dataPanelStyles = ({ euiTheme }: UseEuiTheme) => { } .unifiedFieldListItemButton__dragging { background: ${euiTheme.colors.backgroundBasePlain}; - }`; + } + `; }; diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.tsx index 0c2505f5c18d5..ab63dab30776d 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.tsx @@ -7,7 +7,7 @@ import { uniq } from 'lodash'; import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'; -import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiCallOut, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import type { CoreStart } from '@kbn/core/public'; @@ -102,6 +102,7 @@ export function FormBasedDataPanel({ const { indexPatterns, indexPatternRefs } = frame.dataViews; const { currentIndexPatternId } = state; + const euiThemeContext = useEuiTheme(); const activeIndexPatterns = useMemo(() => { return uniq( ( @@ -116,7 +117,12 @@ export function FormBasedDataPanel({ return ( <> {Object.keys(indexPatterns).length === 0 && indexPatternRefs.length === 0 ? ( - + } > diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx index 482c6d42af7bb..958b05567b7b6 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx @@ -141,7 +141,9 @@ export function DimensionEditor(props: DimensionEditorProps) { const temporaryQuickFunction = Boolean(temporaryState === quickFunctionsName); const temporaryStaticValue = Boolean(temporaryState === staticValueOperationName); - const { euiTheme } = useEuiTheme(); + + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; const updateLayer = useCallback( (newLayer: Partial) => @@ -534,7 +536,7 @@ export function DimensionEditor(props: DimensionEditorProps) { isActive, size: 's', isDisabled: !!disabledStatus, - css: operationsButtonStyles, + css: operationsButtonStyles(euiThemeContext), 'data-test-subj': `lns-indexPatternDimension-${operationType}${ compatibleWithCurrentField ? '' : ' incompatible' }`, @@ -811,7 +813,7 @@ export function DimensionEditor(props: DimensionEditorProps) { fullWidth > 3 ? operationsTwoColumnsStyles : undefined} + css={sideNavItems.length > 3 ? operationsTwoColumnsStyles(euiThemeContext) : undefined} gutterSize="none" color="primary" listItems={ @@ -1292,7 +1294,7 @@ export function DimensionEditor(props: DimensionEditorProps) { } const operationsTwoColumnsStyles = ({ euiTheme }: UseEuiTheme) => { - return ` + return css` display: block; column-count: 2; column-gap: ${euiTheme.size.m}; @@ -1300,7 +1302,7 @@ const operationsTwoColumnsStyles = ({ euiTheme }: UseEuiTheme) => { }; export const operationsButtonStyles = ({ euiTheme }: UseEuiTheme) => { - return ` + return css` > button { padding-top: 0; padding-bottom: 0; diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimensions_editor_helpers.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimensions_editor_helpers.tsx index 74fe54d79f820..545f703663b24 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimensions_editor_helpers.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimensions_editor_helpers.tsx @@ -14,7 +14,8 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiCallOut, EuiButtonGroup, EuiFormRow, UseEuiTheme } from '@elastic/eui'; +import { EuiCallOut, EuiButtonGroup, EuiFormRow, UseEuiTheme, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; import { nonNullable } from '../../../utils'; import { operationDefinitionMap, @@ -140,6 +141,7 @@ export const CalloutWarning = ({ currentOperationType: keyof typeof operationDefinitionMap | undefined; temporaryStateType: TemporaryState; }) => { + const euiThemeContext = useEuiTheme(); if ( temporaryStateType === 'none' || (currentOperationType != null && isQuickFunction(currentOperationType)) @@ -153,7 +155,7 @@ export const CalloutWarning = ({ return ( <> { - return ` + return css` margin-bottom: ${euiTheme.size.base}; margin-top: ${euiTheme.size.s}; `; diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx index e6da8f310c2b5..d30eb5433b1d6 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx @@ -17,8 +17,10 @@ import { EuiPopoverTitle, EuiText, UseEuiTheme, + useEuiTheme, } from '@elastic/eui'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; +import { css } from '@emotion/react'; import { StartServices } from '../../types'; export const HelpPopoverButton = ({ @@ -28,10 +30,11 @@ export const HelpPopoverButton = ({ children: string; onClick: EuiLinkButtonProps['onClick']; }) => { + const euiThemeContext = useEuiTheme(); return ( - + {children} @@ -39,10 +42,11 @@ export const HelpPopoverButton = ({ }; const HelpPopoverContent = ({ title, children }: { title?: string; children: ReactNode }) => { + const euiThemeContext = useEuiTheme(); return ( <> {title && {title}} - + {children} @@ -50,10 +54,10 @@ const HelpPopoverContent = ({ title, children }: { title?: string; children: Rea }; const helpPopoverStyles = { - button: ({ euiTheme }: UseEuiTheme) => ` + button: ({ euiTheme }: UseEuiTheme) => css` margin-right: ${euiTheme.size.xs}; `, - content: ({ euiTheme }: UseEuiTheme) => ` + content: ({ euiTheme }: UseEuiTheme) => css` max-height: 40vh; padding: ${euiTheme.size.m}; `, diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx index 9ec4647826fb9..86d8394eb7a7c 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx @@ -6,12 +6,13 @@ */ import React, { useState } from 'react'; -import { EuiPopover, EuiSpacer, euiTextBreakWord, useEuiFontSize, UseEuiTheme } from '@elastic/eui'; +import { euiFontSize, EuiPopover, EuiSpacer, euiTextBreakWord, UseEuiTheme } from '@elastic/eui'; import type { Query } from '@kbn/es-query'; // Need to keep it separate to make it work Jest mocks in dimension_panel tests // import { QueryInput } from '../../../../shared_components/query_input'; import { isQueryValid, QueryInput } from '@kbn/visualization-ui-components'; import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { css } from '@emotion/react'; import { LENS_APP_NAME } from '../../../../../../common/constants'; import { IndexPattern } from '../../../../../types'; import { FilterValue, defaultLabel } from '.'; @@ -101,12 +102,11 @@ export const FilterPopover = ({ ); }; -export const DraggablePopoverButtonStyles = ({ euiTheme }: UseEuiTheme) => { - const euiFontSize = useEuiFontSize('s'); - return ` +export const draggablePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => { + return css` ${euiTextBreakWord()}; - ${euiFontSize}; - min-height: ${euiTheme.size.xl}; + ${euiFontSize(euiThemeContext, 's')}; + min-height: ${euiThemeContext.euiTheme.size.xl}; width: 100%; `; }; diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx index 1fb2bc81c97cd..bcc31ca6fc4c6 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx @@ -8,7 +8,7 @@ import React, { useState } from 'react'; import { omit } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiLink, htmlIdGenerator } from '@elastic/eui'; +import { EuiFormRow, EuiLink, htmlIdGenerator, useEuiTheme } from '@elastic/eui'; import type { Query } from '@kbn/es-query'; import type { AggFunctionsMapping } from '@kbn/data-plugin/public'; import { queryFilterToAst } from '@kbn/data-plugin/common'; @@ -23,7 +23,7 @@ import { IndexPattern } from '../../../../../types'; import { updateColumnParam } from '../../layer_helpers'; import type { OperationDefinition } from '..'; import type { BaseIndexPatternColumn } from '../column_types'; -import { DraggablePopoverButtonStyles, FilterPopover } from './filter_popover'; +import { draggablePopoverButtonStyles, FilterPopover } from './filter_popover'; import { TermsIndexPatternColumn } from '../terms'; import { isColumnOfType } from '../helpers'; @@ -180,6 +180,7 @@ export const FilterList = ({ indexPattern: IndexPattern; defaultQuery: Filter; }) => { + const euiThemeContext = useEuiTheme(); const [activeFilterId, setActiveFilterId] = useState(''); const [localFilters, setLocalFilters] = useState(() => filters.map((filter) => ({ ...filter, id: generateId() })) @@ -274,7 +275,7 @@ export const FilterList = ({ title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', { defaultMessage: 'Click to edit', })} - css={DraggablePopoverButtonStyles} + css={draggablePopoverButtonStyles(euiThemeContext)} > {filter.label || (filter.input.query as string) || defaultLabel} diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx index 90660a3c52ef7..0d80cb9e9dcf3 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx @@ -125,7 +125,8 @@ export function FormulaEditor({ const disposables = React.useRef([]); const editor1 = React.useRef(); - const { euiTheme } = useEuiTheme(); + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; const visibleOperationsMap = useMemo( () => filterByVisibleOperation(operationDefinitionMap), @@ -684,7 +685,12 @@ export function FormulaEditor({ // in the behavior of Monaco when it's first loaded and then reloaded. return (
{!isFullscreen && (
-
+
{i18n.translate('xpack.lens.formulaPlaceholderText', { @@ -823,7 +829,7 @@ export function FormulaEditor({ ) : null}
-
+
{isFullscreen ? ( @@ -845,7 +851,7 @@ export function FormulaEditor({ defaultMessage: 'Hide function reference', })} className="lnsFormula__editorHelp lnsFormula__editorHelp--inline" - css={sharedEditorStyles.editorHelpLink} + css={sharedEditorStyles.editorHelpLink(euiThemeContext)} color="text" onClick={() => setIsHelpOpen(!isHelpOpen)} > @@ -919,7 +925,7 @@ export function FormulaEditor({
+
{ display: flex; flex-direction: column; & > * + * { - border-top: $euiBorderThin; + border-top: ${euiTheme.border.thin}; } }; .lnsFormula__editorContent { diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx index 4118b35bf7320..0726adf9cf7ab 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx @@ -19,6 +19,7 @@ import { EuiToolTip, htmlIdGenerator, keys, + useEuiTheme, } from '@elastic/eui'; import { IFieldFormat } from '@kbn/field-formats-plugin/common'; import { @@ -32,7 +33,7 @@ import { RangeTypeLens, isValidRange } from './ranges'; import { FROM_PLACEHOLDER, TO_PLACEHOLDER, TYPING_DEBOUNCE_TIME } from './constants'; import { LabelInput } from '../shared_components'; import { isValidNumber } from '../helpers'; -import { DraggablePopoverButtonStyles } from '../filters/filter_popover'; +import { draggablePopoverButtonStyles } from '../filters/filter_popover'; const generateId = htmlIdGenerator(); @@ -207,6 +208,7 @@ export const AdvancedRangeEditor = ({ onToggleEditor: () => void; formatter: IFieldFormat; }) => { + const euiThemeContext = useEuiTheme(); const [activeRangeId, setActiveRangeId] = useState(''); // use a local state to store ids with range objects const [localRanges, setLocalRanges] = useState(() => @@ -308,7 +310,7 @@ export const AdvancedRangeEditor = ({ color="text" onClick={() => changeActiveRange(range.id)} data-test-subj="dataView-ranges-popover-trigger" - css={DraggablePopoverButtonStyles} + css={draggablePopoverButtonStyles(euiThemeContext)} > diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx index fca84c932ac2c..6bb464cd9be58 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx @@ -30,7 +30,8 @@ export interface FrameLayoutProps { export function FrameLayout(props: FrameLayoutProps) { const isFullscreen = useLensSelector(selectIsFullscreenDatasource); - const euiTheme = useEuiTheme(); + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; return ( @@ -65,7 +66,7 @@ export function FrameLayout(props: FrameLayoutProps) { bottom: 0; overflow: hidden; flex-direction: column; - ${euiBreakpoint(euiTheme, ['xs', 's', 'm'])} { + ${euiBreakpoint(euiThemeContext, ['xs', 's', 'm'])} { position: static; } `} @@ -78,7 +79,7 @@ export function FrameLayout(props: FrameLayoutProps) { overflow: hidden; flex-grow: 1; flex-direction: row; - ${euiBreakpoint(euiTheme, ['xs', 's', 'm'])} { + ${euiBreakpoint(euiThemeContext, ['xs', 's', 'm'])} { flex-wrap: wrap; overflow: auto; > * { @@ -91,7 +92,7 @@ export function FrameLayout(props: FrameLayoutProps) { className={'hide-for-sharing'} aria-labelledby="dataPanelId" css={[ - sidebarStyles, + sidebarStyles(euiThemeContext), css` ${isFullscreen && ` @@ -121,13 +122,13 @@ export function FrameLayout(props: FrameLayoutProps) { // Leave out bottom padding so the suggestions scrollbar stays flush to window edge // Leave out left padding so the left sidebar's focus states are visible outside of content bounds // This also means needing to add same amount of margin to page content and suggestion items - padding: ${euiTheme.euiTheme.size.base} ${euiTheme.euiTheme.size.base} 0; + padding: ${euiTheme.size.base} ${euiTheme.size.base} 0; position: relative; z-index: 1; - border-left: ${euiTheme.euiTheme.border.thin}; - border-right: ${euiTheme.euiTheme.border.thin}; + border-left: ${euiTheme.border.thin}; + border-right: ${euiTheme.border.thin}; &:first-child { - padding-left: ${euiTheme.euiTheme.size.base}; + padding-left: ${euiTheme.size.base}; } ${isFullscreen && ` @@ -148,13 +149,13 @@ export function FrameLayout(props: FrameLayoutProps) {
= ({ textProps, ...rest }) => { + const euiThemeContext = useEuiTheme(); const classes = classNames( 'kbnToolbarButton', groupPositionToClassMap[groupPosition], @@ -68,7 +77,7 @@ export const ToolbarButton: React.FunctionComponent = ({ data-test-subj={dataTestSubj} className={classes} iconSide="right" - css={toolbarButtonStyles} + css={toolbarButtonStyles(euiThemeContext)} iconType={hasArrow ? 'arrowDown' : ''} color="text" contentProps={{ @@ -86,68 +95,69 @@ export const ToolbarButton: React.FunctionComponent = ({ ); }; -const toolbarButtonStyles = (euiThemeObj: UseEuiTheme) => { - const { euiTheme } = euiThemeObj; - return ` - &.kbnToolbarButton { - line-height: ${euiTheme.size.xxl}; // Keeps alignment of text and chart icon - - // todo: once issue https://github.com/elastic/eui/issues/4730 is merged, this code might be safe to remove - // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed - min-width: 0; - border-width: ${euiTheme.border.width.thin}; - border-style: solid; - border-color: ${euiTheme.border.color}; // Lighten the border color for all states - - // Override background color for non-disabled buttons - &:not(:disabled) { - background-color: ${euiTheme.colors.backgroundBasePlain}; - } - - &.kbnToolbarButton__text > svg { - margin-top: -1px; // Just some weird alignment issue when icon is the child not the iconType - } - - &.kbnToolbarButton__text:empty { - margin: 0; - } - - // Toolbar buttons don't look good with centered text when fullWidth - &[class*='fullWidth'] { - text-align: left; - - .kbnToolbarButton__content { - justify-content: space-between; +const toolbarButtonStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + return css` + &.kbnToolbarButton { + line-height: ${euiTheme.size.xxl}; // Keeps alignment of text and chart icon + + // todo: once issue https://github.com/elastic/eui/issues/4730 is merged, this code might be safe to remove + // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed + min-width: 0; + border-width: ${euiTheme.border.width.thin}; + border-style: solid; + border-color: ${euiTheme.border.color}; // Lighten the border color for all states + + // Override background color for non-disabled buttons + &:not(:disabled) { + background-color: ${euiTheme.colors.backgroundBasePlain}; } + + &.kbnToolbarButton__text > svg { + margin-top: -1px; // Just some weird alignment issue when icon is the child not the iconType + } + + &.kbnToolbarButton__text:empty { + margin: 0; + } + + // Toolbar buttons don't look good with centered text when fullWidth + &[class*='fullWidth'] { + text-align: left; + + .kbnToolbarButton__content { + justify-content: space-between; + } + } + } + + &.kbnToolbarButton--groupLeft { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.kbnToolbarButton--groupCenter { + border-radius: 0; + border-left: none; + } + + &.kbnToolbarButton--groupRight { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: none; + } + + &.kbnToolbarButton--bold { + font-weight: ${euiTheme.font.weight.bold}; + } + + &.kbnToolbarButton--normal { + font-weight: ${euiTheme.font.weight.regular}; + } + + &.kbnToolbarButton--s { + box-shadow: none !important; // sass-lint:disable-line no-important + font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; } - } - - &.kbnToolbarButton--groupLeft { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &.kbnToolbarButton--groupCenter { - border-radius: 0; - border-left: none; - } - - &.kbnToolbarButton--groupRight { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; - } - - &.kbnToolbarButton--bold { - font-weight: ${euiTheme.font.weight.bold}; - } - - &.kbnToolbarButton--normal { - font-weight:${euiTheme.font.weight.regular}; - } - - &.kbnToolbarButton--s { - box-shadow: none !important; // sass-lint:disable-line no-important - font-size:${euiFontSize(euiThemeObj, 's').fontSize}; - }`; + `; }; diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout.styles.ts b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout.styles.ts index af97129f606ca..b242885a6097f 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout.styles.ts +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout.styles.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { UseEuiTheme, useEuiShadow } from '@elastic/eui'; +import { UseEuiTheme, euiShadow } from '@elastic/eui'; import { css, keyframes } from '@emotion/react'; const flyoutOpenCloseAnimation = keyframes` @@ -19,19 +19,19 @@ const flyoutOpenCloseAnimation = keyframes` } `; -export const FlyoutContainerStyles = ({ euiTheme }: UseEuiTheme) => css` - border-left: ${euiTheme.border.thin}; - ${useEuiShadow('xl')}; +export const flyoutContainerStyles = (euiThemeContext: UseEuiTheme) => css` + border-left: ${euiThemeContext.euiTheme.border.thin}; + ${euiShadow(euiThemeContext, 'xl')}; position: fixed; top: 0; bottom: 0; right: 0; height: 100%; - z-index: ${euiTheme.levels.flyout}; - background: ${euiTheme.colors.backgroundBasePlain}; + z-index: ${euiThemeContext.euiTheme.levels.flyout}; + background: ${euiThemeContext.euiTheme.colors.backgroundBasePlain}; display: flex; flex-direction: column; align-items: stretch; - animation: ${flyoutOpenCloseAnimation} ${euiTheme.animation.normal} - ${euiTheme.animation.resistance}; + animation: ${flyoutOpenCloseAnimation} ${euiThemeContext.euiTheme.animation.normal} + ${euiThemeContext.euiTheme.animation.resistance}; `; diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx index 506dfd634689c..2b7f284b3dfa9 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx @@ -18,10 +18,11 @@ import { EuiFocusTrap, UseEuiTheme, euiBreakpoint, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../utils'; -import { FlyoutContainerStyles } from './flyout.styles'; +import { flyoutContainerStyles } from './flyout.styles'; function fromExcludedClickTarget(event: Event) { for ( @@ -62,6 +63,7 @@ export function FlyoutContainer({ isInlineEditing?: boolean; }) { const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false); + const euiThemeContext = useEuiTheme(); const closeFlyout = useCallback(() => { setFocusTrapIsEnabled(false); @@ -104,11 +106,11 @@ export function FlyoutContainer({ role="dialog" aria-labelledby="lnsDimensionContainerTitle" css={[ - FlyoutContainerStyles, + flyoutContainerStyles(euiThemeContext), css` box-shadow: ${isInlineEditing ? 'none !important' : 'inherit'}; `, - dimensionContainerStyles.self, + dimensionContainerStyles.self(euiThemeContext), ]} onAnimationEnd={() => { if (isOpen) { @@ -119,7 +121,7 @@ export function FlyoutContainer({ } }} > - + {isInlineEditing && ( @@ -168,7 +170,7 @@ export function FlyoutContainer({
{customFooter || ( - + { - return ` - // But with custom positioning to keep it within the sidebar contents - max-width: none !important; - left: 0; - z-index: ${euiThemeContext.euiTheme.levels.menu}; - ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} { - height: 100% !important; - position: absolute; - top: 0 !important; - } - `; + return css` + // But with custom positioning to keep it within the sidebar contents + max-width: none !important; + left: 0; + z-index: ${euiThemeContext.euiTheme.levels.menu}; + ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} { + height: 100% !important; + position: absolute; + top: 0 !important; + } + `; }, header: ({ euiTheme }: UseEuiTheme) => css` padding: ${euiTheme.size.base}; diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx index 9ff6d757fa20f..a8034de718753 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx @@ -19,9 +19,10 @@ import { EuiOutsideClickDetector, EuiPortal, UseEuiTheme, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { FlyoutContainerStyles } from './flyout.styles'; +import { flyoutContainerStyles } from './flyout.styles'; const DEFAULT_TITLE = i18n.translate('xpack.lens.colorSiblingFlyoutTitle', { defaultMessage: 'Color', @@ -44,6 +45,7 @@ export function SettingWithSiblingFlyout({ }) { const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false); const [isFlyoutOpen, setIsFlyoutOpen] = useState(false); + const euiThemeContext = useEuiTheme(); const toggleFlyout = () => { setIsFlyoutOpen(!isFlyoutOpen); @@ -75,9 +77,15 @@ export function SettingWithSiblingFlyout({ role="dialog" aria-labelledby="lnsSettingWithSiblingFlyoutTitle" data-test-subj={dataTestSubj} - css={[FlyoutContainerStyles, siblingFlyoutContainerStyles.self]} + css={[ + flyoutContainerStyles(euiThemeContext), + siblingflyoutContainerStyles.self(euiThemeContext), + ]} > - + )} - + {i18n.translate('xpack.lens.settingWithSiblingFlyout.back', { defaultMessage: 'Back', @@ -126,7 +134,7 @@ export function SettingWithSiblingFlyout({ ); } -const siblingFlyoutContainerStyles = { +const siblingflyoutContainerStyles = { self: ({ euiTheme }: UseEuiTheme) => css` position: absolute; right: 0; diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/add_layer.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/add_layer.tsx index a08799c76c017..f83acc6448776 100644 --- a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/add_layer.tsx +++ b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/add_layer.tsx @@ -16,10 +16,12 @@ import { IconType, transparentize, UseEuiTheme, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { LayerTypes } from '@kbn/expression-xy-plugin/public'; import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public'; +import { css } from '@emotion/react'; import { AddLayerFunction, VisualizationLayerDescription } from '../../types'; import { LoadAnnotationLibraryFlyout } from './load_annotation_library_flyout'; import type { ExtraAppendLayerArg } from './visualization'; @@ -274,31 +276,32 @@ const ChartOptionWrapper = ({ onClick: () => void; type: string; }) => { + const euiThemeContext = useEuiTheme(); return ( ); }; -const chartOptionWrapperStyles = ({ euiTheme }: UseEuiTheme) => ` - padding: ${euiTheme.size.s}; - border-bottom: ${euiTheme.border.thin}; - border-bottom-color: ${euiTheme.colors.backgroundBaseSubdued}; - width: 100%; - &:hover, - &:focus { +const chartOptionWrapperStyles = ({ euiTheme }: UseEuiTheme) => css` + padding: ${euiTheme.size.s}; + border-bottom: ${euiTheme.border.thin}; + border-bottom-color: ${euiTheme.colors.backgroundBaseSubdued}; + width: 100%; + &:hover, + &:focus { + color: ${euiTheme.colors.primary}; + background-color: ${transparentize(euiTheme.colors.primary, 0.1)}; + span, + .euiText { + text-decoration: underline; color: ${euiTheme.colors.primary}; - background-color: ${transparentize(euiTheme.colors.primary, 0.1)}; - span, - .euiText { - text-decoration: underline; - color: ${euiTheme.colors.primary}; - } } + } `;