public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Buttons: Improves vertical alignment in buttons (#23030)

Browse Source 
* Buttons: Improves vertical alignment in buttons

* Updated snapshot

* Fixed strict null errors
This commit is contained in:
Torkel Ödegaard
2020-03-25 09:21:44 +01:00
committed by GitHub
parent d825b9e799
commit e8efd17ea9
9 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/datasource.ts
+2 -1
View File
@@ -184,6 +184,7 @@ export abstract class DataSourceApi<
constructor(instanceSettings: DataSourceInstanceSettings<TOptions>) {
this.name = instanceSettings.name;
this.id = instanceSettings.id;
this.meta = {} as DataSourcePluginMeta;
}
/**
@@ -248,7 +249,7 @@ export abstract class DataSourceApi<
/**
* static information about the datasource
*/
meta?: DataSourcePluginMeta;
meta: DataSourcePluginMeta;
/**
* Used by alerting to check if query contains template variables
packages/grafana-ui/src/components/Button/__snapshots__/Button.test.tsx.snap
+2 -2
View File
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button renders correct html 1`] = `"<button class=\\"css-1kiu3dy-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
exports[`Button renders correct html 1`] = `"<button class=\\"css-12s5hlm-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-1kiu3dy-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;
exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-12s5hlm-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-1rgbe4\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;
packages/grafana-ui/src/components/Button/styles.ts
+5 -5
View File
@@ -84,7 +84,7 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, textAndIco
font-weight: ${fontWeight};
font-size: ${fontSize};
font-family: ${theme.typography.fontFamily.sansSerif};
line-height: ${theme.typography.lineHeight.xs};
line-height: ${theme.typography.lineHeight.md};
padding: ${padding};
vertical-align: middle;
cursor: pointer;
@@ -120,7 +120,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
switch (size) {
case 'sm': {
return {
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
padding: `0 ${theme.spacing.sm}`,
fontSize: theme.typography.size.sm,
height: theme.height.sm,
fontWeight: theme.typography.weight.semibold,
@@ -131,7 +131,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
const leftPadding = textAndIcon ? theme.spacing.sm : theme.spacing.md;
return {
padding: `${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${leftPadding}`,
padding: `0 ${theme.spacing.md} 0 ${leftPadding}`,
fontSize: theme.typography.size.md,
height: theme.height.md,
fontWeight: theme.typography.weight.semibold,
@@ -142,7 +142,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
const leftPadding = textAndIcon ? theme.spacing.md : theme.spacing.lg;
return {
padding: `${theme.spacing.md} ${theme.spacing.lg} ${theme.spacing.md} ${leftPadding}`,
padding: `0 ${theme.spacing.lg} 0 ${leftPadding}`,
fontSize: theme.typography.size.lg,
height: theme.height.lg,
fontWeight: theme.typography.weight.regular,
@@ -153,7 +153,7 @@ const calculateMeasures = (theme: GrafanaTheme, size: ButtonSize, textAndIcon: b
const leftPadding = textAndIcon ? theme.spacing.sm : theme.spacing.md;
return {
padding: `${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${leftPadding}`,
padding: `0 ${theme.spacing.md} 0 ${leftPadding}`,
fontSize: theme.typography.size.base,
height: theme.height.md,
fontWeight: theme.typography.weight.regular,
packages/grafana-ui/src/components/Forms/Button.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant }: StylePro
align-items: center;
font-weight: ${theme.typography.weight.semibold};
font-family: ${theme.typography.fontFamily.sansSerif};
line-height: ${theme.typography.lineHeight.sm};
line-height: ${theme.typography.lineHeight.md};
font-size: ${fontSize};
padding: ${padding};
height: ${height};
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+2 -2
View File
@@ -175,8 +175,8 @@ $zindex-typeahead: ${theme.zIndex.typeahead};
//
$btn-padding-x: 14px !default;
$btn-padding-y: 8px !default;
$btn-line-height: 1 !default;
$btn-padding-y: 0 !default;
$btn-line-height: $line-height-base;
$btn-font-weight: ${theme.typography.weight.semibold} !default;
$btn-padding-x-sm: 7px !default;