diff --git a/integration/server/generate/vrt_page_template.js b/integration/server/generate/vrt_page_template.js index d71d1c5e15..d50a907b0b 100644 --- a/integration/server/generate/vrt_page_template.js +++ b/integration/server/generate/vrt_page_template.js @@ -44,13 +44,13 @@ ReactDOM.render(, document.getElementById('story-root') as HTMLElemen function pageTemplate(imports, routes, urls) { return ` import React, { Suspense } from 'react'; -import { ThemeProvider, BackgroundProvider } from '../../storybook/use_base_theme'; +import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme'; import { useGlobalsParameters } from '../server/mocks/use_global_parameters'; export function VRTPage() { const { - themeName, - backgroundColor, + themeId, + backgroundId, setParams, } = useGlobalsParameters(); const urlParams = new URL(window.location.toString()).searchParams; @@ -70,13 +70,13 @@ export function VRTPage() { ); } return ( - - + + Loading...}> ${routes.join('\n ')} - - + + ); } diff --git a/integration/server/mocks/use_global_parameters.ts b/integration/server/mocks/use_global_parameters.ts index 2085aee357..e1fb005a62 100644 --- a/integration/server/mocks/use_global_parameters.ts +++ b/integration/server/mocks/use_global_parameters.ts @@ -32,7 +32,7 @@ const getThemeAllClasses = ({ themes }: Required['theme']) => const getTargetSelector = ({ selector }: Required['theme']) => (Array.isArray(selector) ? selector.join(', ') : selector) ?? 'body'; -function setTheme(themeId: string) { +function applyThemeCSS(themeId: string) { const theme = themeParams.themes.find((t) => t.id === themeId); const selector = getTargetSelector(themeParams); const targets = selector ? document.querySelectorAll(selector) : null; @@ -48,33 +48,25 @@ function setTheme(themeId: string) { } } -function getBackground(backgroundId?: string) { - if (!backgroundId) return ''; - - const option = (backgroundParams.options ?? []).find(({ id }) => id === backgroundId); - - return option ? option.background ?? option.color : ''; -} - export function useGlobalsParameters() { - const [themeName, setThemeName] = useState(ThemeId.Light); - const [backgroundColor, setBackgroundColor] = useState('white'); + const [themeId, setThemeId] = useState(ThemeId.Light); + const [backgroundId, setBackgroundId] = useState('white'); /** * Handles setting global context values. Stub for theme and background addons */ function setParams(params: URLSearchParams, parameters?: Parameters) { const globals = getGlobalParams(params) as Globals; - const themeId = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light; - const backgroundId = globals.background ?? parameters?.background?.default ?? backgroundParams.default; - setThemeName(themeId); - setTheme(themeId); - setBackgroundColor(getBackground(backgroundId)); + const backgroundIdFromParams = globals.background ?? parameters?.background?.default ?? backgroundParams.default; + setBackgroundId(backgroundIdFromParams); + const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light; + setThemeId(themeIdFromParams); + applyThemeCSS(themeIdFromParams); } return { - themeName, - backgroundColor, + themeId, + backgroundId, setParams, }; } diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png index 791dde1269..1701853b5a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png b/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png new file mode 100644 index 0000000000..70ff0f2b63 Binary files /dev/null and b/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png differ diff --git a/integration/tests/dark_mode.test.ts b/integration/tests/dark_mode.test.ts new file mode 100644 index 0000000000..1328f9b0cb --- /dev/null +++ b/integration/tests/dark_mode.test.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { common } from '../page_objects/common'; + +describe('Small multiples - dark mode', () => { + it('renders panel titles', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/small-multiples-alpha--sunbursts&globals=theme:dark;background:black`, + ); + }); +}); diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts index babfda2f32..dd90b8b9db 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts @@ -101,7 +101,6 @@ export type PickFunction = (x: Pixels, y: Pixels, focus: ContinuousDomainFocus) /** @internal */ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors { - panelTitle: string; smAccessorValue: number | string; partitionLayout: PartitionLayout; top: SizeRatio; @@ -114,8 +113,13 @@ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors innerColumnIndex: number; marginLeftPx: Pixels; marginTopPx: Pixels; - panelInnerWidth: Pixels; - panelInnerHeight: Pixels; + panel: { + title: string; + innerWidth: Pixels; + innerHeight: Pixels; + fontFace: Font; + fontSize: number; + }; } /** @internal */ @@ -145,7 +149,6 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou index: 0, innerIndex: 0, smAccessorValue: '', - panelTitle: '', top: 0, left: 0, width: 0, @@ -156,9 +159,21 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou innerColumnIndex: 0, marginLeftPx: 0, marginTopPx: 0, - panelInnerWidth: 0, - panelInnerHeight: 0, partitionLayout, + panel: { + title: '', + innerWidth: 0, + innerHeight: 0, + fontSize: 10, + fontFace: { + fontVariant: 'normal', + fontWeight: 'normal', + fontFamily: 'sans-serif', + fontStyle: 'normal', + textOpacity: 1, + textColor: 'black', + }, + }, }); /** @internal */ diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts index d79ff0e676..671af9078f 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts @@ -15,13 +15,14 @@ import { config as defaultConfig, VALUE_GETTERS } from '../config'; import { Config } from '../types/config_types'; import { nullShapeViewModel, + PartitionSmallMultiplesModel, RawTextGetter, ShapeTreeNode, ShapeViewModel, ValueGetter, } from '../types/viewmodel_types'; import { DEPTH_KEY, HierarchyOfArrays } from '../utils/group_by_rollup'; -import { PanelPlacement, shapeViewModel } from './viewmodel'; +import { shapeViewModel } from './viewmodel'; function rawTextGetter(layers: Layer[]): RawTextGetter { return (node: ShapeTreeNode) => { @@ -42,7 +43,7 @@ export function getShapeViewModel( tree: HierarchyOfArrays, containerBackgroundColor: Color, smallMultiplesStyle: SmallMultiplesStyle, - panelPlacement: PanelPlacement, + panelModel: PartitionSmallMultiplesModel, ): ShapeViewModel { const { width, height } = parentDimensions; const { layers, topGroove, config: specConfig } = partitionSpec; @@ -67,6 +68,6 @@ export function getShapeViewModel( topGroove, containerBackgroundColor, smallMultiplesStyle, - panelPlacement, + panelModel, ); } diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts index 3e5957dcc1..1ac9b509d8 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts @@ -277,15 +277,6 @@ const rawChildNodes = ( } }; -/** @internal */ -export type PanelPlacement = PartitionSmallMultiplesModel; - -/** - * Todo move it to config - * @internal - */ -export const panelTitleFontSize = 16; - /** @internal */ export function shapeViewModel( textMeasure: TextMeasure, @@ -299,7 +290,7 @@ export function shapeViewModel( topGroove: Pixels, containerBackgroundColor: Color, smallMultiplesStyle: SmallMultiplesStyle, - panel: PanelPlacement, + panelModel: PartitionSmallMultiplesModel, ): ShapeViewModel { const { width, @@ -315,7 +306,7 @@ export function shapeViewModel( sectorLineWidth, } = config; - const { marginLeftPx, marginTopPx, panelInnerWidth, panelInnerHeight } = panel; + const { marginLeftPx, marginTopPx, panel } = panelModel; const treemapLayout = isTreemap(partitionLayout); const mosaicLayout = isMosaic(partitionLayout); @@ -327,8 +318,8 @@ export function shapeViewModel( const diskCenter = isSunburst(partitionLayout) ? { - x: marginLeftPx + panelInnerWidth / 2, - y: marginTopPx + panelInnerHeight / 2, + x: marginLeftPx + panel.innerWidth / 2, + y: marginTopPx + panel.innerHeight / 2, } : { x: marginLeftPx, @@ -347,8 +338,8 @@ export function shapeViewModel( partitionLayout, tree, topGroove, - panelInnerWidth, - panelInnerHeight, + panel.innerWidth, + panel.innerHeight, clockwiseSectors, specialFirstInnermostSector, maxDepth, @@ -362,8 +353,8 @@ export function shapeViewModel( // use the smaller of the two sizes, as a circle fits into a square const circleMaximumSize = Math.min( - panelInnerWidth, - panelInnerHeight - (panel.panelTitle.length > 0 ? panelTitleFontSize * 2 : 0), + panel.innerWidth, + panel.innerHeight - (panel.title.length > 0 ? panel.fontSize * 2 : 0), ); const outerRadius: Radius = Math.min(outerSizeRatio * circleMaximumSize, circleMaximumSize - sectorLineWidth) / 2; const innerRadius: Radius = outerRadius - (1 - emptySizeRatio) * outerRadius; @@ -375,9 +366,9 @@ export function shapeViewModel( layers, config.sectorLineWidth, config.sectorLineStroke, - panel.smAccessorValue, - panel.index, - panel.innerIndex, + panelModel.smAccessorValue, + panelModel.index, + panelModel.innerIndex, config.fillLabel, sunburstLayout, containerBackgroundColor, @@ -442,8 +433,8 @@ export function shapeViewModel( }); const maxLinkedLabelTextLength = config.linkLabel.maxTextLength; const linkLabelViewModels = linkTextLayout( - panelInnerWidth, - panelInnerHeight, + panel.innerWidth, + panel.innerHeight, textMeasure, config, nodesWithoutRoom, @@ -454,8 +445,8 @@ export function shapeViewModel( valueFormatter, maxLinkedLabelTextLength, { - x: width * panel.left + panelInnerWidth / 2, - y: height * panel.top + panelInnerHeight / 2, + x: width * panelModel.left + panel.innerWidth / 2, + y: height * panelModel.top + panel.innerHeight / 2, }, containerBackgroundColor, ); @@ -480,22 +471,23 @@ export function shapeViewModel( // combined viewModel return { partitionLayout: config?.partitionLayout ?? defaultConfig.partitionLayout, - smAccessorValue: panel.smAccessorValue, - panelTitle: panel.panelTitle, - index: panel.index, - innerIndex: panel.innerIndex, - width: panel.width, - height: panel.height, - top: panel.top, - left: panel.left, - innerRowCount: panel.innerRowCount, - innerColumnCount: panel.innerColumnCount, - innerRowIndex: panel.innerRowIndex, - innerColumnIndex: panel.innerColumnIndex, - marginLeftPx: panel.marginLeftPx, - marginTopPx: panel.marginTopPx, - panelInnerWidth: panel.panelInnerWidth, - panelInnerHeight: panel.panelInnerHeight, + smAccessorValue: panelModel.smAccessorValue, + + index: panelModel.index, + innerIndex: panelModel.innerIndex, + width: panelModel.width, + height: panelModel.height, + top: panelModel.top, + left: panelModel.left, + innerRowCount: panelModel.innerRowCount, + innerColumnCount: panelModel.innerColumnCount, + innerRowIndex: panelModel.innerRowIndex, + innerColumnIndex: panelModel.innerColumnIndex, + marginLeftPx: panelModel.marginLeftPx, + marginTopPx: panelModel.marginTopPx, + panel: { + ...panelModel.panel, + }, config, layers, diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts index bc8d02cb38..418aff27bd 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts @@ -22,7 +22,7 @@ import { TextRow, } from '../../layout/types/viewmodel_types'; import { LinkLabelsViewModelSpec } from '../../layout/viewmodel/link_text_layout'; -import { isSunburst, panelTitleFontSize } from '../../layout/viewmodel/viewmodel'; +import { isSunburst } from '../../layout/viewmodel/viewmodel'; // the burnout avoidance in the center of the pie const LINE_WIDTH_MULT = 10; // border can be a maximum 1/LINE_WIDTH_MULT - th of the sector angle, otherwise the border would dominate @@ -207,14 +207,12 @@ function renderLinkLabels( ctx.scale(1, -1); // flip for text rendering not to be upside down ctx.textAlign = textAlign; // label text - ctx.strokeStyle = labelColor; ctx.fillStyle = labelColor; - ctx.font = `${labelFontSpec.fontStyle} ${labelFontSpec.fontVariant} ${labelFontSpec.fontWeight} ${linkLabelFontSize}px ${labelFontSpec.fontFamily}`; + ctx.font = cssFontShorthand(labelFontSpec, linkLabelFontSize); ctx.fillText(text, textAlign === 'right' ? -valueWidth - labelValueGap : 0, 0); // value text - ctx.strokeStyle = valueColor; ctx.fillStyle = valueColor; - ctx.font = `${valueFontSpec.fontStyle} ${valueFontSpec.fontVariant} ${valueFontSpec.fontWeight} ${linkLabelFontSize}px ${valueFontSpec.fontFamily}`; + ctx.font = cssFontShorthand(valueFontSpec, linkLabelFontSize); ctx.fillText(valueText, textAlign === 'left' ? width + labelValueGap : 0, 0); }); }); @@ -222,7 +220,6 @@ function renderLinkLabels( } const midlineOffset = 0.35; // 0.35 is a [common constant](http://tavmjong.free.fr/SVG/TEXT_IN_A_BOX/index.html) representing half height -const innerPad = midlineOffset * panelTitleFontSize; // todo replace it with theme.axisPanelTitle.padding.inner /** @internal */ export function renderPartitionCanvas2d( @@ -231,7 +228,6 @@ export function renderPartitionCanvas2d( { width, height, - panelTitle, config, quadViewModel, rowSets, @@ -239,6 +235,7 @@ export function renderPartitionCanvas2d( linkLabelViewModels, diskCenter, outerRadius, + panel, }: ShapeViewModel, ) { const { sectorLineWidth, sectorLineStroke, linkLabel } = config; @@ -260,12 +257,15 @@ export function renderPartitionCanvas2d( ctx.textBaseline = 'bottom'; // panel titles + ctx.font = cssFontShorthand(panel.fontFace, panel.fontSize); + ctx.fillStyle = panel.fontFace.textColor; + const innerPad = midlineOffset * panel.fontSize; // todo replace it with theme.axisPanelTitle.padding.inner ctx.fillText( - panelTitle, + panel.title, isSunburst(config.partitionLayout) ? diskCenter.x : diskCenter.x + (config.width * width) / 2, isSunburst(config.partitionLayout) ? config.linkLabel.maxCount > 0 - ? diskCenter.y - (config.height * height) / 2 + panelTitleFontSize + ? diskCenter.y - (config.height * height) / 2 + panel.fontSize : diskCenter.y - outerRadius - innerPad : diskCenter.y + 12, ); diff --git a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx index 946d2788b9..f0c4d0e498 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx @@ -176,17 +176,10 @@ export class HighlighterComponent extends React.Component { partitionLayout, marginLeftPx, marginTopPx, - panelInnerWidth, - panelInnerHeight, + panel: { innerWidth, innerHeight }, }) => ( - + {renderGeometries(geometries, partitionLayout, { color: 'black' }, geometriesFoci, width)} @@ -203,8 +196,7 @@ export class HighlighterComponent extends React.Component { partitionLayout, marginLeftPx, marginTopPx, - panelInnerWidth, - panelInnerHeight, + panel: { innerWidth, innerHeight }, }) => isSunburst(partitionLayout) ? ( { key={`${index}__${innerIndex}`} x={marginLeftPx} y={marginTopPx} - width={panelInnerWidth} - height={panelInnerHeight} + width={innerWidth} + height={innerHeight} mask={`url(#${maskId(index, innerIndex)})`} className="echHighlighter__mask" /> diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts index af8645b020..a12286e243 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts @@ -9,6 +9,7 @@ import { ChartType } from '../../..'; import { CategoryKey } from '../../../../common/category'; import { Pixels, Ratio } from '../../../../common/geometry'; +import { Font } from '../../../../common/text_utils'; import { RelativeBandsPadding, SmallMultiplesSpec, SpecType } from '../../../../specs'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions'; @@ -38,7 +39,7 @@ function bandwidth(range: Pixels, bandCount: number, { outer, inner }: RelativeB /** @internal */ export const partitionMultiGeometries = createCustomCachedSelector( [getSpecs, getPartitionSpecs, getChartContainerDimensionsSelector, getTrees, getChartThemeSelector], - (specs, partitionSpecs, parentDimensions, trees, { background }): ShapeViewModel[] => { + (specs, partitionSpecs, parentDimensions, trees, { background, axes: { axisPanelTitle } }): ShapeViewModel[] => { const smallMultiplesSpecs = getSpecsFromStore(specs, ChartType.Global, SpecType.SmallMultiples); // todo make it part of configuration @@ -171,11 +172,19 @@ export const partitionMultiGeometries = createCustomCachedSelector( panelInnerHeight * style.verticalPanelPadding.outer + innerRowIndex * (panelInnerHeight * (1 + style.verticalPanelPadding.inner)); + const fontFace: Font = { + fontStyle: axisPanelTitle.fontStyle ?? 'normal', + fontFamily: axisPanelTitle.fontFamily, + fontWeight: 'normal', + fontVariant: 'normal', + textColor: axisPanelTitle.fill, + textOpacity: 1, + }; return getShapeViewModel(spec, parentDimensions, t, background.color, style, { index, innerIndex, partitionLayout: spec.config.partitionLayout ?? config.partitionLayout, - panelTitle: String(name), + smAccessorValue, top: topOuterRatio + topInnerRatio, height: panelHeightRatio, @@ -187,8 +196,13 @@ export const partitionMultiGeometries = createCustomCachedSelector( innerColumnIndex, marginLeftPx, marginTopPx, - panelInnerWidth, - panelInnerHeight, + panel: { + title: String(name), + innerWidth: panelInnerWidth, + innerHeight: panelInnerHeight, + fontFace, + fontSize: axisPanelTitle.fontSize, + }, }); }); }); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts index f3ff7a1332..bbd9a38d6a 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts @@ -19,7 +19,7 @@ export const getDebugStateSelector = createCustomCachedSelector( [partitionMultiGeometries], (geoms): DebugState => { return { - partition: geoms.reduce((acc, { panelTitle, config, quadViewModel, diskCenter }) => { + partition: geoms.reduce((acc, { panel, config, quadViewModel, diskCenter }) => { const partitions: PartitionDebugState['partitions'] = quadViewModel.map((model) => { const { dataName, depth, fillColor, value } = model; return { @@ -33,7 +33,7 @@ export const getDebugStateSelector = createCustomCachedSelector( }; }); acc.push({ - panelTitle, + panelTitle: panel.title, partitions, }); return acc; diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.ts index 7862d88951..6656584fb3 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.ts @@ -38,7 +38,7 @@ const getScreenReaderDataForPartitions = ( [{ valueFormatter }]: PartitionSpec[], shapeViewModels: ShapeViewModel[], ): PartitionSectionData[] => { - return shapeViewModels.flatMap(({ quadViewModel, layers, panelTitle }) => + return shapeViewModels.flatMap(({ quadViewModel, layers, panel }) => quadViewModel.map(({ depth, value, dataName, parent, path }) => { const label = layers[depth - 1]?.nodeLabel?.(dataName) ?? dataName; const parentValue = path.length > 1 ? path[path.length - 2].value : undefined; @@ -46,7 +46,7 @@ const getScreenReaderDataForPartitions = ( depth > 1 && parentValue ? layers[depth - 2]?.nodeLabel?.(parentValue) ?? path[path.length - 1].value : 'none'; return { - panelTitle, + panelTitle: panel.title, depth, label, parentName, diff --git a/storybook/story_wrapper.tsx b/storybook/story_wrapper.tsx index 56fc0709d7..8e2bfdb049 100644 --- a/storybook/story_wrapper.tsx +++ b/storybook/story_wrapper.tsx @@ -10,18 +10,18 @@ import { EuiMarkdownFormat, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiTex import { DecoratorFunction } from '@storybook/addons'; import React from 'react'; -import { ThemeId, ThemeProvider, BackgroundProvider } from './use_base_theme'; +import { ThemeId, ThemeIdProvider, BackgroundIdProvider } from './use_base_theme'; export const StoryWrapper: DecoratorFunction = (Story, context) => { if (!Story) return
No Story
; - const themeName = context.globals?.theme ?? ThemeId.Light; - const background = context.globals?.background; + const themeId = context.globals?.theme ?? ThemeId.Light; + const backgroundId = context.globals?.background; const markdown = context?.parameters?.markdown; return ( - - + + @@ -53,7 +53,7 @@ export const StoryWrapper: DecoratorFunction = (Story, context) => )} - - + + ); }; diff --git a/storybook/use_base_theme.ts b/storybook/use_base_theme.ts index a10569ebd6..c5134fd097 100644 --- a/storybook/use_base_theme.ts +++ b/storybook/use_base_theme.ts @@ -31,8 +31,8 @@ export type ThemeId = $Values; const ThemeContext = createContext(ThemeId.Light); const BackgroundContext = createContext(undefined); -export const ThemeProvider = ThemeContext.Provider; -export const BackgroundProvider = BackgroundContext.Provider; +export const ThemeIdProvider = ThemeContext.Provider; +export const BackgroundIdProvider = BackgroundContext.Provider; const themeMap = { [ThemeId.Light]: LIGHT_THEME, @@ -41,15 +41,19 @@ const themeMap = { [ThemeId.EUIDark]: mergePartial(DARK_THEME, EUI_CHARTS_THEME_DARK.theme, { mergeOptionalPartialValues: true }), }; -const getBackground = (colorId: string) => { - const option = (storybookParameters?.background?.options ?? []).find(({ id }) => id === colorId); - return option?.background ?? option?.color ?? '#fff'; +const getBackground = (backgroundId?: string) => { + if (!backgroundId) { + return undefined; + } + const option = (storybookParameters?.background?.options ?? []).find(({ id }) => id === backgroundId); + return option?.background ?? option?.color; }; export const useBaseTheme = (): Theme => { const themeId = useContext(ThemeContext); const backgroundId = useContext(BackgroundContext); const theme = themeMap[themeId] ?? LIGHT_THEME; + const backgroundColor = getBackground(backgroundId); return mergePartial( theme, @@ -57,7 +61,7 @@ export const useBaseTheme = (): Theme => { // eui chart theme has no margin for some reason. This is just for consistency. chartMargins: DEFAULT_CHART_MARGINS, background: { - color: backgroundId && getBackground(backgroundId), + color: backgroundColor, }, }, { mergeOptionalPartialValues: true },