fix: hidden attribute overlays

- revert to native hidden attribute behavior Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>
vmware-clarity · Apr 13, 2022 · 7f6c174 · 7f6c174
1 parent ae01f09
commit 7f6c174
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 34 deletions.
diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
@@ -6836,7 +6836,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -7081,7 +7081,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -37354,7 +37354,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden"
             },
             {
@@ -37440,7 +37440,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden"
             }
           ],
@@ -37511,7 +37511,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -37655,7 +37655,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -38187,7 +38187,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -38386,7 +38386,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -49701,7 +49701,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -49854,7 +49854,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -57689,7 +57689,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",
@@ -57928,7 +57928,7 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "hidden",
               "inheritedFrom": {
                 "name": "CdsInternalStaticOverlay",

diff --git a/projects/core/src/internal-components/overlay/overlay.element.spec.ts b/projects/core/src/internal-components/overlay/overlay.element.spec.ts
@@ -41,10 +41,11 @@ describe('Overlay element: ', () => {
       expect(innerPanel).toBeTruthy('inner panel should exist');
     });
 
-    it('should default to the hidden property being true', async () => {
+    it('should default to the hidden property being false', async () => {
+      // The native hidden propery/attr is a boolean attribute defaulting to false https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes
       await componentIsStable(component);
-      expect(component.hidden).toBe(true);
-      expect(component.hasAttribute('hidden')).toBe(true);
+      expect(component.hidden).toBe(false);
+      expect(component.hasAttribute('hidden')).toBe(false);
     });
   });
 
@@ -125,9 +126,7 @@ class NestedOverlayTestComponent extends LitElement {
   }
 
   render() {
-    return html`<cds-internal-overlay id=${this.overlayId} cds-motion="off" .hidden=${false}
-      ><slot></slot
-    ></cds-internal-overlay>`;
+    return html`<cds-internal-overlay id=${this.overlayId} cds-motion="off"><slot></slot></cds-internal-overlay>`;
   }
 }
 
@@ -140,14 +139,10 @@ describe('Nested overlays: ', () => {
 
   beforeEach(async () => {
     testElement = await createTestElement(
-      html`<nested-overlay-test-component id="root" overlay-id="rootOverlay" cds-motion="off" .hidden=${false}
-        >${placeholderText}<nested-overlay-test-component
-          id="second"
-          overlay-id="secondOverlay"
-          cds-motion="off"
-          .hidden=${false}
+      html`<nested-overlay-test-component id="root" overlay-id="rootOverlay" cds-motion="off"
+        >${placeholderText}<nested-overlay-test-component id="second" overlay-id="secondOverlay" cds-motion="off"
           >Ohai</nested-overlay-test-component
-        ><nested-overlay-test-component id="third" overlay-id="thirdOverlay" cds-motion="off" .hidden=${false}
+        ><nested-overlay-test-component id="third" overlay-id="thirdOverlay" cds-motion="off"
           >Kthxbye</nested-overlay-test-component
         ></nested-overlay-test-component
       >`

diff --git a/projects/core/src/internal-components/overlay/overlay.element.ts b/projects/core/src/internal-components/overlay/overlay.element.ts
@@ -39,7 +39,7 @@ export class CdsInternalStaticOverlay extends LitElement {
   @property({ type: Boolean }) closable = false;
 
   // eslint-disable-next-line rulesdir/reserved-property-names
-  @property({ type: Boolean }) hidden = true;
+  @property({ type: Boolean }) hidden = false;
 
   @state({ type: Boolean, reflect: true }) protected demoMode = false;
 

diff --git a/projects/core/src/internal/positioning/utils.spec.ts b/projects/core/src/internal/positioning/utils.spec.ts
@@ -50,15 +50,15 @@ function createPopupContent() {
 @customElement('positioning-utils-test-popup')
 class PositioningUtilsTestPopup extends LitElement {
   render() {
-    return html` <cds-internal-popup .hidden=${false}>${createPopupContent()}</cds-internal-popup>`;
+    return html` <cds-internal-popup>${createPopupContent()}</cds-internal-popup>`;
   }
 }
 
 @customElement('positioning-utils-test-popup-with-pointer')
 class PositioningUtilsTestPopupWithPointer extends LitElement {
   pointerType: 'default' | 'angle' = 'angle';
   render() {
-    return html` <cds-internal-popup .hidden=${false}>
+    return html` <cds-internal-popup>
       <cds-internal-pointer type=${this.pointerType}></cds-internal-pointer>
       ${createPopupContent()}
     </cds-internal-popup>`;

diff --git a/projects/core/src/modal/modal.stories.ts b/projects/core/src/modal/modal.stories.ts
@@ -82,7 +82,7 @@ class DemoStaticModal extends LitElement {
 
   render() {
     return html` <cds-demo popover>
-      <cds-modal _demo-mode size=${this.size} aria-labelledby=${this.labelId} .hidden=${false}>
+      <cds-modal _demo-mode size=${this.size} aria-labelledby=${this.labelId}>
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id=${this.labelId}>${this.modalDisplaySize} Modal</h3>
         </cds-modal-header>
@@ -109,7 +109,7 @@ small.element = DemoStaticModal;
 export function defaultSize() {
   return html`
     <cds-demo popover>
-      <cds-modal _demo-mode aria-labelledby="default-modal-title" .hidden=${false}>
+      <cds-modal _demo-mode aria-labelledby="default-modal-title">
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id="default-modal-title">Modal Example</h3>
         </cds-modal-header>
@@ -129,7 +129,7 @@ export function defaultSize() {
 export function large() {
   return html`
     <cds-demo popover>
-      <cds-modal _demo-mode size="lg" aria-labelledby="large-modal-title" .hidden=${false}>
+      <cds-modal _demo-mode size="lg" aria-labelledby="large-modal-title">
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id="large-modal-title">Large Modal Example</h3>
         </cds-modal-header>
@@ -149,7 +149,7 @@ export function large() {
 export function extraLarge() {
   return html`
     <cds-demo popover>
-      <cds-modal _demo-mode size="xl" aria-labelledby="xl-modal-title" .hidden=${false}>
+      <cds-modal _demo-mode size="xl" aria-labelledby="xl-modal-title">
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id="xl-modal-title">Extra Large Modal Example</h3>
         </cds-modal-header>
@@ -169,7 +169,7 @@ export function extraLarge() {
 export function darkTheme() {
   return html`
     <cds-demo popover cds-theme="dark">
-      <cds-modal _demo-mode aria-labelledby="dark-modal-title" .hidden=${false}>
+      <cds-modal _demo-mode aria-labelledby="dark-modal-title">
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id="dark-modal-title">My Modal</h3>
         </cds-modal-header>
@@ -207,7 +207,7 @@ export function customStyles() {
     </style>
 
     <cds-demo popover>
-      <cds-modal _demo-mode class="modal-branding" size="lg" aria-labelledby="custom-modal-title" .hidden=${false}>
+      <cds-modal _demo-mode class="modal-branding" size="lg" aria-labelledby="custom-modal-title">
         <cds-modal-header>
           <h3 cds-text="section" cds-first-focus id="custom-modal-title">Customizing Modal Styles</h3>
         </cds-modal-header>