From 99a949bbc5eef05ab5c559daa25563951b4ca7e6 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Wed, 21 Jul 2021 16:07:37 -0700 Subject: [PATCH 1/9] add toolbar --- packages/web-components/docs/api-report.md | 15 ++ .../web-components/src/custom-elements.ts | 3 + packages/web-components/src/index.ts | 1 + .../src/toolbar/fixtures/toolbar.html | 226 ++++++++++++++++++ packages/web-components/src/toolbar/index.ts | 23 ++ .../src/toolbar/toolbar.stories.ts | 11 + .../src/toolbar/toolbar.styles.ts | 98 ++++++++ .../toolbar/toolbar.vscode.definition.json | 56 +++++ 8 files changed, 433 insertions(+) create mode 100644 packages/web-components/src/toolbar/fixtures/toolbar.html create mode 100644 packages/web-components/src/toolbar/index.ts create mode 100644 packages/web-components/src/toolbar/toolbar.stories.ts create mode 100644 packages/web-components/src/toolbar/toolbar.styles.ts create mode 100644 packages/web-components/src/toolbar/toolbar.vscode.definition.json diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 49d164b746bb5c..5180e504e1e6f6 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,14 @@ 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 { + // (undocumented) + connectedCallback(): void; +} + // Warning: (ae-internal-missing-underscore) The name "Tooltip" should be prefixed with an underscore because the declaration is marked as @internal // // @internal 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/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html new file mode 100644 index 00000000000000..b14105d6410753 --- /dev/null +++ b/packages/web-components/src/toolbar/fixtures/toolbar.html @@ -0,0 +1,226 @@ + + + + + + + + +

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 label

+ + + + + + + +

Toolbar with external label

+ + + + + + + +

Toolbar with invisible label

+ + + + + + +

Vertical orientation

+ + + + + + +

Disabled Elements

+ + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + One + Two + Three + + + + 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..25e37d3fc5f28c --- /dev/null +++ b/packages/web-components/src/toolbar/toolbar.styles.ts @@ -0,0 +1,98 @@ +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 { + fillColor, + focusStrokeWidth, + neutralStrokeDividerRest, + 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( + (var(--design-unit) + calc(var(--density) + 2)) * 1px + ); + background: ${fillColor}; + fill: currentcolor; + padding: var(--toolbar-item-gap); + border-bottom: 1px solid ${neutralStrokeDividerRest}; + box-sizing: border-box; + } + + :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"]) { + border-inline-end: 1px solid ${neutralStrokeDividerRest}; + border-bottom: none; + } + + :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; + } + + .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..380236b60d5b27 --- /dev/null +++ b/packages/web-components/src/toolbar/toolbar.vscode.definition.json @@ -0,0 +1,56 @@ +{ + "version": 1.1, + "tags": [ + { + "name": "fluent-toolbar", + "title": "Toolbar", + "description": "The Fluent UI toolbar element", + "attributes": [ + { + "name": "visible", + "title": "Visible", + "description": "Sets whether the toolbar is visible or not", + "type": "boolean", + "required": false + }, + { + "name": "anchor", + "title": "Anchor ID", + "description": "The HTML ID of the element the toolbar is positioned relative to", + "type": "string", + "required": false + }, + { + "name": "delay", + "title": "Delay", + "description": "The delay in milliseconds before a toolbar is shown after a hover event", + "type": "number", + "default": 300, + "required": false + }, + { + "name": "position", + "title": "Position", + "description": "Controls the placement of the toolbar relative to the configured 'Anchor ID'", + "values": [ + { "name": "top" }, + { "name": "right" }, + { "name": "bottom" }, + { "name": "left" }, + { "name": "start" }, + { "name": "end" } + ], + "type": "string", + "required": false + } + ], + "slots": [ + { + "name": "", + "title": "Default slot", + "description": "The toolbar content" + } + ] + } + ] +} From 5442511da6c3a2bf23c5a3b75d2339ab8e6a90b3 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 27 Jul 2021 10:27:14 -0700 Subject: [PATCH 2/9] Change files --- ...eb-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json 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..9341076569cb13 --- /dev/null +++ b/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add toolbar", + "packageName": "@fluentui/web-components", + "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com", + "dependentChangeType": "patch" +} From 1a1c72521963f02871199df509803bc4cad6c299 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 27 Jul 2021 12:21:47 -0700 Subject: [PATCH 3/9] update docs --- packages/web-components/docs/api-report.md | 15 +++++++-------- packages/web-components/src/styles/size.ts | 1 + 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 5180e504e1e6f6..9c166d30a240d1 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1289,8 +1289,6 @@ export const textFieldStyles: (context: any, definition: any) => ElementStyles; // // @internal export class Toolbar extends Toolbar_2 { - // (undocumented) - connectedCallback(): void; } // Warning: (ae-internal-missing-underscore) The name "Tooltip" should be prefixed with an underscore because the declaration is marked as @internal @@ -1367,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/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}`; From a5074266dd8f6adab0d349595c3b38fc919e3f65 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 27 Jul 2021 12:28:05 -0700 Subject: [PATCH 4/9] update definition file --- .../toolbar/toolbar.vscode.definition.json | 59 ++++++++----------- 1 file changed, 23 insertions(+), 36 deletions(-) diff --git a/packages/web-components/src/toolbar/toolbar.vscode.definition.json b/packages/web-components/src/toolbar/toolbar.vscode.definition.json index 380236b60d5b27..9e5fb991e3be30 100644 --- a/packages/web-components/src/toolbar/toolbar.vscode.definition.json +++ b/packages/web-components/src/toolbar/toolbar.vscode.definition.json @@ -4,44 +4,16 @@ { "name": "fluent-toolbar", "title": "Toolbar", - "description": "The Fluent UI toolbar element", + "description": "The Fluent toolbar element", "attributes": [ { - "name": "visible", - "title": "Visible", - "description": "Sets whether the toolbar is visible or not", - "type": "boolean", - "required": false - }, - { - "name": "anchor", - "title": "Anchor ID", - "description": "The HTML ID of the element the toolbar is positioned relative to", - "type": "string", - "required": false - }, - { - "name": "delay", - "title": "Delay", - "description": "The delay in milliseconds before a toolbar is shown after a hover event", - "type": "number", - "default": 300, - "required": false - }, - { - "name": "position", - "title": "Position", - "description": "Controls the placement of the toolbar relative to the configured 'Anchor ID'", - "values": [ - { "name": "top" }, - { "name": "right" }, - { "name": "bottom" }, - { "name": "left" }, - { "name": "start" }, - { "name": "end" } - ], - "type": "string", - "required": false + "name": "orientation", + "title": "Orientation", + "description": "The orientation of the toolbar", + "default": "horizontal", + "values": [{ "name": "horizontal" }, { "name": "vertical" }], + "required": false, + "type": "string" } ], "slots": [ @@ -49,6 +21,21 @@ "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" } ] } From d4abd7092f5c82cfc611d316457614323c93ac1d Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 27 Jul 2021 13:24:55 -0700 Subject: [PATCH 5/9] update styles on examples --- packages/web-components/src/toolbar/fixtures/toolbar.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html index b14105d6410753..fd9f2dd75a1348 100644 --- a/packages/web-components/src/toolbar/fixtures/toolbar.html +++ b/packages/web-components/src/toolbar/fixtures/toolbar.html @@ -7,6 +7,11 @@ +

