From c68ab8f5b9d2a347af5656bfa63852e7ca442d02 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Fri, 25 Jun 2021 10:44:21 -0700 Subject: [PATCH] update FAST dependencies for vNext and export all base classes (#18716) * update latest versions * update typings for context and definition, export base classes * Change files --- ...ts-1fd6bd86-f151-480d-a12a-29df279d95ff.json | 7 +++++++ packages/web-components/package.json | 2 +- .../accordion-item/accordion-item.styles.ts | 6 +++--- .../src/accordion/accordion-item/index.ts | 2 ++ .../src/accordion/accordion.styles.ts | 6 +++--- packages/web-components/src/accordion/index.ts | 6 ++++++ .../web-components/src/anchor/anchor.styles.ts | 5 +++-- .../anchored-region/anchored-region.styles.ts | 5 +++-- .../web-components/src/anchored-region/index.ts | 6 ++++++ .../web-components/src/badge/badge.styles.ts | 6 +++--- .../breadcrumb-item/breadcrumb-item.styles.ts | 6 +++--- .../web-components/src/breadcrumb-item/index.ts | 6 ++++++ .../src/breadcrumb/breadcrumb.styles.ts | 6 +++--- packages/web-components/src/breadcrumb/index.ts | 6 ++++++ .../web-components/src/button/button.styles.ts | 6 +++--- packages/web-components/src/card/card.styles.ts | 6 +++--- packages/web-components/src/card/index.ts | 6 +++--- .../src/checkbox/checkbox.styles.ts | 6 +++--- .../src/combobox/combobox.styles.ts | 6 +++--- .../src/data-grid/data-grid-cell.styles.ts | 6 +++--- .../src/data-grid/data-grid-row.styles.ts | 6 +++--- .../src/data-grid/data-grid.styles.ts | 5 +++-- packages/web-components/src/data-grid/index.ts | 6 ++++++ .../web-components/src/dialog/dialog.styles.ts | 5 +++-- packages/web-components/src/dialog/index.ts | 6 ++++++ .../src/divider/divider.styles.ts | 6 +++--- packages/web-components/src/divider/index.ts | 6 ++++++ .../src/flipper/flipper.styles.ts | 6 +++--- packages/web-components/src/flipper/index.ts | 6 ++++++ .../horizontal-scroll.styles.ts | 6 +++--- .../src/horizontal-scroll/index.ts | 17 ++++++++++++++++- .../src/listbox-option/listbox-option.styles.ts | 6 +++--- packages/web-components/src/listbox/index.ts | 6 ++++++ .../src/listbox/listbox.styles.ts | 6 +++--- packages/web-components/src/menu-item/index.ts | 6 ++++++ .../src/menu-item/menu-item.styles.ts | 6 +++--- packages/web-components/src/menu/index.ts | 6 ++++++ packages/web-components/src/menu/menu.styles.ts | 6 +++--- .../src/number-field/number-field.styles.ts | 6 +++--- .../src/progress/progress-ring/index.ts | 10 ++++++++-- .../progress-ring/progress-ring.styles.ts | 6 +++--- .../src/progress/progress/index.ts | 6 ++++++ .../src/progress/progress/progress.styles.ts | 6 +++--- .../web-components/src/radio-group/index.ts | 6 ++++++ .../src/radio-group/radio-group.styles.ts | 6 +++--- packages/web-components/src/radio/index.ts | 6 ++++++ .../web-components/src/radio/radio.styles.ts | 6 +++--- .../web-components/src/select/select.styles.ts | 6 +++--- packages/web-components/src/skeleton/index.ts | 6 ++++++ .../src/skeleton/skeleton.styles.ts | 6 +++--- .../web-components/src/slider-label/index.ts | 6 ++++++ .../src/slider-label/slider-label.styles.ts | 6 +++--- packages/web-components/src/slider/index.ts | 6 ++++++ .../web-components/src/slider/slider.styles.ts | 6 +++--- packages/web-components/src/switch/index.ts | 6 ++++++ .../web-components/src/switch/switch.styles.ts | 6 +++--- packages/web-components/src/tabs/index.ts | 6 ++++++ .../web-components/src/tabs/tab-panel/index.ts | 6 ++++++ .../src/tabs/tab-panel/tab-panel.styles.ts | 6 +++--- packages/web-components/src/tabs/tab/index.ts | 6 ++++++ .../web-components/src/tabs/tab/tab.styles.ts | 6 +++--- packages/web-components/src/tabs/tabs.styles.ts | 6 +++--- .../src/text-area/text-area.styles.ts | 6 +++--- .../src/text-field/text-field.styles.ts | 6 +++--- .../src/tooltip/tooltip.styles.ts | 6 +++--- packages/web-components/src/tree-item/index.ts | 6 ++++++ .../src/tree-item/tree-item.styles.ts | 6 ++++-- packages/web-components/src/tree-view/index.ts | 6 ++++++ .../src/tree-view/tree-view.styles.ts | 6 +++--- yarn.lock | 12 ++++++------ 70 files changed, 302 insertions(+), 128 deletions(-) create mode 100644 change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json diff --git a/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json b/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json new file mode 100644 index 00000000000000..3c89df8ed81596 --- /dev/null +++ b/change/@fluentui-web-components-1fd6bd86-f151-480d-a12a-29df279d95ff.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "update typings for context and definition, export base classes", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/package.json b/packages/web-components/package.json index c2aebdab898154..4dfd12727b487d 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -99,7 +99,7 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-element": "^1.4.0", - "@microsoft/fast-foundation": "2.0.0-1", + "@microsoft/fast-foundation": "^2.0.0", "lodash-es": "^4.17.20", "tslib": "^1.13.0" } 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 e45f567e6e2fe5..fe7c2dee0dcf94 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 @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { AccordionItemOptions, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { accentFillRest, @@ -16,7 +16,7 @@ import { } from '../../design-tokens'; import { heightNumber } from '../../styles/size'; -export const accordionItemStyles = (context, definition) => +export const accordionItemStyles: (context: ElementDefinitionContext, definition: AccordionItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: AccordionItemOptions) => css` ${display('flex')} :host { box-sizing: border-box; diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts index 59a8bf82511550..22f508d6e21fbd 100644 --- a/packages/web-components/src/accordion/accordion-item/index.ts +++ b/packages/web-components/src/accordion/accordion-item/index.ts @@ -49,3 +49,5 @@ export const fluentAccordionItem = AccordionItem.compose({ * @public */ export const accordionItemStyles = styles; + +export { AccordionItem }; diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts index 9014c76a0e4113..a130f80534161a 100644 --- a/packages/web-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/src/accordion/accordion.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { bodyFont, neutralForegroundRest, @@ -9,7 +9,7 @@ import { typeRampMinus1LineHeight, } from '../design-tokens'; -export const accordionStyles = (context, definition) => +export const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('flex')} :host { box-sizing: border-box; diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts index 703521cbd08a19..5a20490172bb75 100644 --- a/packages/web-components/src/accordion/index.ts +++ b/packages/web-components/src/accordion/index.ts @@ -23,3 +23,9 @@ export const fluentAccordion = Accordion.compose({ * @public */ export const accordionStyles = styles; + +/** + * Base class for Accordion + * @public + */ +export { Accordion }; diff --git a/packages/web-components/src/anchor/anchor.styles.ts b/packages/web-components/src/anchor/anchor.styles.ts index 19168fb4ea2789..627450f4cb21da 100644 --- a/packages/web-components/src/anchor/anchor.styles.ts +++ b/packages/web-components/src/anchor/anchor.styles.ts @@ -1,4 +1,5 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { AccentButtonStyles, baseButtonStyles, @@ -9,7 +10,7 @@ import { } from '../styles/'; import { appearanceBehavior } from '../utilities/behaviors'; -export const anchorStyles = (context, definition) => +export const anchorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${baseButtonStyles(context, definition)} `.withBehaviors( diff --git a/packages/web-components/src/anchored-region/anchored-region.styles.ts b/packages/web-components/src/anchored-region/anchored-region.styles.ts index 9a04f200205b6b..6c4f3ae1f89b74 100644 --- a/packages/web-components/src/anchored-region/anchored-region.styles.ts +++ b/packages/web-components/src/anchored-region/anchored-region.styles.ts @@ -1,6 +1,7 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; -export const anchoredRegionStyles = (context, definition) => css` +export const anchoredRegionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host { contain: layout; display: block; diff --git a/packages/web-components/src/anchored-region/index.ts b/packages/web-components/src/anchored-region/index.ts index 4e95503654ceae..957d68885fe2db 100644 --- a/packages/web-components/src/anchored-region/index.ts +++ b/packages/web-components/src/anchored-region/index.ts @@ -21,3 +21,9 @@ export const fluentAnchoredRegion = AnchoredRegion.compose({ * @public */ export const anchoredRegionStyles = styles; + +/** + * Base class for AnchoredRegion + * @public + */ +export { AnchoredRegion }; diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts index 2fe7afaeea1e70..cf1b8a6ebb0502 100644 --- a/packages/web-components/src/badge/badge.styles.ts +++ b/packages/web-components/src/badge/badge.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { accentFillRest, bodyFont, @@ -12,7 +12,7 @@ import { typeRampMinus1LineHeight, } from '../design-tokens'; -export const badgeStyles = (context, definition) => +export const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('inline-block')} :host { box-sizing: border-box; diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts index 9f4f8d5bce8816..0b7184fe6122d7 100644 --- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts +++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { BreadcrumbItemOptions, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { accentForegroundActive, @@ -14,7 +14,7 @@ import { } from '../design-tokens'; import { heightNumber } from '../styles/index'; -export const breadcrumbItemStyles = (context, definition) => +export const breadcrumbItemStyles: (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => css` ${display('inline-flex')} :host { background: transparent; diff --git a/packages/web-components/src/breadcrumb-item/index.ts b/packages/web-components/src/breadcrumb-item/index.ts index 422576629a3a56..740d25b2e42f26 100644 --- a/packages/web-components/src/breadcrumb-item/index.ts +++ b/packages/web-components/src/breadcrumb-item/index.ts @@ -31,3 +31,9 @@ export const fluentBreadcrumbItem = BreadcrumbItem.compose css` +export const breadcrumbStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('inline-block')} :host { box-sizing: border-box; font-family: ${bodyFont}; diff --git a/packages/web-components/src/breadcrumb/index.ts b/packages/web-components/src/breadcrumb/index.ts index b26abe7ddf2510..088c4388b64316 100644 --- a/packages/web-components/src/breadcrumb/index.ts +++ b/packages/web-components/src/breadcrumb/index.ts @@ -21,3 +21,9 @@ export const fluentBreadcrumb = Breadcrumb.compose({ * @public */ export const breadcrumbStyles = styles; + +/** + * Base class for Breadcrumb + * @public + */ +export { Breadcrumb }; diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index f2df497aa744e7..7db2e8db4c0906 100644 --- a/packages/web-components/src/button/button.styles.ts +++ b/packages/web-components/src/button/button.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { AccentButtonStyles, @@ -18,7 +18,7 @@ import { neutralStrokeRest, } from '../design-tokens'; -export const buttonStyles = (context, definition) => +export const buttonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host([disabled]), :host([disabled]:hover), diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index 69ef340bd01dc5..d2db0b68895b27 100644 --- a/packages/web-components/src/card/card.styles.ts +++ b/packages/web-components/src/card/card.styles.ts @@ -1,10 +1,10 @@ -import { css } from '@microsoft/fast-element'; -import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { elevation } from '../styles'; import { fillColor, layerCornerRadius } from '../design-tokens'; -export const CardStyles = css` +export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('block')} :host { --elevation: 4; display: block; diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index b5b9903ca1ea02..9e2cdd5d2bb0a5 100644 --- a/packages/web-components/src/card/index.ts +++ b/packages/web-components/src/card/index.ts @@ -4,7 +4,7 @@ import { parseColorHexRGB } from '@microsoft/fast-colors'; import { fillColor, neutralFillLayerRecipe, neutralPalette } from '../design-tokens'; import { Swatch, SwatchRGB } from '../color-vNext/swatch'; import { PaletteRGB } from '../color-vNext/palette'; -import { CardStyles as styles } from './card.styles'; +import { cardStyles as styles } from './card.styles'; /** * @public @@ -12,7 +12,7 @@ import { CardStyles as styles } from './card.styles'; export class Card extends FoundationCard { /** * Fill color for the card component. Sets context for the design system. - * + * * Updates the neutral palette and sets the card to the source color. For tinting use neutral-palette-source instead. * @public * @remarks @@ -39,7 +39,7 @@ export class Card extends FoundationCard { /** * Neutral palette source color for the card component. Sets context for the design system. - * + * * This allows for tinting the card while maintaining the light or dark context. For a fixed color use card-fill-color instead. * @public * @remarks diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts index ecbadd8c42a66f..8a5b2cbb9b8fe7 100644 --- a/packages/web-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/src/checkbox/checkbox.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { CheckboxOptions, disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles'; import { @@ -21,7 +21,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const checkboxStyles = (context, definition) => +export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles = (context: ElementDefinitionContext, definition: CheckboxOptions) => css` ${display('inline-flex')} :host { align-items: center; diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts index 472ee96f1e91b6..b41253a0be0000 100644 --- a/packages/web-components/src/combobox/combobox.styles.ts +++ b/packages/web-components/src/combobox/combobox.styles.ts @@ -1,10 +1,10 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, focusVisible } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ComboboxOptions, disabledCursor, ElementDefinitionContext, focusVisible } from '@microsoft/fast-foundation'; import { selectFilledStyles, selectStyles } from '../select/select.styles'; import { appearanceBehavior } from '../utilities/behaviors'; import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens'; -export const comboboxStyles = (context, definition) => +export const comboboxStyles: (context: ElementDefinitionContext, definition: ComboboxOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ComboboxOptions) => css` ${selectStyles(context, definition)} diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts index 6d7efe4f90000f..9d1e44a7365384 100644 --- a/packages/web-components/src/data-grid/data-grid-cell.styles.ts +++ b/packages/web-components/src/data-grid/data-grid-cell.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { bodyFont, controlCornerRadius, @@ -12,7 +12,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const dataGridCellStyles = (context, definition) => +export const dataGridCellStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host { padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px); diff --git a/packages/web-components/src/data-grid/data-grid-row.styles.ts b/packages/web-components/src/data-grid/data-grid-row.styles.ts index afd8a4ef6c9912..90efd7230172f2 100644 --- a/packages/web-components/src/data-grid/data-grid-row.styles.ts +++ b/packages/web-components/src/data-grid/data-grid-row.styles.ts @@ -1,8 +1,8 @@ -import { css } from '@microsoft/fast-element'; -import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { neutralFillRest, neutralStrokeDividerRest, strokeWidth } from '../design-tokens'; -export const dataGridRowStyles = (context, defintion) => +export const dataGridRowStyles: (context: ElementDefinitionContext, defintion: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, defintion: FoundationElementDefinition) => css` :host { display: grid; diff --git a/packages/web-components/src/data-grid/data-grid.styles.ts b/packages/web-components/src/data-grid/data-grid.styles.ts index 13b50f12a9b8f8..0351b0179de6af 100644 --- a/packages/web-components/src/data-grid/data-grid.styles.ts +++ b/packages/web-components/src/data-grid/data-grid.styles.ts @@ -1,6 +1,7 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; -export const dataGridStyles = (context, definition) => css` +export const dataGridStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host { display: flex; position: relative; diff --git a/packages/web-components/src/data-grid/index.ts b/packages/web-components/src/data-grid/index.ts index 558a9ed938ee4a..5ec3177a553172 100644 --- a/packages/web-components/src/data-grid/index.ts +++ b/packages/web-components/src/data-grid/index.ts @@ -66,3 +66,9 @@ export const fluentDataGrid = DataGrid.compose({ * @public */ export const dataGridStyles = gridStyles; + +/** + * Data grid base class definitions + * @public + */ +export { DataGrid, DataGridCell, DataGridRow }; diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts index 73f10ac5d00dfd..a1e42030b2438b 100644 --- a/packages/web-components/src/dialog/dialog.styles.ts +++ b/packages/web-components/src/dialog/dialog.styles.ts @@ -1,8 +1,9 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { elevation } from '../styles'; import { fillColor, layerCornerRadius, strokeWidth } from '../design-tokens'; +import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; -export const dialogStyles = (context, definition) => css` +export const dialogStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host([hidden]) { display: none; } diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts index 1f7575db7c63ad..f49c056c9aa6ec 100644 --- a/packages/web-components/src/dialog/index.ts +++ b/packages/web-components/src/dialog/index.ts @@ -21,3 +21,9 @@ export const fluentDialog = Dialog.compose({ * @public */ export const dialogStyles = styles; + +/** + * Base Dialog Class + * @public + */ +export { Dialog }; diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts index bb12d95e8125fe..ca87de8e6f8207 100644 --- a/packages/web-components/src/divider/divider.styles.ts +++ b/packages/web-components/src/divider/divider.styles.ts @@ -1,8 +1,8 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens'; -export const dividerStyles = (context, definition) => +export const dividerStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('block')} :host { box-sizing: content-box; diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts index b0550a9f0fcf65..d468f344551806 100644 --- a/packages/web-components/src/divider/index.ts +++ b/packages/web-components/src/divider/index.ts @@ -21,3 +21,9 @@ export const fluentDivider = Divider.compose({ * @public */ export const dividerStyles = styles; + +/** + * Base class for Fluent Divider + * @public + */ +export { Divider }; diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts index 24593e67211cca..0e393a41e86536 100644 --- a/packages/web-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/src/flipper/flipper.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, FlipperOptions, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles'; import { @@ -15,7 +15,7 @@ import { strokeWidth, } from '../design-tokens'; -export const flipperStyles = (context, definition) => +export const flipperStyles: (context: ElementDefinitionContext, definition: FlipperOptions) => ElementStyles = (context: ElementDefinitionContext, definition: FlipperOptions) => css` ${display('inline-flex')} :host { width: calc(${heightNumber} * 1px); diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts index 6dadf9645d78d0..9f1231e0dfdce3 100644 --- a/packages/web-components/src/flipper/index.ts +++ b/packages/web-components/src/flipper/index.ts @@ -35,3 +35,9 @@ export const fluentFlipper = Flipper.compose({ * @public */ export const flipperStyles = styles; + +/** + * Base class for Flipper + * @public + */ +export { Flipper }; diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts index e7aeea26446052..333507e266269e 100644 --- a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts +++ b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, HorizontalScrollOptions } from '@microsoft/fast-foundation'; import { DirectionalStyleSheetBehavior } from '../styles'; const ltrActionsStyles = css` @@ -108,7 +108,7 @@ export const ActionsStyles = css` * Styles handling the scroll container and content * @public */ -export const horizontalScrollStyles = (context, definition) => css` +export const horizontalScrollStyles: (context: ElementDefinitionContext, definition: HorizontalScrollOptions) => ElementStyles = (context: ElementDefinitionContext, definition: HorizontalScrollOptions) => css` ${display('block')} :host { --scroll-align: center; --scroll-item-spacing: 4px; diff --git a/packages/web-components/src/horizontal-scroll/index.ts b/packages/web-components/src/horizontal-scroll/index.ts index df86bba7ec89f3..1919984f547fe0 100644 --- a/packages/web-components/src/horizontal-scroll/index.ts +++ b/packages/web-components/src/horizontal-scroll/index.ts @@ -1,5 +1,7 @@ +import { html } from "@microsoft/fast-element"; import { HorizontalScroll as FoundationHorizontalScroll, + HorizontalScrollOptions, horizontalScrollTemplate as template, } from '@microsoft/fast-foundation'; import { ActionsStyles, horizontalScrollStyles as styles } from './horizontal-scroll.styles'; @@ -29,8 +31,21 @@ export class HorizontalScroll extends FoundationHorizontalScroll { * @remarks * HTML Element: \ */ -export const fluentHorizontalScroll = HorizontalScroll.compose({ +export const fluentHorizontalScroll = HorizontalScroll.compose({ baseName: 'horizontal-scroll', template, styles, + nextFlipper: html` + + `, + previousFlipper: html` + + `, }); diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts index 24bd8bb7bca5bd..4a122135da91ae 100644 --- a/packages/web-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles/size'; import { @@ -20,7 +20,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const optionStyles = (context, definition) => +export const optionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('inline-flex')} :host { font-family: ${bodyFont}; diff --git a/packages/web-components/src/listbox/index.ts b/packages/web-components/src/listbox/index.ts index 02200efb2f8244..f3496a62a5f3ef 100644 --- a/packages/web-components/src/listbox/index.ts +++ b/packages/web-components/src/listbox/index.ts @@ -22,3 +22,9 @@ export const fluentListbox = Listbox.compose({ * @public */ export const listboxStyles = styles; + +/** + * Listbox base class + * @public + */ +export { Listbox }; diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts index 30e01804dde891..91eb30487a578c 100644 --- a/packages/web-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { controlCornerRadius, @@ -11,7 +11,7 @@ import { strokeWidth, } from '../design-tokens'; -export const listboxStyles = (context, definition) => +export const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('inline-flex')} :host { background: ${neutralLayerFloating}; diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts index cfe82822f35cff..7148170dbb93c2 100644 --- a/packages/web-components/src/menu-item/index.ts +++ b/packages/web-components/src/menu-item/index.ts @@ -63,3 +63,9 @@ export const fluentMenuItem = MenuItem.compose({ * @public */ export const menuItemStyles = styles; + +/** + * Menu item base class + * @public + */ +export { MenuItem }; diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts index 28f8654ac185a2..8baf8968c566c6 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, MenuItemOptions } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles/index'; import { @@ -18,7 +18,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const menuItemStyles = (context, definition) => +export const menuItemStyles: (context: ElementDefinitionContext, definition: MenuItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: MenuItemOptions) => css` ${display('grid')} :host { contain: layout; diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts index 3fd9767ee96fdb..2a8951daee654d 100644 --- a/packages/web-components/src/menu/index.ts +++ b/packages/web-components/src/menu/index.ts @@ -21,3 +21,9 @@ export const fluentMenu = Menu.compose({ * @public */ export const menuStyles = styles; + +/** + * Base class for Menu + * @public + */ +export { Menu }; diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 12538d2a8fb23f..944d6f3a2ccf7c 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { elevation } from '../styles/index'; import { controlCornerRadius, @@ -10,7 +10,7 @@ import { strokeWidth, } from '../design-tokens'; -export const menuStyles = (context, definition) => +export const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('block')} :host { --elevation: 11; diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts index 9467c34e53af2c..c4a52373fd9708 100644 --- a/packages/web-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/src/number-field/number-field.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, NumberFieldOptions } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { fillStateStyles, heightNumber } from '../styles/index'; import { appearanceBehavior } from '../utilities/behaviors'; @@ -23,7 +23,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const numberFieldFilledStyles = (context, definition) => +export const numberFieldFilledStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles = (context: ElementDefinitionContext, definition: NumberFieldOptions) => css` :host([appearance='filled']) .root { background: ${neutralFillRest}; diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts index ceaf92cb3bd20d..9a6ae77446830a 100644 --- a/packages/web-components/src/progress/progress-ring/index.ts +++ b/packages/web-components/src/progress/progress-ring/index.ts @@ -1,5 +1,5 @@ import { - BaseProgress as Progress, + BaseProgress as ProgressRing, ProgressRingOptions, progressRingTemplate as template, } from '@microsoft/fast-foundation'; @@ -14,7 +14,7 @@ import { progressRingStyles as styles } from './progress-ring.styles'; * @remarks * HTML Element: \ */ -export const fluentProgressRing = Progress.compose({ +export const fluentProgressRing = ProgressRing.compose({ baseName: 'progress-ring', template, styles, @@ -43,3 +43,9 @@ export const fluentProgressRing = Progress.compose({ * @public */ export const progressRingStyles = styles; + +/** + * Progress Ring base class + * @public + */ +export { ProgressRing }; diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts index 3b906c0874e0eb..8c174aea82ada5 100644 --- a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts +++ b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts @@ -1,10 +1,10 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, ProgressRingOptions } from '@microsoft/fast-foundation'; import { heightNumber } from '../../styles'; import { accentForegroundRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens'; -export const progressRingStyles = (context, definition) => +export const progressRingStyles: (context: ElementDefinitionContext, definition: ProgressRingOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ProgressRingOptions) => css` ${display('flex')} :host { align-items: center; diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts index bfc1daa70a1a3d..796e97d3000a39 100644 --- a/packages/web-components/src/progress/progress/index.ts +++ b/packages/web-components/src/progress/progress/index.ts @@ -27,3 +27,9 @@ export const fluentProgress = Progress.compose({ * @public */ export const progressStyles = styles; + +/** + * Progress base class + * @public + */ +export { Progress }; diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts index 5a8936a5ecdb3d..e2c352bb571529 100644 --- a/packages/web-components/src/progress/progress/progress.styles.ts +++ b/packages/web-components/src/progress/progress/progress.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, ProgressOptions } from '@microsoft/fast-foundation'; import { accentForegroundRest, designUnit, @@ -9,7 +9,7 @@ import { strokeWidth, } from '../../design-tokens'; -export const progressStyles = (context, definition) => +export const progressStyles: (context: ElementDefinitionContext, definition: ProgressOptions) => ElementStyles = (context: ElementDefinitionContext, definition: ProgressOptions) => css` ${display('flex')} :host { align-items: center; diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts index f8457be8c3631f..9e1fc00bdeedd8 100644 --- a/packages/web-components/src/radio-group/index.ts +++ b/packages/web-components/src/radio-group/index.ts @@ -21,3 +21,9 @@ export const fluentRadioGroup = RadioGroup.compose({ * @public */ export const radioGroupStyles = styles; + +/** + * Radio group base class + * @public + */ +export { RadioGroup }; diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts index 47f61b936fcbde..1b6acafcc6f529 100644 --- a/packages/web-components/src/radio-group/radio-group.styles.ts +++ b/packages/web-components/src/radio-group/radio-group.styles.ts @@ -1,8 +1,8 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { designUnit } from '../design-tokens'; -export const radioGroupStyles = (context, definition) => css` +export const radioGroupStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('flex')} :host { align-items: flex-start; margin: calc(${designUnit} * 1px) 0; diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts index 1ec7604faf98c2..07a72b0c1fcaab 100644 --- a/packages/web-components/src/radio/index.ts +++ b/packages/web-components/src/radio/index.ts @@ -24,3 +24,9 @@ export const fluentRadio = Radio.compose({ * @public */ export const RadioStyles = styles; + +/** + * Radio base class + * @public + */ +export { Radio }; diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts index f1fe7a693e1194..ff4616b11c7a79 100644 --- a/packages/web-components/src/radio/radio.styles.ts +++ b/packages/web-components/src/radio/radio.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, RadioOptions } from '@microsoft/fast-foundation'; import { heightNumber } from '../styles'; import { designUnit, @@ -17,7 +17,7 @@ import { strokeWidth, } from '../design-tokens'; -export const radioStyles = (context, definition) => +export const radioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles = (context: ElementDefinitionContext, definition: RadioOptions) => css` ${display('inline-flex')} :host { --input-size: calc((${heightNumber} / 2) + ${designUnit}); diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts index f46d41891b84b4..12fbb92507a2bb 100644 --- a/packages/web-components/src/select/select.styles.ts +++ b/packages/web-components/src/select/select.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SelectOptions } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { elevation } from '../styles/elevation'; import { heightNumber } from '../styles/size'; @@ -29,7 +29,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const selectFilledStyles = (context, definition) => css` +export const selectFilledStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles = (context: ElementDefinitionContext, definition: SelectOptions) => css` :host([appearance="filled"]) { background: ${neutralFillRest}; border-color: transparent; diff --git a/packages/web-components/src/skeleton/index.ts b/packages/web-components/src/skeleton/index.ts index 081cc03c893cb4..446e17ee58d621 100644 --- a/packages/web-components/src/skeleton/index.ts +++ b/packages/web-components/src/skeleton/index.ts @@ -21,3 +21,9 @@ export const fluentSkeleton = Skeleton.compose({ * @public */ export const skeletonStyles = styles; + +/** + * Skeleton base class + * @public + */ +export { Skeleton }; diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts index 610145e35baf98..d6624eb7f80538 100644 --- a/packages/web-components/src/skeleton/skeleton.styles.ts +++ b/packages/web-components/src/skeleton/skeleton.styles.ts @@ -1,8 +1,8 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { controlCornerRadius, neutralFillRest } from '../design-tokens'; -export const skeletonStyles = (context, definition) => +export const skeletonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('block')} :host { --skeleton-fill-default: #e1dfdd; diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts index 87dd8269d3fce6..843d96e1b9a4ec 100644 --- a/packages/web-components/src/slider-label/index.ts +++ b/packages/web-components/src/slider-label/index.ts @@ -21,3 +21,9 @@ export const fluentSliderLabel = SliderLabel.compose({ * @public */ export const sliderLabelStyles = styles; + +/** + * Slider label base class + * @public + */ +export { SliderLabel }; diff --git a/packages/web-components/src/slider-label/slider-label.styles.ts b/packages/web-components/src/slider-label/slider-label.styles.ts index aa1b45a904c44f..d1be92a7bdee85 100644 --- a/packages/web-components/src/slider-label/slider-label.styles.ts +++ b/packages/web-components/src/slider-label/slider-label.styles.ts @@ -1,10 +1,10 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { heightNumber } from '../styles'; import { bodyFont, designUnit, disabledOpacity, neutralStrokeRest } from '../design-tokens'; -export const sliderLabelStyles = (context, definition) => +export const sliderLabelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('block')} :host { font-family: ${bodyFont}; diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts index 82900e186370d2..96128b7f5c8c91 100644 --- a/packages/web-components/src/slider/index.ts +++ b/packages/web-components/src/slider/index.ts @@ -24,3 +24,9 @@ export const fluentSlider = Slider.compose({ * @public */ export const sliderStyles = styles; + +/** + * Slider base class + * @public + */ +export { Slider }; diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts index d6b6bd1fd669ff..a34cc85fe82aeb 100644 --- a/packages/web-components/src/slider/slider.styles.ts +++ b/packages/web-components/src/slider/slider.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SliderOptions } from '@microsoft/fast-foundation'; import { heightNumber } from '../styles'; import { controlCornerRadius, @@ -15,7 +15,7 @@ import { neutralStrokeRest, } from '../design-tokens'; -export const sliderStyles = (context, defintion) => +export const sliderStyles: (context: ElementDefinitionContext, definition: SliderOptions) => ElementStyles = (context: ElementDefinitionContext, definition: SliderOptions) => css` ${display('inline-grid')} :host { --thumb-size: calc(${heightNumber} * 0.5); diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts index a665ac2a783eb3..0ac9cd1d088b90 100644 --- a/packages/web-components/src/switch/index.ts +++ b/packages/web-components/src/switch/index.ts @@ -24,3 +24,9 @@ export const fluentSwitch = Switch.compose({ * @public */ export const switchStyles = styles; + +/** + * Switch Base class + * @public + */ +export { Switch }; diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts index 1b2d3641ad1b18..d7a490e30adbb5 100644 --- a/packages/web-components/src/switch/switch.styles.ts +++ b/packages/web-components/src/switch/switch.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, SwitchOptions } from '@microsoft/fast-foundation'; import { DirectionalStyleSheetBehavior, heightNumber } from '../styles'; import { accentFillActive, @@ -24,7 +24,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const switchStyles = (context, defintiion) => +export const switchStyles: (context: ElementDefinitionContext, defintiion: SwitchOptions) => ElementStyles = (context: ElementDefinitionContext, defintiion: SwitchOptions) => css` :host([hidden]) { display: none; diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts index 0db87c281efe40..ab4708ede7e661 100644 --- a/packages/web-components/src/tabs/index.ts +++ b/packages/web-components/src/tabs/index.ts @@ -24,3 +24,9 @@ export * from './tab-panel'; * @public */ export const tabsStyles = styles; + +/** + * Tabs base class + * @public + */ +export { Tabs }; diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts index ef8529e1bb066f..859f86dd461ba6 100644 --- a/packages/web-components/src/tabs/tab-panel/index.ts +++ b/packages/web-components/src/tabs/tab-panel/index.ts @@ -21,3 +21,9 @@ export const fluentTabPanel = TabPanel.compose({ * @public */ export const tabPanelStyles = styles; + +/** + * Tab panel base styles + * @public + */ +export { TabPanel }; diff --git a/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts b/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts index 0c52a838934813..5ce5717b0a9251 100644 --- a/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts +++ b/packages/web-components/src/tabs/tab-panel/tab-panel.styles.ts @@ -1,8 +1,8 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { bodyFont, density, designUnit, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../../design-tokens'; -export const tabPanelStyles = (context, definition) => css` +export const tabPanelStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('flex')} :host { box-sizing: border-box; font-family: ${bodyFont}; diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts index a20c76d8a4194e..a64c9af9f23e8c 100644 --- a/packages/web-components/src/tabs/tab/index.ts +++ b/packages/web-components/src/tabs/tab/index.ts @@ -21,3 +21,9 @@ export const fluentTab = Tab.compose({ * @public */ export const tabStyles = styles; + +/** + * Tab base class + * @public + */ +export { Tab }; diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts index 31431ed92f8bd3..44a858d266c04f 100644 --- a/packages/web-components/src/tabs/tab/tab.styles.ts +++ b/packages/web-components/src/tabs/tab/tab.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { heightNumber } from '../../styles'; import { bodyFont, @@ -15,7 +15,7 @@ import { typeRampBaseLineHeight, } from '../../design-tokens'; -export const tabStyles = (context, definition) => +export const tabStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('inline-flex')} :host { box-sizing: border-box; diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts index 3f0a24d55dc720..120368bc8fe9fe 100644 --- a/packages/web-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/src/tabs/tabs.styles.ts @@ -1,6 +1,6 @@ -import { css } from '@microsoft/fast-element'; +import { css, ElementStyles } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; -import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { accentFillRest, bodyFont, @@ -10,7 +10,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const tabsStyles = (context, definition) => +export const tabsStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` ${display('grid')} :host { box-sizing: border-box; diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts index e1889651aa17b4..a7c047de2fe65e 100644 --- a/packages/web-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/src/text-area/text-area.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { fillStateStyles, heightNumber } from '../styles'; import { appearanceBehavior } from '../utilities/behaviors'; @@ -18,7 +18,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const textAreaFilledStyles = (context, definition) => +export const textAreaFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host([appearance='filled']) .control { background: ${neutralFillRest}; diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts index 23ec8bd02cb2e4..3dfe46262f2841 100644 --- a/packages/web-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/src/text-field/text-field.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { disabledCursor, display, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { fillStateStyles, heightNumber } from '../styles'; import { appearanceBehavior } from '../utilities/behaviors'; @@ -20,7 +20,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const textFieldFilledStyles = (context, definition) => +export const textFieldFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host([appearance='filled']) .root { background: ${neutralFillRest}; diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts index f38c97fe4a7db1..ebc136223b23a0 100644 --- a/packages/web-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/src/tooltip/tooltip.styles.ts @@ -1,5 +1,5 @@ -import { css } from '@microsoft/fast-element'; -import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation'; import { elevation } from '../styles/index'; import { bodyFont, @@ -11,7 +11,7 @@ import { typeRampBaseLineHeight, } from '../design-tokens'; -export const tooltipStyles = (context, definition) => +export const tooltipStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host { --elevation: 11; diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts index 3882297a6825d1..e809e8a8f24287 100644 --- a/packages/web-components/src/tree-item/index.ts +++ b/packages/web-components/src/tree-item/index.ts @@ -33,3 +33,9 @@ export const fluentTreeItem = TreeItem.compose({ * @public */ export const treeItemStyles = styles; + +/** + * Tree item base class + * @public + */ +export { TreeItem }; diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts index 3aa493d4948f69..95ce67825b66cb 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -1,10 +1,12 @@ -import { css, cssPartial } from '@microsoft/fast-element'; +import { css, cssPartial, ElementStyles } from '@microsoft/fast-element'; import { DesignToken, disabledCursor, display, + ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, + TreeItemOptions, } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index'; @@ -77,7 +79,7 @@ const selectedExpandCollapseHoverBehavior = DesignToken.create( return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover; }); -export const treeItemStyles = (context, definition) => +export const treeItemStyles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles = (context: ElementDefinitionContext, definition: TreeItemOptions) => css` ${display('block')} :host { contain: content; diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts index 7ca6c9aed10297..3c445c472899cc 100644 --- a/packages/web-components/src/tree-view/index.ts +++ b/packages/web-components/src/tree-view/index.ts @@ -22,3 +22,9 @@ export const fluentTreeView = TreeView.compose({ * @public */ export const treeViewStyles = styles; + +/** + * Tree View base class + * @public + */ +export { TreeView }; diff --git a/packages/web-components/src/tree-view/tree-view.styles.ts b/packages/web-components/src/tree-view/tree-view.styles.ts index d4564ea099ab74..c04a69828f283d 100644 --- a/packages/web-components/src/tree-view/tree-view.styles.ts +++ b/packages/web-components/src/tree-view/tree-view.styles.ts @@ -1,7 +1,7 @@ -import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; +import { css, ElementStyles } from '@microsoft/fast-element'; +import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation'; -export const treeViewStyles = (context, definition) => css` +export const treeViewStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css` :host([hidden]) { display: none; } diff --git a/yarn.lock b/yarn.lock index 366f9fa0d717d6..bae464fa50ae1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2698,17 +2698,17 @@ resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966" integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng== -"@microsoft/fast-element@^1.3.0", "@microsoft/fast-element@^1.4.0": +"@microsoft/fast-element@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.4.0.tgz#761b5ebdde1a271c5f96f7c15fab9f5a2a10657f" integrity sha512-7BC/juFc7S4HMGt/tNCP9bjwtUslheGiPM2jtIibe1bj+PO34woUfH5TxaklOT6sRStig/0fODX4R5oqY4DYLA== -"@microsoft/fast-foundation@2.0.0-1": - version "2.0.0-1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0-1.tgz#a294ef0df7343420dc327ffbccd724d9d9d8a5ed" - integrity sha512-CHWxUoYAv/r5NWTQkpnyKRAf5BNtRPfcTIvADSucLODliyniYnJ9kGk+4IdUMt1VuducgI77vtB1a0IA/9W0Dw== +"@microsoft/fast-foundation@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0.tgz#edf62deb981735566d70fa01b281d1ff5bd3971c" + integrity sha512-l+a235QoZRsz4GbmK3LVkIE4IwNeuS7s1868hoU121Ii6jti3r5gEt4OPY+zAp9/gwoIh4OU+km4bD+vQdmr0g== dependencies: - "@microsoft/fast-element" "^1.3.0" + "@microsoft/fast-element" "^1.4.0" "@microsoft/fast-web-utilities" "^4.8.0" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^5.2.0"