diff --git a/change/@fluentui-web-components-72f613f8-2c88-4e90-873d-7abd1704bf86.json b/change/@fluentui-web-components-72f613f8-2c88-4e90-873d-7abd1704bf86.json new file mode 100644 index 00000000000000..a4af0e0936f10e --- /dev/null +++ b/change/@fluentui-web-components-72f613f8-2c88-4e90-873d-7abd1704bf86.json @@ -0,0 +1,6 @@ +{ + "type": "major", + "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 abe0facdb80cf4..fd697515fb51fd 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -97,7 +97,7 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-element": "^1.0.0", - "@microsoft/fast-foundation": "^1.16.0", + "@microsoft/fast-foundation": "2.0.0-beta.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 30a82d8e2a4012..c706422d47359f 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 @@ -12,7 +12,8 @@ import { } from '../../styles/'; import { heightNumber } from '../../styles/size'; -export const AccordionItemStyles = css` +export const accordionItemStyles = (context, definition) => + css` ${display('flex')} :host { box-sizing: border-box; font-family: var(--body-font); @@ -122,15 +123,15 @@ export const AccordionItemStyles = css` z-index: 2; } `.withBehaviors( - accentFillRestBehavior, - neutralDividerRestBehavior, - neutralForegroundActiveBehavior, - neutralForegroundFocusBehavior, - neutralForegroundRestBehavior, - neutralForegroundHoverBehavior, - neutralFocusBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillRestBehavior, + neutralDividerRestBehavior, + neutralForegroundActiveBehavior, + neutralForegroundFocusBehavior, + neutralForegroundRestBehavior, + neutralForegroundHoverBehavior, + neutralFocusBehavior, + forcedColorsStylesheetBehavior( + css` .button:${focusVisible}::before { border-color: ${SystemColors.Highlight}; box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight}; @@ -139,5 +140,5 @@ export const AccordionItemStyles = css` fill: ${SystemColors.ButtonText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts index 93f9def29b3d72..bb5603f55778c8 100644 --- a/packages/web-components/src/accordion/accordion-item/index.ts +++ b/packages/web-components/src/accordion/accordion-item/index.ts @@ -1,25 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { AccordionItem, AccordionItemTemplate as template } from '@microsoft/fast-foundation'; -import { AccordionItemStyles as styles } from './accordion-item.styles'; +import { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation'; +import { accordionItemStyles as styles } from './accordion-item.styles'; /** * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem}, - * {@link @microsoft/fast-foundation#AccordionItemTemplate} + * {@link @microsoft/fast-foundation#accordionItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-accordion-item', +export const fluentAccordionItem = AccordionItem.compose({ + baseName: 'accordion-item', template, styles, -}) -export class FluentAccordionItem extends AccordionItem {} +}); /** * Styles for AccordionItem * @public */ -export const AccordionItemStyles = styles; +export const accordionItemStyles = styles; diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts index 8427ad67e76968..1ba8273381e6a7 100644 --- a/packages/web-components/src/accordion/accordion.stories.ts +++ b/packages/web-components/src/accordion/accordion.stories.ts @@ -1,12 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/base.html'; -import { FluentAccordionItem } from './accordion-item'; -import { FluentAccordion } from '.'; - -// Prevent tree-shaking -FluentAccordion; -FluentAccordionItem; -FluentDesignSystemProvider; +import './index'; export default { title: 'Accordion', diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts index b9f1a1dfc216c3..7291bea90b4d72 100644 --- a/packages/web-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/src/accordion/accordion.styles.ts @@ -2,14 +2,15 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior } from '../styles/'; -export const AccordionStyles = css` - ${display('flex')} :host { - box-sizing: border-box; - flex-direction: column; - font-family: var(--body-font); - font-size: var(--type-ramp-minus-1-font-size); - line-height: var(--type-ramp-minus-1-line-height); - color: ${neutralForegroundRestBehavior.var}; - border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var}; - } -`.withBehaviors(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior); +export const accordionStyles = (context, definition) => + css` + ${display('flex')} :host { + box-sizing: border-box; + flex-direction: column; + font-family: var(--body-font); + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-line-height); + color: ${neutralForegroundRestBehavior.var}; + border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var}; + } + `.withBehaviors(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior); diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts index 6e9ebe4e359fa9..703521cbd08a19 100644 --- a/packages/web-components/src/accordion/index.ts +++ b/packages/web-components/src/accordion/index.ts @@ -1,30 +1,25 @@ -import { customElement } from '@microsoft/fast-element'; -import { Accordion, AccordionTemplate as template } from '@microsoft/fast-foundation'; -import { AccordionStyles as styles } from './accordion.styles'; +import { Accordion, accordionTemplate as template } from '@microsoft/fast-foundation'; +import { accordionStyles as styles } from './accordion.styles'; export * from './accordion-item/index'; /** - * The FluentUI Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion}, - * {@link @microsoft/fast-foundation#AccordionTemplate} + * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion}, + * {@link @microsoft/fast-foundation#accordionTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-accordion', +export const fluentAccordion = Accordion.compose({ + baseName: 'accordion', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentAccordion extends Accordion {} +}); /** * Styles for Accordion * @public */ -export const AccordionStyles = styles; +export const accordionStyles = styles; diff --git a/packages/web-components/src/anchor/anchor.stories.ts b/packages/web-components/src/anchor/anchor.stories.ts index bb6c975a16279f..cfea475aec6215 100644 --- a/packages/web-components/src/anchor/anchor.stories.ts +++ b/packages/web-components/src/anchor/anchor.stories.ts @@ -1,10 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import AnchorTemplate from './fixtures/anchor.html'; -import { FluentAnchor } from './'; - -// Prevent tree-shaking -FluentAnchor; -FluentDesignSystemProvider; +import './index'; export default { title: 'Anchor', diff --git a/packages/web-components/src/anchor/anchor.styles.ts b/packages/web-components/src/anchor/anchor.styles.ts index 691aec61182d78..d8acd25b415da3 100644 --- a/packages/web-components/src/anchor/anchor.styles.ts +++ b/packages/web-components/src/anchor/anchor.styles.ts @@ -9,12 +9,13 @@ import { } from '../styles/'; import { appearanceBehavior } from '../utilities/behaviors'; -export const AnchorStyles = css` - ${BaseButtonStyles} -`.withBehaviors( - appearanceBehavior('accent', AccentButtonStyles), - appearanceBehavior('hypertext', HypertextStyles), - appearanceBehavior('lightweight', LightweightButtonStyles), - appearanceBehavior('outline', OutlineButtonStyles), - appearanceBehavior('stealth', StealthButtonStyles), -); +export const anchorStyles = (context, definition) => + css` + ${BaseButtonStyles} + `.withBehaviors( + appearanceBehavior('accent', AccentButtonStyles), + appearanceBehavior('hypertext', HypertextStyles), + appearanceBehavior('lightweight', LightweightButtonStyles), + appearanceBehavior('outline', OutlineButtonStyles), + appearanceBehavior('stealth', StealthButtonStyles), + ); diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts index dde2a1c69de8b4..bd48efabdb2ddc 100644 --- a/packages/web-components/src/anchor/index.ts +++ b/packages/web-components/src/anchor/index.ts @@ -1,7 +1,7 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { Anchor, AnchorTemplate as template } from '@microsoft/fast-foundation'; +import { attr } from '@microsoft/fast-element'; +import { Anchor as FoundationAnchor, anchorTemplate as template } from '@microsoft/fast-foundation'; import { ButtonAppearance } from '../button'; -import { AnchorStyles as styles } from './anchor.styles'; +import { anchorStyles as styles } from './anchor.styles'; /** * Types of anchor appearance. @@ -10,26 +10,10 @@ import { AnchorStyles as styles } from './anchor.styles'; export type AnchorAppearance = ButtonAppearance | 'hypertext'; /** - * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor}, - * {@link @microsoft/fast-foundation#AnchorTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The Fluent version of Anchor + * @internal */ -@customElement({ - name: 'fluent-anchor', - template, - styles, - shadowOptions: { - delegatesFocus: true, - mode: 'closed', - }, -}) -export class FluentAnchor extends Anchor { +export class Anchor extends FoundationAnchor { /** * The appearance the anchor should have. * @@ -77,4 +61,24 @@ export class FluentAnchor extends Anchor { * Styles for Anchor * @public */ -export const AnchorStyles = styles; +export const anchorStyles = styles; + +/** + * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor}, + * {@link @microsoft/fast-foundation#anchorTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fluentAnchor = Anchor.compose({ + baseName: 'anchor', + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/src/anchored-region/anchored-region.stories.ts b/packages/web-components/src/anchored-region/anchored-region.stories.ts index 9d865c0f5a549d..91ae2577f53bca 100644 --- a/packages/web-components/src/anchored-region/anchored-region.stories.ts +++ b/packages/web-components/src/anchored-region/anchored-region.stories.ts @@ -1,13 +1,9 @@ import { STORY_RENDERED } from '@storybook/core-events'; import addons from '@storybook/addons'; import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities'; -import { FluentDesignSystemProvider } from '../design-system-provider'; -import { FluentAnchoredRegion } from '../anchored-region'; +import { AnchoredRegion } from '@microsoft/fast-foundation'; import AnchoreRegionTemplate from './fixtures/base.html'; - -// Prevent tree-shaking -FluentAnchoredRegion; -FluentDesignSystemProvider; +import './index'; let scalingViewportPreviousXValue: number = 250; let scalingViewportPreviousYValue: number = 250; @@ -45,7 +41,7 @@ function scrollViewports(): void { function handleScrollViaUpdate(ev: Event): void { if (ev.target instanceof HTMLElement) { const scalingRegionUpdate: HTMLElement | null = document.getElementById('region-scaling-update'); - if (scalingRegionUpdate instanceof FluentAnchoredRegion) { + if (scalingRegionUpdate instanceof AnchoredRegion) { (scalingRegionUpdate as any).update(); } } @@ -56,7 +52,7 @@ function handleScrollViaOffset(ev: Event): void { const scroller: HTMLElement = ev.target as HTMLElement; const scalingRegionOffset: HTMLElement | null = document.getElementById('region-scaling-offset'); - if (scalingRegionOffset instanceof FluentAnchoredRegion) { + if (scalingRegionOffset instanceof AnchoredRegion) { (scalingRegionOffset as any).updateAnchorOffset( scalingViewportPreviousXValue - scroller.scrollLeft, scalingViewportPreviousYValue - scroller.scrollTop, 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 0e1ce410795761..9a04f200205b6b 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,6 @@ import { css } from '@microsoft/fast-element'; -export const AnchoredRegionStyles = css` +export const anchoredRegionStyles = (context, definition) => 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 04932989feb370..4e95503654ceae 100644 --- a/packages/web-components/src/anchored-region/index.ts +++ b/packages/web-components/src/anchored-region/index.ts @@ -1,25 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { AnchoredRegion, AnchoredRegionTemplate as template } from '@microsoft/fast-foundation'; -import { AnchoredRegionStyles as styles } from './anchored-region.styles'; +import { AnchoredRegion, anchoredRegionTemplate as template } from '@microsoft/fast-foundation'; +import { anchoredRegionStyles as styles } from './anchored-region.styles'; /** * The Fluent AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion}, - * {@link @microsoft/fast-foundation#AnchoredRegionTemplate} + * {@link @microsoft/fast-foundation#anchoredRegionTemplate} * * * @beta * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-anchored-region', +export const fluentAnchoredRegion = AnchoredRegion.compose({ + baseName: 'anchored-region', template, styles, -}) -export class FluentAnchoredRegion extends AnchoredRegion {} +}); /** * Styles for AnchoredRegion * @public */ -export const AnchoredRegionStyles = styles; +export const anchoredRegionStyles = styles; diff --git a/packages/web-components/src/badge/badge.spec.ts b/packages/web-components/src/badge/badge.spec.ts deleted file mode 100644 index 4f55b433755323..00000000000000 --- a/packages/web-components/src/badge/badge.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { FluentBadge } from "."; - -describe("The fluent-badge component", () => { - it("adds its appearance as a host class", () => { - const badge = new FluentBadge(); - badge.classList.contains("lightweight"); - }); -}); diff --git a/packages/web-components/src/badge/badge.stories.ts b/packages/web-components/src/badge/badge.stories.ts index 8761ce23071eee..91766317b55c9b 100644 --- a/packages/web-components/src/badge/badge.stories.ts +++ b/packages/web-components/src/badge/badge.stories.ts @@ -1,10 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import BadgeTemplate from './fixtures/badge.html'; -import { FluentBadge } from './'; - -// Prevent tree-shaking -FluentBadge; -FluentDesignSystemProvider; +import './index'; export default { title: 'Badge', diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts index 83d23f1c0dba03..d8050a1a1e54f8 100644 --- a/packages/web-components/src/badge/badge.styles.ts +++ b/packages/web-components/src/badge/badge.styles.ts @@ -7,37 +7,38 @@ import { neutralForegroundRestBehavior, } from '../styles'; -export const BadgeStyles = css` - ${display('inline-block')} :host { - box-sizing: border-box; - font-family: var(--body-font); - font-size: var(--type-ramp-minus-1-font-size); - line-height: var(--type-ramp-minus-1-height); - } +export const badgeStyles = (context, definition) => + css` + ${display('inline-block')} :host { + box-sizing: border-box; + font-family: var(--body-font); + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-height); + } - .control { - border-radius: calc(var(--corner-radius) * 1px); - padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px); - } + .control { + border-radius: calc(var(--corner-radius) * 1px); + padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px); + } - :host(.lightweight) .control { - background: transparent; - color: ${neutralForegroundRestBehavior.var}; - font-weight: 600; - } + :host(.lightweight) .control { + background: transparent; + color: ${neutralForegroundRestBehavior.var}; + font-weight: 600; + } - :host(.accent) .control { - background: ${accentFillRestBehavior.var}; - color: ${accentForegroundCutRestBehavior.var}; - } + :host(.accent) .control { + background: ${accentFillRestBehavior.var}; + color: ${accentForegroundCutRestBehavior.var}; + } - :host(.neutral) .control { - background: ${neutralFillRestBehavior.var}; - color: ${neutralForegroundRestBehavior.var}; - } -`.withBehaviors( - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillRestBehavior, - neutralForegroundRestBehavior, -); + :host(.neutral) .control { + background: ${neutralFillRestBehavior.var}; + color: ${neutralForegroundRestBehavior.var}; + } + `.withBehaviors( + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillRestBehavior, + neutralForegroundRestBehavior, + ); diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts index 51f6bf9594fa09..d5193df50a0c40 100644 --- a/packages/web-components/src/badge/index.ts +++ b/packages/web-components/src/badge/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement, DOM } from '@microsoft/fast-element'; -import { Badge, BadgeTemplate as template } from '@microsoft/fast-foundation'; -import { BadgeStyles as styles } from './badge.styles'; +import { attr, DOM } from '@microsoft/fast-element'; +import { Badge as FoundationBadge, badgeTemplate as template } from '@microsoft/fast-foundation'; +import { badgeStyles as styles } from './badge.styles'; /** * Badge appearance options. @@ -9,23 +9,10 @@ import { BadgeStyles as styles } from './badge.styles'; export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; /** - * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge}, - * {@link @microsoft/fast-foundation#BadgeTemplate} - * - * - * @public - * @remarks - * HTML Element: \ + * The Fluent Badge class + * @internal */ -@customElement({ - name: 'fluent-badge', - template, - styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentBadge extends Badge { +export class Badge extends FoundationBadge { @attr({ mode: 'fromView' }) public appearance: BadgeAppearance = 'lightweight'; private appearanceChanged(oldValue: BadgeAppearance, newValue: BadgeAppearance): void { @@ -38,8 +25,23 @@ export class FluentBadge extends Badge { } } +/** + * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge}, + * {@link @microsoft/fast-foundation#badgeTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const fluentBadge = Badge.compose({ + baseName: 'badge', + template, + styles, +}); + /** * Styles for Badge * @public */ -export const BadgeStyles = styles; +export const badgeStyles = styles; diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.stories.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.stories.ts index 58302f0f2b0fa2..0a6f89ad9b7643 100644 --- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.stories.ts +++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.stories.ts @@ -1,10 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import BreadcrumbItemTemplate from './fixtures/breadcrumb-item.html'; -import { FluentBreadcrumbItem } from '.'; - -// Prevent tree-shaking -FluentBreadcrumbItem; -FluentDesignSystemProvider; +import './index'; export default { title: 'Breadcrumb Item', 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 c66cde8a36f2fe..9e297383f9b7d2 100644 --- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts +++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts @@ -9,7 +9,8 @@ import { neutralForegroundRestBehavior, } from '../styles/index'; -export const BreadcrumbItemStyles = css` +export const breadcrumbItemStyles = (context, definition) => + css` ${display('inline-flex')} :host { background: transparent; box-sizing: border-box; @@ -102,12 +103,12 @@ export const BreadcrumbItemStyles = css` margin: 0 6px; } `.withBehaviors( - accentForegroundActiveBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentForegroundActiveBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` :host(:not([href])) { color: ${SystemColors.ButtonText}; fill: currentcolor; @@ -120,5 +121,5 @@ export const BreadcrumbItemStyles = css` fill: ${SystemColors.ButtonText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/breadcrumb-item/index.ts b/packages/web-components/src/breadcrumb-item/index.ts index e7583ea3d1aeb8..0b4bac492086d4 100644 --- a/packages/web-components/src/breadcrumb-item/index.ts +++ b/packages/web-components/src/breadcrumb-item/index.ts @@ -1,28 +1,26 @@ -import { customElement } from '@microsoft/fast-element'; -import { BreadcrumbItem, BreadcrumbItemTemplate as template } from '@microsoft/fast-foundation'; -import { BreadcrumbItemStyles as styles } from './breadcrumb-item.styles'; +import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation'; +import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles'; /** * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem}, - * {@link @microsoft/fast-foundation#BreadcrumbItemTemplate} + * {@link @microsoft/fast-foundation#breadcrumbItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-breadcrumb-item', +export const fluentBreadcrumbItem = BreadcrumbItem.compose({ + baseName: 'breadcrumb-item', template, styles, shadowOptions: { delegatesFocus: true, }, -}) -export class FluentBreadcrumbItem extends BreadcrumbItem {} +}); /** * Styles for BreadcrumbItem * @public */ -export const BreadcrumbItemStyles = styles; +export const breadcrumbItemStyles = styles; diff --git a/packages/web-components/src/breadcrumb/breadcrumb.stories.ts b/packages/web-components/src/breadcrumb/breadcrumb.stories.ts index 180651ffb42778..6f2b9962c09f24 100644 --- a/packages/web-components/src/breadcrumb/breadcrumb.stories.ts +++ b/packages/web-components/src/breadcrumb/breadcrumb.stories.ts @@ -1,12 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import { FluentBreadcrumbItem } from '../breadcrumb-item'; import BreadcrumbTemplate from './fixtures/breadcrumb.html'; -import { FluentBreadcrumb } from '.'; - -// Prevent tree-shaking -FluentBreadcrumb; -FluentBreadcrumbItem; -FluentDesignSystemProvider; +import './index'; export default { title: 'Breadcrumb', diff --git a/packages/web-components/src/breadcrumb/breadcrumb.styles.ts b/packages/web-components/src/breadcrumb/breadcrumb.styles.ts index e98c677ab2434d..b204d505d02dd7 100644 --- a/packages/web-components/src/breadcrumb/breadcrumb.styles.ts +++ b/packages/web-components/src/breadcrumb/breadcrumb.styles.ts @@ -1,7 +1,7 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; -export const BreadcrumbStyles = css` +export const breadcrumbStyles = (context, definition) => css` ${display('inline-block')} :host { box-sizing: border-box; font-family: var(--body-font); diff --git a/packages/web-components/src/breadcrumb/index.ts b/packages/web-components/src/breadcrumb/index.ts index 00e1ce88c73b97..b26abe7ddf2510 100644 --- a/packages/web-components/src/breadcrumb/index.ts +++ b/packages/web-components/src/breadcrumb/index.ts @@ -1,25 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Breadcrumb, BreadcrumbTemplate as template } from '@microsoft/fast-foundation'; -import { BreadcrumbStyles as styles } from './breadcrumb.styles'; +import { Breadcrumb, breadcrumbTemplate as template } from '@microsoft/fast-foundation'; +import { breadcrumbStyles as styles } from './breadcrumb.styles'; /** * The Fluent Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb}, - * {@link @microsoft/fast-foundation#BreadcrumbTemplate} + * {@link @microsoft/fast-foundation#breadcrumbTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-breadcrumb', +export const fluentBreadcrumb = Breadcrumb.compose({ + baseName: 'breadcrumb', template, styles, -}) -export class FluentBreadcrumb extends Breadcrumb {} +}); /** * Styles for Breadcrumb * @public */ -export const BreadcrumbStyles = styles; +export const breadcrumbStyles = styles; diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts index e68b3b2ec9159f..c5c3640f1f485d 100644 --- a/packages/web-components/src/button/button.stories.ts +++ b/packages/web-components/src/button/button.stories.ts @@ -1,10 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import ButtonTemplate from './fixtures/button.html'; -import { FluentButton } from './'; - -// Prevent tree-shaking -FluentButton; -FluentDesignSystemProvider; +import './index'; export default { title: 'Button', diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index f4f8288ba6d323..157f8bc778f0f2 100644 --- a/packages/web-components/src/button/button.styles.ts +++ b/packages/web-components/src/button/button.styles.ts @@ -8,11 +8,12 @@ import { } from '../styles/'; import { appearanceBehavior } from '../utilities/behaviors'; -export const ButtonStyles = css` - ${BaseButtonStyles} -`.withBehaviors( - appearanceBehavior('accent', AccentButtonStyles), - appearanceBehavior('lightweight', LightweightButtonStyles), - appearanceBehavior('outline', OutlineButtonStyles), - appearanceBehavior('stealth', StealthButtonStyles), -); +export const buttonStyles = (context, definition) => + css` + ${BaseButtonStyles} + `.withBehaviors( + appearanceBehavior('accent', AccentButtonStyles), + appearanceBehavior('lightweight', LightweightButtonStyles), + appearanceBehavior('outline', OutlineButtonStyles), + appearanceBehavior('stealth', StealthButtonStyles), + ); diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts index 4d551ca59d0199..38b3f0dd016721 100644 --- a/packages/web-components/src/button/index.ts +++ b/packages/web-components/src/button/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { Button, ButtonTemplate as template } from '@microsoft/fast-foundation'; -import { ButtonStyles as styles } from './button.styles'; +import { attr } from '@microsoft/fast-element'; +import { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation'; +import { buttonStyles as styles } from './button.styles'; /** * Types of button appearance. @@ -9,26 +9,10 @@ import { ButtonStyles as styles } from './button.styles'; export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth'; /** - * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button}, - * {@link @microsoft/fast-foundation#ButtonTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The Fluent button class + * @internal */ -@customElement({ - name: 'fluent-button', - template, - styles, - shadowOptions: { - delegatesFocus: true, - mode: 'closed', - }, -}) -export class FluentButton extends Button { +export class Button extends FoundationButton { /** * The appearance the button should have. * @@ -72,8 +56,28 @@ export class FluentButton extends Button { } } +/** + * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button}, + * {@link @microsoft/fast-foundation#buttonTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fluentButton = Button.compose({ + baseName: 'button', + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for Button * @public */ -export const ButtonStyles = styles; +export const buttonStyles = styles; diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts index ccfb4727bf02b2..e643e08164f98b 100644 --- a/packages/web-components/src/card/card.stories.ts +++ b/packages/web-components/src/card/card.stories.ts @@ -1,10 +1,5 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import CardTemplate from './fixtures/card.html'; -import { FluentCard } from './'; - -// Prevent tree-shaking -FluentCard; -FluentDesignSystemProvider; +import './index'; export default { title: 'Card', diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts index 0af0181ed66aea..6b99c2c2e424fe 100644 --- a/packages/web-components/src/checkbox/checkbox.stories.ts +++ b/packages/web-components/src/checkbox/checkbox.stories.ts @@ -1,30 +1,14 @@ -import { STORY_RENDERED } from '@storybook/core-events'; import addons from '@storybook/addons'; -import { FluentDesignSystemProvider } from '../design-system-provider'; +import { STORY_RENDERED } from '@storybook/core-events'; +import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation'; import Examples from './fixtures/checkbox.html'; -import { FluentCheckbox } from './'; - -// Prevent tree-shaking -FluentCheckbox; -FluentDesignSystemProvider; +import './index'; addons.getChannel().addListener(STORY_RENDERED, (name: string) => { if (name.toLowerCase().startsWith('checkbox')) { - setIndeterminate(); - } -}); - -function setIndeterminate(): void { - document.querySelectorAll('.flag-indeterminate').forEach(el => { - if (el instanceof FluentCheckbox) { + document.querySelectorAll('.flag-indeterminate').forEach((el: FoundationCheckbox) => { el.indeterminate = true; - } - }); -} - -document.addEventListener('readystatechange', () => { - if (document.readyState === 'complete') { - setIndeterminate(); + }); } }); @@ -32,4 +16,4 @@ export default { title: 'Checkbox', }; -export const Checkbox = (): string => Examples; +export const Checkbox = () => Examples; diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts index 2631204dcfb1fd..d673bb545cf995 100644 --- a/packages/web-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/src/checkbox/checkbox.styles.ts @@ -13,7 +13,8 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const CheckboxStyles = css` +export const checkboxStyles = (context, definition) => + css` ${display('inline-flex')} :host { align-items: center; outline: none; @@ -107,16 +108,16 @@ export const CheckboxStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .control { forced-color-adjust: none; border-color: ${SystemColors.FieldText}; @@ -177,5 +178,5 @@ export const CheckboxStyles = css` fill: ${SystemColors.GrayText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts index ec1ceb8471fc10..f27391c11186cc 100644 --- a/packages/web-components/src/checkbox/index.ts +++ b/packages/web-components/src/checkbox/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Checkbox, CheckboxTemplate as template } from '@microsoft/fast-foundation'; -import { CheckboxStyles as styles } from './checkbox.styles'; +import { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation'; +import { checkboxStyles as styles } from './checkbox.styles'; /** * The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox}, - * {@link @microsoft/fast-foundation#CheckboxTemplate} + * {@link @microsoft/fast-foundation#checkboxTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-checkbox', +export const fluentCheckbox = Checkbox.compose({ + baseName: 'checkbox', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentCheckbox extends Checkbox {} +}); /** * Styles for Checkbox * @public */ -export const CheckboxStyles = styles; +export const checkboxStyles = styles; diff --git a/packages/web-components/src/color/accent-fill.spec.ts b/packages/web-components/src/color/accent-fill.spec.ts index c213c48cec3eb3..a1587bcd2d0f9f 100644 --- a/packages/web-components/src/color/accent-fill.spec.ts +++ b/packages/web-components/src/color/accent-fill.spec.ts @@ -1,91 +1,71 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import { - accentBaseColor, - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; + accentBaseColor, + accentPalette as getAccentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; import { - accentFillActive, - accentFillHover, - accentFillLargeActive, - accentFillLargeHover, - accentFillLargeRest, - accentFillLargeSelected, - accentFillRest, - accentFillSelected, -} from "./accent-fill"; -import { findClosestSwatchIndex, Palette } from "./palette"; -import { contrast, Swatch } from "./common"; -import { accentForegroundCut } from "./accent-foreground-cut"; + accentFillActive, + accentFillHover, + accentFillLargeActive, + accentFillLargeHover, + accentFillLargeRest, + accentFillLargeSelected, + accentFillRest, + accentFillSelected, +} from './accent-fill'; +import { findClosestSwatchIndex, Palette } from './palette'; +import { contrast, Swatch } from './common'; +import { accentForegroundCut } from './accent-foreground-cut'; -describe("accentFill", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); +describe('accentFill', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - const accentIndex: number = findClosestSwatchIndex( - getAccentPalette, - accentBaseColor(DesignSystemDefaults) - )(DesignSystemDefaults); + const accentIndex: number = findClosestSwatchIndex( + getAccentPalette, + accentBaseColor(DesignSystemDefaults), + )(DesignSystemDefaults); - it("should operate on design system defaults", (): void => { - [ - accentFillActive, - accentFillHover, - accentFillLargeActive, - accentFillLargeHover, - accentFillLargeRest, - accentFillLargeSelected, - accentFillRest, - accentFillSelected, - ].forEach(fn => { - expect(accentPalette).to.include(fn({} as DesignSystem)); - }); + it('should operate on design system defaults', (): void => { + [ + accentFillActive, + accentFillHover, + accentFillLargeActive, + accentFillLargeHover, + accentFillLargeRest, + accentFillLargeSelected, + accentFillRest, + accentFillSelected, + ].forEach(fn => { + expect(accentPalette).to.include(fn({} as DesignSystem)); }); + }); - it("should accept a function that resolves a background swatch", (): void => { - expect(typeof accentFillRest(() => "#FFF")).to.equal("function"); - expect(accentFillRest(() => "#000")({} as DesignSystem)).to.equal(accentPalette[63]); - }); + it('should accept a function that resolves a background swatch', (): void => { + expect(typeof accentFillRest(() => '#FFF')).to.equal('function'); + expect(accentFillRest(() => '#000')({} as DesignSystem)).to.equal(accentPalette[63]); + }); - it("should have accessible rest and hover colors against accentForegroundCut", (): void => { - const accentColors: Swatch[] = [ - "#0078D4", - "#107C10", - "#5C2D91", - "#D83B01", - "#F2C812", - ]; + it('should have accessible rest and hover colors against accentForegroundCut', (): void => { + const accentColors: Swatch[] = ['#0078D4', '#107C10', '#5C2D91', '#D83B01', '#F2C812']; - accentColors.forEach((accent: Swatch): void => { - neutralPalette.forEach((swatch: Swatch): void => { - const designSystem: DesignSystem = Object.assign( - {}, - DesignSystemDefaults, - { - backgroundColor: swatch, - accentPaletteSource: ["#FFF", accent, "#000"], - } - ); + accentColors.forEach((accent: Swatch): void => { + neutralPalette.forEach((swatch: Swatch): void => { + const designSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + accentPaletteSource: ['#FFF', accent, '#000'], + }); - const accentForegroundCutColor: Swatch = accentForegroundCut( - designSystem - ); + const accentForegroundCutColor: Swatch = accentForegroundCut(designSystem); - expect( - contrast(accentForegroundCutColor, accentFillRest(designSystem)) - ).to.be.gte(4.5); - expect( - contrast(accentForegroundCutColor, accentFillHover(designSystem)) - ).to.be.gte(4.5); - expect( - contrast(accentForegroundCutColor, accentFillLargeRest(designSystem)) - ).to.be.gte(3); - expect( - contrast(accentForegroundCutColor, accentFillLargeHover(designSystem)) - ).to.be.gte(3); - }); - }); + expect(contrast(accentForegroundCutColor, accentFillRest(designSystem))).to.be.gte(4.5); + expect(contrast(accentForegroundCutColor, accentFillHover(designSystem))).to.be.gte(4.5); + expect(contrast(accentForegroundCutColor, accentFillLargeRest(designSystem))).to.be.gte(3); + expect(contrast(accentForegroundCutColor, accentFillLargeHover(designSystem))).to.be.gte(3); + }); }); + }); }); diff --git a/packages/web-components/src/color/accent-foreground-cut.spec.ts b/packages/web-components/src/color/accent-foreground-cut.spec.ts index c58e65cdf66399..cdd144287fb6d4 100644 --- a/packages/web-components/src/color/accent-foreground-cut.spec.ts +++ b/packages/web-components/src/color/accent-foreground-cut.spec.ts @@ -1,30 +1,24 @@ -import { expect } from "chai"; -import { - DesignSystemDefaults, DesignSystem -} from "../fluent-design-system"; -import { accentForegroundCut, accentForegroundCutLarge } from "./accent-foreground-cut"; -import { Swatch } from "./common"; +import { expect } from 'chai'; +import { DesignSystemDefaults, DesignSystem } from '../fluent-design-system'; +import { accentForegroundCut, accentForegroundCutLarge } from './accent-foreground-cut'; +import { Swatch } from './common'; -describe("Cut text", (): void => { - it("should return white by by default", (): void => { - expect(accentForegroundCut(undefined as any)).to.equal("#FFFFFF"); - expect(accentForegroundCutLarge(undefined as any)).to.equal("#FFFFFF"); - }); - it("should return black when background does not meet contrast ratio", (): void => { - expect(accentForegroundCut((): Swatch => "#FFF")({} as any)).to.equal("#000000"); - expect(accentForegroundCutLarge((): Swatch => "#FFF")({} as any)).to.equal("#000000"); +describe('Cut text', (): void => { + it('should return white by by default', (): void => { + expect(accentForegroundCut(undefined as any)).to.equal('#FFFFFF'); + expect(accentForegroundCutLarge(undefined as any)).to.equal('#FFFFFF'); + }); + it('should return black when background does not meet contrast ratio', (): void => { + expect(accentForegroundCut((): Swatch => '#FFF')({} as any)).to.equal('#000000'); + expect(accentForegroundCutLarge((): Swatch => '#FFF')({} as any)).to.equal('#000000'); - expect( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - accentForegroundCut((designSystem: DesignSystem) => "#FFF")( - DesignSystemDefaults - ) - ).to.equal("#000000"); - expect( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - accentForegroundCutLarge((designSystem: DesignSystem) => "#FFF")( - DesignSystemDefaults - ) - ).to.equal("#000000"); - }); + expect( + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + accentForegroundCut((designSystem: DesignSystem) => '#FFF')(DesignSystemDefaults), + ).to.equal('#000000'); + expect( + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + accentForegroundCutLarge((designSystem: DesignSystem) => '#FFF')(DesignSystemDefaults), + ).to.equal('#000000'); + }); }); diff --git a/packages/web-components/src/color/accent-foreground.spec.ts b/packages/web-components/src/color/accent-foreground.spec.ts index 8c47dae160320f..07ed01a6dd6b96 100644 --- a/packages/web-components/src/color/accent-foreground.spec.ts +++ b/packages/web-components/src/color/accent-foreground.spec.ts @@ -1,111 +1,95 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from "chai"; +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { expect } from 'chai'; import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; + accentPalette as getAccentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; import { - accentForegroundActive, - accentForegroundHover, - accentForegroundLargeActive, - accentForegroundLargeHover, - accentForegroundLargeRest, - accentForegroundRest, -} from "./accent-foreground"; -import { Palette } from "./palette"; -import { contrast, Swatch } from "./common"; + accentForegroundActive, + accentForegroundHover, + accentForegroundLargeActive, + accentForegroundLargeHover, + accentForegroundLargeRest, + accentForegroundRest, +} from './accent-foreground'; +import { Palette } from './palette'; +import { contrast, Swatch } from './common'; -describe("accentForeground", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); +describe('accentForeground', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should operate on design system defaults", (): void => { - expect(accentForegroundRest({} as DesignSystem)).to.equal(accentPalette[59]); - expect(accentForegroundHover({} as DesignSystem)).to.equal(accentPalette[65]); - expect(accentForegroundActive({} as DesignSystem)).to.equal(accentPalette[55]); - expect(accentForegroundLargeRest({} as DesignSystem)).to.equal(accentPalette[59]); - expect(accentForegroundLargeHover({} as DesignSystem)).to.equal(accentPalette[65]); - expect(accentForegroundLargeActive({} as DesignSystem)).to.equal(accentPalette[55]); - }); + it('should operate on design system defaults', (): void => { + expect(accentForegroundRest({} as DesignSystem)).to.equal(accentPalette[59]); + expect(accentForegroundHover({} as DesignSystem)).to.equal(accentPalette[65]); + expect(accentForegroundActive({} as DesignSystem)).to.equal(accentPalette[55]); + expect(accentForegroundLargeRest({} as DesignSystem)).to.equal(accentPalette[59]); + expect(accentForegroundLargeHover({} as DesignSystem)).to.equal(accentPalette[65]); + expect(accentForegroundLargeActive({} as DesignSystem)).to.equal(accentPalette[55]); + }); - it("should accept a function that resolves a background swatch", (): void => { - expect(typeof accentForegroundRest(() => "#FFF")).to.equal("function"); - expect(accentForegroundRest(() => "#000")({} as DesignSystem)).to.equal( - accentPalette[59] - ); - expect(typeof accentForegroundRest(() => "#FFFFFF")).to.equal("function"); - expect(accentForegroundRest(() => "#000000")({} as DesignSystem)).to.equal( - accentPalette[59] - ); - }); + it('should accept a function that resolves a background swatch', (): void => { + expect(typeof accentForegroundRest(() => '#FFF')).to.equal('function'); + expect(accentForegroundRest(() => '#000')({} as DesignSystem)).to.equal(accentPalette[59]); + expect(typeof accentForegroundRest(() => '#FFFFFF')).to.equal('function'); + expect(accentForegroundRest(() => '#000000')({} as DesignSystem)).to.equal(accentPalette[59]); + }); - it("should increase contrast on hover state and decrease contrast on active state in either mode", (): void => { - expect( - accentPalette.indexOf(accentForegroundHover(DesignSystemDefaults)) - ).to.be.greaterThan( - accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults)) - ); - expect( - accentPalette.indexOf(accentForegroundActive(DesignSystemDefaults)) - ).to.be.lessThan(accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults))); + it('should increase contrast on hover state and decrease contrast on active state in either mode', (): void => { + expect(accentPalette.indexOf(accentForegroundHover(DesignSystemDefaults))).to.be.greaterThan( + accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults)), + ); + expect(accentPalette.indexOf(accentForegroundActive(DesignSystemDefaults))).to.be.lessThan( + accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults)), + ); - const darkDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - backgroundColor: "#000", - }); - expect( - accentPalette.indexOf(accentForegroundHover(darkDesignSystem)) - ).to.be.lessThan(accentPalette.indexOf(accentForegroundRest(darkDesignSystem))); - expect( - accentPalette.indexOf(accentForegroundActive(darkDesignSystem)) - ).to.be.greaterThan(accentPalette.indexOf(accentForegroundRest(darkDesignSystem))); + const darkDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { + backgroundColor: '#000', }); + expect(accentPalette.indexOf(accentForegroundHover(darkDesignSystem))).to.be.lessThan( + accentPalette.indexOf(accentForegroundRest(darkDesignSystem)), + ); + expect(accentPalette.indexOf(accentForegroundActive(darkDesignSystem))).to.be.greaterThan( + accentPalette.indexOf(accentForegroundRest(darkDesignSystem)), + ); + }); - it("should have accessible rest and hover colors against the background color", (): void => { - const accentColors: Swatch[] = [ - "#0078D4", - "#107C10", - "#5C2D91", - "#D83B01", - "#F2C812", - ]; + it('should have accessible rest and hover colors against the background color', (): void => { + const accentColors: Swatch[] = ['#0078D4', '#107C10', '#5C2D91', '#D83B01', '#F2C812']; - accentColors.forEach( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - (accent: Swatch): void => { - neutralPalette.forEach((swatch: Swatch): void => { - const designSystem: DesignSystem = Object.assign( - {}, - DesignSystemDefaults, - { - backgroundColor: swatch, - accentPaletteConfig: Object.assign({}, { - steps: 94, - clipLight: 0, - clipDark: 0, - }, { - baseColor: parseColorHexRGB(swatch), - }), - } - ); + accentColors.forEach( + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + (accent: Swatch): void => { + neutralPalette.forEach((swatch: Swatch): void => { + const designSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + accentPaletteConfig: Object.assign( + {}, + { + steps: 94, + clipLight: 0, + clipDark: 0, + }, + { + baseColor: parseColorHexRGB(swatch), + }, + ), + }); - expect( - contrast(swatch, accentForegroundRest(designSystem)) - // There are a few states that are impossible to meet contrast on - ).to.be.gte(4.47); - expect( - contrast(swatch, accentForegroundHover(designSystem)) - // There are a few states that are impossible to meet contrast on - ).to.be.gte(3.7); - expect( - contrast(swatch, accentForegroundLargeRest(designSystem)) - ).to.be.gte(3); - expect( - contrast(swatch, accentForegroundLargeHover(designSystem)) - ).to.be.gte(3); - }); - } - ); - }); + expect( + contrast(swatch, accentForegroundRest(designSystem)), + // There are a few states that are impossible to meet contrast on + ).to.be.gte(4.47); + expect( + contrast(swatch, accentForegroundHover(designSystem)), + // There are a few states that are impossible to meet contrast on + ).to.be.gte(3.7); + expect(contrast(swatch, accentForegroundLargeRest(designSystem))).to.be.gte(3); + expect(contrast(swatch, accentForegroundLargeHover(designSystem))).to.be.gte(3); + }); + }, + ); + }); }); diff --git a/packages/web-components/src/color/common.spec.ts b/packages/web-components/src/color/common.spec.ts index 29b2ad61dc1ba4..8f77aef063e448 100644 --- a/packages/web-components/src/color/common.spec.ts +++ b/packages/web-components/src/color/common.spec.ts @@ -1,86 +1,86 @@ -import { expect } from "chai"; -import { ColorRGBA64 } from "@microsoft/fast-colors"; -import { colorMatches, contrast, isValidColor, parseColorString } from "./common"; +import { expect } from 'chai'; +import { ColorRGBA64 } from '@microsoft/fast-colors'; +import { colorMatches, contrast, isValidColor, parseColorString } from './common'; -describe("isValidColor", (): void => { - it("should return true when input is a hex color", (): void => { - expect(isValidColor("#000")).to.be.ok; - expect(isValidColor("#000000")).to.be.ok; - }); - it("should return false when input is not a color", (): void => { - expect(isValidColor(undefined as any)).to.not.be.ok; - expect(isValidColor(null as any)).to.not.be.ok; - expect(isValidColor("ooggabooga")).to.not.be.ok; - }); +describe('isValidColor', (): void => { + it('should return true when input is a hex color', (): void => { + expect(isValidColor('#000')).to.be.ok; + expect(isValidColor('#000000')).to.be.ok; + }); + it('should return false when input is not a color', (): void => { + expect(isValidColor(undefined as any)).to.not.be.ok; + expect(isValidColor(null as any)).to.not.be.ok; + expect(isValidColor('ooggabooga')).to.not.be.ok; + }); }); -describe("colorMatches", (): void => { - it("should throw arguments are not colors", (): void => { - expect((): void => { - colorMatches("dksfjd", "weeeeeeee"); - }).to.throw(); - }); +describe('colorMatches', (): void => { + it('should throw arguments are not colors', (): void => { + expect((): void => { + colorMatches('dksfjd', 'weeeeeeee'); + }).to.throw(); + }); - it("should return true if colors are the same", (): void => { - expect(colorMatches("#F00", "rgb(255, 0, 0)")).to.be.ok; - expect(colorMatches("#000", "rgb(0, 0, 0)")).to.be.ok; - expect(colorMatches("#FFF", "rgb(255, 255, 255)")).to.be.ok; - expect(colorMatches("#FF0000", "rgb(255, 0, 0)")).to.be.ok; - expect(colorMatches("#000000", "rgb(0, 0, 0)")).to.be.ok; - expect(colorMatches("#FFFFFF", "rgb(255, 255, 255)")).to.be.ok; - }); + it('should return true if colors are the same', (): void => { + expect(colorMatches('#F00', 'rgb(255, 0, 0)')).to.be.ok; + expect(colorMatches('#000', 'rgb(0, 0, 0)')).to.be.ok; + expect(colorMatches('#FFF', 'rgb(255, 255, 255)')).to.be.ok; + expect(colorMatches('#FF0000', 'rgb(255, 0, 0)')).to.be.ok; + expect(colorMatches('#000000', 'rgb(0, 0, 0)')).to.be.ok; + expect(colorMatches('#FFFFFF', 'rgb(255, 255, 255)')).to.be.ok; + }); - it("should return false if colors are not the same", (): void => { - expect(colorMatches("#000", "#023")).to.not.be.ok; - expect(colorMatches("#000", "#001")).to.not.be.ok; - expect(colorMatches("#F00", "rgb(255, 0, 1)")).to.not.be.ok; - expect(colorMatches("#000000", "#002233")).to.not.be.ok; - expect(colorMatches("#000000", "#000011")).to.not.be.ok; - expect(colorMatches("#FF0000", "rgb(255, 0, 1)")).to.not.be.ok; - }); + it('should return false if colors are not the same', (): void => { + expect(colorMatches('#000', '#023')).to.not.be.ok; + expect(colorMatches('#000', '#001')).to.not.be.ok; + expect(colorMatches('#F00', 'rgb(255, 0, 1)')).to.not.be.ok; + expect(colorMatches('#000000', '#002233')).to.not.be.ok; + expect(colorMatches('#000000', '#000011')).to.not.be.ok; + expect(colorMatches('#FF0000', 'rgb(255, 0, 1)')).to.not.be.ok; + }); }); -describe("parseColorString", (): void => { - it("should parse #RGB color strings", (): void => { - expect(parseColorString("#FFF") instanceof ColorRGBA64).to.equal(true); - }); - it("should parse #RRGGBB color strings", (): void => { - expect(parseColorString("#001122") instanceof ColorRGBA64).to.equal(true); - }); - it("should throw if the color is a malformed shorthand hex", (): void => { - expect((): void => { - parseColorString("#GGG"); - }).to.throw(); - }); - it("should throw if the color is a malformed hex", (): void => { - expect((): void => { - parseColorString("#zzzzzz"); - }).to.throw(); - }); - it("should throw if the color is a malformed rgb", (): void => { - expect((): void => { - parseColorString("rgb(256, 244, 30)"); - }).to.throw(); - }); - it("should throw if the color is a rgba", (): void => { - expect((): void => { - parseColorString("rgba(255, 244, 30, 1)"); - }).to.throw(); - }); +describe('parseColorString', (): void => { + it('should parse #RGB color strings', (): void => { + expect(parseColorString('#FFF') instanceof ColorRGBA64).to.equal(true); + }); + it('should parse #RRGGBB color strings', (): void => { + expect(parseColorString('#001122') instanceof ColorRGBA64).to.equal(true); + }); + it('should throw if the color is a malformed shorthand hex', (): void => { + expect((): void => { + parseColorString('#GGG'); + }).to.throw(); + }); + it('should throw if the color is a malformed hex', (): void => { + expect((): void => { + parseColorString('#zzzzzz'); + }).to.throw(); + }); + it('should throw if the color is a malformed rgb', (): void => { + expect((): void => { + parseColorString('rgb(256, 244, 30)'); + }).to.throw(); + }); + it('should throw if the color is a rgba', (): void => { + expect((): void => { + parseColorString('rgba(255, 244, 30, 1)'); + }).to.throw(); + }); }); -describe("contrast", (): void => { - it("should return the contrast between two colors", (): void => { - expect(contrast("#000", "#FFF")).to.equal(21); - expect(contrast("#000000", "#FFFFFF")).to.equal(21); - expect(contrast("rgb(0, 0, 0)", "rgb(255, 255, 255)")).to.equal(21); - }); - it("should throw if either color cannot be converted to a color", (): void => { - expect((): void => { - contrast("oogabooga", "#000"); - }).to.throw(); - expect((): void => { - contrast("#000", "oogabooga"); - }).to.throw(); - }); +describe('contrast', (): void => { + it('should return the contrast between two colors', (): void => { + expect(contrast('#000', '#FFF')).to.equal(21); + expect(contrast('#000000', '#FFFFFF')).to.equal(21); + expect(contrast('rgb(0, 0, 0)', 'rgb(255, 255, 255)')).to.equal(21); + }); + it('should throw if either color cannot be converted to a color', (): void => { + expect((): void => { + contrast('oogabooga', '#000'); + }).to.throw(); + expect((): void => { + contrast('#000', 'oogabooga'); + }).to.throw(); + }); }); diff --git a/packages/web-components/src/color/neutral-divider.spec.ts b/packages/web-components/src/color/neutral-divider.spec.ts index ce2ef1f8f43d8e..289674ebeb0b9d 100644 --- a/packages/web-components/src/color/neutral-divider.spec.ts +++ b/packages/web-components/src/color/neutral-divider.spec.ts @@ -1,13 +1,13 @@ -import { expect } from "chai"; -import { DesignSystemDefaults } from "../fluent-design-system"; -import { neutralDividerRest } from "./neutral-divider"; +import { expect } from 'chai'; +import { DesignSystemDefaults } from '../fluent-design-system'; +import { neutralDividerRest } from './neutral-divider'; -describe("neutralDividerRest", (): void => { - it("should return a string when invoked with an object", (): void => { - expect(typeof neutralDividerRest(DesignSystemDefaults)).to.equal("string"); - }); +describe('neutralDividerRest', (): void => { + it('should return a string when invoked with an object', (): void => { + expect(typeof neutralDividerRest(DesignSystemDefaults)).to.equal('string'); + }); - it("should return a function when invoked with a function", (): void => { - expect(typeof neutralDividerRest(() => "#FFF")).to.equal("function"); - }); + it('should return a function when invoked with a function', (): void => { + expect(typeof neutralDividerRest(() => '#FFF')).to.equal('function'); + }); }); diff --git a/packages/web-components/src/color/neutral-fill-card.spec.ts b/packages/web-components/src/color/neutral-fill-card.spec.ts index f51f4f86839af2..fbd27a12f5d80f 100644 --- a/packages/web-components/src/color/neutral-fill-card.spec.ts +++ b/packages/web-components/src/color/neutral-fill-card.spec.ts @@ -1,44 +1,42 @@ -import { expect } from "chai"; -import { DesignSystem, DesignSystemDefaults } from "../fluent-design-system"; -import { neutralFillCard } from "./neutral-fill-card"; +import { expect } from 'chai'; +import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; +import { neutralFillCard } from './neutral-fill-card'; -describe("neutralFillCard", (): void => { - it("should operate on design system defaults", (): void => { - expect(neutralFillCard({} as DesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[DesignSystemDefaults.neutralFillCardDelta] - ); - }); - it("should get darker when the index of the backgroundColor is lower than the offset index", (): void => { - for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) { - expect( - DesignSystemDefaults.neutralPalette.indexOf( - neutralFillCard( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: DesignSystemDefaults.neutralPalette[i], - }) - ) - ) - ).to.equal(DesignSystemDefaults.neutralFillCardDelta + i); - } - }); - it("should return the color at three steps lower than the background color", (): void => { - for (let i: number = 3; i < DesignSystemDefaults.neutralPalette.length; i++) { - expect( - DesignSystemDefaults.neutralPalette.indexOf( - neutralFillCard( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: DesignSystemDefaults.neutralPalette[i], - }) - ) - ) - ).to.equal(i - 3); - } - }); - it("should generate a color based on the background color returned by a provided callback", (): void => { - expect( - neutralFillCard(() => DesignSystemDefaults.neutralPalette[4])( - DesignSystemDefaults - ) - ).to.equal(DesignSystemDefaults.neutralPalette[1]); - }); +describe('neutralFillCard', (): void => { + it('should operate on design system defaults', (): void => { + expect(neutralFillCard({} as DesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[DesignSystemDefaults.neutralFillCardDelta], + ); + }); + it('should get darker when the index of the backgroundColor is lower than the offset index', (): void => { + for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) { + expect( + DesignSystemDefaults.neutralPalette.indexOf( + neutralFillCard( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: DesignSystemDefaults.neutralPalette[i], + }), + ), + ), + ).to.equal(DesignSystemDefaults.neutralFillCardDelta + i); + } + }); + it('should return the color at three steps lower than the background color', (): void => { + for (let i: number = 3; i < DesignSystemDefaults.neutralPalette.length; i++) { + expect( + DesignSystemDefaults.neutralPalette.indexOf( + neutralFillCard( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: DesignSystemDefaults.neutralPalette[i], + }), + ), + ), + ).to.equal(i - 3); + } + }); + it('should generate a color based on the background color returned by a provided callback', (): void => { + expect(neutralFillCard(() => DesignSystemDefaults.neutralPalette[4])(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[1], + ); + }); }); diff --git a/packages/web-components/src/color/neutral-fill-input.spec.ts b/packages/web-components/src/color/neutral-fill-input.spec.ts index 47e49e007cf7b6..a6b2a4f1355361 100644 --- a/packages/web-components/src/color/neutral-fill-input.spec.ts +++ b/packages/web-components/src/color/neutral-fill-input.spec.ts @@ -1,121 +1,109 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; -import { clamp, FillSwatchFamily, Swatch } from "./common"; + accentPalette as getAccentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; +import { clamp, FillSwatchFamily, Swatch } from './common'; import { - neutralFillInput, - neutralFillInputActive, - neutralFillInputFocus, - neutralFillInputHover, - neutralFillInputRest, - neutralFillInputSelected, -} from "./neutral-fill-input"; -import { isDarkMode, Palette } from "./palette"; + neutralFillInput, + neutralFillInputActive, + neutralFillInputFocus, + neutralFillInputHover, + neutralFillInputRest, + neutralFillInputSelected, +} from './neutral-fill-input'; +import { isDarkMode, Palette } from './palette'; -describe("neutralFillInput", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); +describe('neutralFillInput', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should operate on design system defaults", (): void => { - [ - neutralFillInputActive, - neutralFillInputFocus, - neutralFillInputHover, - neutralFillInputRest, - neutralFillInputSelected, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); + it('should operate on design system defaults', (): void => { + [ + neutralFillInputActive, + neutralFillInputFocus, + neutralFillInputHover, + neutralFillInputRest, + neutralFillInputSelected, + ].forEach(fn => { + expect(neutralPalette).to.include(fn({} as DesignSystem)); }); + }); - it("should always be lighter than the background by the delta in light mode and darker in dark mode", (): void => { - neutralPalette.forEach((swatch: Swatch, index: number): void => { - const designSystem: DesignSystem = { - backgroundColor: neutralPalette[index], - } as DesignSystem; + it('should always be lighter than the background by the delta in light mode and darker in dark mode', (): void => { + neutralPalette.forEach((swatch: Swatch, index: number): void => { + const designSystem: DesignSystem = { + backgroundColor: neutralPalette[index], + } as DesignSystem; - expect(neutralFillInputSelected(designSystem)).to.equal( - neutralPalette[ - clamp( - index - - DesignSystemDefaults.neutralFillInputRestDelta * - (isDarkMode(designSystem) ? -1 : 1), - 0, - neutralPalette.length - 1 - ) - ] - ); - }); + expect(neutralFillInputSelected(designSystem)).to.equal( + neutralPalette[ + clamp( + index - DesignSystemDefaults.neutralFillInputRestDelta * (isDarkMode(designSystem) ? -1 : 1), + 0, + neutralPalette.length - 1, + ) + ], + ); }); + }); - it("should return the same color from both implementations", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillInputRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillInputHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillInputActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillInputFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillInputSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - }); + it('should return the same color from both implementations', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect(neutralFillInputRest(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillInputRest( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillInputHover(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillInputHover( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillInputActive(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillInputActive( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillInputFocus(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillInputFocus( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillInputSelected(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillInputSelected( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); }); + }); - it("should have consistent return values", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFillInput(() => swatch)( - DesignSystemDefaults - ); - const rest: Swatch = neutralFillInputRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralFillInputHover(() => swatch)( - DesignSystemDefaults - ); - const active: Swatch = neutralFillInputActive(() => swatch)( - DesignSystemDefaults - ); - const focus: Swatch = neutralFillInputFocus(() => swatch)( - DesignSystemDefaults - ); - const selected: Swatch = neutralFillInputSelected(() => swatch)( - DesignSystemDefaults - ); + it('should have consistent return values', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + const backplates: FillSwatchFamily = neutralFillInput(() => swatch)(DesignSystemDefaults); + const rest: Swatch = neutralFillInputRest(() => swatch)(DesignSystemDefaults); + const hover: Swatch = neutralFillInputHover(() => swatch)(DesignSystemDefaults); + const active: Swatch = neutralFillInputActive(() => swatch)(DesignSystemDefaults); + const focus: Swatch = neutralFillInputFocus(() => swatch)(DesignSystemDefaults); + const selected: Swatch = neutralFillInputSelected(() => swatch)(DesignSystemDefaults); - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); + expect(backplates.rest).to.equal(rest); + expect(backplates.hover).to.equal(hover); + expect(backplates.active).to.equal(active); + expect(backplates.focus).to.equal(focus); + expect(backplates.selected).to.equal(selected); }); + }); }); diff --git a/packages/web-components/src/color/neutral-fill-stealth.spec.ts b/packages/web-components/src/color/neutral-fill-stealth.spec.ts index 25abb4bd0b609b..7433a16ceff17e 100644 --- a/packages/web-components/src/color/neutral-fill-stealth.spec.ts +++ b/packages/web-components/src/color/neutral-fill-stealth.spec.ts @@ -1,121 +1,109 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; + accentPalette as getAccentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; import { - neutralFillStealth, - neutralFillStealthActive, - neutralFillStealthFocus, - neutralFillStealthHover, - neutralFillStealthRest, - neutralFillStealthSelected, -} from "./neutral-fill-stealth"; -import { Palette } from "./palette"; -import { FillSwatchFamily, Swatch } from "./common"; + neutralFillStealth, + neutralFillStealthActive, + neutralFillStealthFocus, + neutralFillStealthHover, + neutralFillStealthRest, + neutralFillStealthSelected, +} from './neutral-fill-stealth'; +import { Palette } from './palette'; +import { FillSwatchFamily, Swatch } from './common'; -describe("neutralFillStealth", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); +describe('neutralFillStealth', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should operate on design system defaults", (): void => { - [ - neutralFillStealthActive, - neutralFillStealthFocus, - neutralFillStealthHover, - neutralFillStealthRest, - neutralFillStealthSelected, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); + it('should operate on design system defaults', (): void => { + [ + neutralFillStealthActive, + neutralFillStealthFocus, + neutralFillStealthHover, + neutralFillStealthRest, + neutralFillStealthSelected, + ].forEach(fn => { + expect(neutralPalette).to.include(fn({} as DesignSystem)); }); + }); - it("should switch from dark to light after 10 swatches", (): void => { - expect(neutralFillStealthHover(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta] - ); - expect( - neutralFillStealthHover(() => neutralPalette[1])(DesignSystemDefaults) - ).to.equal(neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 1]); - expect( - neutralFillStealthHover(() => neutralPalette[2])(DesignSystemDefaults) - ).to.equal(neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 2]); - expect( - neutralFillStealthHover(() => neutralPalette[9])(DesignSystemDefaults) - ).to.equal(neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 9]); - expect( - neutralFillStealthHover(() => neutralPalette[10])(DesignSystemDefaults) - ).to.equal(neutralPalette[10 - DesignSystemDefaults.neutralFillStealthHoverDelta]); - }); + it('should switch from dark to light after 10 swatches', (): void => { + expect(neutralFillStealthHover(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta], + ); + expect(neutralFillStealthHover(() => neutralPalette[1])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 1], + ); + expect(neutralFillStealthHover(() => neutralPalette[2])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 2], + ); + expect(neutralFillStealthHover(() => neutralPalette[9])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 9], + ); + expect(neutralFillStealthHover(() => neutralPalette[10])(DesignSystemDefaults)).to.equal( + neutralPalette[10 - DesignSystemDefaults.neutralFillStealthHoverDelta], + ); + }); - it("should return the same color from both implementations", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillStealthRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillStealthHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillStealthActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillStealthFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillStealthSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - }); + it('should return the same color from both implementations', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect(neutralFillStealthRest(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillStealthRest( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillStealthHover(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillStealthHover( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillStealthActive(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillStealthActive( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillStealthFocus(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillStealthFocus( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillStealthSelected(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillStealthSelected( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); }); + }); - it("should have consistent return values", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFillStealth(() => swatch)( - DesignSystemDefaults - ); - const rest: Swatch = neutralFillStealthRest(() => swatch)( - DesignSystemDefaults - ); - const hover: Swatch = neutralFillStealthHover(() => swatch)( - DesignSystemDefaults - ); - const active: Swatch = neutralFillStealthActive(() => swatch)( - DesignSystemDefaults - ); - const focus: Swatch = neutralFillStealthFocus(() => swatch)( - DesignSystemDefaults - ); - const selected: Swatch = neutralFillStealthSelected(() => swatch)( - DesignSystemDefaults - ); + it('should have consistent return values', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + const backplates: FillSwatchFamily = neutralFillStealth(() => swatch)(DesignSystemDefaults); + const rest: Swatch = neutralFillStealthRest(() => swatch)(DesignSystemDefaults); + const hover: Swatch = neutralFillStealthHover(() => swatch)(DesignSystemDefaults); + const active: Swatch = neutralFillStealthActive(() => swatch)(DesignSystemDefaults); + const focus: Swatch = neutralFillStealthFocus(() => swatch)(DesignSystemDefaults); + const selected: Swatch = neutralFillStealthSelected(() => swatch)(DesignSystemDefaults); - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); + expect(backplates.rest).to.equal(rest); + expect(backplates.hover).to.equal(hover); + expect(backplates.active).to.equal(active); + expect(backplates.focus).to.equal(focus); + expect(backplates.selected).to.equal(selected); }); + }); }); diff --git a/packages/web-components/src/color/neutral-fill.spec.ts b/packages/web-components/src/color/neutral-fill.spec.ts index 1430444268ab70..dd26ede0b3b898 100644 --- a/packages/web-components/src/color/neutral-fill.spec.ts +++ b/packages/web-components/src/color/neutral-fill.spec.ts @@ -1,122 +1,104 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; + accentPalette as getAccentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; import { - neutralFill, - neutralFillActive, - neutralFillFocus, - neutralFillHover, - neutralFillRest, - neutralFillSelected, -} from "./neutral-fill"; -import { Palette } from "./palette"; -import { FillSwatchFamily, Swatch } from "./common"; + neutralFill, + neutralFillActive, + neutralFillFocus, + neutralFillHover, + neutralFillRest, + neutralFillSelected, +} from './neutral-fill'; +import { Palette } from './palette'; +import { FillSwatchFamily, Swatch } from './common'; -describe("neutralFill", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it("should operate on design system defaults", (): void => { - [ - neutralFillActive, - neutralFillFocus, - neutralFillHover, - neutralFillRest, - neutralFillSelected, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); - }); +describe('neutralFill', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should switch from dark to light after 10 swatches", (): void => { - expect(neutralFillRest(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta] - ); - expect(neutralFillHover(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillHoverDelta] - ); - expect(neutralFillActive(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillActiveDelta] - ); - expect(neutralFillFocus(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillFocusDelta] - ); - expect(neutralFillRest(() => neutralPalette[1])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 1] - ); - expect(neutralFillRest(() => neutralPalette[2])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 2] - ); - expect(neutralFillRest(() => neutralPalette[9])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 9] - ); - expect(neutralFillRest(() => neutralPalette[10])(DesignSystemDefaults)).to.equal( - neutralPalette[3] - ); + it('should operate on design system defaults', (): void => { + [neutralFillActive, neutralFillFocus, neutralFillHover, neutralFillRest, neutralFillSelected].forEach(fn => { + expect(neutralPalette).to.include(fn({} as DesignSystem)); }); + }); + + it('should switch from dark to light after 10 swatches', (): void => { + expect(neutralFillRest(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillRestDelta]); + expect(neutralFillHover(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillHoverDelta]); + expect(neutralFillActive(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillActiveDelta], + ); + expect(neutralFillFocus(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillFocusDelta]); + expect(neutralFillRest(() => neutralPalette[1])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 1], + ); + expect(neutralFillRest(() => neutralPalette[2])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 2], + ); + expect(neutralFillRest(() => neutralPalette[9])(DesignSystemDefaults)).to.equal( + neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 9], + ); + expect(neutralFillRest(() => neutralPalette[10])(DesignSystemDefaults)).to.equal(neutralPalette[3]); + }); - it("should return the same color from both implementations", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralFillSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - }); + it('should return the same color from both implementations', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect(neutralFillRest(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillRest( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillHover(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillHover( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillActive(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillActive( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillFocus(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillFocus( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralFillSelected(() => swatch)(DesignSystemDefaults)).to.equal( + neutralFillSelected( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); }); + }); - it("should have consistent return values", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFill(() => swatch)( - DesignSystemDefaults - ); - const rest: Swatch = neutralFillRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralFillHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralFillActive(() => swatch)(DesignSystemDefaults); - const focus: Swatch = neutralFillFocus(() => swatch)(DesignSystemDefaults); - const selected: Swatch = neutralFillSelected(() => swatch)( - DesignSystemDefaults - ); + it('should have consistent return values', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + const backplates: FillSwatchFamily = neutralFill(() => swatch)(DesignSystemDefaults); + const rest: Swatch = neutralFillRest(() => swatch)(DesignSystemDefaults); + const hover: Swatch = neutralFillHover(() => swatch)(DesignSystemDefaults); + const active: Swatch = neutralFillActive(() => swatch)(DesignSystemDefaults); + const focus: Swatch = neutralFillFocus(() => swatch)(DesignSystemDefaults); + const selected: Swatch = neutralFillSelected(() => swatch)(DesignSystemDefaults); - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); + expect(backplates.rest).to.equal(rest); + expect(backplates.hover).to.equal(hover); + expect(backplates.active).to.equal(active); + expect(backplates.focus).to.equal(focus); + expect(backplates.selected).to.equal(selected); }); + }); }); diff --git a/packages/web-components/src/color/neutral-focus.spec.ts b/packages/web-components/src/color/neutral-focus.spec.ts index 0289fb1bd760b5..2335caa3ad8409 100644 --- a/packages/web-components/src/color/neutral-focus.spec.ts +++ b/packages/web-components/src/color/neutral-focus.spec.ts @@ -1,20 +1,18 @@ -import { expect } from "chai"; -import { DesignSystem, DesignSystemDefaults } from "../fluent-design-system"; -import { neutralFocus } from "./neutral-focus"; -import { contrast } from "./common"; +import { expect } from 'chai'; +import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; +import { neutralFocus } from './neutral-focus'; +import { contrast } from './common'; -describe("neutralFocus", (): void => { - it("should return a string when invoked with an object", (): void => { - expect(typeof neutralFocus(DesignSystemDefaults)).to.equal("string"); - }); +describe('neutralFocus', (): void => { + it('should return a string when invoked with an object', (): void => { + expect(typeof neutralFocus(DesignSystemDefaults)).to.equal('string'); + }); - it("should return a function when invoked with a function", (): void => { - expect(typeof neutralFocus(() => "#FFF")).to.equal("function"); - }); + it('should return a function when invoked with a function', (): void => { + expect(typeof neutralFocus(() => '#FFF')).to.equal('function'); + }); - it("should operate on default design system if no design system is supplied", (): void => { - expect(contrast(neutralFocus({} as DesignSystem), "#FFF")).to.be.gte( - 3.5 - ); - }); + it('should operate on default design system if no design system is supplied', (): void => { + expect(contrast(neutralFocus({} as DesignSystem), '#FFF')).to.be.gte(3.5); + }); }); diff --git a/packages/web-components/src/color/neutral-foreground-hint.spec.ts b/packages/web-components/src/color/neutral-foreground-hint.spec.ts index 1de1ed57bc8146..a4cb11f2a41228 100644 --- a/packages/web-components/src/color/neutral-foreground-hint.spec.ts +++ b/packages/web-components/src/color/neutral-foreground-hint.spec.ts @@ -1,71 +1,59 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import { - accentPalette as getAccentPalette, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; -import { - neutralForegroundHint, - neutralForegroundHintLarge, -} from "./neutral-foreground-hint"; -import { Palette } from "./palette"; -import { contrast, Swatch, SwatchRecipe } from "./common"; -describe("neutralForegroundHint", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); + accentPalette as getAccentPalette, + DesignSystemDefaults, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; +import { neutralForegroundHint, neutralForegroundHintLarge } from './neutral-foreground-hint'; +import { Palette } from './palette'; +import { contrast, Swatch, SwatchRecipe } from './common'; +describe('neutralForegroundHint', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should implement design system defaults", (): void => { - expect(neutralForegroundHint(undefined as any)).to.equal("#767676"); - }); + it('should implement design system defaults', (): void => { + expect(neutralForegroundHint(undefined as any)).to.equal('#767676'); + }); - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - it(`${swatch} should resolve a color from the neutral palette`, (): void => { - expect( - neutralPalette.indexOf( - neutralForegroundHint( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ) - ).not.to.equal(-1); - }); + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + it(`${swatch} should resolve a color from the neutral palette`, (): void => { + expect( + neutralPalette.indexOf( + neutralForegroundHint( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ), + ).not.to.equal(-1); }); + }); - it("should return the same color from both methods of setting the reference background", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect( - neutralForegroundHint( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ).to.equal(neutralForegroundHint(() => swatch)(DesignSystemDefaults)); - }); + it('should return the same color from both methods of setting the reference background', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect( + neutralForegroundHint( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ).to.equal(neutralForegroundHint(() => swatch)(DesignSystemDefaults)); }); + }); - function retrieveContrast(resolvedSwatch: Swatch, fn: SwatchRecipe): number { - return parseFloat( - contrast( - fn(() => resolvedSwatch)(DesignSystemDefaults), - resolvedSwatch - ).toPrecision(3) - ); - } - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - it(`${swatch} should always be at least 4.5 : 1 against the background`, (): void => { - expect( - retrieveContrast(swatch, neutralForegroundHint) - // Because neutralForegroundHint follows the direction patterns of neutralForeground, - // a backgroundColor #777777 is impossible to hit 4.5 against. - ).to.be.gte(swatch === "#777777" ? 4.48 : 4.5); - expect(retrieveContrast(swatch, neutralForegroundHint)).to.be.lessThan(5); - expect( - retrieveContrast(swatch, neutralForegroundHintLarge) - ).to.be.gte(3); - expect(retrieveContrast(swatch, neutralForegroundHintLarge)).to.be.lessThan( - 3.3 - ); - }); + function retrieveContrast(resolvedSwatch: Swatch, fn: SwatchRecipe): number { + return parseFloat(contrast(fn(() => resolvedSwatch)(DesignSystemDefaults), resolvedSwatch).toPrecision(3)); + } + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + it(`${swatch} should always be at least 4.5 : 1 against the background`, (): void => { + expect( + retrieveContrast(swatch, neutralForegroundHint), + // Because neutralForegroundHint follows the direction patterns of neutralForeground, + // a backgroundColor #777777 is impossible to hit 4.5 against. + ).to.be.gte(swatch === '#777777' ? 4.48 : 4.5); + expect(retrieveContrast(swatch, neutralForegroundHint)).to.be.lessThan(5); + expect(retrieveContrast(swatch, neutralForegroundHintLarge)).to.be.gte(3); + expect(retrieveContrast(swatch, neutralForegroundHintLarge)).to.be.lessThan(3.3); }); + }); }); diff --git a/packages/web-components/src/color/neutral-foreground.spec.ts b/packages/web-components/src/color/neutral-foreground.spec.ts index 96c04c6c090291..a4cf9f4965d051 100644 --- a/packages/web-components/src/color/neutral-foreground.spec.ts +++ b/packages/web-components/src/color/neutral-foreground.spec.ts @@ -1,91 +1,52 @@ -import { expect } from "chai"; -import { DesignSystemDefaults } from "../fluent-design-system"; -import { - neutralForegroundActive, - neutralForegroundHover, - neutralForegroundRest, -} from "./neutral-foreground"; -import { contrast } from "./common"; +import { expect } from 'chai'; +import { DesignSystemDefaults } from '../fluent-design-system'; +import { neutralForegroundActive, neutralForegroundHover, neutralForegroundRest } from './neutral-foreground'; +import { contrast } from './common'; -describe("neutralForeground", (): void => { - it("should return a string when invoked with an object", (): void => { - expect(typeof neutralForegroundRest(DesignSystemDefaults)).to.equal("string"); - expect(typeof neutralForegroundHover(DesignSystemDefaults)).to.equal("string"); - expect(typeof neutralForegroundActive(DesignSystemDefaults)).to.equal("string"); - }); +describe('neutralForeground', (): void => { + it('should return a string when invoked with an object', (): void => { + expect(typeof neutralForegroundRest(DesignSystemDefaults)).to.equal('string'); + expect(typeof neutralForegroundHover(DesignSystemDefaults)).to.equal('string'); + expect(typeof neutralForegroundActive(DesignSystemDefaults)).to.equal('string'); + }); - it("should return a function when invoked with a function", (): void => { - expect(typeof neutralForegroundRest(() => "#FFF")).to.equal("function"); - expect(typeof neutralForegroundHover(() => "#FFF")).to.equal("function"); - expect(typeof neutralForegroundActive(() => "#FFF")).to.equal("function"); - }); + it('should return a function when invoked with a function', (): void => { + expect(typeof neutralForegroundRest(() => '#FFF')).to.equal('function'); + expect(typeof neutralForegroundHover(() => '#FFF')).to.equal('function'); + expect(typeof neutralForegroundActive(() => '#FFF')).to.equal('function'); + }); - it("should operate on default design system if no design system is supplied", (): void => { - expect( - contrast(neutralForegroundRest(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast( - neutralForegroundRest(() => undefined as any)(undefined as any), - "#FFF" - ) - ).to.be.gte(14); - expect( - contrast(neutralForegroundRest(() => "#FFF")(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast(neutralForegroundRest(() => "#FFFFFF")(undefined as any), "#FFF") - ).to.be.gte(14); + it('should operate on default design system if no design system is supplied', (): void => { + expect(contrast(neutralForegroundRest(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundRest(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundRest(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundRest(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); - expect( - contrast(neutralForegroundHover(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast( - neutralForegroundHover(() => undefined as any)(undefined as any), - "#FFF" - ) - ).to.be.gte(14); - expect( - contrast(neutralForegroundHover(() => "#FFF")(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast(neutralForegroundHover(() => "#FFFFFF")(undefined as any), "#FFF") - ).to.be.gte(14); + expect(contrast(neutralForegroundHover(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundHover(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundHover(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundHover(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); - expect( - contrast(neutralForegroundActive(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast( - neutralForegroundActive(() => undefined as any)(undefined as any), - "#FFF" - ) - ).to.be.gte(14); - expect( - contrast(neutralForegroundActive(() => "#FFF")(undefined as any), "#FFF") - ).to.be.gte(14); - expect( - contrast(neutralForegroundActive(() => "#FFFFFF")(undefined as any), "#FFF") - ).to.be.gte(14); - }); + expect(contrast(neutralForegroundActive(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundActive(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundActive(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); + expect(contrast(neutralForegroundActive(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); + }); - it("should return correct result with default design system values", (): void => { - expect( - contrast(neutralForegroundRest(DesignSystemDefaults), "#FFF") - ).to.be.gte(14); - }); + it('should return correct result with default design system values', (): void => { + expect(contrast(neutralForegroundRest(DesignSystemDefaults), '#FFF')).to.be.gte(14); + }); - it("should return #FFFFFF with a dark background", (): void => { - expect( - contrast( - neutralForegroundRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: "#000", - }) - ), - "#000" - ) - ).to.be.gte(14); - }); + it('should return #FFFFFF with a dark background', (): void => { + expect( + contrast( + neutralForegroundRest( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: '#000', + }), + ), + '#000', + ), + ).to.be.gte(14); + }); }); diff --git a/packages/web-components/src/color/neutral-layer.spec.ts b/packages/web-components/src/color/neutral-layer.spec.ts index f2113cc5d2d622..b617e7cffb3b12 100644 --- a/packages/web-components/src/color/neutral-layer.spec.ts +++ b/packages/web-components/src/color/neutral-layer.spec.ts @@ -1,173 +1,155 @@ -import { expect } from "chai"; -import { DesignSystem, DesignSystemDefaults } from "../fluent-design-system"; +import { expect } from 'chai'; +import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; import { - neutralLayerCard, - neutralLayerCardContainer, - neutralLayerFloating, - neutralLayerL1, - neutralLayerL2, - neutralLayerL3, - neutralLayerL4, - StandardLuminance, -} from "./neutral-layer"; + neutralLayerCard, + neutralLayerCardContainer, + neutralLayerFloating, + neutralLayerL1, + neutralLayerL2, + neutralLayerL3, + neutralLayerL4, + StandardLuminance, +} from './neutral-layer'; const lightModeDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - baseLayerLuminance: StandardLuminance.LightMode, + baseLayerLuminance: StandardLuminance.LightMode, }); const darkModeDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - baseLayerLuminance: StandardLuminance.DarkMode, + baseLayerLuminance: StandardLuminance.DarkMode, }); const enum NeutralPaletteLightModeOffsets { - L1 = 0, - L2 = 10, - L3 = 13, - L4 = 16, + L1 = 0, + L2 = 10, + L3 = 13, + L4 = 16, } const enum NeutralPaletteDarkModeOffsets { - L1 = 76, - L2 = 79, - L3 = 82, - L4 = 85, + L1 = 76, + L2 = 79, + L3 = 82, + L4 = 85, } -describe("neutralLayer", (): void => { - describe("L1", (): void => { - it("should return values from L1 when in light mode", (): void => { - expect(neutralLayerL1(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1] - ); - }); - it("should return values from L1 when in dark mode", (): void => { - expect(neutralLayerL1(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1] - ); - }); - it("should operate on a provided background color", (): void => { - expect(neutralLayerL1((): string => "#000000")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1] - ); - expect(neutralLayerL1((): string => "#FFFFFF")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1] - ); - }); +describe('neutralLayer', (): void => { + describe('L1', (): void => { + it('should return values from L1 when in light mode', (): void => { + expect(neutralLayerL1(lightModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1], + ); }); + it('should return values from L1 when in dark mode', (): void => { + expect(neutralLayerL1(darkModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1], + ); + }); + it('should operate on a provided background color', (): void => { + expect(neutralLayerL1((): string => '#000000')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1], + ); + expect(neutralLayerL1((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1], + ); + }); + }); - describe("L2", (): void => { - it("should return values from L2 when in light mode", (): void => { - expect(neutralLayerL2(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2] - ); - }); - it("should return values from L2 when in dark mode", (): void => { - expect(neutralLayerL2(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2] - ); - }); - it("should operate on a provided background color", (): void => { - expect(neutralLayerL2((): string => "#000000")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2] - ); - expect(neutralLayerL2((): string => "#FFFFFF")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2] - ); - }); + describe('L2', (): void => { + it('should return values from L2 when in light mode', (): void => { + expect(neutralLayerL2(lightModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2], + ); + }); + it('should return values from L2 when in dark mode', (): void => { + expect(neutralLayerL2(darkModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2], + ); + }); + it('should operate on a provided background color', (): void => { + expect(neutralLayerL2((): string => '#000000')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2], + ); + expect(neutralLayerL2((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2], + ); }); + }); - describe("L3", (): void => { - it("should return values from L3 when in light mode", (): void => { - expect(neutralLayerL3(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3] - ); - }); - it("should return values from L3 when in dark mode", (): void => { - expect(neutralLayerL3(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3] - ); - }); - it("should operate on a provided background color", (): void => { - expect(neutralLayerL3((): string => "#000000")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3] - ); - expect(neutralLayerL3((): string => "#FFFFFF")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3] - ); - }); + describe('L3', (): void => { + it('should return values from L3 when in light mode', (): void => { + expect(neutralLayerL3(lightModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3], + ); }); + it('should return values from L3 when in dark mode', (): void => { + expect(neutralLayerL3(darkModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3], + ); + }); + it('should operate on a provided background color', (): void => { + expect(neutralLayerL3((): string => '#000000')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3], + ); + expect(neutralLayerL3((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3], + ); + }); + }); - describe("L4", (): void => { - it("should return values from L4 when in light mode", (): void => { - expect(neutralLayerL4(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4] - ); - }); - it("should return values from L4 when in dark mode", (): void => { - expect(neutralLayerL4(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4] - ); - }); - it("should operate on a provided background color", (): void => { - expect(neutralLayerL4((): string => "#000000")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4] - ); - expect(neutralLayerL4((): string => "#FFFFFF")(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4] - ); - }); + describe('L4', (): void => { + it('should return values from L4 when in light mode', (): void => { + expect(neutralLayerL4(lightModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4], + ); + }); + it('should return values from L4 when in dark mode', (): void => { + expect(neutralLayerL4(darkModeDesignSystem)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4], + ); }); + it('should operate on a provided background color', (): void => { + expect(neutralLayerL4((): string => '#000000')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4], + ); + expect(neutralLayerL4((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( + DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4], + ); + }); + }); - describe("neutralLayerFloating", (): void => { - it("should return a color from the neutral palette", (): void => { - expect( - DesignSystemDefaults.neutralPalette.includes( - neutralLayerFloating(DesignSystemDefaults) - ) - ).to.be.ok; - }); + describe('neutralLayerFloating', (): void => { + it('should return a color from the neutral palette', (): void => { + expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerFloating(DesignSystemDefaults))).to.be.ok; + }); - it("should operate on a provided background color", (): void => { - const color: string = neutralLayerFloating((): string => "#000000")( - DesignSystemDefaults - ); + it('should operate on a provided background color', (): void => { + const color: string = neutralLayerFloating((): string => '#000000')(DesignSystemDefaults); - expect(color).not.to.equal(neutralLayerFloating(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); - }); - describe("neutralLayerCardContainer", (): void => { - it("should return a color from the neutral palette", (): void => { - expect( - DesignSystemDefaults.neutralPalette.includes( - neutralLayerCardContainer(DesignSystemDefaults) - ) - ).to.be.ok; - }); - it("should operate on a provided background color", (): void => { - const color: string = neutralLayerCardContainer((): string => "#000000")( - DesignSystemDefaults - ); + expect(color).not.to.equal(neutralLayerFloating(DesignSystemDefaults)); + expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; + }); + }); + describe('neutralLayerCardContainer', (): void => { + it('should return a color from the neutral palette', (): void => { + expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerCardContainer(DesignSystemDefaults))).to.be.ok; + }); + it('should operate on a provided background color', (): void => { + const color: string = neutralLayerCardContainer((): string => '#000000')(DesignSystemDefaults); - expect(color).not.to.equal(neutralLayerCardContainer(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); - }); - describe("neutralLayerCard", (): void => { - it("should return a color from the neutral palette", (): void => { - expect( - DesignSystemDefaults.neutralPalette.includes( - neutralLayerCard(DesignSystemDefaults) - ) - ).to.be.ok; - }); - it("should operate on a provided background color", (): void => { - const color: string = neutralLayerCard((): string => "#000000")( - DesignSystemDefaults - ); + expect(color).not.to.equal(neutralLayerCardContainer(DesignSystemDefaults)); + expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; + }); + }); + describe('neutralLayerCard', (): void => { + it('should return a color from the neutral palette', (): void => { + expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerCard(DesignSystemDefaults))).to.be.ok; + }); + it('should operate on a provided background color', (): void => { + const color: string = neutralLayerCard((): string => '#000000')(DesignSystemDefaults); - expect(color).not.to.equal(neutralLayerCard(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); + expect(color).not.to.equal(neutralLayerCard(DesignSystemDefaults)); + expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; }); + }); }); diff --git a/packages/web-components/src/color/neutral-outline.spec.ts b/packages/web-components/src/color/neutral-outline.spec.ts index 95db385832f87f..6f9810389b7064 100644 --- a/packages/web-components/src/color/neutral-outline.spec.ts +++ b/packages/web-components/src/color/neutral-outline.spec.ts @@ -1,93 +1,82 @@ -import { expect } from "chai"; -import { isColorStringHexRGB } from "@microsoft/fast-colors"; +import { expect } from 'chai'; +import { isColorStringHexRGB } from '@microsoft/fast-colors'; import { - DesignSystem, - DesignSystemDefaults, - accentPalette as getAccentPalette, - neutralPalette as getNeutralPalette, -} from "../fluent-design-system"; + DesignSystem, + DesignSystemDefaults, + accentPalette as getAccentPalette, + neutralPalette as getNeutralPalette, +} from '../fluent-design-system'; import { - neutralOutline, - neutralOutlineActive, - neutralOutlineFocus, - neutralOutlineHover, - neutralOutlineRest, -} from "./neutral-outline"; -import { Palette } from "./palette"; -import { Swatch, SwatchFamily } from "./common"; + neutralOutline, + neutralOutlineActive, + neutralOutlineFocus, + neutralOutlineHover, + neutralOutlineRest, +} from './neutral-outline'; +import { Palette } from './palette'; +import { Swatch, SwatchFamily } from './common'; -describe("neutralOutline", (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); +describe('neutralOutline', (): void => { + const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); + const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - it("should return by default", (): void => { - [ - neutralOutlineActive, - neutralOutlineFocus, - neutralOutlineHover, - neutralOutlineRest, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); + it('should return by default', (): void => { + [neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest].forEach(fn => { + expect(neutralPalette).to.include(fn({} as DesignSystem)); }); + }); - it("should always return a color", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect( - isColorStringHexRGB(neutralOutlineRest(() => swatch)({} as DesignSystem)) - ).to.equal(true); - }); + it('should always return a color', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect(isColorStringHexRGB(neutralOutlineRest(() => swatch)({} as DesignSystem))).to.equal(true); }); + }); - it("should return the same color from both implementations", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralOutlineRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralOutlineHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralOutlineActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - expect(neutralOutlineFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }) - ) - ); - }); + it('should return the same color from both implementations', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + expect(neutralOutlineRest(() => swatch)(DesignSystemDefaults)).to.equal( + neutralOutlineRest( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralOutlineHover(() => swatch)(DesignSystemDefaults)).to.equal( + neutralOutlineHover( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralOutlineActive(() => swatch)(DesignSystemDefaults)).to.equal( + neutralOutlineActive( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); + expect(neutralOutlineFocus(() => swatch)(DesignSystemDefaults)).to.equal( + neutralOutlineFocus( + Object.assign({}, DesignSystemDefaults, { + backgroundColor: swatch, + }), + ), + ); }); + }); - it("should have consistent return values", (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: SwatchFamily = neutralOutline(() => swatch)( - DesignSystemDefaults - ); - const rest: Swatch = neutralOutlineRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralOutlineHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralOutlineActive(() => swatch)( - DesignSystemDefaults - ); - const focus: Swatch = neutralOutlineFocus(() => swatch)(DesignSystemDefaults); + it('should have consistent return values', (): void => { + neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { + const backplates: SwatchFamily = neutralOutline(() => swatch)(DesignSystemDefaults); + const rest: Swatch = neutralOutlineRest(() => swatch)(DesignSystemDefaults); + const hover: Swatch = neutralOutlineHover(() => swatch)(DesignSystemDefaults); + const active: Swatch = neutralOutlineActive(() => swatch)(DesignSystemDefaults); + const focus: Swatch = neutralOutlineFocus(() => swatch)(DesignSystemDefaults); - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - }); + expect(backplates.rest).to.equal(rest); + expect(backplates.hover).to.equal(hover); + expect(backplates.active).to.equal(active); + expect(backplates.focus).to.equal(focus); }); + }); }); diff --git a/packages/web-components/src/color/palette.spec.ts b/packages/web-components/src/color/palette.spec.ts index b2e8c964d73895..202c5f27cf9bb5 100644 --- a/packages/web-components/src/color/palette.spec.ts +++ b/packages/web-components/src/color/palette.spec.ts @@ -1,346 +1,300 @@ -import chai, { expect } from "chai"; -import spies from "chai-spies"; -import { accentBaseColor, accentPalette, DesignSystem, DesignSystemDefaults, neutralPalette } from "../fluent-design-system"; +import chai, { expect } from 'chai'; +import spies from 'chai-spies'; import { - findClosestSwatchIndex, - findSwatchIndex, - getSwatch, - palette, - Palette, - PaletteType, - swatchByContrast, - swatchByMode, -} from "./palette"; -import { Swatch } from "./common"; + accentBaseColor, + accentPalette, + DesignSystem, + DesignSystemDefaults, + neutralPalette, +} from '../fluent-design-system'; +import { + findClosestSwatchIndex, + findSwatchIndex, + getSwatch, + palette, + Palette, + PaletteType, + swatchByContrast, + swatchByMode, +} from './palette'; +import { Swatch } from './common'; chai.use(spies); -describe("palette", (): void => { - it("should return a function", (): void => { - expect(typeof palette(PaletteType.accent)).to.equal("function"); - expect(typeof palette(PaletteType.neutral)).to.equal("function"); - }); +describe('palette', (): void => { + it('should return a function', (): void => { + expect(typeof palette(PaletteType.accent)).to.equal('function'); + expect(typeof palette(PaletteType.neutral)).to.equal('function'); + }); - it("should return a function that returns a palette if the argument does not match a palette", (): void => { - expect((palette as any)()()).to.have.length(94); - }); + it('should return a function that returns a palette if the argument does not match a palette', (): void => { + expect((palette as any)()()).to.have.length(94); + }); - it("should return a palette if no designSystem is provided", (): void => { - expect(palette(PaletteType.neutral)(undefined as any)).to.have.length(94); - expect(palette(PaletteType.accent)(undefined as any)).to.have.length(94); - }); + it('should return a palette if no designSystem is provided', (): void => { + expect(palette(PaletteType.neutral)(undefined as any)).to.have.length(94); + expect(palette(PaletteType.accent)(undefined as any)).to.have.length(94); + }); - it("should return upper-case hex values", (): void => { - (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach( - (swatch: Swatch) => { - expect(swatch).to.equal(swatch.toUpperCase()); - } - ); - (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach( - (swatch: Swatch) => { - expect(swatch).to.equal(swatch.toUpperCase()); - } - ); + it('should return upper-case hex values', (): void => { + (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { + expect(swatch).to.equal(swatch.toUpperCase()); }); - - it("should return six-letter hex values", (): void => { - (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach( - (swatch: Swatch) => { - expect(swatch.length).to.equal(7); - expect(swatch.charAt(0)).to.equal("#"); - } - ); - (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach( - (swatch: Swatch) => { - expect(swatch.length).to.equal(7); - expect(swatch.charAt(0)).to.equal("#"); - } - ); + (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { + expect(swatch).to.equal(swatch.toUpperCase()); }); -}); + }); -describe("findSwatchIndex", (): void => { - it("should implement design-system defaults", (): void => { - expect(findSwatchIndex(neutralPalette, "#FFF")({} as DesignSystem)).to.equal(0); - expect( - findSwatchIndex( - accentPalette, - accentBaseColor({} as DesignSystem) - )({} as DesignSystem) - ).to.equal(59); + it('should return six-letter hex values', (): void => { + (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { + expect(swatch.length).to.equal(7); + expect(swatch.charAt(0)).to.equal('#'); }); - - it("should return -1 if the color is not found", (): void => { - expect(findSwatchIndex(neutralPalette, "#FF0000")(DesignSystemDefaults)).to.equal(-1); - expect(findSwatchIndex(accentPalette, "#FF0000")(DesignSystemDefaults)).to.equal(-1); - }); - - it("should find white", (): void => { - expect(findSwatchIndex(neutralPalette, "#FFFFFF")(DesignSystemDefaults)).to.equal(0); - expect(findSwatchIndex(neutralPalette, "#FFF")(DesignSystemDefaults)).to.equal(0); - expect( - findSwatchIndex(neutralPalette, "rgb(255, 255, 255)")(DesignSystemDefaults) - ).to.equal(0); - }); - - it("should find black", (): void => { - expect(findSwatchIndex(neutralPalette, "#000000")(DesignSystemDefaults)).to.equal(93); - expect(findSwatchIndex(neutralPalette, "#000")(DesignSystemDefaults)).to.equal(93); - expect( - findSwatchIndex(neutralPalette, "rgb(0, 0, 0)")(DesignSystemDefaults) - ).to.equal(93); + (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { + expect(swatch.length).to.equal(7); + expect(swatch.charAt(0)).to.equal('#'); }); + }); +}); - it("should find accent", (): void => { - expect( - findSwatchIndex( - accentPalette, - accentBaseColor(DesignSystemDefaults) - )(DesignSystemDefaults) - ).to.equal(59); - expect( - findSwatchIndex(accentPalette, "rgb(0, 120, 212)")(DesignSystemDefaults) - ).to.equal(59); - }); +describe('findSwatchIndex', (): void => { + it('should implement design-system defaults', (): void => { + expect(findSwatchIndex(neutralPalette, '#FFF')({} as DesignSystem)).to.equal(0); + expect(findSwatchIndex(accentPalette, accentBaseColor({} as DesignSystem))({} as DesignSystem)).to.equal(59); + }); + + it('should return -1 if the color is not found', (): void => { + expect(findSwatchIndex(neutralPalette, '#FF0000')(DesignSystemDefaults)).to.equal(-1); + expect(findSwatchIndex(accentPalette, '#FF0000')(DesignSystemDefaults)).to.equal(-1); + }); + + it('should find white', (): void => { + expect(findSwatchIndex(neutralPalette, '#FFFFFF')(DesignSystemDefaults)).to.equal(0); + expect(findSwatchIndex(neutralPalette, '#FFF')(DesignSystemDefaults)).to.equal(0); + expect(findSwatchIndex(neutralPalette, 'rgb(255, 255, 255)')(DesignSystemDefaults)).to.equal(0); + }); + + it('should find black', (): void => { + expect(findSwatchIndex(neutralPalette, '#000000')(DesignSystemDefaults)).to.equal(93); + expect(findSwatchIndex(neutralPalette, '#000')(DesignSystemDefaults)).to.equal(93); + expect(findSwatchIndex(neutralPalette, 'rgb(0, 0, 0)')(DesignSystemDefaults)).to.equal(93); + }); + + it('should find accent', (): void => { + expect(findSwatchIndex(accentPalette, accentBaseColor(DesignSystemDefaults))(DesignSystemDefaults)).to.equal(59); + expect(findSwatchIndex(accentPalette, 'rgb(0, 120, 212)')(DesignSystemDefaults)).to.equal(59); + }); }); -describe("findClosestSwatchIndex", (): void => { - it("should return 0 if the input swatch cannot be converted to a color", (): void => { - expect( - findClosestSwatchIndex(neutralPalette, "pewpewpew")({} as DesignSystem) - ).to.equal(0); - }); - it("should operate on design system defaults", (): void => { - expect( - findClosestSwatchIndex(neutralPalette, "#FFFFFF")({} as DesignSystem) - ).to.equal(0); - expect( - findClosestSwatchIndex(neutralPalette, "#808080")({} as DesignSystem) - ).to.equal(49); - expect( - findClosestSwatchIndex(neutralPalette, "#000000")({} as DesignSystem) - ).to.equal(93); - }); - it("should return the index with the closest luminance to the input swatch if the swatch is not in the palette", (): void => { - expect( - findClosestSwatchIndex(neutralPalette, "#008000")({} as DesignSystem) - ).to.equal(56); - expect( - findClosestSwatchIndex(neutralPalette, "#F589FF")({} as DesignSystem) - ).to.equal(30); - }); +describe('findClosestSwatchIndex', (): void => { + it('should return 0 if the input swatch cannot be converted to a color', (): void => { + expect(findClosestSwatchIndex(neutralPalette, 'pewpewpew')({} as DesignSystem)).to.equal(0); + }); + it('should operate on design system defaults', (): void => { + expect(findClosestSwatchIndex(neutralPalette, '#FFFFFF')({} as DesignSystem)).to.equal(0); + expect(findClosestSwatchIndex(neutralPalette, '#808080')({} as DesignSystem)).to.equal(49); + expect(findClosestSwatchIndex(neutralPalette, '#000000')({} as DesignSystem)).to.equal(93); + }); + it('should return the index with the closest luminance to the input swatch if the swatch is not in the palette', (): void => { + expect(findClosestSwatchIndex(neutralPalette, '#008000')({} as DesignSystem)).to.equal(56); + expect(findClosestSwatchIndex(neutralPalette, '#F589FF')({} as DesignSystem)).to.equal(30); + }); }); -describe("getSwatch", (): void => { - const colorPalette: Palette = ["#FFF", "#F00", "#000"]; +describe('getSwatch', (): void => { + const colorPalette: Palette = ['#FFF', '#F00', '#000']; - it("should return the first color when the input index is less than 0", (): void => { - expect(getSwatch(-1, colorPalette)).to.equal("#FFF"); - }); + it('should return the first color when the input index is less than 0', (): void => { + expect(getSwatch(-1, colorPalette)).to.equal('#FFF'); + }); - it("should return the last color when the input index is greater than the last index of the palette", (): void => { - expect(getSwatch(4, colorPalette)).to.equal("#000"); - }); + it('should return the last color when the input index is greater than the last index of the palette', (): void => { + expect(getSwatch(4, colorPalette)).to.equal('#000'); + }); - it("should return the color at the provided index if the index is within the bounds of the array", (): void => { - expect(getSwatch(0, colorPalette)).to.equal("#FFF"); - expect(getSwatch(1, colorPalette)).to.equal("#F00"); - expect(getSwatch(2, colorPalette)).to.equal("#000"); - }); + it('should return the color at the provided index if the index is within the bounds of the array', (): void => { + expect(getSwatch(0, colorPalette)).to.equal('#FFF'); + expect(getSwatch(1, colorPalette)).to.equal('#F00'); + expect(getSwatch(2, colorPalette)).to.equal('#000'); + }); }); -describe("swatchByMode", (): void => { - it("should operate on DesignSystemDefaults", (): void => { - expect(swatchByMode(neutralPalette)(0, 0)({} as DesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[0] - ); - expect(swatchByMode(accentPalette)(0, 0)({} as DesignSystem)).to.equal( - DesignSystemDefaults.accentPalette[0] - ); - }); - it("should return the dark index color when the background color is dark", (): void => { - expect( - swatchByMode(neutralPalette)(0, 7)({ - backgroundColor: "#000", - } as DesignSystem) - ).to.equal(DesignSystemDefaults.neutralPalette[7]); - expect( - swatchByMode(accentPalette)(0, 7)({ - backgroundColor: "#000", - } as DesignSystem) - ).to.equal(DesignSystemDefaults.accentPalette[7]); - }); +describe('swatchByMode', (): void => { + it('should operate on DesignSystemDefaults', (): void => { + expect(swatchByMode(neutralPalette)(0, 0)({} as DesignSystem)).to.equal(DesignSystemDefaults.neutralPalette[0]); + expect(swatchByMode(accentPalette)(0, 0)({} as DesignSystem)).to.equal(DesignSystemDefaults.accentPalette[0]); + }); + it('should return the dark index color when the background color is dark', (): void => { + expect( + swatchByMode(neutralPalette)(0, 7)({ + backgroundColor: '#000', + } as DesignSystem), + ).to.equal(DesignSystemDefaults.neutralPalette[7]); + expect( + swatchByMode(accentPalette)(0, 7)({ + backgroundColor: '#000', + } as DesignSystem), + ).to.equal(DesignSystemDefaults.accentPalette[7]); + }); }); -describe("swatchByContrast", (): void => { - it("should return a function", (): void => { - expect(typeof swatchByContrast({} as any)).to.equal("function"); +describe('swatchByContrast', (): void => { + it('should return a function', (): void => { + expect(typeof swatchByContrast({} as any)).to.equal('function'); + }); + describe('indexResolver', (): void => { + it('should pass a reference color as the first argument', (): void => { + const indexResolver = chai.spy(() => 0); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(indexResolver).to.have.been.called.once; + expect(indexResolver).to.have.been.called.with('#FFF'); }); - describe("indexResolver", (): void => { - it("should pass a reference color as the first argument", (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with("#FFF"); - }); - it("should pass the palette as the second argument", (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const colorPalette: string[] = ["foo"]; - - swatchByContrast("#FFF")(() => colorPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with(colorPalette); - }); - it("should pass the designSystem as the third argument", (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const designSystem: DesignSystem = {} as DesignSystem; - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)(designSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with(designSystem); - }); + it('should pass the palette as the second argument', (): void => { + const indexResolver = chai.spy(() => 0); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + const colorPalette: string[] = ['foo']; + + swatchByContrast('#FFF')(() => colorPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(indexResolver).to.have.been.called.once; + expect(indexResolver).to.have.been.called.with(colorPalette); }); - describe("directionResolver", (): void => { - it("should pass the reference index as the first argument", (): void => { - const index: number = 20; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(index); - }); - it("should receive the palette length - 1 if the resolved index is greater than the palette length", (): void => { - const index: number = 105; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with( - neutralPalette({} as DesignSystem).length - 1 - ); - }); - it("should receive 0 if the resolved index is less than 0", (): void => { - const index: number = -20; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(0); - }); - it("should pass the palette as the second argument", (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const colorPalette: string[] = ["foo"]; - - swatchByContrast("#FFF")(() => colorPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(colorPalette); - }); - it("should pass the designSystem as the third argument", (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const designSystem: DesignSystem = {} as DesignSystem; - - swatchByContrast("#FFF")(neutralPalette)(indexResolver as any)( - directionResolver as any - )(contrastCondition as any)(designSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(designSystem); - }); + it('should pass the designSystem as the third argument', (): void => { + const indexResolver = chai.spy(() => 0); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + const designSystem: DesignSystem = {} as DesignSystem; + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )(designSystem); + expect(indexResolver).to.have.been.called.once; + expect(indexResolver).to.have.been.called.with(designSystem); }); - - it("should return the color at the initial index if it satisfies the predicate", (): void => { - const indexResolver: () => number = (): number => 0; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => true; - const designSystem: DesignSystem = {} as DesignSystem; - const sourcePalette: string[] = ["#111", "#222", "#333"]; - - expect( - swatchByContrast("#FFF")(() => sourcePalette)(indexResolver)( - directionResolver - )(contrastCondition)(designSystem) - ).to.equal(sourcePalette[0]); + }); + describe('directionResolver', (): void => { + it('should pass the reference index as the first argument', (): void => { + const index: number = 20; + const indexResolver = chai.spy(() => index); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(directionResolver).to.have.been.called.once; + expect(directionResolver).to.have.been.called.with(index); }); - it("should return the color at the last index when direction is 1 and no value satisfies the predicate", (): void => { - const indexResolver: () => number = (): number => 0; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - const sourcePalette: string[] = ["#111", "#222", "#333"]; - - expect( - swatchByContrast("#FFF")(() => sourcePalette)(indexResolver)( - directionResolver - )(contrastCondition)(designSystem) - ).to.equal(sourcePalette[sourcePalette.length - 1]); + it('should receive the palette length - 1 if the resolved index is greater than the palette length', (): void => { + const index: number = 105; + const indexResolver = chai.spy(() => index); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(directionResolver).to.have.been.called.once; + expect(directionResolver).to.have.been.called.with(neutralPalette({} as DesignSystem).length - 1); }); - it("should return the color at the first index when direction is -1 and no value satisfies the predicate", (): void => { - const sourcePalette: string[] = ["#111", "#222", "#333"]; - const indexResolver: () => number = (): number => sourcePalette.length - 1; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast("#FFF")(() => sourcePalette)(indexResolver)( - directionResolver - )(contrastCondition)(designSystem) - ).to.equal(sourcePalette[sourcePalette.length - 1]); + it('should receive 0 if the resolved index is less than 0', (): void => { + const index: number = -20; + const indexResolver = chai.spy(() => index); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(directionResolver).to.have.been.called.once; + expect(directionResolver).to.have.been.called.with(0); }); - it("should return the color at the last index when initialIndex is greater than the last index", (): void => { - const sourcePalette: string[] = ["#111", "#222", "#333"]; - const indexResolver: () => number = (): number => sourcePalette.length; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast("#FFF")(() => sourcePalette)(indexResolver)( - directionResolver - )(contrastCondition)(designSystem) - ).to.equal(sourcePalette[sourcePalette.length - 1]); + it('should pass the palette as the second argument', (): void => { + const indexResolver = chai.spy(() => 0); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + const colorPalette: string[] = ['foo']; + + swatchByContrast('#FFF')(() => colorPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )({} as DesignSystem); + expect(directionResolver).to.have.been.called.once; + expect(directionResolver).to.have.been.called.with(colorPalette); }); - it("should return the color at the first index when initialIndex is less than 0", (): void => { - const sourcePalette: string[] = ["#111", "#222", "#333"]; - const indexResolver: () => number = (): number => sourcePalette.length; - const directionResolver: () => 1 | -1 = (): 1 | -1 => -1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast("#FFF")(() => sourcePalette)(indexResolver)( - directionResolver - )(contrastCondition)(designSystem) - ).to.equal(sourcePalette[0]); + it('should pass the designSystem as the third argument', (): void => { + const indexResolver = chai.spy(() => 0); + const directionResolver = chai.spy(() => 1); + const contrastCondition = chai.spy(() => false); + const designSystem: DesignSystem = {} as DesignSystem; + + swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( + contrastCondition as any, + )(designSystem); + expect(directionResolver).to.have.been.called.once; + expect(directionResolver).to.have.been.called.with(designSystem); }); + }); + + it('should return the color at the initial index if it satisfies the predicate', (): void => { + const indexResolver: () => number = (): number => 0; + const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; + const contrastCondition: () => boolean = (): boolean => true; + const designSystem: DesignSystem = {} as DesignSystem; + const sourcePalette: string[] = ['#111', '#222', '#333']; + + expect( + swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), + ).to.equal(sourcePalette[0]); + }); + it('should return the color at the last index when direction is 1 and no value satisfies the predicate', (): void => { + const indexResolver: () => number = (): number => 0; + const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; + const contrastCondition: () => boolean = (): boolean => false; + const designSystem: DesignSystem = {} as DesignSystem; + const sourcePalette: string[] = ['#111', '#222', '#333']; + + expect( + swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), + ).to.equal(sourcePalette[sourcePalette.length - 1]); + }); + it('should return the color at the first index when direction is -1 and no value satisfies the predicate', (): void => { + const sourcePalette: string[] = ['#111', '#222', '#333']; + const indexResolver: () => number = (): number => sourcePalette.length - 1; + const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; + const contrastCondition: () => boolean = (): boolean => false; + const designSystem: DesignSystem = {} as DesignSystem; + + expect( + swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), + ).to.equal(sourcePalette[sourcePalette.length - 1]); + }); + it('should return the color at the last index when initialIndex is greater than the last index', (): void => { + const sourcePalette: string[] = ['#111', '#222', '#333']; + const indexResolver: () => number = (): number => sourcePalette.length; + const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; + const contrastCondition: () => boolean = (): boolean => false; + const designSystem: DesignSystem = {} as DesignSystem; + + expect( + swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), + ).to.equal(sourcePalette[sourcePalette.length - 1]); + }); + it('should return the color at the first index when initialIndex is less than 0', (): void => { + const sourcePalette: string[] = ['#111', '#222', '#333']; + const indexResolver: () => number = (): number => sourcePalette.length; + const directionResolver: () => 1 | -1 = (): 1 | -1 => -1; + const contrastCondition: () => boolean = (): boolean => false; + const designSystem: DesignSystem = {} as DesignSystem; + + expect( + swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), + ).to.equal(sourcePalette[0]); + }); }); diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts index 112b3d6497f50a..2b8e2f1023d97a 100644 --- a/packages/web-components/src/combobox/combobox.styles.ts +++ b/packages/web-components/src/combobox/combobox.styles.ts @@ -1,10 +1,11 @@ import { css } from '@microsoft/fast-element'; import { disabledCursor, focusVisible } from '@microsoft/fast-foundation'; -import { SelectFilledStyles, SelectStyles } from '../select/select.styles'; +import { SelectFilledStyles, selectStyles } from '../select/select.styles'; import { appearanceBehavior } from '../utilities/behaviors'; -export const ComboboxStyles = css` - ${SelectStyles} +export const comboboxStyles = (context, definition) => + css` + ${selectStyles(context, definition)} :host(:empty) .listbox { display: none; diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts index 76f4e762e483cc..5f7a49d23680ba 100644 --- a/packages/web-components/src/combobox/index.ts +++ b/packages/web-components/src/combobox/index.ts @@ -1,7 +1,7 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { Combobox, ComboboxTemplate as template } from '@microsoft/fast-foundation'; +import { attr } from '@microsoft/fast-element'; +import { Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation'; import { SelectAppearance } from '../select'; -import { ComboboxStyles as styles } from './combobox.styles'; +import { comboboxStyles as styles } from './combobox.styles'; /** * Combobox appearances @@ -10,23 +10,10 @@ import { ComboboxStyles as styles } from './combobox.styles'; export type ComboboxAppearance = SelectAppearance; /** - * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox|Combobox}, - * {@link @microsoft/fast-foundation#ComboboxTemplate|ComboboxTemplate} - * - * @public - * @remarks - * HTML Element: \ - * + * The Fluent combobox class + * @internal */ -@customElement({ - name: 'fluent-combobox', - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class FluentCombobox extends Combobox { +export class Combobox extends FoundationCombobox { /** * The appearance of the element. * @@ -59,8 +46,23 @@ export class FluentCombobox extends Combobox { } } +/** + * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox}, + * {@link @microsoft/fast-foundation#comboboxTemplate} + * + * @public + * @remarks + * HTML Element: \ + * + */ +export const fluentCombobox = Combobox.compose({ + baseName: 'combobox', + template, + styles, +}); + /** * Styles for combobox * @public */ -export const ComboboxStyles = styles; +export const comboboxStyles = styles; diff --git a/packages/web-components/src/custom-elements.ts b/packages/web-components/src/custom-elements.ts new file mode 100644 index 00000000000000..c00ae20b57cc58 --- /dev/null +++ b/packages/web-components/src/custom-elements.ts @@ -0,0 +1,38 @@ +/** + * 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 * from "./card/index"; +export { fluentCheckbox } from './checkbox/index'; +export { fluentCombobox } from './combobox/index'; +export { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index'; +// export * 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'; 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 ae7af50bb4f695..6485a8431ad224 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 @@ -3,7 +3,8 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { neutralFocusBehavior, neutralForegroundActiveBehavior, neutralForegroundRestBehavior } from '../styles'; -export const DataGridCellStyles = css` +export const dataGridCellStyles = (context, definition) => + css` :host { padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px); color: ${neutralForegroundRestBehavior.var}; @@ -28,11 +29,11 @@ export const DataGridCellStyles = css` } `.withBehaviors( - neutralFocusBehavior, - neutralForegroundActiveBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFocusBehavior, + neutralForegroundActiveBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -46,5 +47,5 @@ export const DataGridCellStyles = css` color: ${SystemColors.FieldText}; } `, - ), -); + ), + ); 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 10f39c087526b4..0c48475697a039 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 @@ -2,30 +2,31 @@ import { css } from '@microsoft/fast-element'; import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { neutralDividerRestBehavior, neutralFillRestBehavior } from '../styles'; -export const DataGridRowStyles = css` - :host { - display: grid; - padding: 1px 0; - box-sizing: border-box; - width: 100%; - border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); - } +export const dataGridRowStyles = (context, defintion) => + css` + :host { + display: grid; + padding: 1px 0; + box-sizing: border-box; + width: 100%; + border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } - :host(.header) { - } + :host(.header) { + } - :host(.sticky-header) { - background: ${neutralFillRestBehavior.var}; - position: sticky; - top: 0; - } -`.withBehaviors( - neutralDividerRestBehavior, - neutralFillRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host { - } - `, - ), -); + :host(.sticky-header) { + background: ${neutralFillRestBehavior.var}; + position: sticky; + top: 0; + } + `.withBehaviors( + neutralDividerRestBehavior, + neutralFillRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + } + `, + ), + ); diff --git a/packages/web-components/src/data-grid/data-grid.stories.ts b/packages/web-components/src/data-grid/data-grid.stories.ts index 9cce8514498602..529c0d58d59891 100644 --- a/packages/web-components/src/data-grid/data-grid.stories.ts +++ b/packages/web-components/src/data-grid/data-grid.stories.ts @@ -5,36 +5,36 @@ import addons from '@storybook/addons'; import { STORY_RENDERED } from '@storybook/core-events'; import DataGridTemplate from './fixtures/base.html'; import './index'; -/* eslint-disable @typescript-eslint/ban-types */ + let defaultGridElement: DataGrid | null = null; const defaultRowData: object = newDataRow('default'); const columnWidths: string[] = ['1fr', '1fr', '1fr', '1fr']; const defaultRowItemTemplate = html` - + `; const customRowItemTemplate = html` - - + + `; const customCellItemTemplate = html` - + `; const customHeaderCellItemTemplate = html` @@ -43,7 +43,7 @@ const customHeaderCellItemTemplate = html` cell-type="columnheader" grid-column="${(x, c) => c.index + 1}" :columnDefinition="${x => x}" - > + > `; addons.getChannel().addListener(STORY_RENDERED, (name: string) => { @@ -92,100 +92,124 @@ addons.getChannel().addListener(STORY_RENDERED, (name: string) => { }; } - const resetButton = document.getElementById('btnreset') as Button | null; + const resetButton = document.getElementById('btnreset') as Button; if (resetButton) { resetButton.onclick = reset; } - const defaultColsButton = document.getElementById('btndefaultcols') as Button | null; + const defaultColsButton = document.getElementById('btndefaultcols') as Button; if (defaultColsButton) { defaultColsButton.onclick = setDefaultCols; } - const templateColsButton = document.getElementById('btntemplatecols') as Button | null; + const templateColsButton = document.getElementById('btntemplatecols') as Button; if (templateColsButton) { templateColsButton.onclick = setTemplateCols; } - const addRowButton = document.getElementById('btnaddrow') as Button | null; + const addRowButton = document.getElementById('btnaddrow') as Button; if (addRowButton) { addRowButton.onclick = addRow; } - const removeRowButton = document.getElementById('btnremoverow') as Button | null; + const removeRowButton = document.getElementById('btnremoverow') as Button; if (removeRowButton) { removeRowButton.onclick = removeRow; } - const noHeaderButton = document.getElementById('btnnoheader') as Button | null; + const noHeaderButton = document.getElementById('btnnoheader') as Button; if (noHeaderButton) { noHeaderButton.onclick = setNoHeader; } - const defaultHeaderButton = document.getElementById('btndefaultheader') as Button | null; + const defaultHeaderButton = document.getElementById('btndefaultheader') as Button; if (defaultHeaderButton) { defaultHeaderButton.onclick = setDefaultHeader; } - const stickyHeaderButton = document.getElementById('btnstickyheader') as Button | null; + const stickyHeaderButton = document.getElementById('btnstickyheader') as Button; if (stickyHeaderButton) { stickyHeaderButton.onclick = setStickyHeader; } - const defaultRowTemplateButton = document.getElementById('btndefaultrowtemplate') as Button | null; + const defaultRowTemplateButton = document.getElementById('btndefaultrowtemplate') as Button; if (defaultRowTemplateButton) { defaultRowTemplateButton.onclick = setDefaultRowItemTemplate; } - const customRowTemplateButton = document.getElementById('btncustomrowtemplate') as Button | null; + const customRowTemplateButton = document.getElementById('btncustomrowtemplate') as Button; if (customRowTemplateButton) { customRowTemplateButton.onclick = setCustomRowItemTemplate; } - const defaultCellTemplateButton = document.getElementById('btndefaultcelltemplate') as Button | null; + const defaultCellTemplateButton = document.getElementById('btndefaultcelltemplate') as Button; if (defaultCellTemplateButton) { defaultCellTemplateButton.onclick = setDefaultCellItemTemplate; } - const customCellTemplateButton = document.getElementById('btncustomcelltemplate') as Button | null; + const customCellTemplateButton = document.getElementById('btncustomcelltemplate') as Button; if (customCellTemplateButton) { customCellTemplateButton.onclick = setCustomCellItemTemplate; } - const defaultHeaderCellTemplateButton = document.getElementById('btndefaultheadercelltemplate') as Button | null; + const defaultHeaderCellTemplateButton = document.getElementById('btndefaultheadercelltemplate') as Button; if (defaultHeaderCellTemplateButton) { defaultHeaderCellTemplateButton.onclick = setDefaultHeaderCellItemTemplate; } - const customHeaderCellTemplateButton = document.getElementById('btncustomheadercelltemplate') as Button | null; + const customHeaderCellTemplateButton = document.getElementById('btncustomheadercelltemplate') as Button; if (customHeaderCellTemplateButton) { customHeaderCellTemplateButton.onclick = setCustomHeaderCellItemTemplate; } + + // note: we use mouse enter because clicking to move focus seems to confuse focus-visible + const focusLeftButton = document.getElementById('btnfocusleft') as Button; + if (focusLeftButton) { + focusLeftButton.onmouseenter = moveFocus; + } + + const focusRightButton = document.getElementById('btnfocusright') as Button; + if (focusRightButton) { + focusRightButton.onmouseenter = moveFocus; + } + + const focusUpButton = document.getElementById('btnfocusup') as Button; + if (focusUpButton) { + focusUpButton.onmouseenter = moveFocus; + } + + const focusDownButton = document.getElementById('btnfocusdown') as Button; + if (focusDownButton) { + focusDownButton.onmouseenter = moveFocus; + } } }); const buttonCellTemplate = html` - + `; const buttonHeaderCellTemplate = html` - + `; function reset(): void { @@ -280,6 +304,29 @@ function setCustomHeaderCellItemTemplate(): void { defaultGridElement.headerCellItemTemplate = customHeaderCellItemTemplate; } +function moveFocus(e: MouseEvent): void { + if (defaultGridElement === null) { + return; + } + switch ((e.target as HTMLElement).id) { + case 'btnfocusleft': + defaultGridElement.focusColumnIndex = defaultGridElement.focusColumnIndex - 1; + break; + + case 'btnfocusright': + defaultGridElement.focusColumnIndex = defaultGridElement.focusColumnIndex + 1; + break; + + case 'btnfocusup': + defaultGridElement.focusRowIndex = defaultGridElement.focusRowIndex - 1; + break; + + case 'btnfocusdown': + defaultGridElement.focusRowIndex = defaultGridElement.focusRowIndex + 1; + break; + } +} + function headerTemplateButtonClick(cell: DataGridCell): void { if (cell.columnDefinition === null || defaultGridElement === null || defaultGridElement.columnDefinitions === null) { return; @@ -378,10 +425,9 @@ const templateColumns: ColumnDefinition[] = [ headerCellFocusTargetCallback: getFocusTarget, }, ]; -/* eslint-enable @typescript-eslint/ban-types */ function getFocusTarget(cell: DataGridCell): HTMLElement { - return cell.querySelector('fluent-button') as HTMLElement; + return cell.querySelector('fast-button') as HTMLElement; } export default { 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 d912385b3c2ef0..13b50f12a9b8f8 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,6 @@ import { css } from '@microsoft/fast-element'; -export const DataGridStyles = css` +export const dataGridStyles = (context, definition) => 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 c19433424e3b7f..558a9ed938ee4a 100644 --- a/packages/web-components/src/data-grid/index.ts +++ b/packages/web-components/src/data-grid/index.ts @@ -1,39 +1,33 @@ -import { customElement, ViewTemplate } from '@microsoft/fast-element'; import { - createDataGridCellTemplate, - createDataGridRowTemplate, - createDataGridTemplate, DataGrid, DataGridCell, DataGridRow, + dataGridCellTemplate, + dataGridRowTemplate, + dataGridTemplate, } from '@microsoft/fast-foundation'; -import { DataGridStyles as gridStyles } from './data-grid.styles'; -import { DataGridRowStyles as rowStyles } from './data-grid-row.styles'; -import { DataGridCellStyles as cellStyles } from './data-grid-cell.styles'; - -const cellTemplate: ViewTemplate = createDataGridCellTemplate('fluent'); -const gridTemplate: ViewTemplate = createDataGridTemplate('fluent'); -const rowTemplate: ViewTemplate = createDataGridRowTemplate('fluent'); +import { dataGridStyles as gridStyles } from './data-grid.styles'; +import { dataGridRowStyles as rowStyles } from './data-grid-row.styles'; +import { dataGridCellStyles as cellStyles } from './data-grid-cell.styles'; /** - * The Fluent Data Grid Element. + * The Fluent Data Grid Cell Element. * * @public * @remarks - * HTML Element: \ + * HTML Element: \ */ -@customElement({ - name: 'fluent-data-grid', - template: gridTemplate, - styles: gridStyles, -}) -export class FluentDataGrid extends DataGrid {} +export const fluentDataGridCell = DataGridCell.compose({ + baseName: 'data-grid-cell', + template: dataGridCellTemplate, + styles: cellStyles, +}); /** - * Styles for DataGrid + * Styles for DataGrid cell * @public */ -export const DataGridStyles = gridStyles; +export const dataGridCellStyles = cellStyles; /** * The Fluent Data Grid Row Element. @@ -42,35 +36,33 @@ export const DataGridStyles = gridStyles; * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-data-grid-row', - template: rowTemplate, +export const fluentDataGridRow = DataGridRow.compose({ + baseName: 'data-grid-row', + template: dataGridRowTemplate, styles: rowStyles, -}) -export class FluentDataGridRow extends DataGridRow {} +}); /** * Styles for DataGrid row * @public */ -export const DataGridRowStyles = rowStyles; +export const dataGridRowStyles = rowStyles; /** - * The Fluent Data Grid Cell Element. + * The Fluent Data Grid Element. * * @public * @remarks - * HTML Element: \ + * HTML Element: \ */ -@customElement({ - name: 'fluent-data-grid-cell', - template: cellTemplate, - styles: cellStyles, -}) -export class FluentDataGridCell extends DataGridCell {} +export const fluentDataGrid = DataGrid.compose({ + baseName: 'data-grid', + template: dataGridTemplate, + styles: gridStyles, +}); /** - * Styles for DataGrid cell + * Styles for DataGrid * @public */ -export const DataGridCellStyles = cellStyles; +export const dataGridStyles = gridStyles; diff --git a/packages/web-components/src/default-palette.ts b/packages/web-components/src/default-palette.ts index ba340464c54f63..54abd438df7f04 100644 --- a/packages/web-components/src/default-palette.ts +++ b/packages/web-components/src/default-palette.ts @@ -3,194 +3,194 @@ * This file generated by web-components/build/generate-default-palettes.js */ export const neutralPalette: string[] = [ - "#FFFFFF", - "#FCFCFC", - "#FAFAFA", - "#F7F7F7", - "#F5F5F5", - "#F2F2F2", - "#EFEFEF", - "#EDEDED", - "#EAEAEA", - "#E8E8E8", - "#E5E5E5", - "#E2E2E2", - "#E0E0E0", - "#DDDDDD", - "#DBDBDB", - "#D8D8D8", - "#D6D6D6", - "#D3D3D3", - "#D0D0D0", - "#CECECE", - "#CBCBCB", - "#C9C9C9", - "#C6C6C6", - "#C3C3C3", - "#C1C1C1", - "#BEBEBE", - "#BCBCBC", - "#B9B9B9", - "#B6B6B6", - "#B4B4B4", - "#B1B1B1", - "#AFAFAF", - "#ACACAC", - "#A9A9A9", - "#A7A7A7", - "#A4A4A4", - "#A2A2A2", - "#9F9F9F", - "#9D9D9D", - "#9A9A9A", - "#979797", - "#959595", - "#929292", - "#909090", - "#8D8D8D", - "#8A8A8A", - "#888888", - "#858585", - "#838383", - "#808080", - "#7D7D7D", - "#7B7B7B", - "#787878", - "#767676", - "#737373", - "#717171", - "#6E6E6E", - "#6B6B6B", - "#696969", - "#666666", - "#646464", - "#616161", - "#5F5F5F", - "#5C5C5C", - "#5A5A5A", - "#575757", - "#545454", - "#525252", - "#4F4F4F", - "#4D4D4D", - "#4A4A4A", - "#484848", - "#454545", - "#424242", - "#404040", - "#3D3D3D", - "#3B3B3B", - "#383838", - "#363636", - "#333333", - "#313131", - "#2E2E2E", - "#2B2B2B", - "#292929", - "#262626", - "#242424", - "#212121", - "#1E1E1E", - "#1B1B1B", - "#181818", - "#151515", - "#121212", - "#101010", - "#000000" + '#FFFFFF', + '#FCFCFC', + '#FAFAFA', + '#F7F7F7', + '#F5F5F5', + '#F2F2F2', + '#EFEFEF', + '#EDEDED', + '#EAEAEA', + '#E8E8E8', + '#E5E5E5', + '#E2E2E2', + '#E0E0E0', + '#DDDDDD', + '#DBDBDB', + '#D8D8D8', + '#D6D6D6', + '#D3D3D3', + '#D0D0D0', + '#CECECE', + '#CBCBCB', + '#C9C9C9', + '#C6C6C6', + '#C3C3C3', + '#C1C1C1', + '#BEBEBE', + '#BCBCBC', + '#B9B9B9', + '#B6B6B6', + '#B4B4B4', + '#B1B1B1', + '#AFAFAF', + '#ACACAC', + '#A9A9A9', + '#A7A7A7', + '#A4A4A4', + '#A2A2A2', + '#9F9F9F', + '#9D9D9D', + '#9A9A9A', + '#979797', + '#959595', + '#929292', + '#909090', + '#8D8D8D', + '#8A8A8A', + '#888888', + '#858585', + '#838383', + '#808080', + '#7D7D7D', + '#7B7B7B', + '#787878', + '#767676', + '#737373', + '#717171', + '#6E6E6E', + '#6B6B6B', + '#696969', + '#666666', + '#646464', + '#616161', + '#5F5F5F', + '#5C5C5C', + '#5A5A5A', + '#575757', + '#545454', + '#525252', + '#4F4F4F', + '#4D4D4D', + '#4A4A4A', + '#484848', + '#454545', + '#424242', + '#404040', + '#3D3D3D', + '#3B3B3B', + '#383838', + '#363636', + '#333333', + '#313131', + '#2E2E2E', + '#2B2B2B', + '#292929', + '#262626', + '#242424', + '#212121', + '#1E1E1E', + '#1B1B1B', + '#181818', + '#151515', + '#121212', + '#101010', + '#000000', ]; export const accentPalette: string[] = [ - "#FFFFFF", - "#FBFDFE", - "#F6FAFE", - "#F2F8FD", - "#EEF6FC", - "#E9F4FB", - "#E5F1FB", - "#E1EFFA", - "#DCEDF9", - "#D8EAF8", - "#D4E8F8", - "#CFE6F7", - "#CBE4F6", - "#C7E1F6", - "#C2DFF5", - "#BEDDF4", - "#BADAF3", - "#B6D8F3", - "#B1D6F2", - "#ADD4F1", - "#A9D1F0", - "#A4CFF0", - "#A0CDEF", - "#9CCAEE", - "#97C8EE", - "#93C6ED", - "#8FC4EC", - "#8AC1EB", - "#86BFEB", - "#82BDEA", - "#7DBAE9", - "#79B8E8", - "#75B6E8", - "#70B3E7", - "#6CB1E6", - "#68AFE5", - "#63ADE5", - "#5FAAE4", - "#5BA8E3", - "#56A6E3", - "#52A3E2", - "#4EA1E1", - "#499FE0", - "#459DE0", - "#419ADF", - "#3D98DE", - "#3896DD", - "#3493DD", - "#3091DC", - "#2B8FDB", - "#278DDB", - "#238ADA", - "#1E88D9", - "#1A86D8", - "#1683D8", - "#1181D7", - "#0D7FD6", - "#097DD5", - "#047AD5", - "#0078D4", - "#0075CF", - "#0072C9", - "#006FC4", - "#006CBE", - "#0069B9", - "#0066B4", - "#0063AE", - "#0060A9", - "#005CA3", - "#00599E", - "#005699", - "#005393", - "#00508E", - "#004D88", - "#004A83", - "#00477D", - "#004478", - "#004173", - "#003E6D", - "#003B68", - "#003862", - "#00355D", - "#003258", - "#002F52", - "#002B4D", - "#002847", - "#002542", - "#00223C", - "#001F36", - "#001B30", - "#00182B", - "#001525", - "#00121F", - "#000000" + '#FFFFFF', + '#FBFDFE', + '#F6FAFE', + '#F2F8FD', + '#EEF6FC', + '#E9F4FB', + '#E5F1FB', + '#E1EFFA', + '#DCEDF9', + '#D8EAF8', + '#D4E8F8', + '#CFE6F7', + '#CBE4F6', + '#C7E1F6', + '#C2DFF5', + '#BEDDF4', + '#BADAF3', + '#B6D8F3', + '#B1D6F2', + '#ADD4F1', + '#A9D1F0', + '#A4CFF0', + '#A0CDEF', + '#9CCAEE', + '#97C8EE', + '#93C6ED', + '#8FC4EC', + '#8AC1EB', + '#86BFEB', + '#82BDEA', + '#7DBAE9', + '#79B8E8', + '#75B6E8', + '#70B3E7', + '#6CB1E6', + '#68AFE5', + '#63ADE5', + '#5FAAE4', + '#5BA8E3', + '#56A6E3', + '#52A3E2', + '#4EA1E1', + '#499FE0', + '#459DE0', + '#419ADF', + '#3D98DE', + '#3896DD', + '#3493DD', + '#3091DC', + '#2B8FDB', + '#278DDB', + '#238ADA', + '#1E88D9', + '#1A86D8', + '#1683D8', + '#1181D7', + '#0D7FD6', + '#097DD5', + '#047AD5', + '#0078D4', + '#0075CF', + '#0072C9', + '#006FC4', + '#006CBE', + '#0069B9', + '#0066B4', + '#0063AE', + '#0060A9', + '#005CA3', + '#00599E', + '#005699', + '#005393', + '#00508E', + '#004D88', + '#004A83', + '#00477D', + '#004478', + '#004173', + '#003E6D', + '#003B68', + '#003862', + '#00355D', + '#003258', + '#002F52', + '#002B4D', + '#002847', + '#002542', + '#00223C', + '#001F36', + '#001B30', + '#00182B', + '#001525', + '#00121F', + '#000000', ]; diff --git a/packages/web-components/src/dialog/dialog.stories.ts b/packages/web-components/src/dialog/dialog.stories.ts index dfb6b89176c823..1c64d7e7f6c77a 100644 --- a/packages/web-components/src/dialog/dialog.stories.ts +++ b/packages/web-components/src/dialog/dialog.stories.ts @@ -1,11 +1,6 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import DialogTemplate from './fixtures/dialog.html'; import DialogFastButtonsTemplate from './fixtures/dialog-button-test.html'; -import { FluentDialog } from './'; - -// Prevent tree-shaking -FluentDialog; -FluentDesignSystemProvider; +import './index'; export default { title: 'Dialog', diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts index bd1749385abb52..88b38b9245078e 100644 --- a/packages/web-components/src/dialog/dialog.styles.ts +++ b/packages/web-components/src/dialog/dialog.styles.ts @@ -1,7 +1,7 @@ import { css } from '@microsoft/fast-element'; import { elevation } from '../styles'; -export const DialogStyles = css` +export const dialogStyles = (context, definition) => css` :host([hidden]) { display: none; } diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts index 8e40d9f35d98dc..1f7575db7c63ad 100644 --- a/packages/web-components/src/dialog/index.ts +++ b/packages/web-components/src/dialog/index.ts @@ -1,25 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Dialog, DialogTemplate as template } from '@microsoft/fast-foundation'; -import { DialogStyles as styles } from './dialog.styles'; +import { Dialog, dialogTemplate as template } from '@microsoft/fast-foundation'; +import { dialogStyles as styles } from './dialog.styles'; /** * The Fluent Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog}, - * {@link @microsoft/fast-foundation#DialogTemplate} + * {@link @microsoft/fast-foundation#dialogTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-dialog', +export const fluentDialog = Dialog.compose({ + baseName: 'dialog', template, styles, -}) -export class FluentDialog extends Dialog {} +}); /** * Styles for Dialog * @public */ -export const DialogStyles = styles; +export const dialogStyles = styles; diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts index effff417607cdf..2ca27cd964a40d 100644 --- a/packages/web-components/src/divider/divider.stories.ts +++ b/packages/web-components/src/divider/divider.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import DividerTemplate from './fixtures/divider.html'; -import { FluentDivider } from './'; - -// Prevent tree-shaking -FluentDivider; -FluentDesignSystemProvider; +import './index'; export default { title: 'Divider', }; -export const Divider = (): string => DividerTemplate; +export const Divider = () => DividerTemplate; diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts index 6ac9923c0e6d93..c9f2a87ca47085 100644 --- a/packages/web-components/src/divider/divider.styles.ts +++ b/packages/web-components/src/divider/divider.styles.ts @@ -2,12 +2,13 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { neutralDividerRestBehavior } from '../styles'; -export const DividerStyles = css` - ${display('block')} :host { - box-sizing: content-box; - height: 0; - margin: calc(var(--design-unit) * 1px) 0; - border: none; - border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var}; - } -`.withBehaviors(neutralDividerRestBehavior); +export const dividerStyles = (context, definition) => + css` + ${display('block')} :host { + box-sizing: content-box; + height: 0; + margin: calc(var(--design-unit) * 1px) 0; + border: none; + border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var}; + } + `.withBehaviors(neutralDividerRestBehavior); diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts index 0c0b0348d946c0..b0550a9f0fcf65 100644 --- a/packages/web-components/src/divider/index.ts +++ b/packages/web-components/src/divider/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Divider, DividerTemplate as template } from '@microsoft/fast-foundation'; -import { DividerStyles as styles } from './divider.styles'; +import { Divider, dividerTemplate as template } from '@microsoft/fast-foundation'; +import { dividerStyles as styles } from './divider.styles'; /** * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider}, - * {@link @microsoft/fast-foundation#DividerTemplate} + * {@link @microsoft/fast-foundation#dividerTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-divider', +export const fluentDivider = Divider.compose({ + baseName: 'divider', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentDivider extends Divider {} +}); /** * Styles for Divider * @public */ -export const DividerStyles = styles; +export const dividerStyles = styles; diff --git a/packages/web-components/src/flipper/flipper.stories.ts b/packages/web-components/src/flipper/flipper.stories.ts index 3bcde2cf7d4a88..391a75f1823337 100644 --- a/packages/web-components/src/flipper/flipper.stories.ts +++ b/packages/web-components/src/flipper/flipper.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import FlipperTemplate from './fixtures/flipper.html'; -import { FluentFlipper } from './'; - -// Prevent tree-shaking -FluentFlipper; -FluentDesignSystemProvider; +import './index'; export default { title: 'Flipper', }; -export const Flipper = (): string => FlipperTemplate; +export const Flipper = () => FlipperTemplate; diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts index c5a4c181ca22a2..bf9db267c0820a 100644 --- a/packages/web-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/src/flipper/flipper.styles.ts @@ -13,7 +13,8 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const FlipperStyles = css` +export const flipperStyles = (context, definition) => + css` ${display('inline-flex')} :host { width: calc(${heightNumber} * 1px); height: calc(${heightNumber} * 1px); @@ -85,16 +86,16 @@ export const FlipperStyles = css` border: 0; } `.withBehaviors( - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` :host { background: ${SystemColors.Canvas}; } @@ -140,5 +141,5 @@ export const FlipperStyles = css` box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts index cd36e7da6462a7..34cbaff019b564 100644 --- a/packages/web-components/src/flipper/index.ts +++ b/packages/web-components/src/flipper/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Flipper, FlipperTemplate as template } from '@microsoft/fast-foundation'; -import { FlipperStyles as styles } from './flipper.styles'; +import { Flipper, flipperTemplate as template } from '@microsoft/fast-foundation'; +import { flipperStyles as styles } from './flipper.styles'; /** * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper}, - * {@link @microsoft/fast-foundation#FlipperTemplate} + * {@link @microsoft/fast-foundation#flipperTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-flipper', +export const fluentFlipper = Flipper.compose({ + baseName: 'flipper', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentFlipper extends Flipper {} +}); /** * Styles for Flipper * @public */ -export const FlipperStyles = styles; +export const flipperStyles = styles; diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts index 1643d240e3c2bf..f0c5dd17ff09e2 100644 --- a/packages/web-components/src/fluent-design-system.ts +++ b/packages/web-components/src/fluent-design-system.ts @@ -6,7 +6,7 @@ export type DesignSystemResolver = (d: Y) => T; export type DensityOffset = -3 | -2 | -1 | 0 | 1 | 2 | 3; /** - * Defines the properties in the FAST Design System + * Defines the properties in the Fluent Design System * @public */ export interface DesignSystem { diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts index 8fca042f1095c8..a125d6707b572d 100644 --- a/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts +++ b/packages/web-components/src/horizontal-scroll/horizontal-scroll.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import HorizontalScrollTemplate from './fixtures/horizontal-scroll.html'; -import { FluentHorizontalScroll } from './'; - -// Prevent tree-shaking -FluentHorizontalScroll; -FluentDesignSystemProvider; +import './index'; export default { title: 'Horizontal Scroll', }; -export const HorizontalScroll = (): string => HorizontalScrollTemplate; +export const HorizontalScroll = () => HorizontalScrollTemplate; 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 d65f8789908758..8903baf68eb4c4 100644 --- a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts +++ b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts @@ -98,7 +98,7 @@ export const ActionsStyles = css` * Styles handling the scroll container and content * @public */ -export const HorizontalScrollStyles = css` +export const horizontalScrollStyles = (context, definition) => 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 355237ff4f88d4..df86bba7ec89f3 100644 --- a/packages/web-components/src/horizontal-scroll/index.ts +++ b/packages/web-components/src/horizontal-scroll/index.ts @@ -1,25 +1,13 @@ -import { customElement } from '@microsoft/fast-element'; -import { HorizontalScroll, HorizontalScrollTemplate as template } from '@microsoft/fast-foundation'; -import { ActionsStyles, HorizontalScrollStyles as styles } from './horizontal-scroll.styles'; +import { + HorizontalScroll as FoundationHorizontalScroll, + horizontalScrollTemplate as template, +} from '@microsoft/fast-foundation'; +import { ActionsStyles, horizontalScrollStyles as styles } from './horizontal-scroll.styles'; /** - * The Fluent Horizontal Scroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScrol}, - * {@link @microsoft/fast-foundation#HorizontalScrollTemplate} - * - * - * @public - * @remarks - * HTML Element: \ + * @internal */ -@customElement({ - name: 'fluent-horizontal-scroll', - template, - styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentHorizontalScroll extends HorizontalScroll { +export class HorizontalScroll extends FoundationHorizontalScroll { /** * @public */ @@ -33,7 +21,16 @@ export class FluentHorizontalScroll extends HorizontalScroll { } /** - * Styles for Horizontal Scroll + * The Fluent HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll}, + * {@link @microsoft/fast-foundation#horizontalScrollTemplate} + * + * * @public + * @remarks + * HTML Element: \ */ -export const HorizontalScrollStyles = styles; +export const fluentHorizontalScroll = HorizontalScroll.compose({ + baseName: 'horizontal-scroll', + template, + styles, +}); diff --git a/packages/web-components/src/index-rollup.ts b/packages/web-components/src/index-rollup.ts index 55851dda342a63..90e6d0a09f594d 100644 --- a/packages/web-components/src/index-rollup.ts +++ b/packages/web-components/src/index-rollup.ts @@ -1,7 +1,13 @@ +// 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'; + export * from './index'; -export * from '@microsoft/fast-element'; -export * from '@microsoft/fast-foundation'; -// Re-export Design system to avoid conflicts with the new class from FAST Foundation -// TODO: Update name to FluentDesignSystem once DI is implemented and published from FAST -export { DesignSystem, DesignSystemDefaults } from './fluent-design-system'; +/** + * TODO rename this to FluentDesignSystem when {@link @FluentDesignSystem} interface is removed. + */ +export const fluentDesignSystem = DesignSystem.getOrCreate().register( + ...Object.values(fluentComponents).map(definition => definition()), +); diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 389f4cac3ce751..666d06a6abeb3e 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -1,3 +1,8 @@ +/** + * Export all custom element definitions. + */ +export * from './custom-elements'; + export * from './accordion/'; export * from './anchor/'; export * from './anchored-region'; diff --git a/packages/web-components/src/listbox-option/index.ts b/packages/web-components/src/listbox-option/index.ts index 9af12489f6f541..de73b557335ab7 100644 --- a/packages/web-components/src/listbox-option/index.ts +++ b/packages/web-components/src/listbox-option/index.ts @@ -1,22 +1,21 @@ -import { customElement } from '@microsoft/fast-element'; -import { ListboxOption, ListboxOptionTemplate as template } from '@microsoft/fast-foundation'; -import { OptionStyles as styles } from './listbox-option.styles'; +import { ListboxOption, listboxOptionTemplate as template } from '@microsoft/fast-foundation'; +import { optionStyles as styles } from './listbox-option.styles'; /** - * The Fluent ListboxOption Element. Implements {@link @microsoft/fast-foundation#ListboxOption}, - * {@link @microsoft/fast-foundation#ListboxOptionTemplate} + * The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption} + * {@link @microsoft/fast-foundation#listboxOptionTemplate} * * * @public * @remarks * HTML Element: \ + * */ -@customElement({ - name: 'fluent-option', +export const fluentOption = ListboxOption.compose({ + baseName: 'option', template, styles, -}) -export class FluentOption extends ListboxOption {} +}); /** * Styles for Option diff --git a/packages/web-components/src/listbox-option/listbox-option.stories.ts b/packages/web-components/src/listbox-option/listbox-option.stories.ts index 0402ced0d478ef..b1c252dc387375 100644 --- a/packages/web-components/src/listbox-option/listbox-option.stories.ts +++ b/packages/web-components/src/listbox-option/listbox-option.stories.ts @@ -1,12 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import ListboxOptionTemplate from './fixtures/base.html'; -import { FluentOption } from './'; - -FluentOption; -FluentDesignSystemProvider; +import Examples from './fixtures/base.html'; +import './index'; export default { - title: 'ListboxOption', + title: 'Listbox Option', }; -export const ListboxOption = (): string => ListboxOptionTemplate; +export const ListboxOption = () => Examples; 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 4924fb8824617b..1a672dff12b775 100644 --- a/packages/web-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts @@ -18,7 +18,8 @@ import { } from '../styles'; import { heightNumber } from '../styles/size'; -export const OptionStyles = css` +export const optionStyles = (context, definition) => + css` ${display('inline-flex')} :host { font-family: var(--body-font); border-radius: calc(var(--corner-radius) * 1px); @@ -103,40 +104,40 @@ export const OptionStyles = css` } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillSelectedBehavior, - accentForegroundCutRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host { - border-color: transparent; - color: ${SystemColors.ButtonText}; - forced-color-adjust: none; - } - - :host(:not([aria-selected='true']):hover), - :host([aria-selected='true']) { - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - :host([disabled]), - :host([disabled]:not([aria-selected='true']):hover) { - background: ${SystemColors.Canvas}; - color: ${SystemColors.GrayText}; - fill: currentcolor; - opacity: 1; - } - `, - ), - neutralFillHoverBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFillStealthSelectedBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralLayerL1Behavior, -); + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillSelectedBehavior, + accentForegroundCutRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + border-color: transparent; + color: ${SystemColors.ButtonText}; + forced-color-adjust: none; + } + + :host(:not([aria-selected='true']):hover), + :host([aria-selected='true']) { + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + + :host([disabled]), + :host([disabled]:not([aria-selected='true']):hover) { + background: ${SystemColors.Canvas}; + color: ${SystemColors.GrayText}; + fill: currentcolor; + opacity: 1; + } + `, + ), + neutralFillHoverBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFillStealthSelectedBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralLayerL1Behavior, + ); diff --git a/packages/web-components/src/listbox/index.ts b/packages/web-components/src/listbox/index.ts index 7b75b3de96baa9..02200efb2f8244 100644 --- a/packages/web-components/src/listbox/index.ts +++ b/packages/web-components/src/listbox/index.ts @@ -1,25 +1,24 @@ -import { customElement } from '@microsoft/fast-element'; -import { Listbox, ListboxTemplate as template } from '@microsoft/fast-foundation'; -import { ListboxStyles as styles } from './listbox.styles'; +import { Listbox, listboxTemplate as template } from '@microsoft/fast-foundation'; +import { listboxStyles as styles } from './listbox.styles'; /** - * The Fluent Listbox Element. Implements {@link @microsoft/fast-foundation#Listbox}, - * {@link @microsoft/fast-foundation#ListboxTemplate} + * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox} + * {@link @microsoft/fast-foundation#listboxTemplate} * * * @public * @remarks * HTML Element: \ + * */ -@customElement({ - name: 'fluent-listbox', +export const fluentListbox = Listbox.compose({ + baseName: 'listbox', template, styles, -}) -export class FluentListbox extends Listbox {} +}); /** * Styles for Listbox * @public */ -export const ListboxStyles = styles; +export const listboxStyles = styles; diff --git a/packages/web-components/src/listbox/listbox.stories.ts b/packages/web-components/src/listbox/listbox.stories.ts index 52a73d9afe023e..5b7c3cf8453032 100644 --- a/packages/web-components/src/listbox/listbox.stories.ts +++ b/packages/web-components/src/listbox/listbox.stories.ts @@ -1,12 +1,9 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import ListboxTemplate from './fixtures/base.html'; -import { FluentListbox } from './'; - -FluentListbox; -FluentDesignSystemProvider; +import Base from './fixtures/base.html'; +import '../listbox-option'; +import './index'; export default { title: 'Listbox', }; -export const Listbox = (): string => ListboxTemplate; +export const Listbox = () => Base; diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts index be825f20507bdd..b07ce0db0ff663 100644 --- a/packages/web-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -8,23 +8,24 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const ListboxStyles = css` - ${display('inline-flex')} :host { - background: ${neutralLayerFloatingBehavior.var}; - border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; - border-radius: calc(var(--corner-radius) * 1px); - box-sizing: border-box; - flex-direction: column; - padding: calc(var(--design-unit) * 1px) 0; - } +export const listboxStyles = (context, definition) => + css` + ${display('inline-flex')} :host { + background: ${neutralLayerFloatingBehavior.var}; + border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + box-sizing: border-box; + flex-direction: column; + padding: calc(var(--design-unit) * 1px) 0; + } - :host(:focus-within:not([disabled])) { - border-color: ${neutralFocusBehavior.var}; - box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; - } -`.withBehaviors( - forcedColorsStylesheetBehavior( - css` + :host(:focus-within:not([disabled])) { + border-color: ${neutralFocusBehavior.var}; + box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; + } + `.withBehaviors( + forcedColorsStylesheetBehavior( + css` :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { background: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; @@ -49,8 +50,8 @@ export const ListboxStyles = css` box-shadow: none; } `, - ), - neutralLayerFloatingBehavior, - neutralOutlineRestBehavior, - neutralOutlineFocusBehavior, -); + ), + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior, + neutralOutlineFocusBehavior, + ); diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts index 16d3d001efe803..cdc45329345cd2 100644 --- a/packages/web-components/src/menu-item/index.ts +++ b/packages/web-components/src/menu-item/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { MenuItem, MenuItemTemplate as template } from '@microsoft/fast-foundation'; -import { MenuItemStyles as styles } from './menu-item.styles'; +import { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation'; +import { menuItemStyles as styles } from './menu-item.styles'; /** * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem}, - * {@link @microsoft/fast-foundation#MenuItemTemplate} + * {@link @microsoft/fast-foundation#menuItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-menu-item', +export const fluentMenuItem = MenuItem.compose({ + baseName: 'menu-item', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentMenuItem extends MenuItem {} +}); /** * Styles for MenuItem * @public */ -export const MenuItemStyles = styles; +export const menuItemStyles = styles; diff --git a/packages/web-components/src/menu-item/menu-item.stories.ts b/packages/web-components/src/menu-item/menu-item.stories.ts index 407186adda2f5f..c634685bbea8c9 100644 --- a/packages/web-components/src/menu-item/menu-item.stories.ts +++ b/packages/web-components/src/menu-item/menu-item.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import MenuItemTemplate from './fixtures/menu-item.html'; -import { FluentMenuItem } from '.'; - -// Prevent tree-shaking -FluentMenuItem; -FluentDesignSystemProvider; +import './index'; export default { - title: 'Menu item', + title: 'Menu Item', }; -export const MenuItem = (): string => MenuItemTemplate; +export const MenuItem = () => MenuItemTemplate; 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 128a6a2118c69f..a7a783854e0243 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -10,7 +10,8 @@ import { neutralForegroundRestBehavior, } from '../styles/index'; -export const MenuItemStyles = css` +export const menuItemStyles = (context, definition) => + css` ${display('grid')} :host { outline: none; box-sizing: border-box; @@ -174,13 +175,13 @@ export const MenuItemStyles = css` pointer-events: none; } `.withBehaviors( - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -255,5 +256,5 @@ export const MenuItemStyles = css` background: ${SystemColors.Highlight}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts index 3f0e48e8294bc6..3fd9767ee96fdb 100644 --- a/packages/web-components/src/menu/index.ts +++ b/packages/web-components/src/menu/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Menu, MenuTemplate as template } from '@microsoft/fast-foundation'; -import { MenuStyles as styles } from './menu.styles'; +import { Menu, menuTemplate as template } from '@microsoft/fast-foundation'; +import { menuStyles as styles } from './menu.styles'; /** * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu}, - * {@link @microsoft/fast-foundation#MenuTemplate} + * {@link @microsoft/fast-foundation#menuTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-menu', +export const fluentMenu = Menu.compose({ + baseName: 'menu', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentMenu extends Menu {} +}); /** * Styles for Menu * @public */ -export const MenuStyles = styles; +export const menuStyles = styles; diff --git a/packages/web-components/src/menu/menu.stories.ts b/packages/web-components/src/menu/menu.stories.ts index f8964e228cd5c1..baa342012a0d75 100644 --- a/packages/web-components/src/menu/menu.stories.ts +++ b/packages/web-components/src/menu/menu.stories.ts @@ -1,15 +1,9 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import { FluentMenuItem } from '../menu-item'; import MenuTemplate from './fixtures/menu.html'; -import { FluentMenu } from '.'; - -// Prevent tree-shaking -FluentMenu; -FluentMenuItem; -FluentDesignSystemProvider; +import '../menu-item'; +import './index'; export default { title: 'Menu', }; -export const Menu = (): string => MenuTemplate; +export const Menu = () => MenuTemplate; diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 3823522e1e62ca..bbebe486c6539d 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -2,30 +2,31 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { elevation, neutralDividerRestBehavior, neutralLayerFloatingBehavior } from '../styles/index'; -export const MenuStyles = css` - ${display('block')} :host { - --elevation: 11; - background: ${neutralLayerFloatingBehavior.var}; - border: calc(var(--outline-width) * 1px) solid transparent; - border-radius: var(--elevated-corner-radius); - ${elevation} - margin: 0; - border-radius: calc(var(--corner-radius) * 1px); - padding: calc(var(--design-unit) * 1px) 0; - max-width: 368px; - min-width: 64px; - } +export const menuStyles = (context, definition) => + css` + ${display('block')} :host { + --elevation: 11; + background: ${neutralLayerFloatingBehavior.var}; + border: calc(var(--outline-width) * 1px) solid transparent; + border-radius: var(--elevated-corner-radius); + ${elevation} + margin: 0; + border-radius: calc(var(--corner-radius) * 1px); + padding: calc(var(--design-unit) * 1px) 0; + max-width: 368px; + min-width: 64px; + } - :host([slot='submenu']) { - width: max-content; - margin: 0 calc(var(--design-unit) * 1px); - } + :host([slot='submenu']) { + width: max-content; + margin: 0 calc(var(--design-unit) * 1px); + } - ::slotted(hr) { - box-sizing: content-box; - height: 0; - margin: 0; - border: none; - border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); - } -`.withBehaviors(neutralLayerFloatingBehavior, neutralDividerRestBehavior); + ::slotted(hr) { + box-sizing: content-box; + height: 0; + margin: 0; + border: none; + border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } + `.withBehaviors(neutralLayerFloatingBehavior, neutralDividerRestBehavior); diff --git a/packages/web-components/src/number-field/index.ts b/packages/web-components/src/number-field/index.ts index 086a274cb15f07..b1c0e18170152b 100644 --- a/packages/web-components/src/number-field/index.ts +++ b/packages/web-components/src/number-field/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { NumberField, NumberFieldTemplate as template } from '@microsoft/fast-foundation'; -import { NumberFieldStyles as styles } from './number-field.styles'; +import { attr } from '@microsoft/fast-element'; +import { NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation'; +import { numberFieldStyles as styles } from './number-field.styles'; /** * Number field appearances @@ -9,26 +9,10 @@ import { NumberFieldStyles as styles } from './number-field.styles'; export type NumberFieldAppearance = 'filled' | 'outline'; /** - * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField}, - * {@link @microsoft/fast-foundation#NumberFieldTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The Fluent number field class + * @internal */ -@customElement({ - name: 'fluent-number-field', - shadowOptions: { - delegatesFocus: true, - mode: 'closed', - }, - styles, - template, -}) -export class FluentNumberField extends NumberField { +export class NumberField extends FoundationNumberField { /** * The appearance of the element. * @@ -55,4 +39,24 @@ export class FluentNumberField extends NumberField { * Styles for NumberField * @public */ -export const NumberFieldStyles = styles; +export const numberFieldStyles = styles; + +/** + * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField}, + * {@link @microsoft/fast-foundation#numberFieldTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fluentNumberField = NumberField.compose({ + baseName: 'number-field', + styles, + template, + shadowOptions: { + delegatesFocus: true, + }, +}); 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 3c5baafcbf4a39..4a95d22cb26fe3 100644 --- a/packages/web-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/src/number-field/number-field.styles.ts @@ -66,7 +66,8 @@ export const NumberFieldFilledStyles = css` ), ); -export const NumberFieldStyles = css` +export const numberFieldStyles = (context, definition) => + css` ${display('inline-block')} :host { font-family: var(--body-font); outline: none; @@ -207,58 +208,58 @@ export const NumberFieldStyles = css` border-color: ${neutralOutlineRestBehavior.var}; } `.withBehaviors( - appearanceBehavior('filled', NumberFieldFilledStyles), - neutralFillHoverBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .root { - forced-color-adjust: none; - background: ${SystemColors.Field}; - border-color: ${SystemColors.FieldText}; - } - :host(:hover:not([disabled])) .root { - background: ${SystemColors.Field}; - border-color: ${SystemColors.Highlight}; - } - :host(:focus-within:enabled) .root { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; - } - .control, - ::placeholder, - ::-webkit-input-placeholder { - color: ${SystemColors.FieldText}; - } - .step-up:before { - border-bottom-color: ${SystemColors.FieldText}; - } - .step-down:before { - border-top-color: ${SystemColors.FieldText}; - } - .start, - .end { - fill: ${SystemColors.FieldText}; - } - :host([disabled]) { - opacity: 1; - } - :host([disabled]) .root { - border-color: ${SystemColors.GrayText}; - background: ${SystemColors.Field}; - } - :host([disabled]) ::placeholder, - :host([disabled]) ::-webkit-input-placeholder, - :host([disabled]) .label { - color: ${SystemColors.GrayText}; - } - `, - ), -); + appearanceBehavior('filled', NumberFieldFilledStyles), + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .root { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(:hover:not([disabled])) .root { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight}; + } + :host(:focus-within:enabled) .root { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; + } + .control, + ::placeholder, + ::-webkit-input-placeholder { + color: ${SystemColors.FieldText}; + } + .step-up:before { + border-bottom-color: ${SystemColors.FieldText}; + } + .step-down:before { + border-top-color: ${SystemColors.FieldText}; + } + .start, + .end { + fill: ${SystemColors.FieldText}; + } + :host([disabled]) { + opacity: 1; + } + :host([disabled]) .root { + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host([disabled]) ::placeholder, + :host([disabled]) ::-webkit-input-placeholder, + :host([disabled]) .label { + color: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts index 7a4c5793712ba0..35becc9b712118 100644 --- a/packages/web-components/src/progress/progress-ring/index.ts +++ b/packages/web-components/src/progress/progress-ring/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { BaseProgress, ProgressRingTemplate as template } from '@microsoft/fast-foundation'; -import { ProgressRingStyles as styles } from './progress-ring.styles'; +import { BaseProgress as Progress, progressRingTemplate as template } from '@microsoft/fast-foundation'; +import { progressRingStyles as styles } from './progress-ring.styles'; /** * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress}, - * {@link @microsoft/fast-foundation#ProgressRingTemplate} + * {@link @microsoft/fast-foundation#progressRingTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-progress-ring', +export const fluentProgressRing = Progress.compose({ + baseName: 'progress-ring', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentProgressRing extends BaseProgress {} +}); /** * Styles for ProgressRing * @public */ -export const ProgressRingStyles = styles; +export const progressRingStyles = styles; diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts index f37be0094c1a6e..dd61f8e7e9770c 100644 --- a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts +++ b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../../design-system-provider'; import Examples from './fixtures/circular.html'; -import { FluentProgressRing } from './'; - -// Prevent tree-shaking -FluentProgressRing; -FluentDesignSystemProvider; +import './index'; export default { title: 'Progress Ring', }; -export const ProgressRing = (): string => Examples; +export const ProgressRing = () => Examples; 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 fd86162cec5143..941015803422a9 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 @@ -8,89 +8,90 @@ import { neutralForegroundHintBehavior, } from '../../styles'; -export const ProgressRingStyles = css` - ${display('flex')} :host { - align-items: center; - outline: none; - height: calc(${heightNumber} * 1px); - width: calc(${heightNumber} * 1px); - margin: calc(${heightNumber} * 1px) 0; - } - - .progress { - height: 100%; - width: 100%; - } - - .background { - stroke: ${neutralFillRestBehavior.var}; - fill: none; - stroke-width: 2px; - } - - .determinate { - stroke: ${accentForegroundRestBehavior.var}; - fill: none; - stroke-width: 2px; - stroke-linecap: round; - transform-origin: 50% 50%; - transform: rotate(-90deg); - transition: all 0.2s ease-in-out; - } +export const progressRingStyles = (context, definition) => + css` + ${display('flex')} :host { + align-items: center; + outline: none; + height: calc(${heightNumber} * 1px); + width: calc(${heightNumber} * 1px); + margin: calc(${heightNumber} * 1px) 0; + } - .indeterminate-indicator-1 { - stroke: ${accentForegroundRestBehavior.var}; - fill: none; - stroke-width: 2px; - stroke-linecap: round; - transform-origin: 50% 50%; - transform: rotate(-90deg); - transition: all 0.2s ease-in-out; - animation: spin-infinite 2s linear infinite; - } + .progress { + height: 100%; + width: 100%; + } - :host(.paused) .indeterminate-indicator-1 { - animation-play-state: paused; - stroke: ${neutralFillRestBehavior.var}; - } + .background { + stroke: ${neutralFillRestBehavior.var}; + fill: none; + stroke-width: 2px; + } - :host(.paused) .determinate { - stroke: ${neutralForegroundHintBehavior.var}; - } + .determinate { + stroke: ${accentForegroundRestBehavior.var}; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + } - @keyframes spin-infinite { - 0% { - stroke-dasharray: 0.01px 43.97px; - transform: rotate(0deg); + .indeterminate-indicator-1 { + stroke: ${accentForegroundRestBehavior.var}; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + animation: spin-infinite 2s linear infinite; } - 50% { - stroke-dasharray: 21.99px 21.99px; - transform: rotate(450deg); + + :host(.paused) .indeterminate-indicator-1 { + animation-play-state: paused; + stroke: ${neutralFillRestBehavior.var}; } - 100% { - stroke-dasharray: 0.01px 43.97px; - transform: rotate(1080deg); + + :host(.paused) .determinate { + stroke: ${neutralForegroundHintBehavior.var}; } - } -`.withBehaviors( - accentForegroundRestBehavior, - neutralFillRestBehavior, - neutralForegroundHintBehavior, - forcedColorsStylesheetBehavior( - css` - .indeterminate-indicator-1, - .determinate { - stroke: ${SystemColors.FieldText}; - } - .background { - stroke: ${SystemColors.Field}; + + @keyframes spin-infinite { + 0% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(0deg); } - :host(.paused) .indeterminate-indicator-1 { - stroke: ${SystemColors.Field}; + 50% { + stroke-dasharray: 21.99px 21.99px; + transform: rotate(450deg); } - :host(.paused) .determinate { - stroke: ${SystemColors.GrayText}; + 100% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(1080deg); } - `, - ), -); + } + `.withBehaviors( + accentForegroundRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .indeterminate-indicator-1, + .determinate { + stroke: ${SystemColors.FieldText}; + } + .background { + stroke: ${SystemColors.Field}; + } + :host(.paused) .indeterminate-indicator-1 { + stroke: ${SystemColors.Field}; + } + :host(.paused) .determinate { + stroke: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts index c245cd8ef1b688..01dd6c148b4121 100644 --- a/packages/web-components/src/progress/progress/index.ts +++ b/packages/web-components/src/progress/progress/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { BaseProgress, ProgressTemplate as template } from '@microsoft/fast-foundation'; -import { ProgressStyles as styles } from './progress.styles'; +import { BaseProgress as Progress, progressTemplate as template } from '@microsoft/fast-foundation'; +import { progressStyles as styles } from './progress.styles'; /** * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress}, - * {@link @microsoft/fast-foundation#ProgressTemplate} + * {@link @microsoft/fast-foundation#progressTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-progress', +export const fluentProgress = Progress.compose({ + baseName: 'progress', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentProgress extends BaseProgress {} +}); /** * Styles for Progress * @public */ -export const ProgressStyles = styles; +export const progressStyles = styles; diff --git a/packages/web-components/src/progress/progress/progress.stories.ts b/packages/web-components/src/progress/progress/progress.stories.ts index df5d36b4a4f41e..1cfd9a1ab7c73f 100644 --- a/packages/web-components/src/progress/progress/progress.stories.ts +++ b/packages/web-components/src/progress/progress/progress.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../../design-system-provider'; import Examples from './fixtures/linear.html'; -import { FluentProgress } from './'; - -// Prevent tree-shaking -FluentProgress; -FluentDesignSystemProvider; +import './index'; export default { title: 'Progress', }; -export const Progress = (): string => Examples; +export const Progress = () => Examples; diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts index ba33c35ecb2e7e..69d94a98891de0 100644 --- a/packages/web-components/src/progress/progress/progress.styles.ts +++ b/packages/web-components/src/progress/progress/progress.styles.ts @@ -3,131 +3,132 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { accentForegroundRestBehavior, neutralFillRestBehavior, neutralForegroundHintBehavior } from '../../styles'; -export const ProgressStyles = css` - ${display('flex')} :host { - align-items: center; - outline: none; - height: calc(var(--design-unit) * 1px); - margin: calc(var(--design-unit) * 1px) 0; - } - - .progress { - background-color: ${neutralFillRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - width: 100%; - height: 100%; - display: flex; - align-items: center; - position: relative; - } - - .determinate { - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - height: 100%; - transition: all 0.2s ease-in-out; - display: flex; - } - - .indeterminate { - height: 100%; - border-radius: calc(var(--design-unit) * 1px); - display: flex; - width: 100%; - position: relative; - overflow: hidden; - } - - .indeterminate-indicator-1 { - position: absolute; - opacity: 0; - height: 100%; - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 40%; - animation: indeterminate-1 2s infinite; - } - - .indeterminate-indicator-2 { - position: absolute; - opacity: 0; - height: 100%; - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 60%; - animation: indeterminate-2 2s infinite; - } - - :host(.paused) .indeterminate-indicator-1, - :host(.paused) .indeterminate-indicator-2 { - animation-play-state: paused; - background-color: ${neutralFillRestBehavior.var}; - } - - :host(.paused) .determinate { - background-color: ${neutralForegroundHintBehavior.var}; - } +export const progressStyles = (context, definition) => + css` + ${display('flex')} :host { + align-items: center; + outline: none; + height: calc(var(--design-unit) * 1px); + margin: calc(var(--design-unit) * 1px) 0; + } - @keyframes indeterminate-1 { - 0% { - opacity: 1; - transform: translateX(-100%); + .progress { + background-color: ${neutralFillRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + width: 100%; + height: 100%; + display: flex; + align-items: center; + position: relative; } - 70% { - opacity: 1; - transform: translateX(300%); + + .determinate { + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + height: 100%; + transition: all 0.2s ease-in-out; + display: flex; } - 70.01% { - opacity: 0; + + .indeterminate { + height: 100%; + border-radius: calc(var(--design-unit) * 1px); + display: flex; + width: 100%; + position: relative; + overflow: hidden; } - 100% { + + .indeterminate-indicator-1 { + position: absolute; opacity: 0; - transform: translateX(300%); + height: 100%; + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 40%; + animation: indeterminate-1 2s infinite; } - } - @keyframes indeterminate-2 { - 0% { + .indeterminate-indicator-2 { + position: absolute; opacity: 0; - transform: translateX(-150%); + height: 100%; + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 60%; + animation: indeterminate-2 2s infinite; } - 29.99% { - opacity: 0; + + :host(.paused) .indeterminate-indicator-1, + :host(.paused) .indeterminate-indicator-2 { + animation-play-state: paused; + background-color: ${neutralFillRestBehavior.var}; } - 30% { - opacity: 1; - transform: translateX(-150%); + + :host(.paused) .determinate { + background-color: ${neutralForegroundHintBehavior.var}; } - 100% { - transform: translateX(166.66%); - opacity: 1; + + @keyframes indeterminate-1 { + 0% { + opacity: 1; + transform: translateX(-100%); + } + 70% { + opacity: 1; + transform: translateX(300%); + } + 70.01% { + opacity: 0; + } + 100% { + opacity: 0; + transform: translateX(300%); + } } - } -`.withBehaviors( - accentForegroundRestBehavior, - neutralFillRestBehavior, - neutralForegroundHintBehavior, - forcedColorsStylesheetBehavior( - css` - .indeterminate-indicator-1, - .indeterminate-indicator-2, - .determinate { - forced-color-adjust: none; - background-color: ${SystemColors.FieldText}; + + @keyframes indeterminate-2 { + 0% { + opacity: 0; + transform: translateX(-150%); } - .progress { - background-color: ${SystemColors.Field}; - border: calc(var(--outline-width) * 1px) solid ${SystemColors.FieldText}; + 29.99% { + opacity: 0; } - :host(.paused) .indeterminate-indicator-1, - .indeterminate-indicator-2 { - background-color: ${SystemColors.Field}; + 30% { + opacity: 1; + transform: translateX(-150%); } - :host(.paused) .determinate { - background-color: ${SystemColors.GrayText}; + 100% { + transform: translateX(166.66%); + opacity: 1; } - `, - ), -); + } + `.withBehaviors( + accentForegroundRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .indeterminate-indicator-1, + .indeterminate-indicator-2, + .determinate { + forced-color-adjust: none; + background-color: ${SystemColors.FieldText}; + } + .progress { + background-color: ${SystemColors.Field}; + border: calc(var(--outline-width) * 1px) solid ${SystemColors.FieldText}; + } + :host(.paused) .indeterminate-indicator-1, + .indeterminate-indicator-2 { + background-color: ${SystemColors.Field}; + } + :host(.paused) .determinate { + background-color: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts index 16287d380413d6..f8457be8c3631f 100644 --- a/packages/web-components/src/radio-group/index.ts +++ b/packages/web-components/src/radio-group/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { RadioGroup, RadioGroupTemplate as template } from '@microsoft/fast-foundation'; -import { RadioGroupStyles as styles } from './radio-group.styles'; +import { RadioGroup, radioGroupTemplate as template } from '@microsoft/fast-foundation'; +import { radioGroupStyles as styles } from './radio-group.styles'; /** * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup}, - * {@link @microsoft/fast-foundation#RadioGroupTemplate} + * {@link @microsoft/fast-foundation#radioGroupTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-radio-group', +export const fluentRadioGroup = RadioGroup.compose({ + baseName: 'radio-group', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentRadioGroup extends RadioGroup {} +}); /** * Styles for RadioGroup * @public */ -export const RadioGroupStyles = styles; +export const radioGroupStyles = styles; diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts index 0f87c941624239..b5f20f1a6f66db 100644 --- a/packages/web-components/src/radio-group/radio-group.stories.ts +++ b/packages/web-components/src/radio-group/radio-group.stories.ts @@ -1,13 +1,9 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/radio-group.html'; -import { FluentRadioGroup } from './'; -// Prevent tree-shaking -FluentRadioGroup; -FluentDesignSystemProvider; +import './index'; export default { - title: 'RadioGroup', + title: 'Radio Group', }; -export const RadioGroup = (): string => Examples; +export const RadioGroup = () => Examples; 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 065d709ce73565..611935b04442ee 100644 --- a/packages/web-components/src/radio-group/radio-group.styles.ts +++ b/packages/web-components/src/radio-group/radio-group.styles.ts @@ -1,7 +1,7 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; -export const RadioGroupStyles = css` +export const radioGroupStyles = (context, definition) => css` ${display('flex')} :host { align-items: flex-start; margin: calc(var(--design-unit) * 1px) 0; diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts index 6473c7cd7a0ec7..75a8b6a03b4a33 100644 --- a/packages/web-components/src/radio/index.ts +++ b/packages/web-components/src/radio/index.ts @@ -1,25 +1,20 @@ -import { customElement } from '@microsoft/fast-element'; -import { Radio, RadioTemplate as template } from '@microsoft/fast-foundation'; -import { RadioStyles as styles } from './radio.styles'; +import { Radio, radioTemplate as template } from '@microsoft/fast-foundation'; +import { radioStyles as styles } from './radio.styles'; /** * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio}, - * {@link @microsoft/fast-foundation#RadioTemplate} + * {@link @microsoft/fast-foundation#radioTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-radio', +export const fluentRadio = Radio.compose({ + baseName: 'radio', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentRadio extends Radio {} +}); /** * Styles for Radio diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts index 7873f2f27daabb..7bb87065baa58b 100644 --- a/packages/web-components/src/radio/radio.stories.ts +++ b/packages/web-components/src/radio/radio.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/radio.html'; -import { FluentRadio } from './'; - -// Prevent tree-shaking -FluentRadio; -FluentDesignSystemProvider; +import './index'; export default { title: 'Radio', }; -export const Radio = (): string => Examples; +export const Radio = () => Examples; diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts index 76a99cd82b504b..4eb485a68ec8ef 100644 --- a/packages/web-components/src/radio/radio.styles.ts +++ b/packages/web-components/src/radio/radio.styles.ts @@ -14,7 +14,8 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const RadioStyles = css` +export const radioStyles = (context, definition) => + css` ${display('inline-flex')} :host { --input-size: calc((${heightNumber} / 2) + var(--design-unit)); align-items: center; @@ -108,17 +109,17 @@ export const RadioStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - neutralFillActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - neutralFillInputActiveBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFillActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + neutralFillInputActiveBehavior, + forcedColorsStylesheetBehavior( + css` .control { forced-color-adjust: none; border-color: ${SystemColors.FieldText}; @@ -166,5 +167,5 @@ export const RadioStyles = css` background: ${SystemColors.GrayText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts index d2bdc7947a85ef..67fd866628104d 100644 --- a/packages/web-components/src/select/index.ts +++ b/packages/web-components/src/select/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { Select, SelectTemplate as template } from '@microsoft/fast-foundation'; -import { SelectStyles as styles } from './select.styles'; +import { attr } from '@microsoft/fast-element'; +import { Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation'; +import { selectStyles as styles } from './select.styles'; /** * Select appearances @@ -9,20 +9,10 @@ import { SelectStyles as styles } from './select.styles'; export type SelectAppearance = 'filled' | 'outline'; /** - * The Fluent Select Element. Implements {@link @microsoft/fast-foundation#Select}, - * {@link @microsoft/fast-foundation#SelectTemplate} - * - * - * @public - * @remarks - * HTML Element: \ + * The Fluent select class + * @internal */ -@customElement({ - name: 'fluent-select', - template, - styles, -}) -export class FluentSelect extends Select { +export class Select extends FoundationSelect { /** * The appearance of the element. * @@ -55,8 +45,24 @@ export class FluentSelect extends Select { } } +/** + * The Fluent select Custom Element. Implements, {@link @microsoft/fast-foundation#Select} + * {@link @microsoft/fast-foundation#selectTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + */ +export const fluentSelect = Select.compose({ + baseName: 'select', + template, + styles, +}); + /** * Styles for Select * @public */ -export const SelectStyles = styles; +export const selectStyles = styles; diff --git a/packages/web-components/src/select/select.stories.ts b/packages/web-components/src/select/select.stories.ts index 03d4c58e5cd910..2158211e18dc57 100644 --- a/packages/web-components/src/select/select.stories.ts +++ b/packages/web-components/src/select/select.stories.ts @@ -1,12 +1,10 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import SelectTemplate from './fixtures/base.html'; -import { FluentSelect } from './'; - -FluentSelect; -FluentDesignSystemProvider; +import Examples from './fixtures/base.html'; +import '../listbox-option'; +import '../listbox'; +import './index'; export default { title: 'Select', }; -export const Select = (): string => SelectTemplate; +export const Select = () => Examples; diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts index 2b9f9a7171e3c1..562990c9879b43 100644 --- a/packages/web-components/src/select/select.styles.ts +++ b/packages/web-components/src/select/select.styles.ts @@ -38,7 +38,8 @@ export const SelectFilledStyles = css` } `.withBehaviors(neutralFillHoverBehavior, neutralFillRestBehavior, neutralFocusBehavior); -export const SelectStyles = css` +export const selectStyles = (context, definition) => + css` ${display('inline-flex')} :host { --elevation: 14; background: ${neutralFillInputRestBehavior.var}; @@ -201,14 +202,14 @@ export const SelectStyles = css` flex: 0 0 auto; } `.withBehaviors( - appearanceBehavior('filled', SelectFilledStyles), - accentFillHoverBehavior, - accentForegroundCutRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + appearanceBehavior('filled', SelectFilledStyles), + accentFillHoverBehavior, + accentForegroundCutRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` :host([disabled]) { border-color: ${SystemColors.GrayText}; background-color: ${SystemColors.ButtonFace}; @@ -261,14 +262,14 @@ export const SelectStyles = css` box-shadow: none; } `, - ), - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralLayerFloatingBehavior, - neutralOutlineRestBehavior, -); + ), + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior, + ); diff --git a/packages/web-components/src/skeleton/index.ts b/packages/web-components/src/skeleton/index.ts index 6327acbc039091..081cc03c893cb4 100644 --- a/packages/web-components/src/skeleton/index.ts +++ b/packages/web-components/src/skeleton/index.ts @@ -1,25 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Skeleton, SkeletonTemplate as template } from '@microsoft/fast-foundation'; -import { SkeletonStyles as styles } from './skeleton.styles'; +import { Skeleton, skeletonTemplate as template } from '@microsoft/fast-foundation'; +import { skeletonStyles as styles } from './skeleton.styles'; /** * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton}, - * {@link @microsoft/fast-foundation#SkeletonTemplate} + * {@link @microsoft/fast-foundation#skeletonTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-skeleton', +export const fluentSkeleton = Skeleton.compose({ + baseName: 'skeleton', template, styles, -}) -export class FluentSkeleton extends Skeleton {} +}); /** * Styles for Skeleton * @public */ -export const SkeletonStyles = styles; +export const skeletonStyles = styles; diff --git a/packages/web-components/src/skeleton/skeleton.stories.ts b/packages/web-components/src/skeleton/skeleton.stories.ts index 7b483b49b0c6a0..29bfb294d72b11 100644 --- a/packages/web-components/src/skeleton/skeleton.stories.ts +++ b/packages/web-components/src/skeleton/skeleton.stories.ts @@ -1,12 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import SkeletonTemplate from './fixtures/base.html'; -import { FluentSkeleton } from './'; - -FluentSkeleton; -FluentDesignSystemProvider; +import './index'; export default { title: 'Skeleton', }; -export const Skeleton = (): string => SkeletonTemplate; +export const Skeleton = () => SkeletonTemplate; diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts index b65d31c265723e..ff1b368f3c60fb 100644 --- a/packages/web-components/src/skeleton/skeleton.styles.ts +++ b/packages/web-components/src/skeleton/skeleton.styles.ts @@ -2,72 +2,73 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { neutralFillRestBehavior } from '../styles'; -export const SkeletonStyles = css` - ${display('block')} :host { - --skeleton-fill-default: #e1dfdd; - overflow: hidden; - width: 100%; - position: relative; - background-color: var(--skeleton-fill, var(--skeleton-fill-default)); - --skeleton-animation-gradient-default: linear-gradient( - 270deg, - var(--skeleton-fill, var(--skeleton-fill-default)) 0%, - #f3f2f1 51.13%, - var(--skeleton-fill, var(--skeleton-fill-default)) 100% - ); - --skeleton-animation-timing-default: ease-in-out; - } - - :host(.rect) { - border-radius: calc(var(--corner-radius) * 1px); - } +export const skeletonStyles = (context, definition) => + css` + ${display('block')} :host { + --skeleton-fill-default: #e1dfdd; + overflow: hidden; + width: 100%; + position: relative; + background-color: var(--skeleton-fill, var(--skeleton-fill-default)); + --skeleton-animation-gradient-default: linear-gradient( + 270deg, + var(--skeleton-fill, var(--skeleton-fill-default)) 0%, + #f3f2f1 51.13%, + var(--skeleton-fill, var(--skeleton-fill-default)) 100% + ); + --skeleton-animation-timing-default: ease-in-out; + } - :host(.circle) { - border-radius: 100%; - overflow: hidden; - } + :host(.rect) { + border-radius: calc(var(--corner-radius) * 1px); + } - object { - position: absolute; - width: 100%; - height: auto; - z-index: 2; - } + :host(.circle) { + border-radius: 100%; + overflow: hidden; + } - object img { - width: 100%; - height: auto; - } + object { + position: absolute; + width: 100%; + height: auto; + z-index: 2; + } - ${display('block')} span.shimmer { - position: absolute; - width: 100%; - height: 100%; - background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default)); - background-size: 0px 0px / 90% 100%; - background-repeat: no-repeat; - background-color: var(--skeleton-animation-fill, ${neutralFillRestBehavior.var}); - animation: shimmer 2s infinite; - animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default)); - animation-direction: normal; - z-index: 1; - } + object img { + width: 100%; + height: auto; + } - ::slotted(svg) { - z-index: 2; - } + ${display('block')} span.shimmer { + position: absolute; + width: 100%; + height: 100%; + background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default)); + background-size: 0px 0px / 90% 100%; + background-repeat: no-repeat; + background-color: var(--skeleton-animation-fill, ${neutralFillRestBehavior.var}); + animation: shimmer 2s infinite; + animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default)); + animation-direction: normal; + z-index: 1; + } - ::slotted(.pattern) { - width: 100%; - height: 100%; - } + ::slotted(svg) { + z-index: 2; + } - @keyframes shimmer { - 0% { - transform: translateX(-100%); + ::slotted(.pattern) { + width: 100%; + height: 100%; } - 100% { - transform: translateX(100%); + + @keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } } - } -`.withBehaviors(neutralFillRestBehavior); + `.withBehaviors(neutralFillRestBehavior); diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts index c4788221a253c1..87dd8269d3fce6 100644 --- a/packages/web-components/src/slider-label/index.ts +++ b/packages/web-components/src/slider-label/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { SliderLabel, SliderLabelTemplate as template } from '@microsoft/fast-foundation'; -import { SliderLabelStyles as styles } from './slider-label.styles'; +import { SliderLabel, sliderLabelTemplate as template } from '@microsoft/fast-foundation'; +import { sliderLabelStyles as styles } from './slider-label.styles'; /** * The Fluent Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel}, - * {@link @microsoft/fast-foundation#SliderLabelTemplate} + * {@link @microsoft/fast-foundation#sliderLabelTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-slider-label', +export const fluentSliderLabel = SliderLabel.compose({ + baseName: 'slider-label', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentSliderLabel extends SliderLabel {} +}); /** * Styles for SliderLabel * @public */ -export const SliderLabelStyles = styles; +export const sliderLabelStyles = styles; diff --git a/packages/web-components/src/slider-label/slider-label.stories.ts b/packages/web-components/src/slider-label/slider-label.stories.ts index 137d0f1dd372ed..38445c2e9ebfbb 100644 --- a/packages/web-components/src/slider-label/slider-label.stories.ts +++ b/packages/web-components/src/slider-label/slider-label.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/slider-label.html'; -import { FluentSliderLabel } from './'; - -// Prevent tree-shaking -FluentSliderLabel; -FluentDesignSystemProvider; +import './index'; export default { - title: 'Slider label', + title: 'Slider Label', }; -export const SliderLabel = (): string => Examples; +export const SliderLabel = () => Examples; 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 e7dbb5cf6270eb..76f610a44e1c99 100644 --- a/packages/web-components/src/slider-label/slider-label.styles.ts +++ b/packages/web-components/src/slider-label/slider-label.styles.ts @@ -3,80 +3,81 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { heightNumber, neutralOutlineRestBehavior } from '../styles'; -export const SliderLabelStyles = css` - ${display('block')} :host { - font-family: var(--body-font); - } - .root { - position: absolute; - display: grid; - } - :host(.horizontal) { - align-self: start; - grid-row: 2; - margin-top: -2px; - } - :host(.vertical) { - justify-self: start; - grid-column: 2; - margin-left: 2px; - } - .container { - display: grid; - justify-self: center; - } - :host(.horizontal) .container { - grid-template-rows: auto auto; - grid-template-columns: 0; - } - :host(.vertical) .container { - grid-template-columns: auto auto; - grid-template-rows: 0; - min-width: calc(var(--thumb-size) * 1px); - height: calc(var(--thumb-size) * 1px); - } - .label { - justify-self: center; - align-self: center; - white-space: nowrap; - max-width: 30px; - margin: 2px 0; - } - .mark { - width: calc((var(--design-unit) / 2) * 1px); - height: calc(${heightNumber} * 0.25 * 1px); - background: ${neutralOutlineRestBehavior.var}; - justify-self: center; - } - :host(.vertical) .mark { - transform: rotate(90deg); - align-self: center; - } - :host(.vertical) .label { - margin-left: calc((var(--design-unit) / 2) * 2px); - align-self: center; - } - :host(.disabled) { - opacity: var(--disabled-opacity); - } -`.withBehaviors( - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .mark { - forced-color-adjust: none; - background: ${SystemColors.FieldText}; - } - :host(.disabled) { - forced-color-adjust: none; - opacity: 1; - } - :host(.disabled) .label { - color: ${SystemColors.GrayText}; - } - :host(.disabled) .mark { - background: ${SystemColors.GrayText}; - } - `, - ), -); +export const sliderLabelStyles = (context, definition) => + css` + ${display('block')} :host { + font-family: var(--body-font); + } + .root { + position: absolute; + display: grid; + } + :host(.horizontal) { + align-self: start; + grid-row: 2; + margin-top: -2px; + } + :host(.vertical) { + justify-self: start; + grid-column: 2; + margin-left: 2px; + } + .container { + display: grid; + justify-self: center; + } + :host(.horizontal) .container { + grid-template-rows: auto auto; + grid-template-columns: 0; + } + :host(.vertical) .container { + grid-template-columns: auto auto; + grid-template-rows: 0; + min-width: calc(var(--thumb-size) * 1px); + height: calc(var(--thumb-size) * 1px); + } + .label { + justify-self: center; + align-self: center; + white-space: nowrap; + max-width: 30px; + margin: 2px 0; + } + .mark { + width: calc((var(--design-unit) / 2) * 1px); + height: calc(${heightNumber} * 0.25 * 1px); + background: ${neutralOutlineRestBehavior.var}; + justify-self: center; + } + :host(.vertical) .mark { + transform: rotate(90deg); + align-self: center; + } + :host(.vertical) .label { + margin-left: calc((var(--design-unit) / 2) * 2px); + align-self: center; + } + :host(.disabled) { + opacity: var(--disabled-opacity); + } + `.withBehaviors( + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .mark { + forced-color-adjust: none; + background: ${SystemColors.FieldText}; + } + :host(.disabled) { + forced-color-adjust: none; + opacity: 1; + } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } + :host(.disabled) .mark { + background: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts index b9efbb51a1bb85..deec74fdcedf23 100644 --- a/packages/web-components/src/slider/index.ts +++ b/packages/web-components/src/slider/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Slider, SliderTemplate as template } from '@microsoft/fast-foundation'; -import { SliderStyles as styles } from './slider.styles'; +import { Slider, sliderTemplate as template } from '@microsoft/fast-foundation'; +import { sliderStyles as styles } from './slider.styles'; /** - * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#Slider}, - * {@link @microsoft/fast-foundation#SliderTemplate} + * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)}, + * {@link @microsoft/fast-foundation#sliderTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-slider', +export const fluentSlider = Slider.compose({ + baseName: 'slider', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentSlider extends Slider {} +}); /** * Styles for Slider * @public */ -export const SliderStyles = styles; +export const sliderStyles = styles; diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts index 39152ddc5b404b..8e9478c2c78b73 100644 --- a/packages/web-components/src/slider/slider.stories.ts +++ b/packages/web-components/src/slider/slider.stories.ts @@ -1,13 +1,24 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; +import addons from '@storybook/addons'; +import { STORY_RENDERED } from '@storybook/core-events'; +import { Slider as FoundationSlider } from '@microsoft/fast-foundation'; import Examples from './fixtures/slider.html'; -import { FluentSlider } from './'; +import './index'; -// Prevent tree-shaking -FluentSlider; -FluentDesignSystemProvider; +function valueTextFormatter(value: string): string { + return `${value} degrees celsius`; +} + +addons.getChannel().addListener(STORY_RENDERED, (name: string) => { + if (name.toLowerCase().endsWith('slider')) { + ['switcher', 'switcher2', 'slider1'].forEach(x => { + const slider = document.getElementById(x) as FoundationSlider; + slider.valueTextFormatter = valueTextFormatter; + }); + } +}); export default { title: 'Slider', }; -export const Slider = (): string => Examples; +export const Slider = () => Examples; diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts index a1d210c482feea..55a2af8479314b 100644 --- a/packages/web-components/src/slider/slider.styles.ts +++ b/packages/web-components/src/slider/slider.styles.ts @@ -11,7 +11,8 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const SliderStyles = css` +export const sliderStyles = (context, defintion) => + css` ${display('inline-grid')} :host { --thumb-size: calc(${heightNumber} * 0.5); --thumb-translate: calc(var(--thumb-size) * 0.5); @@ -101,14 +102,14 @@ export const SliderStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - neutralFocusBehavior, - neutralForegroundActiveBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFocusBehavior, + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .thumb-cursor { forced-color-adjust: none; border-color: ${SystemColors.FieldText}; @@ -136,5 +137,5 @@ export const SliderStyles = css` background: ${SystemColors.GrayText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts index f914929a72754b..df7f9c7a47e065 100644 --- a/packages/web-components/src/switch/index.ts +++ b/packages/web-components/src/switch/index.ts @@ -1,6 +1,5 @@ -import { customElement } from '@microsoft/fast-element'; -import { Switch, SwitchTemplate as template } from '@microsoft/fast-foundation'; -import { SwitchStyles as styles } from './switch.styles'; +import { Switch, switchTemplate as template } from '@microsoft/fast-foundation'; +import { switchStyles as styles } from './switch.styles'; /** * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch}, @@ -11,18 +10,14 @@ import { SwitchStyles as styles } from './switch.styles'; * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-switch', +export const fluentSwitch = Switch.compose({ + baseName: 'switch', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentSwitch extends Switch {} +}); /** * Styles for Switch * @public */ -export const SwitchStyles = styles; +export const switchStyles = styles; diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts index cd5b46832e392a..ded4d570513441 100644 --- a/packages/web-components/src/switch/switch.stories.ts +++ b/packages/web-components/src/switch/switch.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/switch.html'; -import { FluentSwitch } from './'; - -// Prevent tree-shaking -FluentSwitch; -FluentDesignSystemProvider; +import './index'; export default { title: 'Switch', }; -export const Switch = (): string => Examples; +export const Switch = () => Examples; diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts index 1489fc2dab0e7d..9f192c5dd74c11 100644 --- a/packages/web-components/src/switch/switch.styles.ts +++ b/packages/web-components/src/switch/switch.styles.ts @@ -23,7 +23,8 @@ import { neutralOutlineRestBehavior, } from '../styles'; -export const SwitchStyles = css` +export const switchStyles = (context, defintiion) => + css` :host([hidden]) { display: none; } @@ -152,40 +153,40 @@ export const SwitchStyles = css` display: block; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - new DirectionalStyleSheetBehavior( - css` - .checked-indicator { - left: calc(var(--design-unit) * 1px); - } - - :host([aria-checked='true']) .checked-indicator { - left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px); - } - `, - css` - .checked-indicator { - right: calc(var(--design-unit) * 1px); - } - - :host([aria-checked='true']) .checked-indicator { - right: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px); - } - `, - ), - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + new DirectionalStyleSheetBehavior( + css` + .checked-indicator { + left: calc(var(--design-unit) * 1px); + } + + :host([aria-checked='true']) .checked-indicator { + left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px); + } + `, + css` + .checked-indicator { + right: calc(var(--design-unit) * 1px); + } + + :host([aria-checked='true']) .checked-indicator { + right: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px); + } + `, + ), + forcedColorsStylesheetBehavior( + css` .checked-indicator, :host(:enabled) .switch:active .checked-indicator { forced-color-adjust: none; @@ -237,5 +238,5 @@ export const SwitchStyles = css` color: ${SystemColors.FieldText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts index 0d51ff74bfe0f8..0db87c281efe40 100644 --- a/packages/web-components/src/tabs/index.ts +++ b/packages/web-components/src/tabs/index.ts @@ -1,30 +1,26 @@ -import { customElement } from '@microsoft/fast-element'; -import { Tabs, TabsTemplate as template } from '@microsoft/fast-foundation'; -import { TabsStyles as styles } from './tabs.styles'; +import { Tabs, tabsTemplate as template } from '@microsoft/fast-foundation'; +import { tabsStyles as styles } from './tabs.styles'; /** * The Fluent Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs}, - * {@link @microsoft/fast-foundation#TabsTemplate} + * {@link @microsoft/fast-foundation#tabsTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-tabs', +export const fluentTabs = Tabs.compose({ + baseName: 'tabs', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTabs extends Tabs {} -export * from './tab/'; -export * from './tab-panel/'; +}); + +export * from './tab'; +export * from './tab-panel'; /** * Styles for Tabs * @public */ -export const TabsStyles = styles; +export const tabsStyles = styles; diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts index 11b8f46cc43f09..ef8529e1bb066f 100644 --- a/packages/web-components/src/tabs/tab-panel/index.ts +++ b/packages/web-components/src/tabs/tab-panel/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { TabPanel, TabPanelTemplate as template } from '@microsoft/fast-foundation'; -import { TabPanelStyles as styles } from './tab-panel.styles'; +import { TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation'; +import { tabPanelStyles as styles } from './tab-panel.styles'; /** * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel}, - * {@link @microsoft/fast-foundation#TabPanelTemplate} + * {@link @microsoft/fast-foundation#tabPanelTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-tab-panel', +export const fluentTabPanel = TabPanel.compose({ + baseName: 'tab-panel', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTabPanel extends TabPanel {} +}); /** * Styles for TabPanel * @public */ -export const TabPanelStyles = styles; +export const tabPanelStyles = styles; 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 d54a98de01cfb7..caa6d7cb20820d 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,11 +1,11 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; -export const TabPanelStyles = css` +export const tabPanelStyles = (context, definition) => css` ${display('flex')} :host { box-sizing: border-box; font-family: var(--body-font); - ${/* Font size, weight, and line height are temporary - + ${/* Font size, weight, and line height are temporary - replace when adaptive typography is figured out */ ''} font-size: 12px; font-weight: 400; line-height: 18px; diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts index 4f4a2a4ea429a4..a20c76d8a4194e 100644 --- a/packages/web-components/src/tabs/tab/index.ts +++ b/packages/web-components/src/tabs/tab/index.ts @@ -1,28 +1,23 @@ -import { customElement } from '@microsoft/fast-element'; -import { Tab, TabTemplate as template } from '@microsoft/fast-foundation'; -import { TabStyles as styles } from './tab.styles'; +import { Tab, tabTemplate as template } from '@microsoft/fast-foundation'; +import { tabStyles as styles } from './tab.styles'; /** * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab}, - * {@link @microsoft/fast-foundation#TabTemplate} + * {@link @microsoft/fast-foundation#tabTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-tab', +export const fluentTab = Tab.compose({ + baseName: 'tab', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTab extends Tab {} +}); /** * Styles for Tab * @public */ -export const TabStyles = styles; +export const tabStyles = styles; diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts index c034718fd71cbd..4708df00c56bf0 100644 --- a/packages/web-components/src/tabs/tab/tab.styles.ts +++ b/packages/web-components/src/tabs/tab/tab.styles.ts @@ -9,7 +9,8 @@ import { neutralForegroundRestBehavior, } from '../../styles'; -export const TabStyles = css` +export const tabStyles = (context, definition) => + css` ${display('inline-flex')} :host { box-sizing: border-box; font-family: var(--body-font); @@ -73,12 +74,12 @@ export const TabStyles = css` :host(.vertical:hover[aria-selected="true"]) { } `.withBehaviors( - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralForegroundHoverBehavior, - neutralForegroundActiveBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralForegroundHoverBehavior, + neutralForegroundActiveBehavior, + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -102,5 +103,5 @@ export const TabStyles = css` box-shadow: none; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts index bd2d12d2e5c6cc..8a7484668169fa 100644 --- a/packages/web-components/src/tabs/tabs.stories.ts +++ b/packages/web-components/src/tabs/tabs.stories.ts @@ -1,17 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import Examples from './fixtures/tabs.html'; -import { FluentTab } from './tab'; -import { FluentTabPanel } from './tab-panel'; -import { FluentTabs } from './'; - -// Prevent tree-shaking -FluentTab; -FluentTabPanel; -FluentTabs; -FluentDesignSystemProvider; +import './index'; export default { title: 'Tabs', }; -export const Base = (): string => Examples; +export const Tabs = () => Examples; diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts index d1b5111d80ac75..311c77696c61c9 100644 --- a/packages/web-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/src/tabs/tabs.styles.ts @@ -3,102 +3,103 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { accentFillRestBehavior, neutralForegroundRestBehavior } from '../styles'; -export const TabsStyles = css` - ${display('grid')} :host { - box-sizing: border-box; - font-family: var(--body-font); - font-size: var(--type-ramp-base-font-size); - line-height: var(--type-ramp-base-line-height); - color: ${neutralForegroundRestBehavior.var}; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto 1fr; - } +export const tabsStyles = (context, definition) => + css` + ${display('grid')} :host { + box-sizing: border-box; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + color: ${neutralForegroundRestBehavior.var}; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto 1fr; + } - .tablist { - display: grid; - grid-template-rows: auto auto; - grid-template-columns: auto; - position: relative; - width: max-content; - align-self: end; - } + .tablist { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: auto; + position: relative; + width: max-content; + align-self: end; + } - .start, - .end { - align-self: center; - } + .start, + .end { + align-self: center; + } - .activeIndicator { - grid-row: 2; - grid-column: 1; - width: 20px; - height: 3px; - border-radius: calc(var(--corner-radius) * 1px); - justify-self: center; - background: ${accentFillRestBehavior.var}; - } + .activeIndicator { + grid-row: 2; + grid-column: 1; + width: 20px; + height: 3px; + border-radius: calc(var(--corner-radius) * 1px); + justify-self: center; + background: ${accentFillRestBehavior.var}; + } - .activeIndicatorTransition { - transition: transform 0.2s ease-in-out; - } + .activeIndicatorTransition { + transition: transform 0.2s ease-in-out; + } - .tabpanel { - grid-row: 2; - grid-column-start: 1; - grid-column-end: 4; - position: relative; - } + .tabpanel { + grid-row: 2; + grid-column-start: 1; + grid-column-end: 4; + position: relative; + } - :host(.vertical) { - grid-template-rows: auto 1fr auto; - grid-template-columns: auto 1fr; - } + :host(.vertical) { + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + } - :host(.vertical) .tablist { - grid-row-start: 2; - grid-row-end: 2; - display: grid; - grid-template-rows: auto; - grid-template-columns: auto 1fr; - position: relative; - width: max-content; - justify-self: end; - width: 100%; - } + :host(.vertical) .tablist { + grid-row-start: 2; + grid-row-end: 2; + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 1fr; + position: relative; + width: max-content; + justify-self: end; + width: 100%; + } - :host(.vertical) .tabpanel { - grid-column: 2; - grid-row-start: 1; - grid-row-end: 4; - } + :host(.vertical) .tabpanel { + grid-column: 2; + grid-row-start: 1; + grid-row-end: 4; + } - :host(.vertical) .end { - grid-row: 3; - } + :host(.vertical) .end { + grid-row: 3; + } - :host(.vertical) .activeIndicator { - grid-column: 1; - grid-row: 1; - width: 3px; - height: 20px; - border-radius: calc(var(--corner-radius) * 1px); - align-self: center; - background: ${accentFillRestBehavior.var}; - } + :host(.vertical) .activeIndicator { + grid-column: 1; + grid-row: 1; + width: 3px; + height: 20px; + border-radius: calc(var(--corner-radius) * 1px); + align-self: center; + background: ${accentFillRestBehavior.var}; + } - :host(.vertical) .activeIndicatorTransition { - transition: transform 0.2s linear; - } -`.withBehaviors( - accentFillRestBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` - .activeIndicator, - :host(.vertical) .activeIndicator { - forced-color-adjust: none; - background: ${SystemColors.Highlight}; - } - `, - ), -); + :host(.vertical) .activeIndicatorTransition { + transition: transform 0.2s linear; + } + `.withBehaviors( + accentFillRestBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` + .activeIndicator, + :host(.vertical) .activeIndicator { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + } + `, + ), + ); diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts index ff44f410fa48d5..0e5ccbed543e49 100644 --- a/packages/web-components/src/text-area/index.ts +++ b/packages/web-components/src/text-area/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { TextAreaTemplate as template, TextArea } from '@microsoft/fast-foundation'; -import { TextAreaStyles as styles } from './text-area.styles'; +import { attr } from '@microsoft/fast-element'; +import { TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation'; +import { textAreaStyles as styles } from './text-area.styles'; /** * Text area appearances @@ -9,25 +9,10 @@ import { TextAreaStyles as styles } from './text-area.styles'; export type TextAreaAppearance = 'filled' | 'outline'; /** - * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea}, - * {@link @microsoft/fast-foundation#TextAreaTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The Fluent TextArea class + * @internal */ -@customElement({ - name: 'fluent-text-area', - template, - styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTextArea extends TextArea { +export class TextArea extends FoundationTextArea { /** * The appearance of the element. * @@ -60,8 +45,28 @@ export class FluentTextArea extends TextArea { } } +/** + * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea}, + * {@link @microsoft/fast-foundation#textAreaTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fluentTextArea = TextArea.compose({ + baseName: 'text-area', + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for TextArea * @public */ -export const TextAreaStyles = styles; +export const textAreaStyles = styles; diff --git a/packages/web-components/src/text-area/text-area.stories.ts b/packages/web-components/src/text-area/text-area.stories.ts index a164b76b98ce04..26d435bf6ea532 100644 --- a/packages/web-components/src/text-area/text-area.stories.ts +++ b/packages/web-components/src/text-area/text-area.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import Examples from './fixtures/text-area.html'; -import { FluentTextArea } from './'; - -// Prevent tree-shaking -FluentTextArea; -FluentDesignSystemProvider; +import TextAreaTemplate from './fixtures/text-area.html'; +import './index'; export default { title: 'Text Area', }; -export const TextArea = (): string => Examples; +export const TextArea = () => TextAreaTemplate; 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 aceeec6cd7644e..0b0c156640f9a1 100644 --- a/packages/web-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/src/text-area/text-area.styles.ts @@ -51,7 +51,8 @@ export const TextAreaFilledStyles = css` ), ); -export const TextAreaStyles = css` +export const textAreaStyles = (context, definition) => + css` ${display('inline-flex')} :host { font-family: var(--body-font); outline: none; @@ -130,27 +131,27 @@ export const TextAreaStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - appearanceBehavior('filled', TextAreaFilledStyles), - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host([disabled]) { - opacity: 1; - } - ::placeholder, - ::-webkit-input-placeholder { - color: ${SystemColors.FieldText}; - } - :host([disabled]) ::placeholder, - :host([disabled]) ::-webkit-input-placeholder, - :host([disabled]) .label { - color: ${SystemColors.GrayText}; - } - `, - ), -); + appearanceBehavior('filled', TextAreaFilledStyles), + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + opacity: 1; + } + ::placeholder, + ::-webkit-input-placeholder { + color: ${SystemColors.FieldText}; + } + :host([disabled]) ::placeholder, + :host([disabled]) ::-webkit-input-placeholder, + :host([disabled]) .label { + color: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/text-field/fixtures/text-field.html b/packages/web-components/src/text-field/fixtures/text-field.html index 46d7fbee5181da..c8a8c777f2d0b6 100644 --- a/packages/web-components/src/text-field/fixtures/text-field.html +++ b/packages/web-components/src/text-field/fixtures/text-field.html @@ -87,4 +87,11 @@

Audio label only

With aria-label

+ +
+ +

In a form

+ + +
diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts index 0e87d77f4f8db4..897b937ab83586 100644 --- a/packages/web-components/src/text-field/index.ts +++ b/packages/web-components/src/text-field/index.ts @@ -1,6 +1,6 @@ -import { attr, customElement } from '@microsoft/fast-element'; -import { TextFieldTemplate as template, TextField } from '@microsoft/fast-foundation'; -import { TextFieldStyles as styles } from './text-field.styles'; +import { attr } from '@microsoft/fast-element'; +import { TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation'; +import { textFieldStyles as styles } from './text-field.styles'; /** * Text field appearances @@ -9,26 +9,10 @@ import { TextFieldStyles as styles } from './text-field.styles'; export type TextFieldAppearance = 'filled' | 'outline'; /** - * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField}, - * {@link @microsoft/fast-foundation#TextFieldTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The Fluent text field class + * @internal */ -@customElement({ - name: 'fluent-text-field', - template, - styles, - shadowOptions: { - delegatesFocus: true, - mode: 'closed', - }, -}) -export class FluentTextField extends TextField { +export class TextField extends FoundationTextField { /** * The appearance of the element. * @@ -61,8 +45,28 @@ export class FluentTextField extends TextField { } } +/** + * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField}, + * {@link @microsoft/fast-foundation#textFieldTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fluentTextField = TextField.compose({ + baseName: 'text-field', + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for TextField * @public */ -export const TextFieldStyles = styles; +export const textFieldStyles = styles; diff --git a/packages/web-components/src/text-field/text-field.stories.ts b/packages/web-components/src/text-field/text-field.stories.ts index 57d88c317892cb..9da8cafd302684 100644 --- a/packages/web-components/src/text-field/text-field.stories.ts +++ b/packages/web-components/src/text-field/text-field.stories.ts @@ -1,13 +1,24 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; -import Examples from './fixtures/text-field.html'; -import { FluentTextField } from './'; +import { STORY_RENDERED } from '@storybook/core-events'; +import addons from '@storybook/addons'; +import TextFieldTemplate from './fixtures/text-field.html'; +import './index'; -// Prevent tree-shaking -FluentTextField; -FluentDesignSystemProvider; +addons.getChannel().addListener(STORY_RENDERED, (name: string) => { + if (name.toLowerCase().startsWith('text-field')) { + document.querySelectorAll('.form').forEach((el: HTMLFormElement) => { + el.onsubmit = event => { + console.log(event, 'event'); + event.preventDefault(); + const form: HTMLFormElement = document.forms['myForm']; + + console.log(form.elements['fname'].value, 'value of input'); + }; + }); + } +}); export default { - title: 'Text field', + title: 'Text Field', }; -export const TextField = (): string => Examples; +export const TextField = () => TextFieldTemplate; 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 911c856aeeb091..85dadbd74652b7 100644 --- a/packages/web-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/src/text-field/text-field.styles.ts @@ -63,7 +63,8 @@ export const TextFieldFilledStyles = css` ), ); -export const TextFieldStyles = css` +export const textFieldStyles = (context, definition) => + css` ${display('inline-block')} :host { font-family: var(--body-font); outline: none; @@ -162,51 +163,51 @@ export const TextFieldStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - appearanceBehavior('filled', TextFieldFilledStyles), - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .root { - forced-color-adjust: none; - background: ${SystemColors.Field}; - border-color: ${SystemColors.FieldText}; - } - :host(:hover:not(.disabled)) .root { - background: ${SystemColors.Field}; - border-color: ${SystemColors.Highlight}; - } - .start, - .end { - fill: ${SystemColors.ButtonText}; - } - :host(.disabled) { - opacity: 1; - } - :host(.disabled) .root { - border-color: ${SystemColors.GrayText}; - background: ${SystemColors.Field}; - } - :host(:focus-within:enabled) .root { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; - } - .control { - color: ${SystemColors.ButtonText}; - } - ::placeholder, - ::-webkit-input-placeholder { - color: ${SystemColors.FieldText}; - } - :host(.disabled) ::placeholder, - :host(.disabled) ::-webkit-input-placeholder, - :host([disabled]) .label { - color: ${SystemColors.GrayText}; - } - `, - ), -); + appearanceBehavior('filled', TextFieldFilledStyles), + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .root { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(:hover:not(.disabled)) .root { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight}; + } + .start, + .end { + fill: ${SystemColors.ButtonText}; + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled) .root { + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host(:focus-within:enabled) .root { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; + } + .control { + color: ${SystemColors.ButtonText}; + } + ::placeholder, + ::-webkit-input-placeholder { + color: ${SystemColors.FieldText}; + } + :host(.disabled) ::placeholder, + :host(.disabled) ::-webkit-input-placeholder, + :host([disabled]) .label { + color: ${SystemColors.GrayText}; + } + `, + ), + ); diff --git a/packages/web-components/src/tooltip/index.ts b/packages/web-components/src/tooltip/index.ts index 626b425ec0b913..6d410a0b95c41f 100644 --- a/packages/web-components/src/tooltip/index.ts +++ b/packages/web-components/src/tooltip/index.ts @@ -1,28 +1,17 @@ -import { customElement } from '@microsoft/fast-element'; -import { createTooltipTemplate, createTooltipTemplate as template, Tooltip } from '@microsoft/fast-foundation'; -import { TooltipStyles as styles } from './tooltip.styles'; +import { tooltipTemplate as template, Tooltip } from '@microsoft/fast-foundation'; +import { tooltipStyles as styles } from './tooltip.styles'; /** * The Fluent Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip}, - * {@link @microsoft/fast-foundation#Tooltip} + * {@link @microsoft/fast-foundation#tooltipTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: 'fluent-tooltip', - template: createTooltipTemplate('fluent'), +export const fluentTooltip = Tooltip.compose({ + baseName: 'tooltip', + template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTooltip extends Tooltip {} - -/** - * Styles for Tooltip - * @public - */ -export const TooltipStyles = styles; +}); diff --git a/packages/web-components/src/tooltip/tooltip.stories.ts b/packages/web-components/src/tooltip/tooltip.stories.ts index 6e11fe2a78b517..420332cab70a49 100644 --- a/packages/web-components/src/tooltip/tooltip.stories.ts +++ b/packages/web-components/src/tooltip/tooltip.stories.ts @@ -1,37 +1,39 @@ -import addons from '@storybook/addons'; import { STORY_RENDERED } from '@storybook/core-events'; -import { FluentDesignSystemProvider } from '../design-system-provider'; +import addons from '@storybook/addons'; +import { Tooltip as FoundationTooltip } from '@microsoft/fast-foundation'; import TooltipTemplate from './fixtures/tooltip.html'; -import { FluentTooltip } from '.'; +import '../button'; +import './index'; -// Prevent tree-shaking -FluentTooltip; -FluentDesignSystemProvider; - -addons.getChannel().addListener(STORY_RENDERED, (name: string) => { - if (name.toLowerCase().startsWith('tooltip')) { - connectAnchors(); +function onShowClick(): void { + for (let i = 1; i <= 4; i++) { + const tooltipInstance = document.getElementById(`tooltip-show-${i}`) as FoundationTooltip; + tooltipInstance.visible = !tooltipInstance.visible; } -}); +} function onAnchorMouseEnter(e: MouseEvent): void { - if (e.target === null) { + if (!e.target) { return; } - const tooltipInstance: HTMLElement | null = document.getElementById('tooltip-anchor-switch'); - (tooltipInstance as FluentTooltip).anchorElement = e.target as HTMLElement; -} -function connectAnchors(): void { - document.querySelectorAll('fluent-button').forEach(el => { - if (el !== null && el.id.startsWith('anchor-anchor-switch')) { - (el as HTMLElement).onmouseenter = onAnchorMouseEnter; - } - }); + const tooltipInstance = document.getElementById('tooltip-anchor-switch') as FoundationTooltip; + tooltipInstance.anchorElement = e.target as HTMLElement; } +addons.getChannel().addListener(STORY_RENDERED, (name: string) => { + if (name.toLowerCase().startsWith('tooltip')) { + document.querySelectorAll('fast-button[id^=anchor-anchor-switch]').forEach((el: HTMLElement) => { + el.addEventListener('mouseenter', onAnchorMouseEnter); + }); + + const showButton = document.getElementById('anchor-show') as HTMLElement; + showButton.addEventListener('click', onShowClick); + } +}); + export default { title: 'Tooltip', }; -export const Tooltip = (): string => TooltipTemplate; +export const Tooltip = () => TooltipTemplate; diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts index 93cb3d176522c3..2ba9eccd841cd2 100644 --- a/packages/web-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/src/tooltip/tooltip.styles.ts @@ -17,124 +17,125 @@ import { neutralOutlineRestBehavior, } from '../styles/index'; -export const TooltipStyles = css` - :host { - --elevation: 11; - position: relative; - contain: layout; - overflow: visible; - height: 0; - width: 0; - z-index: 10000; - } +export const tooltipStyles = (context, definition) => + css` + :host { + --elevation: 11; + position: relative; + contain: layout; + overflow: visible; + height: 0; + width: 0; + z-index: 10000; + } - .tooltip { - box-sizing: border-box; - border-radius: calc(var(--corner-radius) * 1px); - border: calc(var(--outline-width) * 1px) solid transparent; - background: ${neutralContrastFillRestBehavior.var}; - color: ${neutralContrastForegroundRestBehavior.var}; - padding: 4px 12px; - height: fit-content; - width: fit-content; - font-family: var(--body-font); - font-size: var(--type-ramp-base-font-size); - line-height: var(--type-ramp-base-line-height); - white-space: nowrap; - ${elevation} - } + .tooltip { + box-sizing: border-box; + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid transparent; + background: ${neutralContrastFillRestBehavior.var}; + color: ${neutralContrastForegroundRestBehavior.var}; + padding: 4px 12px; + height: fit-content; + width: fit-content; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + white-space: nowrap; + ${elevation} + } - fluent-anchored-region { - display: flex; - justify-content: center; - align-items: center; - overflow: visible; - flex-direction: row; - } + fluent-anchored-region { + display: flex; + justify-content: center; + align-items: center; + overflow: visible; + flex-direction: row; + } - fluent-anchored-region.right, - fluent-anchored-region.left { - flex-direction: column; - } + fluent-anchored-region.right, + fluent-anchored-region.left { + flex-direction: column; + } - fluent-anchored-region.top .tooltip::after, - fluent-anchored-region.bottom .tooltip::after, - fluent-anchored-region.left .tooltip::after, - fluent-anchored-region.right .tooltip::after { - content: ''; - width: 12px; - height: 12px; - background: ${neutralForegroundRestBehavior.var}; - border-radius: calc(var(--corner-radius) * 1px); - position: absolute; - } + fluent-anchored-region.top .tooltip::after, + fluent-anchored-region.bottom .tooltip::after, + fluent-anchored-region.left .tooltip::after, + fluent-anchored-region.right .tooltip::after { + content: ''; + width: 12px; + height: 12px; + background: ${neutralForegroundRestBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + position: absolute; + } - fluent-anchored-region.top .tooltip::after { - transform: rotate(45deg) translateX(-50%); - bottom: 4px; - left: 50%; - } + fluent-anchored-region.top .tooltip::after { + transform: rotate(45deg) translateX(-50%); + bottom: 4px; + left: 50%; + } - fluent-anchored-region.top .tooltip { - margin-bottom: 12px; - } + fluent-anchored-region.top .tooltip { + margin-bottom: 12px; + } - fluent-anchored-region.bottom .tooltip::after { - transform: rotate(45deg) translateX(-50%); - top: 12px; - left: 50%; - } + fluent-anchored-region.bottom .tooltip::after { + transform: rotate(45deg) translateX(-50%); + top: 12px; + left: 50%; + } - fluent-anchored-region.bottom .tooltip { - margin-top: 12px; - } + fluent-anchored-region.bottom .tooltip { + margin-top: 12px; + } - fluent-anchored-region.left .tooltip::after { - transform: rotate(45deg) translateY(-50%); - top: 50%; - right: 12px; - } + fluent-anchored-region.left .tooltip::after { + transform: rotate(45deg) translateY(-50%); + top: 50%; + right: 12px; + } - fluent-anchored-region.left .tooltip { - margin-right: 12px; - } + fluent-anchored-region.left .tooltip { + margin-right: 12px; + } - fluent-anchored-region.right .tooltip::after { - transform: rotate(45deg) translateY(-50%); - top: 50%; - left: 4px; - } + fluent-anchored-region.right .tooltip::after { + transform: rotate(45deg) translateY(-50%); + top: 50%; + left: 4px; + } - fluent-anchored-region.right .tooltip { - margin-left: 12px; - } -`.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - neutralContrastFillRestBehavior, - neutralContrastForegroundRestBehavior, - neutralFillHoverBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host([disabled]) { - opacity: 1; - } - fluent-anchored-region.top .tooltip::after, - fluent-anchored-region.bottom .tooltip::after, - fluent-anchored-region.left .tooltip::after, - fluent-anchored-region.right .tooltip::after { - content: ''; - width: unset; - height: unset; - } - `, - ), -); + fluent-anchored-region.right .tooltip { + margin-left: 12px; + } + `.withBehaviors( + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + neutralContrastFillRestBehavior, + neutralContrastForegroundRestBehavior, + neutralFillHoverBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + opacity: 1; + } + fluent-anchored-region.top .tooltip::after, + fluent-anchored-region.bottom .tooltip::after, + fluent-anchored-region.left .tooltip::after, + fluent-anchored-region.right .tooltip::after { + content: ''; + width: unset; + height: unset; + } + `, + ), + ); diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts index d4d908c7e5cf28..a3a10ca3c7cfb4 100644 --- a/packages/web-components/src/tree-item/index.ts +++ b/packages/web-components/src/tree-item/index.ts @@ -1,28 +1,24 @@ -import { customElement } from '@microsoft/fast-element'; -import { TreeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation'; -import { TreeItemStyles as styles } from './tree-item.styles'; +import { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation'; +import { treeItemStyles as styles } from './tree-item.styles'; /** - * The Fluent Tree Item Custom Element. Implements {@link @microsoft/fast-foundation#TreeItem}, - * {@link @microsoft/fast-foundation#TreeItem} + * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem} + * {@link @microsoft/fast-foundation#treeItemTemplate} * * * @public * @remarks * HTML Element: \ + * */ -@customElement({ - name: 'fluent-tree-item', +export const fluentTreeItem = TreeItem.compose({ + baseName: 'tree-item', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTreeItem extends TreeItem {} +}); /** * Styles for TreeItem * @public */ -export const TreeItemStyles = styles; +export const treeItemStyles = styles; diff --git a/packages/web-components/src/tree-item/tree-item.stories.ts b/packages/web-components/src/tree-item/tree-item.stories.ts index 80d54023eca556..4bc512e2412df9 100644 --- a/packages/web-components/src/tree-item/tree-item.stories.ts +++ b/packages/web-components/src/tree-item/tree-item.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import TreeItemTemplate from './fixtures/tree-item.html'; -import { FluentTreeItem } from './'; - -// Prevent tree-shaking -FluentTreeItem; -FluentDesignSystemProvider; +import './index'; export default { - title: 'Tree item', + title: 'Tree Item', }; -export const TreeItem = (): string => TreeItemTemplate; +export const TreeItem = () => TreeItemTemplate; 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 c61731654053b6..d4925ccf4c5ced 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -69,7 +69,8 @@ const selectedExpandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory( FluentDesignSystemProvider.findProvider, ); -export const TreeItemStyles = css` +export const treeItemStyles = (context, definition) => + css` ${display('block')} :host { contain: content; position: relative; @@ -242,20 +243,20 @@ export const TreeItemStyles = css` --expand-collapse-button-nested-width: calc(${heightNumber} * -1px); } `.withBehaviors( - accentForegroundRestBehavior, - expandCollapseHoverBehavior, - neutralFillStealthSelectedBehavior, - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundActiveBehavior, - neutralForegroundRestBehavior, - selectedExpandCollapseHoverBehavior, - new DirectionalStyleSheetBehavior(ltr, rtl), - forcedColorsStylesheetBehavior( - css` + accentForegroundRestBehavior, + expandCollapseHoverBehavior, + neutralFillStealthSelectedBehavior, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundActiveBehavior, + neutralForegroundRestBehavior, + selectedExpandCollapseHoverBehavior, + new DirectionalStyleSheetBehavior(ltr, rtl), + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -322,5 +323,5 @@ export const TreeItemStyles = css` fill: ${SystemColors.FieldText}; } `, - ), -); + ), + ); diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts index 0b292349b91557..7ca6c9aed10297 100644 --- a/packages/web-components/src/tree-view/index.ts +++ b/packages/web-components/src/tree-view/index.ts @@ -1,28 +1,24 @@ -import { customElement } from '@microsoft/fast-element'; -import { TreeViewTemplate as template, TreeView } from '@microsoft/fast-foundation'; -import { TreeViewStyles as styles } from './tree-view.styles'; +import { treeViewTemplate as template, TreeView } from '@microsoft/fast-foundation'; +import { treeViewStyles as styles } from './tree-view.styles'; /** - * The Fluent Tree View Custom Element. Implements {@link @microsoft/fast-foundation#TreeView}, - * {@link @microsoft/fast-foundation#TreeView} + * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView} + * {@link @microsoft/fast-foundation#treeViewTemplate} * * * @public * @remarks * HTML Element: \ + * */ -@customElement({ - name: 'fluent-tree-view', +export const fluentTreeView = TreeView.compose({ + baseName: 'tree-view', template, styles, - shadowOptions: { - mode: 'closed', - }, -}) -export class FluentTreeView extends TreeView {} +}); /** * Styles for TreeView * @public */ -export const TreeViewStyles = styles; +export const treeViewStyles = styles; diff --git a/packages/web-components/src/tree-view/tree-view.stories.ts b/packages/web-components/src/tree-view/tree-view.stories.ts index 46001e08d3e0e8..57fa772e1625b7 100644 --- a/packages/web-components/src/tree-view/tree-view.stories.ts +++ b/packages/web-components/src/tree-view/tree-view.stories.ts @@ -1,13 +1,8 @@ -import { FluentDesignSystemProvider } from '../design-system-provider'; import TreeViewTemplate from './fixtures/tree-view.html'; -import { FluentTreeView } from './'; - -// Prevent tree-shaking -FluentTreeView; -FluentDesignSystemProvider; +import './index'; export default { title: 'Tree View', }; -export const TreeView = (): string => TreeViewTemplate; +export const TreeView = () => TreeViewTemplate; 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 78fb564e0d966f..d4564ea099ab74 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'; -export const TreeViewStyles = css` +export const treeViewStyles = (context, definition) => css` :host([hidden]) { display: none; } diff --git a/yarn.lock b/yarn.lock index 4a0e081940f45a..3ea4006d6b1cf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2569,17 +2569,17 @@ resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.0.tgz#f62ce25a800e6b413d3aa562e8416cdc1ed9131c" integrity sha512-u4R/sfF4SoKSAyDWJaBSDuVo4aGf1BXntlEWukC+1ubH36C6JmmdLSyyip5TQZiTqjQIy3uctcbepPi7oGI0Rw== -"@microsoft/fast-element@^1.0.0", "@microsoft/fast-element@^1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.0.1.tgz#f92755447f84a9c51c049580fa8870567719b8aa" - integrity sha512-fXwaHKRLQzY9n+T88iM+t9lTRupwLACrUTc96yGayfMK1qguxb4let0xnwDWAEQic51U0f/UEb6x1ubxlbPkFQ== +"@microsoft/fast-element@^1.0.0", "@microsoft/fast-element@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.1.0.tgz#13cafbbe42057ca370ac4219942c76613d64ff10" + integrity sha512-ihbxhKpD5U3/wUlT8CkdNQTCzRf+ukyktDipipIC5ZbLZtUa4exyaRvS8kIBKaRZK/M7OCUFaFfo2XdWD/fbpg== -"@microsoft/fast-foundation@^1.16.0": - version "1.16.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.16.1.tgz#82f2c19c973d0e9bb9dd3042688b96d253a74674" - integrity sha512-PViksxU8svDWdFE/j2q0tfeYfdSRvAnadl3lmVSPna5TTSNGblRFcLVfwxZOGf/qH5aMXNJGgbpue//6nf6KgQ== +"@microsoft/fast-foundation@2.0.0-beta.0": + version "2.0.0-beta.0" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0-beta.0.tgz#54ae03191c7e8cc0a88bca5e278cab775b8cbdb9" + integrity sha512-V2r87Oj0jIgGl3YiGPBzyBNAx9AKYsk2kYTfazyg4HlaPH7YM0vekL/yJTZW89aW5aEM4anBLrUssmbw5dMwfw== dependencies: - "@microsoft/fast-element" "^1.0.1" + "@microsoft/fast-element" "^1.1.0" "@microsoft/fast-web-utilities" "^4.7.3" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^4.0.0"