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

* removed SVGs to use the default * Change files * set the fill color of the icon in style * using accentFillRestBehavior.var on fill
joshualamusga1 · Mar 25, 2021 · 25e5dac · 25e5dac
1 parent 6249ddf
commit 25e5dac
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>