diff --git a/.changeset/clean-deers-lie.md b/.changeset/clean-deers-lie.md new file mode 100644 index 0000000000..319c1f925d --- /dev/null +++ b/.changeset/clean-deers-lie.md @@ -0,0 +1,5 @@ +--- +"@patternfly/elements": major +--- + +``: remove deprecated `width` attribute. use `variant` instead diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-modal/pf-modal.ts index 19762932a0..e471eae5e0 100644 --- a/elements/pf-modal/pf-modal.ts +++ b/elements/pf-modal/pf-modal.ts @@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { classMap } from 'lit/directives/class-map.js'; import { ComposedEvent } from '@patternfly/pfe-core'; -import { bound, deprecation, initializer, observed } from '@patternfly/pfe-core/decorators.js'; +import { bound, initializer, observed } from '@patternfly/pfe-core/decorators.js'; import { getRandomId } from '@patternfly/pfe-core/functions/random.js'; import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; @@ -85,8 +85,6 @@ export class PfModal extends LitElement implements HTMLDialogElement { */ @property({ reflect: true }) variant?: 'small' | 'medium' | 'large'; - @deprecation({ alias: 'variant', attribute: 'width' }) width?: 'small' | 'medium' | 'large'; - /** * `position="top"` aligns the dialog with the top of the page */ diff --git a/elements/pf-modal/test/pf-modal.spec.ts b/elements/pf-modal/test/pf-modal.spec.ts index 957d43e0bf..aa09780917 100644 --- a/elements/pf-modal/test/pf-modal.spec.ts +++ b/elements/pf-modal/test/pf-modal.spec.ts @@ -10,21 +10,21 @@ const TEMPLATES = { testElement: html``, smallModal: html` - +

Small modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, mediumModal: html` - +

Medium modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, largeModal: html` - +

Large modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -64,24 +64,6 @@ describe('', function() { expect(button.getAttribute('aria-label'), 'button aria-label').to.equal('Close dialog'); }); - it('should apply attributes for deprecated slots', async function() { - // Use the same markup that's declared at the top of the file. - const el = await createFixture(html` - -

Modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- `); - const modalWindow = el.shadowRoot!.querySelector('#dialog')!; - const button = el.shadowRoot!.querySelector('[part=close-button]')!; - - await nextFrame(); - - expect(modalWindow.getAttribute('tabindex'), 'modal__window tabindex').to.equal('0'); - expect(modalWindow.hasAttribute('hidden'), 'hidden').to.be.true; - expect(button.getAttribute('aria-label'), 'button aria-label').to.equal('Close dialog'); - }); - it('should open the modal window when the trigger is clicked', async function() { const el = await createFixture(html` @@ -118,7 +100,7 @@ describe('', function() { await setViewport({ width: 1600, height: 1200 }); }); - describe('with width=small attribute', function() { + describe('with variant=small attribute', function() { it('has small modal width', async function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -127,7 +109,7 @@ describe('', function() { }); }); - describe('with width=medium attribute', function() { + describe('with variant=medium attribute', function() { it('has medium modal width', async function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -136,7 +118,7 @@ describe('', function() { }); }); - describe('with width=large attribute', function() { + describe('with variant=large attribute', function() { it('has large modal width', async function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -151,7 +133,7 @@ describe('', function() { await setViewport({ width: 1000, height: 800 }); }); - describe('with width=small attribute', function() { + describe('with variant=small attribute', function() { it('has small modal width', async function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -160,7 +142,7 @@ describe('', function() { }); }); - describe('with width=medium attribute', function() { + describe('with variant=medium attribute', function() { it('has medium modal width', async function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -169,7 +151,7 @@ describe('', function() { }); }); - describe('with width=large attribute', function() { + describe('with variant=large attribute', function() { it('has large modal width', async function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -184,7 +166,7 @@ describe('', function() { await setViewport({ width: 768, height: 600 }); }); - describe('with width=small attribute', function() { + describe('with variant=small attribute', function() { it('has small modal width', async function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -193,7 +175,7 @@ describe('', function() { }); }); - describe('with width=medium attribute', function() { + describe('with variant=medium attribute', function() { it('has medium modal width', async function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -202,7 +184,7 @@ describe('', function() { }); }); - describe('with width=large attribute', function() { + describe('with variant=large attribute', function() { it('has large modal width', async function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -217,7 +199,7 @@ describe('', function() { await setViewport({ width: 480, height: 540 }); }); - describe('with width=small attribute', function() { + describe('with variant=small attribute', function() { it('has small modal width', async function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -226,7 +208,7 @@ describe('', function() { }); }); - describe('with width=medium attribute', function() { + describe('with variant=medium attribute', function() { it('has medium modal width', async function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; @@ -235,7 +217,7 @@ describe('', function() { }); }); - describe('with width=large attribute', function() { + describe('with variant=large attribute', function() { it('has large modal width', async function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!;