github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-23 11:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use string formatted rgba label colors

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-06-25 18:28:49 +01:00
committed by Łukasz Mierzwa
parent fcb207f397
commit aab937adb8
7 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/Components/Labels/FilterInputLabel/index.test.js
+2 -2
View File
@@ -18,7 +18,7 @@ const MockColors = () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 200,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
};
@@ -112,7 +112,7 @@ describe("<FilterInputLabel /> style", () => {
MockColors();
const tree = ShallowLabel("=", true, true, 1);
expect(tree.props().style).toMatchObject({
backgroundColor: "rgba(4, 5, 6, 200)",
backgroundColor: "rgba(4,5,6,200)",
});
});
ui/src/Components/Labels/FilteringLabel/index.test.js
+2 -2
View File
@@ -65,7 +65,7 @@ describe("<FilteringLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 125,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = MountedFilteringLabel("foo", "bar");
@@ -76,7 +76,7 @@ describe("<FilteringLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 200,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = MountedFilteringLabel("foo", "bar");
ui/src/Components/Labels/HistoryLabel/index.test.js
+2 -2
View File
@@ -40,7 +40,7 @@ describe("<HistoryLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 125,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = ShallowHistoryLabel("foo", "=", "bar").find(
@@ -53,7 +53,7 @@ describe("<HistoryLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 200,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = ShallowHistoryLabel("foo", "=", "bar").find(
ui/src/Components/Labels/StaticLabel/index.test.js
+2 -2
View File
@@ -28,7 +28,7 @@ describe("<StaticLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 125,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = MountedStaticLabel();
@@ -41,7 +41,7 @@ describe("<StaticLabel />", () => {
alertStore.data.colors["foo"] = {
bar: {
brightness: 200,
background: { red: 4, green: 5, blue: 6, alpha: 200 },
background: "rgba(4,5,6,200)",
},
};
const tree = MountedStaticLabel();
ui/src/Components/Labels/Utils.js
+1 -8
View File
@@ -31,14 +31,7 @@ const GetClassAndStyle = (alertStore, name, value, extraClass, baseClass) => {
} else {
const c = alertStore.data.getColorData(name, value);
if (c) {
// if there's color information use it
data.style["backgroundColor"] = `rgba(${[
c.background.red,
c.background.green,
c.background.blue,
c.background.alpha,
].join(", ")})`;
data.style["backgroundColor"] = c.background;
data.colorClassNames.push(
isBackgroundDark(c.brightness)
? "components-label-dark"
ui/src/Components/NavBar/index.stories.js
+2 -2
View File
@@ -31,13 +31,13 @@ storiesOf("NavBar", module).add("NavBar", () => {
cluster: {
staging: {
brightness: 205,
background: { red: 246, green: 176, blue: 247, alpha: 255 },
background: "rgba(246,176,247,255)",
},
},
region: {
AF: {
brightness: 111,
background: { red: 115, green: 101, blue: 152, alpha: 255 },
background: "rgba(115,101,152,255)",
},
},
};
ui/src/__mocks__/Stories.js
+7 -7
View File
@@ -76,33 +76,33 @@ const MockGrid = (alertStore) => {
group: {
group1: {
brightness: 50,
background: { red: 178, green: 55, blue: 247, alpha: 255 },
background: "rgba(178,55,247,255)",
},
group2: {
brightness: 50,
background: { red: 200, green: 100, blue: 66, alpha: 255 },
background: "rgba(200,100,66,255)",
},
group3: {
brightness: 205,
background: { red: 246, green: 176, blue: 247, alpha: 255 },
background: "rgba(246,176,247,255)",
},
group4: {
brightness: 111,
background: { red: 115, green: 101, blue: 152, alpha: 255 },
background: "rgba(115,101,152,255)",
},
},
instance: {
instance1: {
brightness: 50,
background: { red: 111, green: 65, blue: 40, alpha: 255 },
background: "rgba(111,65,40,255)",
},
instance2: {
brightness: 50,
background: { red: 66, green: 99, blue: 66, alpha: 255 },
background: "rgba(66,99,66,255)",
},
instance3: {
brightness: 150,
background: { red: 66, green: 250, blue: 123, alpha: 255 },
background: "rgba(66,250,123,255)",
},
},
};