fix(label): text overflow for slotted headings (#20690)

fixes #17087
ionic-team · Mar 11, 2020 · 4d34ce6 · 4d34ce6
1 parent d53595e
commit 4d34ce6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
@@ -79,3 +79,17 @@
 :host(.label-no-animate.label-floating) {
   transition: none;
 }
+
+// Headings
+// --------------------------------------------------
+
+::slotted(*) h1,
+::slotted(*) h2,
+::slotted(*) h3,
+::slotted(*) h4,
+::slotted(*) h5,
+::slotted(*) h6 {
+  text-overflow: inherit;
+
+  overflow: inherit;
+}
diff --git a/core/src/components/label/test/headings/e2e.ts b/core/src/components/label/test/headings/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('label: headings', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/label/test/headings?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/label/test/headings/index.html b/core/src/components/label/test/headings/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Label - Headings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Label - Headings</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-label>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>