refactor(carousel): simplify slide template and styles (#1578)

---------

Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Author: simeonoff

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Changed
+
+- #### Carousel - **Potential visual breaking change.**
+  - Removed `[part='base']` wrapping container from slide's internal DOM. 
 ## [5.2.3] - 2025-02-13
 ### Fixed
 - #### Chip

src/components/carousel/carousel-slide.ts

@@ -2,11 +2,10 @@ import { consume } from '@lit/context';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 import { EaseInOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, formatString, partNameMap } from '../common/util.js';
+import { createCounter, formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import type IgcCarouselComponent from './carousel.js';
 import { carouselContext } from './context.js';
@@ -18,8 +17,6 @@ import { styles } from './themes/carousel-slide.base.css.js';
  * @element igc-carousel-slide
  *
  * @slot Default slot for the carousel slide.
- *
- * @csspart base - The base wrapper of the carousel slide.
  */
 
 export default class IgcCarouselSlideComponent extends LitElement {
@@ -34,8 +31,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
   private static readonly increment = createCounter();
 
   private _internals: ElementInternals;
-  private _slideRef: Ref<HTMLElement> = createRef();
-  private _animationPlayer = addAnimationController(this, this._slideRef);
+  private _animationPlayer = addAnimationController(this);
 
   @consume({ context: carouselContext, subscribe: true })
   private _carousel?: IgcCarouselComponent;
@@ -70,7 +66,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
   public active = false;
 
   /* blazorSuppress */
-  @property({ attribute: false })
+  @property({ type: Boolean, reflect: true })
   public previous = false;
 
   public async toggleAnimation(
@@ -117,17 +113,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
   }
 
   protected override render() {
-    const parts = partNameMap({
-      base: true,
-      current: this.active,
-      previous: this.previous,
-    });
-
-    return html`
-      <div ${ref(this._slideRef)} part=${parts}>
-        <slot></slot>
-      </div>
-    `;
+    return html` <slot></slot> `;
   }
 }
 

src/components/carousel/carousel.spec.ts

@@ -4,6 +4,7 @@ import {
   fixture,
   html,
   nextFrame,
+  waitUntil,
 } from '@open-wc/testing';
 
 import { type SinonFakeTimers, spy, useFakeTimers } from 'sinon';
@@ -199,22 +200,12 @@ describe('Carousel', () => {
         </igc-carousel-slide>`,
         DIFF_OPTIONS
       );
-      expect(slides[0]).shadowDom.to.equal(
-        `<div part="base current">
-          <slot></slot>
-        </div>`
-      );
       expect(slides[1]).dom.to.equal(
         `<igc-carousel-slide>
           <span>2</span>
         </igc-carousel-slide>`,
         DIFF_OPTIONS
       );
-      expect(slides[1]).shadowDom.to.equal(
-        `<div part="base">
-          <slot></slot>
-        </div>`
-      );
 
       slides[1].active = true;
       await elementUpdated(slides[1]);
@@ -225,22 +216,12 @@ describe('Carousel', () => {
         </igc-carousel-slide>`,
         DIFF_OPTIONS
       );
-      expect(slides[0]).shadowDom.to.equal(
-        `<div part="base">
-          <slot></slot>
-        </div>`
-      );
       expect(slides[1]).dom.to.equal(
         `<igc-carousel-slide active>
           <span>2</span>
         </igc-carousel-slide>`,
         DIFF_OPTIONS
       );
-      expect(slides[1]).shadowDom.to.equal(
-        `<div part="base current">
-          <slot></slot>
-        </div>`
-      );
     });
 
     it('should not render indicators if `hideIndicators` is true', async () => {
@@ -525,7 +506,7 @@ describe('Carousel', () => {
         expect(defaultIndicators[0].active).to.be.true;
 
         simulateClick(nextButton!);
-        await slideChangeComplete(slides[0], slides[1]);
+        await waitUntil(() => eventSpy.calledWith('igcSlideChanged'));
 
         expect(carousel.current).to.equal(1);
         expect(defaultIndicators[0].active).to.be.false;
@@ -539,7 +520,7 @@ describe('Carousel', () => {
         expect(defaultIndicators[0].active).to.be.true;
 
         simulateClick(prevButton!);
-        await slideChangeComplete(slides[0], slides[2]);
+        await waitUntil(() => eventSpy.calledWith('igcSlideChanged'));
 
         expect(carousel.current).to.equal(2);
         expect(defaultIndicators[0].active).to.be.false;
@@ -554,7 +535,9 @@ describe('Carousel', () => {
 
         // select second slide
         simulateClick(defaultIndicators[1]);
-        await slideChangeComplete(slides[0], slides[1]);
+        await waitUntil(() =>
+          eventSpy.calledWith('igcSlideChanged', { detail: 1 })
+        );
 
         expect(carousel.current).to.equal(1);
         expect(defaultIndicators[0].active).to.be.false;
@@ -563,7 +546,9 @@ describe('Carousel', () => {
 
         // select first slide
         simulateClick(defaultIndicators[0]);
-        await slideChangeComplete(slides[1], slides[0]);
+        await waitUntil(() =>
+          eventSpy.calledWith('igcSlideChanged', { detail: 0 })
+        );
 
         expect(carousel.current).to.equal(0);
         expect(defaultIndicators[0].active).to.be.true;

src/components/carousel/themes/carousel-slide.base.scss

@@ -6,6 +6,8 @@
     width: 100%;
     height: 100%;
     inset: 0;
+    z-index: -1;
+    visibility: hidden;
 
     ::slotted(img) {
         width: 100%;
@@ -16,19 +18,12 @@
     }
 }
 
-[part~='base'] {
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    visibility: hidden;
-}
-
-[part='base current'] {
+:host([active]) {
     z-index: 2;
     visibility: visible;
 }
 
-[part='base previous'] {
+:host([previous]) {
     z-index: 1;
     visibility: visible;
 }

stories/carousel.stories.ts

@@ -293,22 +293,26 @@ export const InputsTemplate: Story = {
     <style>
       igc-carousel {
         border-radius: 10px;
-        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 6px 12px oklch(from #333 l c h / 0.1);
+        border: 1px solid var(--ig-gray-200);
         max-width: 75%;
         margin-inline: auto;
         height: 350px;
       }
+
       igc-carousel-slide {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 75%;
+        display: grid;
+        place-items: center stretch;
         margin-inline: auto;
-        padding-block: 8px;
+        padding-inline: 96px;
+        padding-block-start: 8px;
+        padding-block-end: 32px;
       }
-      igc-carousel-slide > * {
-        margin-block: 8px;
+
+      igc-carousel-slide > igc-button {
+        max-width: fit-content;
       }
+
       igc-carousel-slide div {
         text-align: center;
       }
@@ -329,7 +333,8 @@ export const InputsTemplate: Story = {
     >
       <igc-carousel-slide>
         <igc-input type="text" placeholder="Username">
-          <span slot="prefix">🐱‍💻</span>
+          <span slot="prefix">🐱</span>
+          <span slot="prefix">💻</span>
         </igc-input>
         <igc-textarea label="Leave your comment">
           <span slot="prefix">💬</span>