Commit e8efd17e by Torkel Ödegaard Committed by GitHub

Buttons: Improves vertical alignment in buttons (#23030)

* Buttons: Improves vertical alignment in buttons

* Updated snapshot

* Fixed strict null errors
parent d825b9e7
......@@ -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
......
// 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>"`;
......@@ -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,
......
......@@ -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};
......
......@@ -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;
......
......@@ -81,9 +81,9 @@ export class DashboardExporter {
// add data source type to require list
requires['datasource' + ds.meta?.id] = {
type: 'datasource',
id: ds.meta?.id,
name: ds.meta?.name,
version: ds.meta?.info.version || '1.0.0',
id: ds.meta.id,
name: ds.meta.name,
version: ds.meta.info.version || '1.0.0',
};
// if used via variable we can skip templatizing usage
......
......@@ -178,8 +178,8 @@ $zindex-typeahead: 1060;
//
$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: 500 !default;
$btn-padding-x-sm: 7px !default;
......
......@@ -117,8 +117,9 @@ i.navbar-page-btn__search {
display: flex;
align-items: center;
font-weight: $btn-font-weight;
padding: 6px $space-sm;
line-height: 18px;
padding: 0 $space-sm;
line-height: 32px;
height: 32px;
color: $text-muted;
border: 1px solid $navbar-button-border;
margin-left: $space-xs;
......@@ -162,12 +163,10 @@ i.navbar-page-btn__search {
}
&--tight {
padding: 7px 4px;
padding: 0px 4px;
.fa {
font-size: 14px;
position: relative;
top: 1px;
}
}
......
......@@ -3,7 +3,8 @@
echo -e "Collecting code stats (typescript errors & more)"
ERROR_COUNT_LIMIT=812
ERROR_COUNT_LIMIT=798
DIRECTIVES_LIMIT=172
CONTROLLERS_LIMIT=139
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment