fix(overlay-trigger): allow trigger to be [disabled]

adobe · Oct 31, 2019 · fe9541e · fe9541e
1 parent cb9e8c5
commit fe9541e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/packages/overlay-trigger/src/overlay-trigger.css b/packages/overlay-trigger/src/overlay-trigger.css
@@ -10,6 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+:host([disabled]) #trigger {
+    pointer-events: none;
+}
+
 #overlay-content {
     display: none;
 }
diff --git a/packages/overlay-trigger/src/overlay-trigger.ts b/packages/overlay-trigger/src/overlay-trigger.ts
@@ -45,6 +45,9 @@ export class OverlayTrigger extends LitElement {
     @property({ type: Number, reflect: true })
     public offset = 6;
 
+    @property({ type: Boolean, reflect: true })
+    public disabled = false;
+
     private clickContent?: HTMLElement;
 
     private hoverContent?: HTMLElement;

diff --git a/packages/overlay-trigger/test/overlay-trigger.test.ts b/packages/overlay-trigger/test/overlay-trigger.test.ts
@@ -18,7 +18,14 @@ import '../../popover';
 import { Popover } from '../../popover';
 
 import { waitForPredicate, isVisible } from '../../../test/testing-helpers';
-import { fixture, aTimeout, html, expect, nextFrame } from '@open-wc/testing';
+import {
+    fixture,
+    aTimeout,
+    html,
+    expect,
+    nextFrame,
+    elementUpdated,
+} from '@open-wc/testing';
 
 function pressEscape(): void {
     const up = new KeyboardEvent('keyup', {
@@ -143,6 +150,22 @@ describe('Overlays', () => {
         expect(isVisible(outerPopover)).to.be.true;
     });
 
+    it('does not open a popover when [disabled]', async () => {
+        const trigger = testDiv.querySelector('#trigger') as OverlayTrigger;
+        const root = trigger.shadowRoot ? trigger.shadowRoot : trigger;
+        const triggerZone = root.querySelector('#trigger') as HTMLDivElement;
+        const styles = getComputedStyle(triggerZone);
+
+        expect(trigger.disabled).to.be.false;
+        expect(styles.pointerEvents).to.equal('auto');
+
+        trigger.disabled = true;
+        await elementUpdated(trigger);
+
+        expect(trigger.disabled).to.be.true;
+        expect(styles.pointerEvents).to.equal('none');
+    });
+
     it('opens a nested popover', async () => {
         const button = testDiv.querySelector('#outer-button') as HTMLElement;
         const outerPopover = testDiv.querySelector('#outer-popover') as Popover;