Adding web component Tabs, Tab and TabPanel

change/@fluentui-web-components-34a9c737-14ba-48cd-aaca-4a706295cefb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adding TabList, Tab, and TabPanel web components",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/index.ts

@@ -10,6 +10,9 @@ export * from './progress-bar/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
+export * from './tabs/index.js';
+export * from './tab/index.js';
+export * from './tab-panel/index.js';
 export * from './text/index.js';
 
 export * from './theme/index.js';

packages/web-components/src/tab-panel/define.ts

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tab-panel.definition.js';
+
+definition.define(FluentDesignSystem.registry);

packages/web-components/src/tab-panel/index.ts

@@ -0,0 +1,4 @@
+export * from './tab-panel.js';
+export { template as TabPanelTemplate } from './tab-panel.template.js';
+export { styles as TabPanelStyles } from './tab-panel.styles.js';
+export { definition as TabPanelDefinition } from './tab-panel.definition.js';

packages/web-components/src/tab-panel/tab-panel.definition.ts

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { TabPanel } from './tab-panel.js';
+import { template } from './tab-panel.template.js';
+import { styles } from './tab-panel.styles.js';
+
+export const definition = TabPanel.compose({
+  name: `${FluentDesignSystem.prefix}-tab-panel`,
+  template,
+  styles,
+});

packages/web-components/src/tab-panel/tab-panel.styles.ts

@@ -0,0 +1,12 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { spacingHorizontalM, spacingHorizontalMNudge } from '../theme/design-tokens.js';
+
+export const styles = css`
+  ${display('block')}
+
+  :host {
+    box-sizing: border-box;
+    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+  }
+`;

packages/web-components/src/tab-panel/tab-panel.template.ts

@@ -0,0 +1,3 @@
+import { tabPanelTemplate } from '@microsoft/fast-foundation';
+
+export const template = tabPanelTemplate();

packages/web-components/src/tab-panel/tab-panel.ts

@@ -0,0 +1,3 @@
+import { FASTTabPanel } from '@microsoft/fast-foundation';
+
+export class TabPanel extends FASTTabPanel {}

packages/web-components/src/tab/define.ts

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tab.definition.js';
+
+definition.define(FluentDesignSystem.registry);

packages/web-components/src/tab/index.ts

@@ -0,0 +1,4 @@
+export * from './tab.js';
+export { template as TabTemplate } from './tab.template.js';
+export { styles as TabStyles } from './tab.styles.js';
+export { definition as TabDefinition } from './tab.definition.js';

packages/web-components/src/tab/tab.definition.ts

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Tab } from './tab.js';
+import { template } from './tab.template.js';
+import { styles } from './tab.styles.js';
+
+export const definition = Tab.compose({
+  name: `${FluentDesignSystem.prefix}-tab`,
+  template,
+  styles,
+});

packages/web-components/src/tab/tab.styles.ts

