(web components) add base class support to wc (#19756)

* implement base class for components which extend beyond foundation * Change files
microsoft · Sep 10, 2021 · 7edc8fe · 7edc8fe
1 parent 27dd84d
commit 7edc8fe
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 10 deletions.
diff --git a/change/@fluentui-web-components-488199db-3435-4882-ad28-317c17da5050.json b/change/@fluentui-web-components-488199db-3435-4882-ad28-317c17da5050.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "implement base class for components which extend beyond foundation",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -92,7 +92,7 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.5.0",
-    "@microsoft/fast-foundation": "^2.10.0",
+    "@microsoft/fast-foundation": "^2.12.0",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }

diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts
@@ -76,6 +76,7 @@ export const anchorStyles = styles;
  */
 export const fluentAnchor = Anchor.compose({
   baseName: 'anchor',
+  baseClass: FoundationAnchor,
   template,
   styles,
   shadowOptions: {

diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts
@@ -36,6 +36,7 @@ export class Badge extends FoundationBadge {
  */
 export const fluentBadge = Badge.compose({
   baseName: 'badge',
+  baseClass: FoundationBadge,
   template,
   styles,
 });

diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
@@ -69,6 +69,7 @@ export class Button extends FoundationButton {
  */
 export const fluentButton = Button.compose({
   baseName: 'button',
+  baseClass: FoundationButton,
   template,
   styles,
   shadowOptions: {

diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
@@ -93,6 +93,7 @@ export class Card extends FoundationCard {
  */
 export const fluentCard = Card.compose({
   baseName: 'card',
+  baseClass: FoundationCard,
   template,
   styles,
 });

diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts
@@ -61,6 +61,7 @@ export class Combobox extends FoundationCombobox {
  */
 export const fluentCombobox = Combobox.compose<ComboboxOptions>({
   baseName: 'combobox',
+  baseClass: FoundationCombobox,
   template,
   styles,
   indicator: `

diff --git a/packages/web-components/src/horizontal-scroll/index.ts b/packages/web-components/src/horizontal-scroll/index.ts
@@ -33,6 +33,7 @@ export class HorizontalScroll extends FoundationHorizontalScroll {
  */
 export const fluentHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptions>({
   baseName: 'horizontal-scroll',
+  baseClass: FoundationHorizontalScroll,
   template,
   styles,
   nextFlipper: html`

diff --git a/packages/web-components/src/number-field/index.ts b/packages/web-components/src/number-field/index.ts
@@ -58,6 +58,7 @@ export const numberFieldStyles = styles;
  */
 export const fluentNumberField = NumberField.compose<NumberFieldOptions>({
   baseName: 'number-field',
+  baseClass: FoundationNumberField,
   styles,
   template,
   shadowOptions: {

diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts
@@ -57,6 +57,7 @@ export class Select extends FoundationSelect {
  */
 export const fluentSelect = Select.compose<SelectOptions>({
   baseName: 'select',
+  baseClass: FoundationSelect,
   template,
   styles,
   indicator: `

diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts
@@ -58,6 +58,7 @@ export class TextArea extends FoundationTextArea {
  */
 export const fluentTextArea = TextArea.compose({
   baseName: 'text-area',
+  baseClass: FoundationTextArea,
   template,
   styles,
   shadowOptions: {

diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts
@@ -58,6 +58,7 @@ export class TextField extends FoundationTextField {
  */
 export const fluentTextField = TextField.compose({
   baseName: 'text-field',
+  baseClass: FoundationTextField,
   template,
   styles,
   shadowOptions: {

diff --git a/packages/web-components/src/tooltip/index.ts b/packages/web-components/src/tooltip/index.ts
@@ -31,6 +31,7 @@ export class Tooltip extends FoundationTooltip {
  */
 export const fluentTooltip = Tooltip.compose({
   baseName: 'tooltip',
+  baseClass: FoundationTooltip,
   template,
   styles,
 });
diff --git a/yarn.lock b/yarn.lock
@@ -2655,17 +2655,17 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
   integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==
 
-"@microsoft/fast-element@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.5.0.tgz#fcef9058cb007561f9fa85dcf537cbb618aec8b3"
-  integrity sha512-usrPwHFdV4w4nZ3vlBbTYy9lXwfu0QJWfjHItgIqBIGkUIoWotW91BQaszt3xlQXx8e3v8294WEMtfc/MCukRA==
+"@microsoft/fast-element@^1.5.0", "@microsoft/fast-element@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.5.1.tgz#a4e98da1ac0873568360d69dfcf0e4fcc46a374c"
+  integrity sha512-2wv3svn2fJqT84PrchSNjRjCJ2z74tuzoo7odACouuQaLXuJckv1XexXWUj5INKY6/LB/rN/bJMYauX33JgOZA==
 
-"@microsoft/fast-foundation@^2.10.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.10.0.tgz#fc3356b5955eb080bfe4ea3be912502eb71400ea"
-  integrity sha512-E0Q9IogdLQReJCC9jIGM6tGf8631reBhrapZbYiZwrOM/sX7TS2waYy54zsLuI5mOgDdOYFH8LtiHCKwgFVoDw==
+"@microsoft/fast-foundation@^2.12.0":
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.12.0.tgz#d21599531fcda1df83ea37b118f40fdaa547f726"
+  integrity sha512-cgK8JGpVI4HyH94ddUdHwypg9kdeL/CP42VuxNWydTb2zoZiNsINyx/b/r7KRf8z9KvTH596JeBcS8WJlUGuBw==
   dependencies:
-    "@microsoft/fast-element" "^1.5.0"
+    "@microsoft/fast-element" "^1.5.1"
     "@microsoft/fast-web-utilities" "^4.8.0"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^5.2.0"