Theme: Typography variables overhaul, theme cleanup, improvents to storybook ThemeColors component (#23531)

* Began text theme refactoring

* Consolidating blue varaibles

* Theme: Typography overhaul and theme cleanup

* Theme updates, alignment and fixes

* Updated snapshots

* Restored template variable class

* Updates

* added container

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2020-04-14 11:32:14 +02:00
committed by GitHub
parent 16bc5c118d
commit bc60f9c403
70 changed files with 457 additions and 418 deletions

View File

@@ -26,9 +26,7 @@ describe('Dimensions', () => {
/>
);
expect(wrapper.html()).toEqual(
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
});
});
@@ -42,9 +40,7 @@ describe('Dimensions', () => {
loadValues={() => Promise.resolve<SelectableStrings>([])}
/>
);
expect(wrapper.html()).toEqual(
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
});
});
});

View File

@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
allowCustomValue
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
loadOptions={() => loadKeys().then(excludeUsedKeys)}

View File

@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
<Segment
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
allowCustomValue

View File

@@ -41,7 +41,7 @@ Array [
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"
/>
</svg>
</div>