Skip to content

Commit

Permalink
[web-components] provide single export for registering all components (
Browse files Browse the repository at this point in the history
…#18962)

* add single export object for easily registering all Fluent UI web components

* Change files
  • Loading branch information
chrisdholt authored Jul 15, 2021
1 parent d939413 commit 874be49
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 37 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "add single export object for easily registering all Fluent UI web components",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
62 changes: 62 additions & 0 deletions packages/web-components/docs/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,59 @@ export const accordionItemStyles: (context: ElementDefinitionContext, definition
// @public
export const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

// @public
export const allComponents: {
fluentAccordion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Accordion>;
fluentAccordionItem: (overrideDefinition?: OverrideFoundationElementDefinition<AccordionItemOptions> | undefined) => FoundationElementRegistry<AccordionItemOptions, Constructable<FoundationElement>>;
fluentAnchor: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Anchor>;
fluentAnchoredRegion: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, AnchoredRegion>;
fluentBadge: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Badge>;
fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Breadcrumb>;
fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => FoundationElementRegistry<BreadcrumbItemOptions, Constructable<FoundationElement>>;
fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Button>;
fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Card>;
fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => FoundationElementRegistry<ComboboxOptions, Constructable<FoundationElement>>;
fluentDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, DataGrid>;
fluentDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, DataGridCell>;
fluentDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, DataGridRow>;
fluentDesignSystemProvider: (overrideDefinition?: OverrideFoundationElementDefinition< {
baseName: string;
template: ViewTemplate<any, any>;
styles: ElementStyles;
}> | undefined) => FoundationElementRegistry< {
baseName: string;
template: ViewTemplate<any, any>;
styles: ElementStyles;
}, DesignSystemProvider>;
fluentDialog: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Dialog>;
fluentDivider: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Divider>;
fluentFlipper: (overrideDefinition?: OverrideFoundationElementDefinition<FlipperOptions> | undefined) => FoundationElementRegistry<FlipperOptions, Constructable<FoundationElement>>;
fluentHorizontalScroll: (overrideDefinition?: OverrideFoundationElementDefinition<HorizontalScrollOptions> | undefined) => FoundationElementRegistry<HorizontalScrollOptions, Constructable<FoundationElement>>;
fluentListbox: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Listbox>;
fluentOption: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, ListboxOption>;
fluentMenu: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Menu>;
fluentMenuItem: (overrideDefinition?: OverrideFoundationElementDefinition<MenuItemOptions> | undefined) => FoundationElementRegistry<MenuItemOptions, Constructable<FoundationElement>>;
fluentNumberField: (overrideDefinition?: OverrideFoundationElementDefinition<NumberFieldOptions> | undefined) => FoundationElementRegistry<NumberFieldOptions, Constructable<FoundationElement>>;
fluentProgress: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressOptions> | undefined) => FoundationElementRegistry<ProgressOptions, Constructable<FoundationElement>>;
fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => FoundationElementRegistry<ProgressRingOptions, Constructable<FoundationElement>>;
fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition<RadioOptions> | undefined) => FoundationElementRegistry<RadioOptions, Constructable<FoundationElement>>;
fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, RadioGroup>;
fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition<SelectOptions> | undefined) => FoundationElementRegistry<SelectOptions, Constructable<FoundationElement>>;
fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Skeleton>;
fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition<SliderOptions> | undefined) => FoundationElementRegistry<SliderOptions, Constructable<FoundationElement>>;
fluentSliderLabel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, SliderLabel>;
fluentSwitch: (overrideDefinition?: OverrideFoundationElementDefinition<SwitchOptions> | undefined) => FoundationElementRegistry<SwitchOptions, Constructable<FoundationElement>>;
fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tabs>;
fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tab>;
fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TabPanel>;
fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextArea>;
fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextField>;
fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TreeView>;
fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
};

// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
Expand Down Expand Up @@ -1267,6 +1320,15 @@ export const typeRampPlus6FontSize: CSSDesignToken<string>;
// @public (undocumented)
export const typeRampPlus6LineHeight: CSSDesignToken<string>;

// Warnings were encountered during analysis:
//
// dist/dts/custom-elements.d.ts:47:5 - (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal
// dist/dts/custom-elements.d.ts:49:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal
// dist/dts/custom-elements.d.ts:52:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal
// dist/dts/custom-elements.d.ts:89:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal
// dist/dts/custom-elements.d.ts:90:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal
// dist/dts/custom-elements.d.ts:91:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal

// (No @packageDocumentation comment for this package)

