Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme function #73451

Merged
merged 13 commits into from
Aug 11, 2020
Original file line number Diff line number Diff line change
Expand Up @@ -64,21 +64,22 @@ export const font: ExpressionFunctionFont = {
inputTypes: ['null'],
args: {
align: {
default: 'left',
default: '{ theme "font.align" default="left" }',
help: i18n.translate('expressions.functions.font.args.alignHelpText', {
defaultMessage: 'The horizontal text alignment.',
}),
options: Object.values(TextAlignment),
types: ['string'],
},
color: {
default: `{ theme "font.color" }`,
help: i18n.translate('expressions.functions.font.args.colorHelpText', {
defaultMessage: 'The text color.',
}),
types: ['string'],
},
family: {
default: `"${openSans.value}"`,
default: `{ theme "font.family" default="${openSans.value}" }`,
help: i18n.translate('expressions.functions.font.args.familyHelpText', {
defaultMessage: 'An acceptable {css} web font string',
values: {
Expand All @@ -88,38 +89,38 @@ export const font: ExpressionFunctionFont = {
types: ['string'],
},
italic: {
default: false,
default: `{ theme "font.italic" default=false }`,
help: i18n.translate('expressions.functions.font.args.italicHelpText', {
defaultMessage: 'Italicize the text?',
}),
options: [true, false],
types: ['boolean'],
},
lHeight: {
default: null,
default: `{ theme "font.lHeight" }`,
aliases: ['lineHeight'],
help: i18n.translate('expressions.functions.font.args.lHeightHelpText', {
defaultMessage: 'The line height in pixels',
}),
types: ['number', 'null'],
},
size: {
default: 14,
default: `{ theme "font.size" default=14 }`,
help: i18n.translate('expressions.functions.font.args.sizeHelpText', {
defaultMessage: 'The font size in pixels',
}),
types: ['number'],
},
underline: {
default: false,
default: `{ theme "font.underline" default=false }`,
help: i18n.translate('expressions.functions.font.args.underlineHelpText', {
defaultMessage: 'Underline the text?',
}),
options: [true, false],
types: ['boolean'],
},
weight: {
default: 'normal',
default: `{ theme "font.weight" default="normal" }`,
help: i18n.translate('expressions.functions.font.args.weightHelpText', {
defaultMessage: 'The font weight. For example, {list}, or {end}.',
values: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { kibanaContextFunction } from './kibana_context';
import { variableSet } from './var_set';
import { variable } from './var';
import { AnyExpressionFunctionDefinition } from '../types';
import { theme } from './theme';

export const functionSpecs: AnyExpressionFunctionDefinition[] = [
clog,
Expand All @@ -32,6 +33,7 @@ export const functionSpecs: AnyExpressionFunctionDefinition[] = [
kibanaContextFunction,
variableSet,
variable,
theme,
];

export * from './clog';
Expand All @@ -40,3 +42,4 @@ export * from './kibana';
export * from './kibana_context';
export * from './var_set';
export * from './var';
export * from './theme';
66 changes: 66 additions & 0 deletions src/plugins/expressions/common/expression_functions/specs/theme.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { i18n } from '@kbn/i18n';
import { get } from 'lodash';
import { ExpressionFunctionDefinition } from '../types';

interface Arguments {
variable: string;
default: string | number | boolean;
}

type Output = string | number | boolean | undefined;

export type ExpressionFunctionTheme = ExpressionFunctionDefinition<
'theme',
null,
Arguments,
Output
>;
Comment on lines +31 to +36
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should also get added to the mapping of all function definitions provided by the expressions plugin in src/plugins/expressions/common/expression_functions/types.ts

(I'm wondering if we should just get rid of this mapping; it feels like something that will be easy to forget to update?)


export const theme: ExpressionFunctionTheme = {
name: 'theme',
aliases: [],
help: i18n.translate('expressions.functions.themeHelpText', {
defaultMessage: 'Reads a theme setting.',
}),
inputTypes: ['null'],
args: {
variable: {
aliases: ['_'],
help: i18n.translate('expressions.functions.theme.args.variableHelpText', {
defaultMessage: 'theme variable to read.',
ppisljar marked this conversation as resolved.
Show resolved Hide resolved
}),
required: true,
types: ['string'],
},
default: {
help: i18n.translate('expressions.functions.font.args.defaultHelpText', {
ppisljar marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage: 'default value in case theming info is not available.',
}),
types: ['string', 'number'],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just allow everything here? For palettes it might be nice at some point to return more than just a simple value at once - this would give us more flexibility in using theme variables.

An example would be the palette params - the shape can be different for different palettes, so we can't always flatten them out into separate args

Same for output type of course.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ppisljar you gave a plus 1 but didn't change the code - do you have concerns with this? I'm open for discussion, but I'm not seeing why we shouldn't allow all types here

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i did, for some reason clicking the link in above comment takes you to old code without this change. going to files to view all changes you can confirm that type limitation was removed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed that, sorry. It seems like the Output typescript type is still more restrictive, but that's just a nit as it should only be relevant for the implementation of the function itself.

},
},
fn: (input, args, handlers) => {
// currently we use variable `theme`, but external theme service would be preferable
const vars = handlers.variables.theme || {};
return get(vars, args.variable, args.default);
},
};