updated examples to show disabled items

microsoft · May 29, 2020 · 1815989 · 1815989
1 parent 513f1c4
commit 1815989
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 4 deletions.
diff --git a/packages/web-components/fast-components-msft/src/accordion/fixtures/base.html b/packages/web-components/fast-components-msft/src/accordion/fixtures/base.html
@@ -3,6 +3,10 @@
         .icon {
             stroke: var(--accent-fill-rest);
         }
+
+        fast-accordion-item.disabled::part(button) {
+            pointer-events: none;
+        }
     </style>
     <h1>Accordion</h1>
     <h4>Default</h4>
@@ -74,8 +78,8 @@ <h4>Single expand</h4>
             </svg>
             Panel one content
         </fast-accordion-item>
-        <fast-accordion-item>
-            <span slot="heading">Panel two</span>
+        <fast-accordion-item class="disabled">
+            <span slot="heading">Panel Two</span>
             <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
@@ -101,4 +105,64 @@ <h4>Single expand</h4>
             Panel three content
         </fast-accordion-item>
     </fast-accordion>
+    <h4>With disabled item</h4>
+    <fast-accordion>
+        <fast-accordion-item>
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Panel two</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Panel one content
+        </fast-accordion-item>
+        <fast-accordion-item class="disabled">
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Disabled</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Disabled content
+        </fast-accordion-item>
+        <fast-accordion-item expanded>
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Panel three</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Panel three content
+        </fast-accordion-item>
+    </fast-accordion>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/accordion/fixtures/base.html b/packages/web-components/fast-components/src/accordion/fixtures/base.html
@@ -3,6 +3,10 @@
         .icon {
             stroke: var(--accent-fill-rest);
         }
+
+        fast-accordion-item.disabled::part(button) {
+            pointer-events: none;
+        }
     </style>
     <h1>Accordion</h1>
     <h4>Default</h4>
@@ -74,8 +78,8 @@ <h4>Single expand</h4>
             </svg>
             Panel one content
         </fast-accordion-item>
-        <fast-accordion-item>
-            <span slot="heading">Panel two</span>
+        <fast-accordion-item class="disabled">
+            <span slot="heading">Panel Two</span>
             <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
@@ -101,4 +105,64 @@ <h4>Single expand</h4>
             Panel three content
         </fast-accordion-item>
     </fast-accordion>
+    <h4>With disabled item</h4>
+    <fast-accordion>
+        <fast-accordion-item>
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Panel two</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Panel one content
+        </fast-accordion-item>
+        <fast-accordion-item class="disabled">
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Disabled</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Disabled content
+        </fast-accordion-item>
+        <fast-accordion-item expanded>
+            <div slot="start">
+                <button>1</button>
+            </div>
+            <div slot="end">
+                <button>1</button>
+            </div>
+            <span slot="heading">Panel three</span>
+            <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Panel three content
+        </fast-accordion-item>
+    </fast-accordion>
 </fast-design-system-provider>