microsoft/fast/pull/6580#issuecomment-1367536502

Vonage · Jan 4, 2023 · e8c7a69 · e8c7a69
1 parent 5581e08
commit e8c7a69
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/libs/components/src/lib/tabs/README.md b/libs/components/src/lib/tabs/README.md
@@ -10,7 +10,7 @@ The vwc-tabs accepts [vwc-tab](../../components/tab) and `vwc-tab-panel` element
 ```
 
 ```html preview full
-<vwc-tabs>
+<vwc-tabs activeid="Appetizers">
     <vwc-tab label="Appetizers" id="apps"></vwc-tab>
     <vwc-tab label="Entrees" id="entrees"></vwc-tab>
     <vwc-tab label="Desserts" id="desserts"></vwc-tab>
@@ -52,7 +52,7 @@ Add a `orientation` attribute to control the orientation.
 - Default: `'horizontal'`
 
 ```html preview full
-<vwc-tabs activeid="entrees" orientation="vertical">
+<vwc-tabs activeid="Entrees" orientation="vertical">
     <vwc-tab label="Appetizers" id="apps"></vwc-tab>
     <vwc-tab label="Entrees" id="entrees"></vwc-tab>
     <vwc-tab label="Desserts" id="desserts"></vwc-tab>

diff --git a/libs/components/src/lib/tabs/tabs.ts b/libs/components/src/lib/tabs/tabs.ts
@@ -1,7 +1,7 @@
 import { observable } from '@microsoft/fast-element';
 import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
 
-const TABS_ACTIVE_INDICATOR_INLINE_SIZE = "--_tabs-active-indicator-inline-size";
+const TABS_ACTIVE_INDICATOR_INLINE_SIZE = '--_tabs-active-indicator-inline-size';
 
 /**
  * Base class for tabs
@@ -14,7 +14,7 @@ export class Tabs extends FoundationTabs {
 	override orientationChanged(): void {
 		super.orientationChanged();
 		this.patchIndicatorStyleTransition();
-		if (this.orientation === "vertical") {
+		if (this.orientation === 'vertical') {
 			this.activeIndicatorRef?.style.removeProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE);
 		}
 	}
@@ -39,6 +39,6 @@ export class Tabs extends FoundationTabs {
 		const width = this.activetab?.getClientRects()[0]?.width;
 		if (!width) return;
 
-    this.activeIndicatorRef?.style.setProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE, `${width}px`);
-  }
+		this.activeIndicatorRef?.style.setProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE, `${width}px`);
+	}
 }