feat(list-header): add ionic theme styles to ionic-link and labels (#29613)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/src/components/item/item.ionic.vars.scss

@@ -0,0 +1,5 @@
+/// @prop - Padding start for the item content
+$item-ionic-padding-start: globals.$ionic-space-400;
+
+/// @prop - Padding end for the item content
+$item-ionic-padding-end: globals.$ionic-space-400;

core/src/components/list-header/list-header.ionic.scss

@@ -0,0 +1,55 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./list-header";
+@import "../item/item.ionic.vars";
+
+:host {
+  --background: transparent;
+
+  min-height: 58px;
+
+  font-size: globals.$ionic-font-size-350;
+
+  line-height: globals.$ionic-line-height-600;
+
+  /** 
+   * The focus rings from components like buttons and links
+   * are being cut off. This style ensures that the focus ring
+   * is completely visible.
+   */
+  overflow: visible;
+
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$item-ionic-padding-end});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$item-ionic-padding-start});
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$item-ionic-padding-start});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$item-ionic-padding-end});
+  }
+  /* stylelint-enable */
+}
+
+// List Header: Slotted Components
+// --------------------------------------------------
+
+// Label
+::slotted(ion-label) {
+  --color: #{globals.$ionic-color-neutral-1200};
+
+  font-weight: globals.$ionic-font-weight-medium;
+}
+
+::slotted(ion-label) ::slotted(p) {
+  font-weight: globals.$ionic-font-weight-regular;
+}
+
+// Link
+::slotted(a.ionic-link) {
+  // Needs to be !important to override the default link color
+  // that is set by the ionic theme at a global level.
+  //
+  /* stylelint-disable declaration-no-important */
+  color: globals.$ionic-color-primary-base !important;
+}

core/src/components/list-header/list-header.tsx

@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'list-header.ios.scss',
     md: 'list-header.md.scss',
-    ionic: 'list-header.md.scss',
+    ionic: 'list-header.ionic.scss',
   },
   shadow: true,
 })

core/src/components/list-header/test/basic/index.html

@@ -8,6 +8,7 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/ionic/link.ionic.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>
@@ -25,7 +26,10 @@
       <ion-content id="content">
         <ion-list>
           <ion-list-header lines="inset">
-            <ion-label>With list + button</ion-label>
+            <ion-label>
+              Title
+              <p>With list + button</p>
+            </ion-label>
             <ion-button>Clear</ion-button>
           </ion-list-header>
           <ion-item lines="none">
@@ -34,7 +38,22 @@
         </ion-list>
         <ion-list>
           <ion-list-header lines="inset">
-            <ion-label>With list, no button</ion-label>
+            <ion-label>
+              Title
+              <p>With list + link</p>
+            </ion-label>
+            <a class="ionic-link" href="#">Clear</a>
+          </ion-list-header>
+          <ion-item lines="none">
+            <ion-label color="primary">List item</ion-label>
+          </ion-item>
+        </ion-list>
+        <ion-list>
+          <ion-list-header lines="inset">
+            <ion-label>
+              Title
+              <p>With list, no button, no link</p>
+            </ion-label>
           </ion-list-header>
           <ion-item>
             <ion-label color="primary">List item</ion-label>

core/src/components/list-header/test/basic/list-header.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('list-header: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/list-header/test/basic`, config);
@@ -18,7 +18,7 @@ configs().forEach(({ title, screenshot, config }) => {
  * make sure the safe area padding is applied only to that side
  * regardless of direction
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('list-header: basic'), () => {
     test.describe('safe area', () => {
       test('should have padding added by the safe area', async ({ page }) => {