{this.props.source}
-{this.props.source}
+{this.props.excerpt}
}{heroRec.context}
) : ( -{heroRec.domain}
+{heroRec.domain}
)} -{heroRec.excerpt}
{this.props.context && (
- {this.props.context}
+ {this.props.context}
)}
diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss
index e30744cc91..bc466ce645 100644
--- a/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -228,7 +228,6 @@ $item-line-height: 20;
color: $grey-50;
font-size: 13px;
- -webkit-line-clamp: 1;
}
.ds-list-item-title {
diff --git a/content-src/lib/clamp-total-lines.js b/content-src/lib/clamp-total-lines.js
deleted file mode 100644
index d09ff6f7e7..0000000000
--- a/content-src/lib/clamp-total-lines.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Adjusts line-clamps of a node's children to fill a desired number of lines.
- *
- * This is a React callback ref that should be set on a parent node that also
- * has a data-total-lines attribute. Children with "clamp" class name are
- * clamped to allow as many lines to earlier children while making sure every
- * child gets at least one line. Each child can be explicitly clamped to a max
- * lines with a data-clamp attribute.
- */
-export function clampTotalLines(parentNode) {
- // Nothing to do if the node is removed or didn't configure how many lines
- if (!parentNode || !parentNode.dataset.totalLines) {
- return;
- }
-
- // Only handle clamp-able children that are displayed (not hidden)
- const toClamp = Array.from(parentNode.querySelectorAll(".clamp"))
- .filter(child => child.scrollHeight);
-
- // Start with total allowed lines while reserving 1 line for each child
- let maxLines = parentNode.dataset.totalLines - toClamp.length + 1;
- toClamp.forEach(child => {
- // Clamp to the remaining allowed, explicit limit or the natural line count
- const lines = Math.min(maxLines,
- child.dataset.clamp || Infinity,
- child.scrollHeight / parseInt(global.getComputedStyle(child).lineHeight, 10));
- child.style.webkitLineClamp = `${lines}`;
-
- // Update the remaining line allowance less the already reserved 1 line
- maxLines -= lines - 1;
- });
-}
diff --git a/content-src/styles/_mixins.scss b/content-src/styles/_mixins.scss
index 32198779cb..f4fd3fbd82 100644
--- a/content-src/styles/_mixins.scss
+++ b/content-src/styles/_mixins.scss
@@ -9,9 +9,10 @@
}
// Note: lineHeight and fontSize should be unitless but can be derived from pixel values
-// Bug 1550624 to clean up / remove this mixin that no longer limits lines
+// Bug 1550624 to clean up / remove this mixin to avoid duplicate styles
@mixin limit-visibile-lines($line-count, $line-height, $font-size) {
font-size: $font-size * 1px;
+ -webkit-line-clamp: $line-count;
line-height: $line-height * 1px;
}
diff --git a/test/unit/content-src/lib/clamp-total-lines.test.js b/test/unit/content-src/lib/clamp-total-lines.test.js
deleted file mode 100644
index 5296fc4042..0000000000
--- a/test/unit/content-src/lib/clamp-total-lines.test.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import {clampTotalLines} from "content-src/lib/clamp-total-lines";
-import {GlobalOverrider} from "test/unit/utils";
-
-const HEIGHT = 20;
-
-describe("clampTotalLines", () => {
- let globals;
- let sandbox;
- let children;
-
- const node = () => document.createElement("div");
- function child(lines, clamp) {
- const ret = node();
- ret.classList.add("clamp");
- sandbox.stub(ret, "scrollHeight").get(() => lines * HEIGHT);
- if (clamp) {
- ret.dataset.clamp = clamp;
- }
- return ret;
- }
- function test(totalLines) {
- const parentNode = node();
- parentNode.setAttribute("data-total-lines", totalLines);
-
- // Convert children line sizes into clamp nodes with appropriate height
- children = children.map(childLines => parentNode.appendChild(
- typeof childLines === "number" ? child(childLines) : childLines));
-
- clampTotalLines(parentNode);
- }
- function check(index, lines) {
- assert.propertyVal(children[index].style, "webkitLineClamp", `${lines}`);
- }
-
- beforeEach(() => {
- globals = new GlobalOverrider();
- ({sandbox} = globals);
- children = [];
- globals.set("getComputedStyle", () => ({lineHeight: `${HEIGHT}px`}));
- });
- afterEach(() => {
- globals.restore();
- });
-
- it("should do nothing with nothing", () => {
- clampTotalLines();
- });
- it("should clamp single long child to total", () => {
- children = [10];
-
- test(6);
-
- check(0, 6);
- });
- it("should clamp single short child to its height", () => {
- children = [2];
-
- test(6);
-
- check(0, 2);
- });
- it("should clamp long children preferring first", () => {
- children = [10, 10];
-
- test(6);
-
- check(0, 5);
- check(1, 1);
- });
- it("should clamp short children to their heights", () => {
- children = [2, 2];
-
- test(6);
-
- check(0, 2);
- check(1, 2);
- });
- it("should give remainder to last child", () => {
- children = [4, 4];
-
- test(6);
-
- check(0, 4);
- check(1, 2);
- });
- it("should handle smaller totals", () => {
- children = [3, 3];
-
- test(4);
-
- check(0, 3);
- check(1, 1);
- });
- it("should allow explicit child clamp", () => {
- children = [child(3, 2), 3];
-
- test(4);
-
- check(0, 2);
- check(1, 2);
- });
- it("should skip non-clamp children", () => {
- children = [node(), 3, node(), 3];
-
- test(4);
-
- check(1, 3);
- check(3, 1);
- });
- it("should skip no-height children", () => {
- children = [0, 3, 0, 3];
-
- test(4);
-
- check(1, 3);
- check(3, 1);
- });
- it("should handle larger totals", () => {
- children = [4, 4];
-
- test(8);
-
- check(0, 4);
- check(1, 4);
- });
- it("should handle even larger totals", () => {
- children = [4, 4];
-
- test(10);
-
- check(0, 4);
- check(1, 4);
- });
- it("should clamp many children preferring earlier", () => {
- children = [2, 2, 2, 2];
-
- test(6);
-
- check(0, 2);
- check(1, 2);
- check(2, 1);
- check(3, 1);
- });
- it("should give lines to children that need them", () => {
- children = [1, 2, 3, 4];
-
- test(8);
-
- check(0, 1);
- check(1, 2);
- check(2, 3);
- check(3, 2);
- });
-});