Skip to content

[Visual Refresh] Add forms.maxWidth token #8221

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.

Sign up for GitHub

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

Merged
mgadewoll merged 1 commit into from
Dec 11, 2024
Merged

[Visual Refresh] Add forms.maxWidth token #8221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/eui-theme-borealis/src/variables/_forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { computed, mathWithUnits } from '@elastic/eui-theme-common';
import {
dark_background_colors,
dark_border_colors,
Expand Down Expand Up @@ -60,6 +61,10 @@ const _dark_forms = {
};

export const forms = {
maxWidth: computed(
([base]) => mathWithUnits(base, (x) => x * 25),
['size.base']
),
LIGHT: _forms,
DARK: _dark_forms,
};
1 change: 1 addition & 0 deletions packages/eui-theme-common/src/global_styling/functions/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
*/

export * from './size';
export * from './math';
0 ...src/global_styling/functions/math.test.ts → ...src/global_styling/functions/math.test.ts
View file
Open in desktop
File renamed without changes.
60 changes: 60 additions & 0 deletions packages/eui-theme-common/src/global_styling/functions/math.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* 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.
*/

/**
* Utility for performing math callbacks on a string with CSS units
* and returning a string with its unit preserved.
*
* Example usage:
* mathWithUnits('4px', (x) => x / 2) = '2px';
* mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
* mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
*/
type ValueTypes = string | number | undefined; // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars

export const mathWithUnits = (
values: ValueTypes | ValueTypes[], // Can accept a single input or array of inputs
callback: (...args: number[]) => number, // Can be multiplication, division, addition, etc.
unit: string = '' // Optional: allow specifying an override unit to return
) => {
if (!Array.isArray(values)) values = [values];

const foundNumericValues: number[] = [];
let foundUnit = '';

values.forEach((value) => {
if (typeof value === 'string') {
const regex = /(?<value>-?[\d.]+)(?<unit>%|[a-zA-Z]*)/;
const matches = regex.exec(value);

const numericValue = Number(matches?.groups?.value);

if (!isNaN(numericValue)) {
foundNumericValues.push(numericValue);
} else {
throw new Error('No valid numeric value found');
}

if (!unit && matches?.groups?.unit) {
if (!foundUnit) {
foundUnit = matches.groups.unit;
} else if (foundUnit !== matches.groups.unit) {
throw new Error(
'Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead'
);
}
}
} else if (typeof value === 'number') {
foundNumericValues.push(value);
} else {
throw new Error('Invalid value type - pass a string or number');
}
});

return `${callback(...foundNumericValues)}${unit || foundUnit}`;
};
4 changes: 2 additions & 2 deletions packages/eui-theme-common/src/global_styling/variables/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
import { _EuiThemeButtonColors } from './buttons';
import { _EuiThemeFormColors } from './forms';
import { _EuiThemeForm, _EuiThemeFormColors } from './forms';

export type _EuiThemeComponentColors = {
buttonGroupBorderColor: ColorModeSwitch;
Expand Down Expand Up @@ -122,7 +122,7 @@ export type _EuiThemeComponentColors = {

export type _EuiThemeComponents = {
buttons: StrictColorModeSwitch<_EuiThemeButtonColors>;
forms: StrictColorModeSwitch<_EuiThemeFormColors>;
forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
/**
* internal-only key that holds temporary tokens used while migrating themes
*/
Expand Down
4 changes: 4 additions & 0 deletions packages/eui-theme-common/src/global_styling/variables/forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@

import { ColorModeSwitch } from '../types';

export type _EuiThemeForm = {
maxWidth: string;
};

export type _EuiThemeFormColors = {
background: ColorModeSwitch;
backgroundDisabled: ColorModeSwitch;
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/form/form.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
// don't need the extra overhead/color computing expense of every form var.
// For microperf, we're making this its own util
export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
mathWithUnits(euiTheme.size.base, (x) => x * 25);
euiTheme.components.forms.maxWidth;

export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
Expand Down
53 changes: 1 addition & 52 deletions packages/eui/src/global_styling/functions/math.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,4 @@
* Side Public License, v 1.
*/

/**
* Utility for performing math callbacks on a string with CSS units
* and returning a string with its unit preserved.
*
* Example usage:
* mathWithUnits('4px', (x) => x / 2) = '2px';
* mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
* mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
*/
type ValueTypes = string | number | undefined; // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars

export const mathWithUnits = (
values: ValueTypes | ValueTypes[], // Can accept a single input or array of inputs
callback: (...args: number[]) => number, // Can be multiplication, division, addition, etc.
unit: string = '' // Optional: allow specifying an override unit to return
) => {
if (!Array.isArray(values)) values = [values];

const foundNumericValues: number[] = [];
let foundUnit = '';

values.forEach((value) => {
if (typeof value === 'string') {
const regex = /(?<value>-?[\d.]+)(?<unit>%|[a-zA-Z]*)/;
const matches = regex.exec(value);

const numericValue = Number(matches?.groups?.value);

if (!isNaN(numericValue)) {
foundNumericValues.push(numericValue);
} else {
throw new Error('No valid numeric value found');
}

if (!unit && matches?.groups?.unit) {
if (!foundUnit) {
foundUnit = matches.groups.unit;
} else if (foundUnit !== matches.groups.unit) {
throw new Error(
'Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead'
);
}
}
} else if (typeof value === 'number') {
foundNumericValues.push(value);
} else {
throw new Error('Invalid value type - pass a string or number');
}
});

return `${callback(...foundNumericValues)}${unit || foundUnit}`;
};
export { mathWithUnits } from '@elastic/eui-theme-common';
6 changes: 6 additions & 0 deletions packages/eui/src/themes/amsterdam/global_styling/variables/_forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
* Side Public License, v 1.
*/

import { mathWithUnits } from '@elastic/eui-theme-common';

import { computed } from '../../../../services/theme/utils';
import {
darken,
Expand Down Expand Up @@ -122,6 +124,10 @@ const _dark_forms = {
};

export const forms = {
maxWidth: computed(
([base]) => mathWithUnits(base, (x) => x * 25),
['size.base']
),
LIGHT: _forms,
DARK: _dark_forms,
};
Loading