diff --git a/CHANGELOG.md b/CHANGELOG.md index 29fd0b633..243292591 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/combo/combo.ts b/src/components/combo/combo.ts index 5a8f5b474..4d1675b5b 100644 --- a/src/components/combo/combo.ts +++ b/src/components/combo/combo.ts @@ -984,7 +984,7 @@ export default class IgcComboComponent< protected override render() { return html` - + ${this.renderMainInput()} ${this.renderList()} ${this.renderHelperText()} diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 400157b2c..9bb6a8642 100644 --- a/src/components/dropdown/dropdown.ts +++ b/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 diff --git a/src/components/popover/popover.spec.ts b/src/components/popover/popover.spec.ts index e700ef173..c658f121f 100644 --- a/src/components/popover/popover.spec.ts +++ b/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; diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index a852f294c..fe4909cd9 100644 --- a/src/components/popover/popover.ts +++ b/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` -
+
`; diff --git a/src/components/popover/themes/light/popover.base.scss b/src/components/popover/themes/light/popover.base.scss index 4aaa4f834..a2a89147c 100644 --- a/src/components/popover/themes/light/popover.base.scss +++ b/src/components/popover/themes/light/popover.base.scss @@ -6,6 +6,7 @@ } :popover-open { + position: fixed; overflow: visible; isolation: isolate; height: fit-content; @@ -13,11 +14,3 @@ border: none; padding: 0; } - -[part='absolute']:popover-open { - position: absolute; -} - -[part='fixed']:popover-open { - position: fixed; -} diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 6b5047441..69e7c6a32 100644 --- a/src/components/select/select.ts +++ b/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()} diff --git a/stories/combo.stories.ts b/stories/combo.stories.ts index 9408aa3fa..4e141dcf3 100644 --- a/stories/combo.stories.ts +++ b/stories/combo.stories.ts @@ -285,7 +285,6 @@ const Template = ({ singleSelect = false, autofocusList, groupSorting = 'asc', - positionStrategy = 'absolute', sameWidth = false, }: IgcComboComponent) => html` - + = { 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 = { }, 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`