Skip to content

Commit a2c6559

Browse files
brandyscarneybrandyscarney
authored
feat(item): add inner and container parts (#30927)
Issue number: N/A --------- ## What is the current behavior? The inner structural elements of item are not exposed as shadow parts, preventing users from being able to customize their styles directly. ## What is the new behavior? - Exposes `inner` and `container` shadow parts - Adds e2e test coverage for customizing the shadow parts - Removes css variables test, combining it with the shadow parts test ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
1 parent 1d7b286 commit a2c6559

11 files changed

Lines changed: 180 additions & 68 deletions

‎core/api.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -939,7 +939,9 @@ ion-item,css-prop,--ripple-color,ios
939939
ion-item,css-prop,--ripple-color,md
940940
ion-item,css-prop,--transition,ios
941941
ion-item,css-prop,--transition,md
942+
ion-item,part,container
942943
ion-item,part,detail-icon
944+
ion-item,part,inner
943945
ion-item,part,native
944946

945947
ion-item-divider,shadow

‎core/src/components/item/item.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import type { RouterDirection } from '../router/utils/interface';
1818
* @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
1919
*
2020
* @part native - The native HTML button, anchor or div element that wraps all child elements.
21+
* @part inner - The inner wrapper element that arranges the item content.
22+
* @part container - The wrapper element that contains the default slot.
2123
* @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
2224
*/
2325
@Component({
@@ -390,8 +392,8 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
390392
{...clickFn}
391393
>
392394
<slot name="start" onSlotchange={this.updateInteractivityOnSlotChange}></slot>
393-
<div class="item-inner">
394-
<div class="input-wrapper">
395+
<div class="item-inner" part="inner">
396+
<div class="input-wrapper" part="container">
395397
<slot onSlotchange={this.updateInteractivityOnSlotChange}></slot>
396398
</div>
397399
<slot name="end" onSlotchange={this.updateInteractivityOnSlotChange}></slot>

‎core/src/components/item/test/css-variables/index.html‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎core/src/components/item/test/css-variables/item.e2e.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png‎

-7.88 KB
Binary file not shown.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png‎

-13.8 KB
Binary file not shown.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png‎

-9.21 KB
Binary file not shown.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png‎

-8.19 KB
Binary file not shown.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png‎

-13.8 KB
Binary file not shown.

‎core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png‎

-9.72 KB
Binary file not shown.

0 commit comments

Comments
 (0)