github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1288 from prymitive/fix-margin-between-labels

Browse Source 
fix(ui): margin should only be set between elements
This commit is contained in:
Łukasz Mierzwa
2019-12-23 15:18:59 +00:00
committed by GitHub
parent 8545639ea5 5b64a4699a
commit 6dbcc3e68d
8 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
View File

@@ -10,7 +10,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -41,7 +41,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -88,7 +88,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
aria-describedby=\\"tippy-tooltip-7\\"
data-original-title=\\"This alert is inhibited by other alerts\\"
>
<span class=\\"mr-1 badge badge-light components-label\\">
<span class=\\"badge badge-light components-label\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -138,7 +138,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
<a href=\\"http://localhost\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -170,7 +170,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -201,7 +201,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -275,7 +275,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
<a href=\\"http://localhost\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"

2
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
View File

@@ -103,7 +103,7 @@ const Alert = observer(
.map(am => am.inhibitedBy.length)
.reduce((sum, x) => sum + x) > 0 ? (
<TooltipWrapper title="This alert is inhibited by other alerts">
<span className="mr-1 badge badge-light components-label">
<span className="badge badge-light components-label">
<FontAwesomeIcon className="text-success" icon={faVolumeMute} />
</span>
</TooltipWrapper>

6
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
View File

@@ -5,7 +5,7 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
<a href=\\"http://localhost/foo\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -32,7 +32,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
class
style=\\"display:inline-block;max-width:100%\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -59,7 +59,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
class
style=\\"display:inline-block;max-width:100%\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"

4
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
View File

@@ -61,7 +61,7 @@ const RenderNonLinkAnnotation = observer(
const { name, value } = this.props;
const className =
"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
if (!this.toggle.visible) {
return (
@@ -110,7 +110,7 @@ const RenderLinkAnnotation = ({ name, value }) => {
href={value}
target="_blank"
rel="noopener noreferrer"
className="components-label components-label-with-hover badge mr-1 components-grid-annotation-link"
className="components-label components-label-with-hover badge components-grid-annotation-link"
>
<FontAwesomeIcon icon={faExternalLinkAlt} /> {name}
</a>

12
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -10,7 +10,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -41,7 +41,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -123,7 +123,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
<a href=\\"http://link.example.com\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -155,7 +155,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-25\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -186,7 +186,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-26\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -268,7 +268,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<a href=\\"http://link.example.com\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"

2
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -260,7 +260,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<a href=\\"http://example.com/#/silences/04d37636-2350-4878-b382-e0b50353230f\\"
target=\\"_blank\\"
rel=\\"noopener noreferrer\\"
class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"

7
ui/src/Styles/Components/AlertGroup.scss
View File

@@ -14,3 +14,10 @@
.card-body.components-grid-alertgrid-card {
background-color: $alertgroup-body-bg !important;
}
.components-label:not(:last-child),
div[data-tooltipped]:not(:last-child) > .components-label,
.components-grid-annotation:not(:last-child),
div[data-tooltipped]:not(:last-child) > .components-grid-annotation {
margin-right: 0.25rem;
}

2
ui/src/Styles/Components/BaseLabel.scss
View File

@@ -6,8 +6,6 @@
.components-label {
border: 1px solid transparent;
margin-right: 0.25rem;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;