From 665130019096d27d2eea1f0c6a187ab33aab2ddd Mon Sep 17 00:00:00 2001 From: Kham Udom <37851220+khamudom@users.noreply.github.com> Date: Wed, 24 Mar 2021 11:36:36 -0700 Subject: [PATCH] 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 --- ...-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json | 7 + .../accordion-item/accordion-item.styles.ts | 6 + .../src/accordion/fixtures/base.html | 301 ------------------ 3 files changed, 13 insertions(+), 301 deletions(-) create mode 100644 change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json diff --git a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json new file mode 100644 index 00000000000000..3e0fae1045833a --- /dev/null +++ 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 index ac6614490d17f4..30a82d8e2a4012 100644 --- 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 index 3941b944a44f70..cdb17147feba8f 100644 --- a/packages/web-components/src/accordion/fixtures/base.html +++ b/packages/web-components/src/accordion/fixtures/base.html @@ -1,9 +1,5 @@