IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-27 11:20:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Forms: Introduce new spacing variables to GrafanaTheme (#19875)

Browse Source 
* Introduce next-gen form spacing variables
* Update snapshots
This commit is contained in:
Dominik Prokop 2019-10-17 16:13:55 +02:00 committed by GitHub
parent 1e3b19acd5
commit c674fa1d79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

@ -202,6 +202,15 @@ exports[`Render should render with base threshold 1`] = `
},
"spacing": Object {
"d": "14px",
"formFieldsetMargin": "16px",
"formInputAffixPaddingHorizontal": "4px",
"formInputHeight": "32px",
"formInputMargin": "16px",
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "16px",
"formMargin": "32px",
"gutter": "30px",
"insetSquishMd": "4px 8px",
"lg": "24px",
@ -399,6 +408,15 @@ exports[`Render should render with base threshold 1`] = `
},
"spacing": Object {
"d": "14px",
"formFieldsetMargin": "16px",
"formInputAffixPaddingHorizontal": "4px",
"formInputHeight": "32px",
"formInputMargin": "16px",
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "16px",
"formMargin": "32px",
"gutter": "30px",
"insetSquishMd": "4px 8px",
"lg": "24px",

18
packages/grafana-ui/src/themes/default.ts
View File

@ -21,6 +21,8 @@ export const commonColorsPalette = {
red88: '#e02f44',
};
const SPACING_BASE = 8;
const theme: GrafanaThemeCommons = {
name: 'Grafana Default',
typography: {
@ -77,6 +79,22 @@ const theme: GrafanaThemeCommons = {
lg: '24px',
xl: '32px',
gutter: '30px',
// Next-gen forms spacing variables
// TODO: Move variables definition to respective components when implementing
formMargin: `${SPACING_BASE * 4}px`,
formFieldsetMargin: `${SPACING_BASE * 2}px`,
formLegendMargin: `${SPACING_BASE * 2}px`,
formInputHeight: `${SPACING_BASE * 4}px`,
formInputPaddingHorizontal: `${SPACING_BASE}px`,
// Used for icons do define spacing between icon and input field
// Applied on the right(prefix) or left(suffix)
formInputAffixPaddingHorizontal: `${SPACING_BASE / 2}px`,
formInputMargin: `${SPACING_BASE * 2}px`,
formLabelPadding: '0 0 0 2px',
formLabelMargin: '0 0 4px 0',
},
border: {
radius: {

14
packages/grafana-ui/src/types/theme.ts
View File

@ -61,6 +61,20 @@ export interface GrafanaThemeCommons {
lg: string;
xl: string;
gutter: string;
// Next-gen forms spacing variables
// TODO: Move variables definition to respective components when implementing
formMargin: string;
formFieldsetMargin: string;
formLegendMargin: string;
formInputHeight: string;
formInputPaddingHorizontal: string;
// Used for icons do define spacing between icon and input field
// Applied on the right(prefix) or left(suffix)
formInputAffixPaddingHorizontal: string;
formInputMargin: string;
formLabelPadding: string;
formLabelMargin: string;
};
border: {
radius: {