From da156f0229d0f326be434d4a24c2ce3e945abe2f Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 22 Aug 2026 01:40:01 +0900 Subject: [PATCH 1/6] fix(list): support structured inset content --- .../app/settings/settings-page.component.html | 74 +++++-------------- .../app/settings/settings-page.component.scss | 25 ++++++- .../app/settings/settings-page.component.ts | 4 +- src/styles/components/ion-list.scss | 2 +- src/styles/md-ion-list-inset.scss | 2 +- src/styles/utils/theme-list-inset.scss | 27 ++++++- 6 files changed, 70 insertions(+), 64 deletions(-) diff --git a/demo/src/app/settings/settings-page.component.html b/demo/src/app/settings/settings-page.component.html index 2f6db3af..88c3d9f7 100644 --- a/demo/src/app/settings/settings-page.component.html +++ b/demo/src/app/settings/settings-page.component.html @@ -20,7 +20,9 @@ - + + Masahiko Sakakibara +
Masahiko Sakakibara Apple Account, iCloud+, and more @@ -29,7 +31,8 @@ - + + Support ios26 structured @@ -38,22 +41,22 @@ WiFi - ionic-framework-a + ionic-framework-a Bluetooth - On + On Cellular - Off + Off Personal Hotspot - Off + Off @@ -61,55 +64,18 @@ - + + Support md3 structured - - - General - - - - Accessibility - - - - Action Button - - - - Apple Intelligence & Siri - - - - Camera - - - - Home Screen & App Library - - - - Search - - - - StandBy - - - - - - - - Screen Time - - - - - - - - Privacy & Security + + + Network & internet + Mobile, Wi-Fi, hotspot + + + + Connected devices + Bluetooth, pairing diff --git a/demo/src/app/settings/settings-page.component.scss b/demo/src/app/settings/settings-page.component.scss index 2ce4f409..bad2a8ca 100644 --- a/demo/src/app/settings/settings-page.component.scss +++ b/demo/src/app/settings/settings-page.component.scss @@ -7,15 +7,32 @@ ion-list.list-inset { } ion-item > ion-icon[slot='start'] { - border-radius: 8px; - padding: 4px; - margin-right: 14px; color: var(--ion-background-color, #fff); - font-size: 1.3rem; +} + +.support-ios-structured { + ion-item > ion-icon[slot='start'] { + padding: 4px; + font-size: 1.3rem; + margin-right: 14px; + border-radius: 8px; + } +} + +.support-md-structured { + ion-item > ion-icon[slot='start'] { + padding: 8px; + width: calc(40px - 16px); + height: calc(40px - 16px); + margin-right: 16px; + border-radius: 50%; + background: var(--ion-color-light-shade); + } } ion-list.user-info { margin-top: 0; + margin-bottom: 0; ion-avatar { width: 64px; height: 64px; diff --git a/demo/src/app/settings/settings-page.component.ts b/demo/src/app/settings/settings-page.component.ts index 243282d1..22dfc700 100644 --- a/demo/src/app/settings/settings-page.component.ts +++ b/demo/src/app/settings/settings-page.component.ts @@ -10,7 +10,6 @@ import { IonFooter, IonHeader, IonIcon, - IonImg, IonItem, IonItemGroup, IonLabel, @@ -22,6 +21,7 @@ import { IonToolbar, Platform, } from '@demo/ionic'; +import { IonListHeader } from '@ionic/angular'; @Component({ selector: 'app-settings-page', @@ -43,10 +43,10 @@ import { IonSearchbar, IonBackButton, IonAvatar, - IonImg, IonNote, IonItemGroup, IonToggle, + IonListHeader, ], }) export class SettingsPage { diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss index fb6498d4..e4ace7f5 100644 --- a/src/styles/components/ion-list.scss +++ b/src/styles/components/ion-list.scss @@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) { } ion-list.list-inset.ios:not(.ios26-disabled) { - @include theme-list-inset.ion-list-inset(); + @include theme-list-inset.ion-list-inset(20px); ion-radio-group, ion-reorder-group { diff --git a/src/styles/md-ion-list-inset.scss b/src/styles/md-ion-list-inset.scss index e5d569cd..199517f7 100644 --- a/src/styles/md-ion-list-inset.scss +++ b/src/styles/md-ion-list-inset.scss @@ -1,7 +1,7 @@ @use 'utils/theme-list-inset'; ion-list.list-inset.md { - @include theme-list-inset.ion-list-inset(); + @include theme-list-inset.ion-list-inset(8px); ion-item-group > ion-item { & > ion-input[labelplacement='floating'] { diff --git a/src/styles/utils/theme-list-inset.scss b/src/styles/utils/theme-list-inset.scss index e7368e70..9c20ea70 100644 --- a/src/styles/utils/theme-list-inset.scss +++ b/src/styles/utils/theme-list-inset.scss @@ -1,4 +1,4 @@ -@mixin ion-list-inset() { +@mixin ion-list-inset($note-inset) { background: transparent; ion-list-header { @@ -64,6 +64,29 @@ } ion-item { + &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) { + &::part(container) { + flex-direction: column; + justify-content: center; + padding-top: 8px; + padding-bottom: 8px; + } + & > ion-label, + & > ion-note { + width: auto; + align-self: flex-start; + } + & > ion-label { + margin: 0; + font-size: 1.2rem; + transform: translateY(2px); + } + & > ion-note { + font-size: 0.9rem; + transform: translateY(-2px); + } + } + ion-text[slot='end'] { padding-left: 8px; } @@ -96,6 +119,6 @@ color: var(--ion-color-medium-tint); font-size: 0.9rem; display: block; - margin: 8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left)); + margin: 8px calc(var(--ion-safe-area-right, 0) + $note-inset) 8px calc(var(--ion-safe-area-left, 0) + $note-inset); } } From 8a44b55df8419ee8962dfd2ef2e45fd322619ad5 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 22 Aug 2026 01:43:29 +0900 Subject: [PATCH 2/6] chore(demo): use shared Ionic exports --- demo/src/app/settings/settings-page.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/src/app/settings/settings-page.component.ts b/demo/src/app/settings/settings-page.component.ts index 22dfc700..887be049 100644 --- a/demo/src/app/settings/settings-page.component.ts +++ b/demo/src/app/settings/settings-page.component.ts @@ -20,8 +20,8 @@ import { IonToggle, IonToolbar, Platform, + IonListHeader, } from '@demo/ionic'; -import { IonListHeader } from '@ionic/angular'; @Component({ selector: 'app-settings-page', From ef1a7e9976003c1fae1381c811df5ac3b8f3b103 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 22 Aug 2026 01:44:57 +0900 Subject: [PATCH 3/6] chore(demo): update inset list examples --- .../index/pages/item-list/item-list.page.html | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/demo/src/app/index/pages/item-list/item-list.page.html b/demo/src/app/index/pages/item-list/item-list.page.html index 5a330714..84a91737 100644 --- a/demo/src/app/index/pages/item-list/item-list.page.html +++ b/demo/src/app/index/pages/item-list/item-list.page.html @@ -1,8 +1,6 @@ - - - - + + item-list @@ -17,11 +15,12 @@

item-list

- This page is a component demo for @rdlabo/ionic-theme-ios26. + This page is a component demo for @rdlabo/ionic-theme-md3. + Inset List @@ -38,24 +37,20 @@

item-list

 - 保存 + Inset List 2 Lines - Item + Basic Item + Basic Item note + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + Multi-line note - - - - - Radio item1 - - - - - Radio item2 - - + Note additional information. From 7799712b4e4db1f4ef23fd51878fc10653a8ffee Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 22 Aug 2026 02:03:05 +0900 Subject: [PATCH 4/6] fix(list): refine two-line item spacing --- src/styles/utils/theme-list-inset.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/styles/utils/theme-list-inset.scss b/src/styles/utils/theme-list-inset.scss index 9c20ea70..d3418750 100644 --- a/src/styles/utils/theme-list-inset.scss +++ b/src/styles/utils/theme-list-inset.scss @@ -68,8 +68,9 @@ &::part(container) { flex-direction: column; justify-content: center; - padding-top: 8px; - padding-bottom: 8px; + padding-top: 14px; + padding-bottom: 14px; + min-height: 64px; } & > ion-label, & > ion-note { @@ -78,12 +79,12 @@ } & > ion-label { margin: 0; - font-size: 1.2rem; - transform: translateY(2px); + font-weight: 500; + font-size: 1.15rem; + line-height: 0.9rem; } & > ion-note { - font-size: 0.9rem; - transform: translateY(-2px); + font-size: 0.85rem; } } From 7dac9b1b917abde07723ffc6db173b52671909fc Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 22 Aug 2026 02:15:09 +0900 Subject: [PATCH 5/6] docs(demo): document two-line inset items --- demo/src/app/docs/docs-page.component.html | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/demo/src/app/docs/docs-page.component.html b/demo/src/app/docs/docs-page.component.html index b04ab444..e996248c 100644 --- a/demo/src/app/docs/docs-page.component.html +++ b/demo/src/app/docs/docs-page.component.html @@ -35,6 +35,32 @@

ion-button[fill=solid][type=submit]

+ + +
+

ion-list[inset] ion-label + ion-note

+

+ When an inset list item contains an ion-label and an ion-note without slots, they are displayed + vertically as a two-line item. +

+ + <ion-list [inset]="true">
+   <ion-item>
+     <ion-label>Network & internet</ion-label>
+     <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+   </ion-item>
+ </ion-list> + + + + Network & internet + Mobile, Wi-Fi, hotspot + + +
+ + +
From 4754431b24edd618f8f47f9c1977400417aa5c02 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 21 Aug 2026 17:45:43 +0000 Subject: [PATCH 6/6] chore: update E2E screenshots --- .../item-list-dark.png | Bin 66647 -> 79473 bytes .../item-list.png | Bin 70123 -> 84530 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png index 08d60a217af8f317e63c3663736e95597d69a4f2..6f3ef39daeb0f6acd4c5353f1972d853cf3d7437 100644 GIT binary patch literal 79473 zcmce-c|6qd_dhxt zk4H2YXqs+bprOCX9UC7TzZJVx77V^6JV)GIZ8YB4Wbv+>k6Gat6RW8bXc~4QR8@5w zV(B=*Js|H+_&EQ)8r{EkcGGuh|GQuL*J;jf_?_WS;&@TShq{=|x@7pT*N<=SGs*}5 z`kG8h0yAf=>T<08xbNYvrDU(<7C-5zm-nUp&%(+Idcgvgu1OGgY_e#awB%1g@k-3X zKC`O}n4CMiIAJD)PI#t`1kkscN6ZdqFFAFJXCf`3V8gA4fdm$-%B^38!^^z zL6?5FI?n&|=g;vl7%VBN2t39gVRD{pO8xv#o;+dyuAiDw%l?|9a`b_Q%0s$!tY~SrLf-yCa4dU zxfCLrF8Si(;fsqZib4%zrx%rOhKJ6X%D1S&yJQ>`C8jI{eJ+MwJn^O1M&ycTW`^!R zUYC%d2v@ZG#mAR43T@;DEBk^N=X`ljkWPYApPMZdwlwCU^qzg1-!coX8SP_Sf16qE zjc$j}$+7O$EAhw8xzExc5#hGVGuT~0-`f5Ekvd@lRu_0vSNxj9K) z&O~LA6fH!-!>=0&vW#o2kz