deprecate(dropdown): positionStrategy deprecation

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - Combo, Select and Dropdown components now use the native Popover API [#1082](https://github.com/IgniteUI/igniteui-webcomponents/pull/1082)
 
+### Deprecated
+- Dropdown `positionStrategy` property. The dropdown now uses the Popover API to render its container in the top layer of the browser viewport,
+  making the property obsolete.
+
 ## [4.8.2] - 2024-04-15
 ### Fixed
 - Textarea - resize handle position for non-suffixed textarea [#1094](https://github.com/IgniteUI/igniteui-webcomponents/issues/1094)

src/components/combo/combo.ts

@@ -984,7 +984,7 @@ export default class IgcComboComponent<
 
   protected override render() {
     return html`
-      <igc-popover ?open=${this.open} flip shift same-width strategy="fixed">
+      <igc-popover ?open=${this.open} flip shift same-width>
         ${this.renderMainInput()} ${this.renderList()}
       </igc-popover>
       ${this.renderHelperText()}

src/components/dropdown/dropdown.ts

@@ -136,6 +136,8 @@ export default class IgcDropdownComponent extends SizableMixin(
   /**
    * Sets the component's positioning strategy.
    * @attr position-strategy
+   *
+   * @deprecated since v4.9.0 - Stacking context is now handled through the popover API.
    */
   @property({ attribute: 'position-strategy' })
   public positionStrategy: 'absolute' | 'fixed' = 'absolute';
@@ -411,7 +413,6 @@ export default class IgcDropdownComponent extends SizableMixin(
       ?flip=${this.flip}
       ?same-width=${this.sameWidth}
       .anchor=${this._target}
-      .strategy=${this.positionStrategy}
       .offset=${this.distance}
       .placement=${this.placement}
       shift

src/components/popover/popover.spec.ts

@@ -140,22 +140,6 @@ describe('Popover', () => {
         expect(delta.width).to.equal(anchor.getBoundingClientRect().width);
       });
 
-      it('`strategy` updates are reflected', async () => {
-        const floater = getFloater(popover);
-        const getPosition = () =>
-          getComputedStyle(floater).getPropertyValue('position');
-
-        anchor.click();
-        await waitForPaint(popover);
-
-        expect(getPosition()).to.equal('absolute');
-
-        popover.strategy = 'fixed';
-        await waitForPaint(popover);
-
-        expect(getPosition()).to.equal('fixed');
-      });
-
       it('`anchor` slot changes are reflected', async () => {
         const floater = getFloater(popover);
         const newAnchor = document.createElement('button');
@@ -273,22 +257,6 @@ describe('Popover', () => {
         expect(delta.width).to.equal(anchor.getBoundingClientRect().width);
       });
 
-      it('`strategy` updates are reflected', async () => {
-        const floater = getFloater(popover);
-        const getPosition = () =>
-          getComputedStyle(floater).getPropertyValue('position');
-
-        anchor.click();
-        await waitForPaint(popover);
-
-        expect(getPosition()).to.equal('absolute');
-
-        popover.strategy = 'fixed';
-        await waitForPaint(popover);
-
-        expect(getPosition()).to.equal('fixed');
-      });
-
       it('`anchor` property updates are reflected', async () => {
         const floater = getFloater(popover);
         const fixture = popover.parentElement as HTMLElement;

src/components/popover/popover.ts

@@ -108,12 +108,6 @@ export default class IgcPopoverComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public shift = false;
 
-  /**
-   * The type of CSS position property to use.
-   */
-  @property()
-  public strategy: 'absolute' | 'fixed' = 'absolute';
-
   @watch('anchor')
   protected async anchorChange() {
     const newTarget =
@@ -137,7 +131,6 @@ export default class IgcPopoverComponent extends LitElement {
   @watch('placement', { waitUntilFirstUpdate: true })
   @watch('sameWidth', { waitUntilFirstUpdate: true })
   @watch('shift', { waitUntilFirstUpdate: true })
-  @watch('strategy', { waitUntilFirstUpdate: true })
   protected floatingPropChange() {
     this._updateState();
   }
@@ -171,13 +164,9 @@ export default class IgcPopoverComponent extends LitElement {
     this._hidePopover();
 
     return new Promise((resolve) => {
-      if (this.dispose) {
-        this.dispose();
-        this.dispose = undefined;
-        resolve();
-      } else {
-        resolve();
-      }
+      this.dispose?.();
+      this.dispose = undefined;
+      resolve();
     });
   }
 
@@ -239,7 +228,7 @@ export default class IgcPopoverComponent extends LitElement {
     const { x, y } = await computePosition(this.target, this._container, {
       placement: this.placement ?? 'bottom-start',
       middleware: this._createMiddleware(),
-      strategy: this.strategy ?? 'absolute',
+      strategy: 'fixed',
     });
 
     Object.assign(this._container.style, {
@@ -259,7 +248,7 @@ export default class IgcPopoverComponent extends LitElement {
   protected override render() {
     return html`
       <slot name="anchor" @slotchange=${this._anchorSlotChange}></slot>
-      <div id="container" popover="manual" part=${this.strategy}>
+      <div id="container" popover="manual">
         <slot></slot>
       </div>
     `;

src/components/popover/themes/light/popover.base.scss

@@ -6,18 +6,11 @@
 }
 
 :popover-open {
+    position: fixed;
     overflow: visible;
     isolation: isolate;
     height: fit-content;
     inset: unset;
     border: none;
     padding: 0;
 }
-
-[part='absolute']:popover-open {
-    position: absolute;
-}
-
-[part='fixed']:popover-open {
-    position: fixed;
-}

src/components/select/select.ts

@@ -716,7 +716,6 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
       flip
       shift
       same-width
-      strategy="fixed"
       .offset=${this.distance}
       .placement=${this.placement}
       >${this.renderInputAnchor()} ${this.renderDropdown()}

stories/combo.stories.ts

@@ -285,7 +285,6 @@ const Template = ({
   singleSelect = false,
   autofocusList,
   groupSorting = 'asc',
-  positionStrategy = 'absolute',
   sameWidth = false,
 }: IgcComboComponent<City>) => html`
   <igc-combo
@@ -301,7 +300,6 @@ const Template = ({
     value='["BG01", "BG02"]'
     group-key="country"
     group-sorting=${ifDefined(groupSorting)}
-    position-strategy=${positionStrategy}
     ?same-width=${sameWidth}
     ?case-sensitive-icon=${caseSensitiveIcon}
     ?disable-filtering=${disableFiltering}

stories/dialog.stories.ts

@@ -158,12 +158,7 @@ const Template = ({
             <div style="display: flex; flex-flow: column; gap: 1rem">
               <igc-input outlined label="Username"></igc-input>
               <igc-input outlined label="Password" type="password"></igc-input>
-              <igc-dropdown
-                flip
-                same-width
-                position-strategy="fixed"
-                @igcChange=${authSelected}
-              >
+              <igc-dropdown flip same-width @igcChange=${authSelected}>
                 <igc-input
                   style="width: 100%"
                   outlined

stories/dropdown.stories.ts

@@ -63,13 +63,6 @@ const metadata: Meta<IgcDropdownComponent> = {
       control: { type: 'select' },
       table: { defaultValue: { summary: 'bottom-start' } },
     },
-    positionStrategy: {
-      type: '"absolute" | "fixed"',
-      description: "Sets the component's positioning strategy.",
-      options: ['absolute', 'fixed'],
-      control: { type: 'inline-radio' },
-      table: { defaultValue: { summary: 'absolute' } },
-    },
     scrollStrategy: {
       type: '"scroll" | "block" | "close"',
       description:
@@ -121,7 +114,6 @@ const metadata: Meta<IgcDropdownComponent> = {
   },
   args: {
     placement: 'bottom-start',
-    positionStrategy: 'absolute',
     scrollStrategy: 'scroll',
     flip: false,
     distance: 0,
@@ -149,8 +141,6 @@ interface IgcDropdownArgs {
     | 'left'
     | 'left-start'
     | 'left-end';
-  /** Sets the component's positioning strategy. */
-  positionStrategy: 'absolute' | 'fixed';
   /** Determines the behavior of the component during scrolling of the parent container. */
   scrollStrategy: 'scroll' | 'block' | 'close';
   /**
@@ -197,7 +187,6 @@ export const Basic: Story = {
     keepOpenOnSelect,
     sameWidth,
     placement,
-    positionStrategy,
     distance,
     scrollStrategy,
   }) => html`
@@ -209,7 +198,6 @@ export const Basic: Story = {
       ?keep-open-on-select=${keepOpenOnSelect}
       ?same-width=${sameWidth}
       .placement=${placement}
-      .positionStrategy=${positionStrategy}
       .distance=${distance}
       .scrollStrategy=${scrollStrategy}
     >
@@ -231,7 +219,6 @@ export const Overflow: Story = {
     keepOpenOnOutsideClick,
     keepOpenOnSelect,
     placement,
-    positionStrategy,
     sameWidth,
     scrollStrategy,
   }) => html`
@@ -255,7 +242,6 @@ export const Overflow: Story = {
         ?keep-open-on-outside-click=${keepOpenOnOutsideClick}
         ?keep-open-on-select=${keepOpenOnSelect}
         .placement=${placement}
-        .positionStrategy=${positionStrategy}
         .distance=${distance}
         .scrollStrategy=${scrollStrategy}
       >
@@ -326,7 +312,6 @@ export const GroupsAndHeaders: Story = {
     distance,
     flip,
     placement,
-    positionStrategy,
     sameWidth,
   }) => html`
     <style>
@@ -349,7 +334,6 @@ export const GroupsAndHeaders: Story = {
       ?keep-open-on-select=${keepOpenOnSelect}
       ?same-width=${sameWidth}
       .placement=${placement}
-      .positionStrategy=${positionStrategy}
       .distance=${distance}
     >
       <igc-button slot="target"
@@ -383,7 +367,6 @@ export const WithNonSlottedTarget: Story = {
     keepOpenOnOutsideClick,
     keepOpenOnSelect,
     placement,
-    positionStrategy,
     sameWidth,
   }) => html`
     <style>
@@ -421,7 +404,6 @@ export const WithNonSlottedTarget: Story = {
       ?keep-open-on-outside-click=${keepOpenOnOutsideClick}
       ?keep-open-on-select=${keepOpenOnSelect}
       .placement=${placement}
-      .positionStrategy=${positionStrategy}
       ?same-width=${sameWidth}
     >
       <igc-dropdown-item>1</igc-dropdown-item>