Toolbar

From 69e110d2f21dd45be83b27ed347fbf33e4914ccf Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Wed, 18 Aug 2021 14:18:01 -0700 Subject: [PATCH 6/9] remove border, update padding to designUnit only --- .../web-components/src/toolbar/toolbar.styles.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts index 25e37d3fc5f28c..d38db7282e942a 100644 --- a/packages/web-components/src/toolbar/toolbar.styles.ts +++ b/packages/web-components/src/toolbar/toolbar.styles.ts @@ -8,9 +8,9 @@ import { } from '@microsoft/fast-foundation'; import { SystemColors } from "@microsoft/fast-web-utilities"; import { + designUnit, fillColor, focusStrokeWidth, - neutralStrokeDividerRest, neutralStrokeFocus, strokeWidth, } from '../design-tokens'; @@ -24,13 +24,10 @@ export const toolbarStyles: ( ) => css` ${display("inline-flex")} :host { - --toolbar-item-gap: calc( - (var(--design-unit) + calc(var(--density) + 2)) * 1px - ); + --toolbar-item-gap: calc(${designUnit} * 1px); background: ${fillColor}; fill: currentcolor; padding: var(--toolbar-item-gap); - border-bottom: 1px solid ${neutralStrokeDividerRest}; box-sizing: border-box; } @@ -46,11 +43,6 @@ export const toolbarStyles: ( flex-grow: 1; } - :host([orientation="vertical"]) { - border-inline-end: 1px solid ${neutralStrokeDividerRest}; - border-bottom: none; - } - :host([orientation="vertical"]) .positioning-region { flex-direction: column; align-items: start; From ec045bdb5e6a0d939687970be50f5a79618ceec1 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Thu, 19 Aug 2021 09:50:43 -0700 Subject: [PATCH 7/9] label alignment style updates --- .../src/toolbar/fixtures/toolbar.html | 13 ++++++++++--- .../web-components/src/toolbar/toolbar.styles.ts | 6 ++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html index fd9f2dd75a1348..26f45494f2e73b 100644 --- a/packages/web-components/src/toolbar/fixtures/toolbar.html +++ b/packages/web-components/src/toolbar/fixtures/toolbar.html @@ -9,7 +9,12 @@ @@ -133,9 +138,9 @@

Slotted End Items w/ Min Width

-

Toolbar with slotted label

+

Toolbar with slotted span label

- + Span Label @@ -158,6 +163,7 @@

Toolbar with invisible label

Vertical orientation

+ Span Label @@ -195,6 +201,7 @@

Disabled Elements

 + Span Label One Two Three diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts index d38db7282e942a..48acb6c3862d86 100644 --- a/packages/web-components/src/toolbar/toolbar.styles.ts +++ b/packages/web-components/src/toolbar/toolbar.styles.ts @@ -29,6 +29,7 @@ export const toolbarStyles: ( fill: currentcolor; padding: var(--toolbar-item-gap); box-sizing: border-box; + align-items: center; } :host(${focusVisible}) { @@ -57,6 +58,11 @@ export const toolbarStyles: ( margin: var(--toolbar-item-gap) 0; } + :host([orientation="vertical"]) { + display: inline-flex; + flex-direction: column; + } + .start, .end { display: flex; From 7bd9712bab57429bc39541f60b55325f20ef51a1 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 14 Sep 2021 10:51:00 -0700 Subject: [PATCH 8/9] update foundation package and change file --- ...tui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json | 2 +- packages/web-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json b/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json index 9341076569cb13..d3227d820c92bd 100644 --- a/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json +++ b/change/@fluentui-web-components-befdf28c-0bd2-48cc-8075-55b3684202e2.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "add toolbar", + "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/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" } From 1c3cf5057399afbe7bca175c74f980ca4d2fabd2 Mon Sep 17 00:00:00 2001 From: Seth Donohue Date: Tue, 14 Sep 2021 11:14:47 -0700 Subject: [PATCH 9/9] update yarn lock --- yarn.lock | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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"