@@ -0,0 +1,111 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+  borderRadiusCircular,
+  borderRadiusMedium,
+  borderRadiusSmall,
+  colorCompoundBrandStroke,
+  colorNeutralForeground1,
+  colorNeutralForeground2,
+  colorNeutralForegroundDisabled,
+  colorNeutralStroke1Hover,
+  colorStrokeFocus1,
+  colorStrokeFocus2,
+  fontFamilyBase,
+  fontSizeBase300,
+  fontWeightSemibold,
+  lineHeightBase300,
+  spacingHorizontalM,
+  spacingHorizontalMNudge,
+} from '../theme/design-tokens.js';
+
+export const styles = css`
+  ${display('inline-flex')}
+
+  :host {
+    position: relative;
+    flex-direction: column;
+    cursor: pointer;
+    box-sizing: border-box;
+    justify-content: center;
+    line-height: ${lineHeightBase300};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    color: ${colorNeutralForeground2};
+    fill: currentcolor;
+    grid-row: 1;
+    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+    border-radius: ${borderRadiusMedium};
+  }
+  :host .tab-content {
+    display: inline-flex;
+    flex-direction: column;
+    padding: 0 2px;
+  }
+
+  :host([aria-selected='true']) {
+    color: ${colorNeutralForeground1};
+    font-weight: ${fontWeightSemibold};
+  }
+
+  /* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
+  :host .tab-content::after {
+    content: var(--textContent);
+    visibility: hidden;
+    height: 0;
+    line-height: ${lineHeightBase300};
+    font-weight: ${fontWeightSemibold};
+  }
+
+  :host([aria-selected='true'])::after {
+    background-color: ${colorCompoundBrandStroke};
+    border-radius: ${borderRadiusCircular};
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: 2;
+  }
+
+  :host([aria-selected='false']:hover)::after {
+    background-color: ${colorNeutralStroke1Hover};
+    border-radius: ${borderRadiusCircular};
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: 1;
+  }
+
+  :host([aria-selected='true'][disabled])::after {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  ::slotted([slot='start']),
+  ::slotted([slot='end']) {
+    display: flex;
+  }
+  ::slotted([slot='start']) {
+    margin-inline-end: 11px;
+  }
+  ::slotted([slot='end']) {
+    margin-inline-start: 11px;
+  }
+  :host([disabled]) {
+    cursor: not-allowed;
+    fill: ${colorNeutralForegroundDisabled};
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]:hover)::after {
+    background-color: unset;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusSmall};
+    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
+    outline: 1px solid ${colorStrokeFocus1};
+  }
+`;

packages/web-components/src/tab/tab.template.ts

@@ -0,0 +1,14 @@
+import { endSlotTemplate, FASTTab, startSlotTemplate, TabOptions } from '@microsoft/fast-foundation';
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
+
+export function tabTemplate<T extends FASTTab>(options: TabOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
+      ${startSlotTemplate(options)}
+      <span class="tab-content"><slot></slot></span>
+      ${endSlotTemplate(options)}
+    </template>
+  `;
+}
+
+export const template = tabTemplate({});

packages/web-components/src/tab/tab.ts

@@ -0,0 +1,25 @@
+import { css, ElementStyles } from '@microsoft/fast-element';
+import { FASTTab } from '@microsoft/fast-foundation';
+
+/**
+ * Tab extends the FASTTab and is a child of the TabList
+ */
+export class Tab extends FASTTab {
+  private styles: ElementStyles | undefined;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.styles !== undefined) {
+      this.$fastController.removeStyles(this.styles);
+    }
+
+    this.styles = css/**css*/ `
+      :host {
+        --textContent: '${this.textContent as any}';
+      }
+    `;
+
+    this.$fastController.addStyles(this.styles);
+  }
+}

packages/web-components/src/tabs/define.ts

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tabs.definition.js';
+
+definition.define(FluentDesignSystem.registry);

packages/web-components/src/tabs/index.ts

@@ -0,0 +1,5 @@
+export * from './tabs.js';
+export * from './tabs.options.js';
+export { template as TabsTemplate } from './tabs.template.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { definition as TabsDefinition } from './tabs.definition.js';

packages/web-components/src/tabs/tabs.definition.ts

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Tabs } from './tabs.js';
+import { template } from './tabs.template.js';
+import { styles } from './tabs.styles.js';
+
+export const definition = Tabs.compose({
+  name: `${FluentDesignSystem.prefix}-tabs`,
+  template,
+  styles,
+});

packages/web-components/src/tabs/tabs.options.ts

@@ -0,0 +1,19 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+import { TabsOrientation } from '@microsoft/fast-foundation';
+
+export const TabsAppearance = {
+  subtle: 'subtle',
+  transparent: 'transparent',
+} as const;
+
+export type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+
+export const TabsSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+} as const;
+
+export type TabsSize = ValuesOf<typeof TabsSize>;
+
+export { TabsOrientation };