diff --git a/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json b/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json new file mode 100644 index 00000000000000..d3227d820c92bd --- /dev/null +++ b/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add toolbar as new web component", + "packageName": "@fluentui/web-components", + "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 49d164b746bb5c..9c166d30a240d1 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -68,6 +68,7 @@ import { TabPanel } from '@microsoft/fast-foundation'; import { Tabs } from '@microsoft/fast-foundation'; import { TextArea as TextArea_2 } from '@microsoft/fast-foundation'; import { TextField as TextField_2 } from '@microsoft/fast-foundation'; +import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation'; import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation'; import { TreeItem } from '@microsoft/fast-foundation'; import { TreeItemOptions } from '@microsoft/fast-foundation'; @@ -200,6 +201,7 @@ export const allComponents: { fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; + fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; @@ -611,6 +613,11 @@ export const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefi // @public export const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; +// Warning: (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal +// +// @public +export const fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; + // Warning: (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal // // @public @@ -1278,6 +1285,12 @@ export type TextFieldAppearance = 'filled' | 'outline'; // @public export const textFieldStyles: (context: any, definition: any) => ElementStyles; +// Warning: (ae-internal-missing-underscore) The name "Toolbar" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export class Toolbar extends Toolbar_2 { +} + // Warning: (ae-internal-missing-underscore) The name "Tooltip" should be prefixed with an underscore because the declaration is marked as @internal // // @internal @@ -1352,12 +1365,13 @@ export const typeRampPlus6LineHeight: CSSDesignToken; // Warnings were encountered during analysis: // -// dist/dts/custom-elements.d.ts:48:5 - (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal -// dist/dts/custom-elements.d.ts:50:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal -// dist/dts/custom-elements.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal -// dist/dts/custom-elements.d.ts:90:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal -// dist/dts/custom-elements.d.ts:91:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal -// dist/dts/custom-elements.d.ts:92:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal +// dist/dts/custom-elements.d.ts:49:5 - (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal +// dist/dts/custom-elements.d.ts:51:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal +// dist/dts/custom-elements.d.ts:54:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal +// dist/dts/custom-elements.d.ts:91:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal +// dist/dts/custom-elements.d.ts:92:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal +// dist/dts/custom-elements.d.ts:93:5 - (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal +// dist/dts/custom-elements.d.ts:94:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 69c8c1ced67712..03174f89f11cf9 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -92,7 +92,7 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-element": "^1.5.0", - "@microsoft/fast-foundation": "^2.12.0", + "@microsoft/fast-foundation": "^2.13.0", "lodash-es": "^4.17.20", "tslib": "^1.13.0" } diff --git a/packages/web-components/src/custom-elements.ts b/packages/web-components/src/custom-elements.ts index 04173bdedcec2c..319fc6108fd33b 100644 --- a/packages/web-components/src/custom-elements.ts +++ b/packages/web-components/src/custom-elements.ts @@ -34,6 +34,7 @@ import { fluentSwitch } from './switch/index'; import { fluentTab, fluentTabPanel, fluentTabs } from './tabs/index'; import { fluentTextArea } from './text-area/index'; import { fluentTextField } from './text-field/index'; +import { fluentToolbar } from './toolbar/index'; import { fluentTooltip } from './tooltip/index'; import { fluentTreeView } from './tree-view/index'; import { fluentTreeItem } from './tree-item/index'; @@ -77,6 +78,7 @@ export { fluentTabPanel, fluentTextArea, fluentTextField, + fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, @@ -125,6 +127,7 @@ export const allComponents = { fluentTabPanel, fluentTextArea, fluentTextField, + fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 30affaf07ac086..2364944e7fa926 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -35,6 +35,7 @@ export * from './switch/'; export * from './tabs/'; export * from './text-area/'; export * from './text-field/'; +export * from './toolbar'; export * from './tooltip'; export * from './tree-item/'; export * from './tree-view/'; diff --git a/packages/web-components/src/styles/size.ts b/packages/web-components/src/styles/size.ts index f1ff0f15516b06..831091ee244084 100644 --- a/packages/web-components/src/styles/size.ts +++ b/packages/web-components/src/styles/size.ts @@ -5,5 +5,6 @@ import { baseHeightMultiplier, density, designUnit } from '../design-tokens'; * A formula to retrieve the control height. * Use this as the value of any CSS property that * accepts a pixel size. + * @public */ export const heightNumber = cssPartial`(${baseHeightMultiplier} + ${density}) * ${designUnit}`; diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html new file mode 100644 index 00000000000000..26f45494f2e73b --- /dev/null +++ b/packages/web-components/src/toolbar/fixtures/toolbar.html @@ -0,0 +1,238 @@ + + + + + + + + + +

Toolbar

+ +

Default

+ + + + + + + + + + +

Fluent components

+ + Accent Button + Stealth Button + + One + Two + Three + + + Please Please Me + With The Beatles + A Hard Day's Night + Beatles for Sale + Help! + Rubber Soul + Revolver + Sgt. Pepper's Lonely Hearts Club Band + Magical Mystery Tour + The Beatles + Yellow Submarine + Abbey Road + Let It Be + + Button + + Option 1 + Second option + Option 3 + + Checkbox + + + + Add + Open + Copy + Export + Automate + + Stealth + Refresh + 21 items + + Filter + + + + + + +

Dark Mode

+ + + + Add + Open + Copy + Export + Automate + + Stealth + Refresh + 21 items + + Filter + + + + + + + +

Slotted End Items w/ Min Width

+ + + + + Add + Open + Copy + + Refresh + 21 items + + Filter + + + + + + + + +

Toolbar with slotted span label

+ + Span Label + + + + + +

Toolbar with external label

+ + + + + + + +

Toolbar with invisible label

+ + + + + + +

Vertical orientation

+ + Span Label + + + + + +

Disabled Elements

+ + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + Span Label + One + Two + Three + + + + One + Two + Three + + +

RTL Mode

+ + One + Two + Three + + + + One + Two + Three + + +

Start/End Slots

+ + + + + + + + + diff --git a/packages/web-components/src/toolbar/index.ts b/packages/web-components/src/toolbar/index.ts new file mode 100644 index 00000000000000..e2cfe1f00857d5 --- /dev/null +++ b/packages/web-components/src/toolbar/index.ts @@ -0,0 +1,23 @@ +import { Toolbar as FoundationToolbar, toolbarTemplate as template } from '@microsoft/fast-foundation'; +import { toolbarStyles as styles } from './toolbar.styles'; + +/** + * The Fluent toolbar class + * @internal + */ +export class Toolbar extends FoundationToolbar {} + +/** + * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar}, + * {@link @microsoft/fast-foundation#toolbarTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const fluentToolbar = Toolbar.compose({ + baseName: 'toolbar', + template, + styles, +}); diff --git a/packages/web-components/src/toolbar/toolbar.stories.ts b/packages/web-components/src/toolbar/toolbar.stories.ts new file mode 100644 index 00000000000000..6ccbc2186ca715 --- /dev/null +++ b/packages/web-components/src/toolbar/toolbar.stories.ts @@ -0,0 +1,11 @@ +import './index'; +import '../button'; +import '../select'; +import '../badge'; +import ToolbarTemplate from './fixtures/toolbar.html'; + +export default { + title: 'Toolbar', +}; + +export const Toolbar = () => ToolbarTemplate; diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts new file mode 100644 index 00000000000000..48acb6c3862d86 --- /dev/null +++ b/packages/web-components/src/toolbar/toolbar.styles.ts @@ -0,0 +1,96 @@ +import { css, ElementStyles } from '@microsoft/fast-element'; +import { + display, + ElementDefinitionContext, + focusVisible, + forcedColorsStylesheetBehavior, + FoundationElementDefinition, +} from '@microsoft/fast-foundation'; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + designUnit, + fillColor, + focusStrokeWidth, + neutralStrokeFocus, + strokeWidth, +} from '../design-tokens'; + +export const toolbarStyles: ( + context: ElementDefinitionContext, + definition: FoundationElementDefinition +) => ElementStyles = ( + context: ElementDefinitionContext, + definition: FoundationElementDefinition +) => + css` + ${display("inline-flex")} :host { + --toolbar-item-gap: calc(${designUnit} * 1px); + background: ${fillColor}; + fill: currentcolor; + padding: var(--toolbar-item-gap); + box-sizing: border-box; + align-items: center; + } + + :host(${focusVisible}) { + outline: calc(${strokeWidth} * 1px) solid ${neutralStrokeFocus}; + } + + .positioning-region { + align-items: center; + display: inline-flex; + flex-flow: row wrap; + justify-content: flex-start; + flex-grow: 1; + } + + :host([orientation="vertical"]) .positioning-region { + flex-direction: column; + align-items: start; + } + + ::slotted(:not([slot])) { + flex: 0 0 auto; + margin: 0 var(--toolbar-item-gap); + } + + :host([orientation="vertical"]) ::slotted(:not([slot])) { + margin: var(--toolbar-item-gap) 0; + } + + :host([orientation="vertical"]) { + display: inline-flex; + flex-direction: column; + } + + .start, + .end { + display: flex; + align-items: center; + } + + .end { + margin-inline-start: auto; + } + + .start__hidden, + .end__hidden { + display: none; + } + + ::slotted(svg) { + ${/* Glyph size is temporary - replace when adaptive typography is figured out */ ""} + width: 16px; + height: 16px; + } + `.withBehaviors( + forcedColorsStylesheetBehavior( + css` + :host(:${focusVisible}) { + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight}; + color: ${SystemColors.ButtonText}; + forced-color-adjust: none; + } + ` + ) + ); diff --git a/packages/web-components/src/toolbar/toolbar.vscode.definition.json b/packages/web-components/src/toolbar/toolbar.vscode.definition.json new file mode 100644 index 00000000000000..9e5fb991e3be30 --- /dev/null +++ b/packages/web-components/src/toolbar/toolbar.vscode.definition.json @@ -0,0 +1,43 @@ +{ + "version": 1.1, + "tags": [ + { + "name": "fluent-toolbar", + "title": "Toolbar", + "description": "The Fluent toolbar element", + "attributes": [ + { + "name": "orientation", + "title": "Orientation", + "description": "The orientation of the toolbar", + "default": "horizontal", + "values": [{ "name": "horizontal" }, { "name": "vertical" }], + "required": false, + "type": "string" + } + ], + "slots": [ + { + "name": "", + "title": "Default slot", + "description": "The toolbar content" + }, + { + "name": "label", + "title": "Label slot", + "description": "The visual label for the toolbar" + }, + { + "name": "start", + "title": "Start slot", + "description": "Contents of the start slot are positioned before the contents of the toolbar" + }, + { + "name": "end", + "title": "End slot", + "description": "Contents of the end slot are positioned after the contents of the toolbar" + } + ] + } + ] +} diff --git a/yarn.lock b/yarn.lock index 7322b2b4cce42e..17cc6c53afb494 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2660,21 +2660,21 @@ resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.5.1.tgz#a4e98da1ac0873568360d69dfcf0e4fcc46a374c" integrity sha512-2wv3svn2fJqT84PrchSNjRjCJ2z74tuzoo7odACouuQaLXuJckv1XexXWUj5INKY6/LB/rN/bJMYauX33JgOZA== -"@microsoft/fast-foundation@^2.12.0": - version "2.12.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.12.0.tgz#d21599531fcda1df83ea37b118f40fdaa547f726" - integrity sha512-cgK8JGpVI4HyH94ddUdHwypg9kdeL/CP42VuxNWydTb2zoZiNsINyx/b/r7KRf8z9KvTH596JeBcS8WJlUGuBw== +"@microsoft/fast-foundation@^2.13.0": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.13.1.tgz#d99fcb54fa1c6c5ba6d841f8e2bc9a3e26259d88" + integrity sha512-fKDftqgCmcKXYKtRTqYGyLihaWahW62ygk/1Ga46hTNyW3Wf1nI1Gsqosv+usg7KY1otkjarM1Q+5+HViP00WQ== dependencies: "@microsoft/fast-element" "^1.5.1" - "@microsoft/fast-web-utilities" "^4.8.0" + "@microsoft/fast-web-utilities" "^4.8.1" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^5.2.0" tslib "^1.13.0" -"@microsoft/fast-web-utilities@^4.8.0": - version "4.8.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.0.tgz#a27f755669027071d8886fbe89ceaae4e69e203a" - integrity sha512-+MroMIP5yGD8mqbegqSZoIbQVjvmsQRQtn87Gc8TJk00KIfRu2x9sFAq8q5m8H61sjCRHreJ0Bq5telz09h55g== +"@microsoft/fast-web-utilities@^4.8.1": + version "4.8.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz#c10906711dfaf885b1d9d3d206fb102cf721c84d" + integrity sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA== dependencies: exenv-es6 "^1.0.0"