fix: removed SVGs and update fill style in accordion (#17527)

* removed SVGs to use the default * Change files * set the fill color of the icon in style * using accentFillRestBehavior.var on fill
microsoft · Mar 24, 2021 · b8e8697 · b8e8697
1 parent 2338c30
commit b8e8697
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 301 deletions.
diff --git a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "removed SVGs to use the default",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralFocusBehavior,
   neutralForegroundActiveBehavior,
@@ -85,6 +86,7 @@ export const AccordionItemStyles = css`
         grid-column: 4;
         z-index: 2;
         pointer-events: none;
+        fill: ${accentFillRestBehavior.var};
     }
 
     slot[name="collapsed-icon"] {
@@ -120,6 +122,7 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 `.withBehaviors(
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralForegroundActiveBehavior,
   neutralForegroundFocusBehavior,
@@ -132,6 +135,9 @@ export const AccordionItemStyles = css`
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
             }
+            .icon {
+              fill: ${SystemColors.ButtonText};
+            }
         `,
   ),
 );
diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,9 +1,5 @@
 <fluent-design-system-provider use-defaults>
   <style>
-    .icon {
-      stroke: var(--accent-fill-rest);
-    }
-
     fluent-accordion-item.disabled::part(button) {
       pointer-events: none;
     }
@@ -19,113 +15,14 @@ <h4>Default</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel two</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
       <span slot="heading">Panel three</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -139,113 +36,14 @@ <h4>Single expand</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
       <span slot="heading">Panel Two</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel three</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -259,39 +57,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel two</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
@@ -302,39 +67,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Disabled</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Disabled content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
@@ -345,39 +77,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel three</span>
-      <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="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="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="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>