From f6937cae8bfa0ad2e449cf714702247eeece5cb0 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Wed, 16 Dec 2020 13:09:04 -0800 Subject: [PATCH 1/2] add icon only anchor support, update fast packages --- packages/web-components/package.json | 4 +-- packages/web-components/src/anchor/index.ts | 15 +++++++++++ packages/web-components/src/button/index.ts | 7 +++--- yarn.lock | 28 ++++++++++----------- 4 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 9b81101dbb3433..942ded6fe5211a 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -94,8 +94,8 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-components-styles-msft": "^4.29.0", - "@microsoft/fast-element": "^0.21.0", - "@microsoft/fast-foundation": "^1.10.0", + "@microsoft/fast-element": "^0.21.1", + "@microsoft/fast-foundation": "^1.11.0", "tslib": "^1.13.0" }, "beachball": { diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts index 033fd9f5ff68ef..dde2a1c69de8b4 100644 --- a/packages/web-components/src/anchor/index.ts +++ b/packages/web-components/src/anchor/index.ts @@ -56,6 +56,21 @@ export class FluentAnchor extends Anchor { this.appearance = 'neutral'; } } + + /** + * Applies 'icon-only' class when there is only an SVG in the default slot + * + * @internal + */ + public defaultSlottedContentChanged(): void { + const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE); + + if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) { + this.control.classList.add('icon-only'); + } else { + this.control.classList.remove('icon-only'); + } + } } /** diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts index c0e184759993c8..4d551ca59d0199 100644 --- a/packages/web-components/src/button/index.ts +++ b/packages/web-components/src/button/index.ts @@ -59,16 +59,15 @@ export class FluentButton extends Button { /** * Applies 'icon-only' class when there is only an SVG in the default slot * - * @public - * @remarks + * @internal */ public defaultSlottedContentChanged(): void { const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE); if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) { - this.root.classList.add('icon-only'); + this.control.classList.add('icon-only'); } else { - this.root.classList.remove('icon-only'); + this.control.classList.remove('icon-only'); } } } diff --git a/yarn.lock b/yarn.lock index ed85652f139848..11477450323268 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2414,18 +2414,18 @@ "@microsoft/fast-jss-utilities" "^4.8.0" "@microsoft/fast-web-utilities" "^4.6.0" -"@microsoft/fast-element@^0.21.0": - version "0.21.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.21.0.tgz#40689eec6e77f3cdc664a18501ea72febc735ed4" - integrity sha512-SzqDjcVTXqOjEaZwcDZR1/3KD99/54pXq5ho53x/7BPSzT7o8tQoUqRZiJ5WqduAtX7/rtB52etffumHkbyLUw== +"@microsoft/fast-element@^0.21.1": + version "0.21.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.21.1.tgz#366fb006608819edf8053e0fbdb31618957b86a4" + integrity sha512-DZVu9KGtwP+vg9z6fAHpiPntPPFNj4ex6qBSsRLP5RP8akqD54OiUokRTJ9/JodIF7R9w34XLG3EJRD75LQwDQ== -"@microsoft/fast-foundation@^1.10.0": - version "1.10.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.10.0.tgz#43569725a2f5cd4a78edc20206c7d445e797cbab" - integrity sha512-8FUeHDn8blZRTmt3cVPvf6JXu3z0Jdhak5yx9yVTZttv9ACEQ1TXQfD4F0/BwYgA3ni7ORWHSXu68iJdGofRsQ== +"@microsoft/fast-foundation@^1.11.0": + version "1.11.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.11.0.tgz#c609fea459bebf41d49e715649c33334fe04af1b" + integrity sha512-ZbRrHKuN4xfnoxFHb8bmWPQHzOxC39KucL4CQ0hE8GRfNI38QbIAUNhVwgohsQWaKgiWv9soQr8kf94jdmaQow== dependencies: - "@microsoft/fast-element" "^0.21.0" - "@microsoft/fast-web-utilities" "^4.6.1" + "@microsoft/fast-element" "^0.21.1" + "@microsoft/fast-web-utilities" "^4.7.0" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^4.0.0" tslib "^1.13.0" @@ -2456,10 +2456,10 @@ dependencies: exenv-es6 "^1.0.0" -"@microsoft/fast-web-utilities@^4.6.1": - version "4.6.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.6.1.tgz#91c39bbd8499009c9e569d1aa309da17efcf9297" - integrity sha512-EL1v1xmQlQs5qwPM6gzwQXUgIHtRgKXmHajQJmsUvS0rm8rCu3kvp1eEq3okXuKjPjzToFusOgVapzi5ibjpbA== +"@microsoft/fast-web-utilities@^4.7.0": + version "4.7.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.7.0.tgz#8ba4b3b790447fca715fd5d7c3f3779c035a7982" + integrity sha512-GnK0ofXnFg/n6DpRtzH2gDLxVRqVhgIyxUBKUOu/hBtnQyQ/0HHc5XxMgJxZXdWvCLluQVEFt93Wp+Hvolq40Q== dependencies: exenv-es6 "^1.0.0" From 5bb3317be4bc8a5d0d19621164972491bc99f427 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Wed, 16 Dec 2020 13:10:57 -0800 Subject: [PATCH 2/2] Change files --- ...13-10-57-users-chhol-add-icon-only-anchor-support.json | 8 ++++++++ packages/web-components/docs/api-report.md | 3 +++ 2 files changed, 11 insertions(+) create mode 100644 change/@fluentui-web-components-2020-12-16-13-10-57-users-chhol-add-icon-only-anchor-support.json diff --git a/change/@fluentui-web-components-2020-12-16-13-10-57-users-chhol-add-icon-only-anchor-support.json b/change/@fluentui-web-components-2020-12-16-13-10-57-users-chhol-add-icon-only-anchor-support.json new file mode 100644 index 00000000000000..0e6d558fbf6b08 --- /dev/null +++ b/change/@fluentui-web-components-2020-12-16-13-10-57-users-chhol-add-icon-only-anchor-support.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "add icon only anchor support, update fast packages", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-12-16T21:10:57.554Z" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index e98d123b16a5da..0bf712ffe034a9 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -182,6 +182,8 @@ export class FluentAnchor extends Anchor { appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; // @internal (undocumented) connectedCallback(): void; + // @internal + defaultSlottedContentChanged(): void; } // @public @@ -205,6 +207,7 @@ export class FluentButton extends Button { appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void; // @internal (undocumented) connectedCallback(): void; + // @internal defaultSlottedContentChanged(): void; }