fix(modal)!: remove deprecated width attribute

patternfly · Jan 18, 2024 · 16d0dd7 · 16d0dd7
1 parent 1b78b7c
commit 16d0dd7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 36 deletions.
diff --git a/.changeset/clean-deers-lie.md b/.changeset/clean-deers-lie.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-modal>`: remove deprecated `width` attribute. use `variant` instead
diff --git 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
@@ -10,21 +10,21 @@ const TEMPLATES = {
   testElement: html`<pf-modal></pf-modal>`,
 
   smallModal: html`
-    <pf-modal width="small">
+    <pf-modal variant="small">
       <h2 slot="header">Small modal</h2>
       <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> 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.</p>
     </pf-modal>
   `,
 
   mediumModal: html`
-    <pf-modal width="medium">
+    <pf-modal variant="medium">
       <h2 slot="header">Medium modal</h2>
       <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> 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.</p>
     </pf-modal>
   `,
 
   largeModal: html`
-    <pf-modal width="large">
+    <pf-modal variant="large">
       <h2 slot="header">Large modal</h2>
       <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> 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.</p>
     </pf-modal>
@@ -64,24 +64,6 @@ describe('<pf-modal>', 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<PfModal>(html`
-      <pf-modal>
-        <h2 slot="pf-modal--header">Modal with a header</h2>
-        <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> 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.</p>
-      </pf-modal>
-    `);
-    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<PfModal>(html`
       <pf-modal trigger="trigger">
@@ -118,7 +100,7 @@ describe('<pf-modal>', 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<PfModal>(TEMPLATES.smallModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -127,7 +109,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=medium attribute', function() {
+    describe('with variant=medium attribute', function() {
       it('has medium modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.mediumModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -136,7 +118,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=large attribute', function() {
+    describe('with variant=large attribute', function() {
       it('has large modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.largeModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -151,7 +133,7 @@ describe('<pf-modal>', 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<PfModal>(TEMPLATES.smallModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -160,7 +142,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=medium attribute', function() {
+    describe('with variant=medium attribute', function() {
       it('has medium modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.mediumModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -169,7 +151,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=large attribute', function() {
+    describe('with variant=large attribute', function() {
       it('has large modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.largeModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -184,7 +166,7 @@ describe('<pf-modal>', 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<PfModal>(TEMPLATES.smallModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -193,7 +175,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=medium attribute', function() {
+    describe('with variant=medium attribute', function() {
       it('has medium modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.mediumModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -202,7 +184,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=large attribute', function() {
+    describe('with variant=large attribute', function() {
       it('has large modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.largeModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -217,7 +199,7 @@ describe('<pf-modal>', 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<PfModal>(TEMPLATES.smallModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -226,7 +208,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=medium attribute', function() {
+    describe('with variant=medium attribute', function() {
       it('has medium modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.mediumModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;
@@ -235,7 +217,7 @@ describe('<pf-modal>', function() {
       });
     });
 
-    describe('with width=large attribute', function() {
+    describe('with variant=large attribute', function() {
       it('has large modal width', async function() {
         const el = await createFixture<PfModal>(TEMPLATES.largeModal);
         const modalWindow = el.shadowRoot!.querySelector('#dialog')!;