```
162 changes: 127 additions & 35 deletions packages/web-components/src/custom-elements.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,130 @@
/**
* Export all custom element definitions
*/
export { fluentAccordion, fluentAccordionItem } from './accordion/index';
export { fluentAnchor } from './anchor/index';
export { fluentAnchoredRegion } from './anchored-region/index';
export { fluentBadge } from './badge/index';
export { fluentBreadcrumb } from './breadcrumb/index';
export { fluentBreadcrumbItem } from './breadcrumb-item/index';
export { fluentButton } from './button/index';
export { fluentCard } from './card/index';
export { fluentCheckbox } from './checkbox/index';
export { fluentCombobox } from './combobox/index';
export { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index';
export { fluentDesignSystemProvider } from './design-system-provider/index';
export { fluentDialog } from './dialog/index';
export { fluentDivider } from './divider/index';
export { fluentFlipper } from './flipper/index';
export { fluentHorizontalScroll } from './horizontal-scroll/index';
export { fluentListbox } from './listbox/index';
export { fluentOption } from './listbox-option/index';
export { fluentMenu } from './menu/index';
export { fluentMenuItem } from './menu-item/index';
export { fluentNumberField } from './number-field/index';
export { fluentProgress, fluentProgressRing } from './progress/index';
export { fluentRadio } from './radio/index';
export { fluentRadioGroup } from './radio-group/index';
export { fluentSelect } from './select/index';
export { fluentSkeleton } from './skeleton/index';
export { fluentSlider } from './slider/index';
export { fluentSliderLabel } from './slider-label/index';
export { fluentSwitch } from './switch/index';
export { fluentTabs, fluentTab, fluentTabPanel } from './tabs/index';
export { fluentTextArea } from './text-area/index';
export { fluentTextField } from './text-field/index';
export { fluentTooltip } from './tooltip/index';
export { fluentTreeView } from './tree-view/index';
export { fluentTreeItem } from './tree-item/index';
import { fluentAccordion, fluentAccordionItem } from './accordion/index';
import { fluentAnchor } from './anchor/index';
import { fluentAnchoredRegion } from './anchored-region/index';
import { fluentBadge } from './badge/index';
import { fluentBreadcrumb } from './breadcrumb/index';
import { fluentBreadcrumbItem } from './breadcrumb-item/index';
import { fluentButton } from './button/index';
import { fluentCard } from './card/index';
import { fluentCheckbox } from './checkbox/index';
import { fluentCombobox } from './combobox/index';
import { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index';
import { fluentDesignSystemProvider } from './design-system-provider/index';
import { fluentDialog } from './dialog/index';
import { fluentDivider } from './divider/index';
import { fluentFlipper } from './flipper/index';
import { fluentHorizontalScroll } from './horizontal-scroll/index';
import { fluentListbox } from './listbox/index';
import { fluentOption } from './listbox-option/index';
import { fluentMenu } from './menu/index';
import { fluentMenuItem } from './menu-item/index';
import { fluentNumberField } from './number-field/index';
import { fluentProgress, fluentProgressRing } from './progress/index';
import { fluentRadio } from './radio/index';
import { fluentRadioGroup } from './radio-group/index';
import { fluentSelect } from './select/index';
import { fluentSkeleton } from './skeleton/index';
import { fluentSlider } from './slider/index';
import { fluentSliderLabel } from './slider-label/index';
import { fluentSwitch } from './switch/index';
import { fluentTab, fluentTabPanel, fluentTabs } from './tabs/index';
import { fluentTextArea } from './text-area/index';
import { fluentTextField } from './text-field/index';
import { fluentTooltip } from './tooltip/index';
import { fluentTreeView } from './tree-view/index';
import { fluentTreeItem } from './tree-item/index';

export {
fluentAccordion,
fluentAccordionItem,
fluentAnchor,
fluentAnchoredRegion,
fluentBadge,
fluentBreadcrumb,
fluentBreadcrumbItem,
fluentButton,
fluentCard,
fluentCheckbox,
fluentCombobox,
fluentDataGrid,
fluentDataGridCell,
fluentDataGridRow,
fluentDesignSystemProvider,
fluentDialog,
fluentDivider,
fluentFlipper,
fluentHorizontalScroll,
fluentListbox,
fluentOption,
fluentMenu,
fluentMenuItem,
fluentNumberField,
fluentProgress,
fluentProgressRing,
fluentRadio,
fluentRadioGroup,
fluentSelect,
fluentSkeleton,
fluentSlider,
fluentSliderLabel,
fluentSwitch,
fluentTabs,
fluentTab,
fluentTabPanel,
fluentTextArea,
fluentTextField,
fluentTooltip,
fluentTreeView,
fluentTreeItem,
};

/**
* All Fluent UI Web Components
* @public
*/
export const allComponents = {
fluentAccordion,
fluentAccordionItem,
fluentAnchor,
fluentAnchoredRegion,
fluentBadge,
fluentBreadcrumb,
fluentBreadcrumbItem,
fluentButton,
fluentCard,
fluentCheckbox,
fluentCombobox,
fluentDataGrid,
fluentDataGridCell,
fluentDataGridRow,
fluentDesignSystemProvider,
fluentDialog,
fluentDivider,
fluentFlipper,
fluentHorizontalScroll,
fluentListbox,
fluentOption,
fluentMenu,
fluentMenuItem,
fluentNumberField,
fluentProgress,
fluentProgressRing,
fluentRadio,
fluentRadioGroup,
fluentSelect,
fluentSkeleton,
fluentSlider,
fluentSliderLabel,
fluentSwitch,
fluentTabs,
fluentTab,
fluentTabPanel,
fluentTextArea,
fluentTextField,
fluentTooltip,
fluentTreeView,
fluentTreeItem,
};
4 changes: 2 additions & 2 deletions packages/web-components/src/index-rollup.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// TODO: Is exporting Foundation still necessary with the updated API's?
// export * from "@microsoft/fast-element";
import { DesignSystem } from '@microsoft/fast-foundation';
import * as fluentComponents from './custom-elements';
import { allComponents } from './custom-elements';

export * from './index';

Expand All @@ -10,4 +10,4 @@ export * from './index';
*/
export const fluentDesignSystem = DesignSystem.getOrCreate()
.withPrefix('fluent')
.register(...Object.values(fluentComponents).map(definition => definition()));
.register(...Object.values(allComponents).map(definition => definition()));

0 comments on commit 874be49

Please sign in to comment.