profile
viewpoint
Rob Eisenberg EisenbergEffect @Microsoft http://www.robeisenberg.com Principal UX Architecture and Tools Lead @microsoft.

WICG/open-ui 790

Maintain an open standard for UI and promote its adherence and adoption.

jspm/registry 222

The jspm registry and package.json override service

aurelia/template-lint 58

Sanity check of Aurelia-flavor template HTML

EisenbergEffect/aurelia-composition-demo 17

A demo application showing various kinds of UI composition in Aurelia.

aurelia/new 16

The Aurelia 2 scaffolding repo used by our tools to setup new projects.

aurelia/site-generator 12

The static site generator for http://aurelia.io.

EisenbergEffect/yet-another-decorators-proposal 7

Exploring a macro-like syntax for JavaScript Decorators.

EisenbergEffect/hello-web-components 2

A simple web components tutorial to introduce you to the basics of the platform.

EisenbergEffect/open-wc 0

Open Web Components: guides, tools and libraries for modern web development and web components

issue commentmicrosoft/fast

[Proposal] Provider DSL

Dropping a note here that we want to see if we can lazily create a design system if one doesn't exist. The obvious problem is that in order to do that...we need to statically link everything into the lazy initialization code, which will prevent tree shaking. My thinking is that we have a function that is exported that does this. That could then be called in the single file script build or by a partner that wants to bundle things up.

Another note is that we want to enable customization of the element prefix even when a single file build is used. We could enable this with a data- on the script tag itself. For example:

<script type="module" src="..." data-prefix="fast"></script>
EisenbergEffect

comment created time in 2 hours

push eventmicrosoft/fast

Rob Eisenberg

commit sha 2e730885a485febfbc2b993040f039ef4b85b4ec

feat(fast-element): move template instance timing and enable dynamic templates and styles (#3621) * feat(fast-element): rework template create timing and improve definition * fix(fast-element): decorator typing issue * feat(fast-element): enable dynamic changing of a component's template * feat(fast-element): enable dynamic changing of primary styles * refactor(fast-element): param rename and docs update for template create * fix(fast-element): remove unnecessary null check in volatile decorator * test(fast-element): add controller connect tests * test(fast-element): controller after connect dynamic template/style * docs(fast-element): documenting new templating and styling features * fix(fast-element): revert prettier formatting * docs(fast-element): added some internal code docs * perf(fast-element): standardize on efficient child node removal Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

view details

push time in 6 hours

delete branch microsoft/fast

delete branch : users/eisenbergeffect/rework-template-create-timing

delete time in 6 hours

PR merged microsoft/fast

feat(fast-element): move template instance timing and enable dynamic templates and styles

Description

This PR moves the timing of the FASTElement template instantiation out of the constructor and into the connected callback. Additionally, new hooks for dynamic template and style selection have been added as well as the capability to hot swap templates and styles at any point for any FASTElement.

Motivation & context

This PR covers the work in the fast-element phase of #3361 by moving the template creation timing to the connected callback and introducing the resolveTemplate() and resolveStyles() hooks. Additionally, template and styles properties have been added to Controller so that the template and base styles for any FASTElement can be changed at any time. This enables the implementation of FoundationElement as called out in #3361 as well as scenarios around a future router web component, and more dynamic or conditional element rendering. Furthermore, the timing change helps ensure that elements are properly defined time-wise in more complex scenarios, addressing some bugs our partners have been seeing.

While working on this change, some additional refactoring was done around element definitions, in the attempt to consolidate logic and create a better API. A few new APIs were made public or improved on templates and views, as needed for the functionality of dynamic templates and styles.

In addition to these changes, Controller tests have been added to validate its correct function during construction, connection, and operation. Documentation has been updated and extended in several places to help bring further clarity around the lifecycle and new capabilities.

Reviewer Request: I would very much appreciate someone reviewing the fast-components via Storybook to ensure that no unexpected behavior has been introduced as a result of this change.

Issue type checklist

  • [ ] Chore: A change that does not impact distributed packages.
  • [ ] Bug fix: A change that fixes an issue, link to the issue above.
  • [x] New feature: A change that adds functionality.

While this doesn't appear to cause current functionality to break, it's possible that there are some unknown side-effects of the timing change. Additionally, some low-level APIs in fast-element have changes during the refactor. This is not likely to affect anyone though.

Process & policy checklist

  • [x] I have added tests for my changes.
  • [x] I have tested my changes.
  • [x] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+713 -209

0 comment

15 changed files

EisenbergEffect

pr closed time in 6 hours

push eventmicrosoft/fast

Aaron Wentzel

commit sha 78573c2a893021c0b865be29d8240382f06648fe

chore: update to remove legal and profanity concerns (#3626) * update to remove legal and profanity concerns * Revert "update to remove legal and profanity concerns" This reverts commit 645498a0227dd28650c30a5ff8fde9c2f73290ab.

view details

Rob Eisenberg

commit sha 686cde2acff88b031922d6b6eef258c2e3772f1b

Merge branch 'master' into users/eisenbergeffect/rework-template-create-timing

view details

push time in 6 hours

Pull request review commentmicrosoft/fast

feat(fast-element): move template instance timing and enable dynamic templates and styles

 export class Controller extends PropertyChangeNotifier {         return false;     } +    private finishInitialization() {+        const element = this.element;+        const boundObservables = this.boundObservables;++        // If we have any observables that were bound, re-apply their values.+        if (boundObservables !== null) {+            const propertyNames = Object.keys(boundObservables);++            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {+                const propertyName = propertyNames[i];+                (element as any)[propertyName] = boundObservables[propertyName];+            }++            this.boundObservables = null;+        }++        const definition = this.definition;++        // 1. Template overrides take top precedence.+        if (this._template === null) {+            if ((this.element as any).resolveTemplate) {+                // 2. Allow for element instance overrides next.+                this._template = (this.element as any).resolveTemplate();+            } else if (definition.template) {+                // 3. Default to the static definition.+                this._template = definition.template || null;+            }+        }++        // If we have a template after the above process, render it.+        // If there's no template, then the element author has opted into+        // custom rendering and they will managed the shadow root's content themselves.+        if (this._template !== null) {+            this.renderTemplate(this._template);+        }++        // 1. Styles overrides take top precedence.+        if (this._styles === null) {+            if ((this.element as any).resolveStyles) {+                // 2. Allow for element instance overrides next.+                this._styles = (this.element as any).resolveStyles();+            } else if (definition.styles) {+                // 3. Default to the static definition.+                this._styles = definition.styles || null;+            }+        }++        // If we have styles after the above process, add them.+        if (this._styles !== null) {+            this.addStyles(this._styles);+        }++        this.needsInitialization = false;+    }++    private renderTemplate(template: ElementViewTemplate | null | undefined) {+        const element = this.element;+        // When getting the host to render to, we start by looking+        // up the shadow root. If there isn't one, then that means+        // we're doing a Light DOM render to the element's direct children.+        const host = getShadowRoot(element) || element;++        if (this.view !== null) {+            // If there's already a view, we need to unbind and remove through dispose.+            this.view.dispose();+            (this as Mutable<this>).view = null;+        } else if (!this.needsInitialization) {+            // If there was previous custom rendering, we need to clear out the host.+            host.innerHTML = "";

Added a utility to do this and then refactored. Thanks!

EisenbergEffect

comment created time in 6 hours

push eventmicrosoft/fast

Rob Eisenberg

commit sha 077a0f3c9ad412aaef18a7f1e60f4784b110e814

perf(fast-element): standardize on efficient child node removal

view details

push time in 6 hours

push eventmicrosoft/fast

Chris Holt

commit sha ca8ac760cdf666fc79a47ba9a21c5f964556dbab

fix: move text field and text area appearances from foundation to components (#3540) * feat: move text field and text area appearances from foundation to components * update definition files * update definitions * mark appearance changed to internal

view details

Chris Holt

commit sha 6d194d4d9130816413cb7081e653de69fbe4397a

Publish - @microsoft/fast-figma-plugin-msft@0.7.1 - @microsoft/fast-tooling-react@2.3.1 - @microsoft/fast-components-msft@1.6.0 - @microsoft/fast-components@1.6.0 - @microsoft/fast-element@0.15.1 - @microsoft/fast-foundation@1.5.0 - @microsoft/fast-color-explorer@1.6.1 - @microsoft/fast-component-explorer@0.11.1 - @microsoft/fast-creator@0.2.1 - @microsoft/fast-tooling-examples@0.4.1 - fast-website@1.2.1 - @microsoft/site-utilities@0.4.1

view details

Jane Chu

commit sha 74fad2d4cb23e345a94f3debee093891a5ceb685

feat: add permutator that can permutate over the number type (#3537)

view details

Atanas Keranov

commit sha 4b499189a9b77bc0a3f459f94a3b1c59049d9813

docs: correct minor typo Fix a small typo "filed->field" in defining-elements.md

view details

Kham Udom

commit sha b4ac369e37ba591a5bb1d8c7bcbfde6dffcadeef

feat: create an observable function to support aria-valuetext on slider component (#3508) <!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. --> # Description Added `valueTextFormatter` to use on `aria-valuetext`. To smoke branch. Run fast-component(or fast-component-msft) Enable screen reader If there is a value unit on the slider example, the screen reader will read it out. ## Motivation & context feature-request #3504 ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [ ] **Bug fix**: A change that fixes an issue, link to the issue above. - [x] **New feature**: A change that adds functionality. **Is this a breaking change?** - [ ] This change causes current functionality to break. <!--- If yes, describe the impact. --> **Adding or modifying component(s) in `@microsoft/fast-components` checklist** <!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: --> - [ ] I have added a new component - [ ] I have modified an existing component - [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition) - [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration) ## Process & policy checklist <!--- Review the list and check the boxes that apply. --> - [ ] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/en/contributing/standards) for this project. <!--- Formatting guidelines: Accepted peer review title format: <type>: <description> Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius <type> is required to be one of the following: - chore: A change that does not impact distributed packages. - fix: A change which fixes an issue. - feat: A that adds functionality. <description> is required for the CHANGELOG and speaks to what the user gets from this PR: - Be concise. - Use all lowercase characters. - Use imperative, present tense (e.g. `add` not `adds`.) - Do not end your description with a period. - Avoid redundant words. For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

view details

Jane Chu

commit sha dbddc23cb12679792a371cf15eef3269cadcc036

perf: fix performance in creator occuring from attaching load listeners (#3554) <!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. --> # Description <!--- Describe your changes. --> This fixes a performance issue in the Creator site which was occurring due to too many listeners being attached and removed on ever DOM update. The load listener was causing the most trouble so this was taken out and placed in the parent component so that it is only assigned a single time. ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [x] **Bug fix**: A change that fixes an issue, link to the issue above. - [ ] **New feature**: A change that adds functionality. **Is this a breaking change?** - [ ] This change causes current functionality to break. <!--- If yes, describe the impact. --> **Adding or modifying component(s) in `@microsoft/fast-components` checklist** <!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: --> - [ ] I have added a new component - [ ] I have modified an existing component - [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition) - [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration) ## Process & policy checklist <!--- Review the list and check the boxes that apply. --> - [ ] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/en/contributing/standards) for this project. <!--- Formatting guidelines: Accepted peer review title format: <type>: <description> Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius <type> is required to be one of the following: - chore: A change that does not impact distributed packages. - fix: A change which fixes an issue. - feat: A that adds functionality. <description> is required for the CHANGELOG and speaks to what the user gets from this PR: - Be concise. - Use all lowercase characters. - Use imperative, present tense (e.g. `add` not `adds`.) - Do not end your description with a period. - Avoid redundant words. For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

view details

Nicholas Rice

commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90

chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

view details

Nicholas Rice

commit sha 74c19af79cb6b9c015ab3a454a3e69d453f1a217

feat: adding directional stylesheet behavior (#3559) * adding directional stylesheet behavior * fixing documentation * Update packages/web-components/fast-components/docs/design/localization.md Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com> * align imports and doc links Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com> Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

view details

Jazib Jafri

commit sha 687821bf912e8d182ec1aaf58412f3b2929dc702

chore: correct issues label url (#3572) * Fix good-first-issues link to github * Update missed github issues url Co-authored-by: Chris Holt <chhol@microsoft.com> Co-authored-by: Nicholas Rice <nicholas.rice119@gmail.com>

view details

Jazib Jafri

commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec

chore: fix typo in contributing.md (#3573) Co-authored-by: Nicholas Rice <nicholas.rice119@gmail.com>

view details

Jazib Jafri

commit sha f3e61d467e058454263e288866ba2cac3387ea28

chore: update codeowners use absolute urll (#3577) Co-authored-by: Aaron Wentzel <16669785+awentzel@users.noreply.github.com> Co-authored-by: Nicholas Rice <nicholas.rice119@gmail.com>

view details

Jane Chu

commit sha 862904104393fc1c2212d345f7063e8f420e2b36

feat: add data utilities to retrieve linked data from a data dictionary and ids of linked data items (#3583) <!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. --> # Description <!--- Describe your changes. --> Adds two new utilities: - `getLinkedData` which converts data dictionary items to linked data items - `getLinkedDataList` which returns all dictionary ids that are linked data items for a given dictionary item ## Motivation & context <!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> These utilities will assist the `Navigation` component in `@microsoft/fast-tooling-react` packages drag and drop functionality by allowing deep nested drag and drop. ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [x] **Bug fix**: A change that fixes an issue, link to the issue above. - [ ] **New feature**: A change that adds functionality. **Is this a breaking change?** - [ ] This change causes current functionality to break. <!--- If yes, describe the impact. --> **Adding or modifying component(s) in `@microsoft/fast-components` checklist** <!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: --> - [ ] I have added a new component - [ ] I have modified an existing component - [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition) - [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration) ## Process & policy checklist <!--- Review the list and check the boxes that apply. --> - [x] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/en/contributing/standards) for this project. <!--- Formatting guidelines: Accepted peer review title format: <type>: <description> Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius <type> is required to be one of the following: - chore: A change that does not impact distributed packages. - fix: A change which fixes an issue. - feat: A that adds functionality. <description> is required for the CHANGELOG and speaks to what the user gets from this PR: - Be concise. - Use all lowercase characters. - Use imperative, present tense (e.g. `add` not `adds`.) - Do not end your description with a period. - Avoid redundant words. For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

view details

Chris Holt

commit sha a8119f487f86dcf9c1f14e5ec2d14d9d362e1132

chore: remove fast-components-msft from the FAST repository (#3553)

view details

Jane Chu

commit sha f2a39489015be38f2372060a7898b0ef1cf96702

fix: the Navigation component can now drag and drop nested component (#3598)

view details

Jane Chu

commit sha f70ff9975a801cf8a9863d6a79fc61e62fbd4477

fix: remove an extra set of quotes in CSS template (#3594)

view details

Aaron Wentzel

commit sha bdf75aa618b47bf291d8d6782e94a605b8792c45

chore: add dependency as used in defintion files (#3586) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Nicholas Rice

commit sha ccba229c6c1133485d0fac92eae88cb3a6369495

fix: various fixes for form-associated custom elements (#3581) * ensure value property behaves correctly * adding additional test * correct event emission * cleanup * update value set on internal control Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com> Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha 1667eb44b9f21238602948027a71840448eca275

chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Mark Jones

commit sha ad6e0e91571f716854c2c2f1099460e99bc8528f

fix: fixed error in slider story causing issue in slider-label story (#3600) * fixed error in slider story causing issue in slider-label story

view details

push time in 7 hours

delete branch EisenbergEffect/open-wc

delete branch : patch-1

delete time in 7 hours

PR opened open-wc/open-wc

docs(components-libraries): remove extra tab

An extra tab in the source file causes the FAST library list item to be indented and rendered as a sub-bullet.

+1 -1

0 comment

1 changed file

pr created time in 8 hours

push eventEisenbergEffect/open-wc

Rob Eisenberg

commit sha 8f3dde884d959a8ebe723871fbfb86c9620a9bbf

docs(components-libraries): remove extra tab

view details

push time in 8 hours

fork EisenbergEffect/open-wc

Open Web Components: guides, tools and libraries for modern web development and web components

https://open-wc.org/

fork in 8 hours

Pull request review commentmicrosoft/fast

chore: update documentation to reflect rebranding of fast-components-msft to fluentui

 This package does not export Web Components registered as [custom elements](http [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components) -`fast-components` is a library of Web Components that *composes* the exports of `fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](http://fast.design/components/getting-started) to get started using the components.+`@microsoft/fast-components` is a library of Web Components that *composes* the exports of `@microsoft/fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](http://fast.design/components/getting-started) to get started using the components.  ### fast-components-msft-**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/)**+**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/) and has been renamed to `@fluentui/web-components`** [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft) -`fast-components-msft` is a library of Web Components that *composes* `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.+`@fluentui/web-components` is a library of Web Components that *composes* `@microsoft/fast-foundation`. `@fluentui/web-components` uses the same custom element names as `@microsoft/fast-components`, but makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.

Probably should reword this a bit so we don't say "uses the same custom element names". Maybe we can say "is compatible with". Need to change here and the other two places with similar content as well.

chrisdholt

comment created time in a day

Pull request review commentmicrosoft/fast

chore: update documentation to reflect rebranding of fast-components-msft to fluentui

 sidebar_label: anchor custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/anchor/README.md --- -`fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The `fast-components` and `fast-components-msft` components support the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.+`fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The `fast-components anchor supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.

Looks like the ` is missing.

chrisdholt

comment created time in a day

pull request commentmicrosoft/fast

feat: add select spec

Awesome. I hadn't had a chance to review yet but just wanted to double check that at the start.

eljefe223

comment created time in a day

pull request commentmicrosoft/fluentui

feat(web-components): update package name to align with @fluentui and update component namespace

Some follow-up notes for reviewers based on a conversation that @chrisdholt and I had.

We're changing the element names to align with fluent branding and also to prevent a potential breaking change to default names in the future. Once we implement the new provider design outlined here we'll be able to give control over the prefix to end users. So, if someone was using @microsoft/fast-components and wanted to switch to @fluentui/web-components they could configure a prefix and not have to change any of their HTML. We also believe we can enable this through a single script file build, which might look like this when used:

<script type="module" src="..." data-prefix="fast"></script>
<script type="module" src="..." data-prefix="fluent"></script>
<script type="module" src="..." data-prefix="material"></script>
<script type="module" src="..." data-prefix="ui"></script>
...

The single file script build would set up a default provider configuration, checking its own script tag to see if a prefix was configured for the provider.

Additionally, based on some conversations with Graph, we'll be looking into whether the new provider model could support lazily creating a provider if one is not defined. In this case, the prefix would default to fluent and would enable using the components without a wrapping <fluent-design-system-provider> element. This last idea is "theoretical" at present. We'll be investigating as we build out the new provider system.

chrisdholt

comment created time in a day

Pull request review commentmicrosoft/fluentui

feat(web-components): update package name to align with @fluentui and update component namespace

 {-  "name": "@microsoft/fast-components-msft",+  "name": "@fluentui/web-components",   "description": "A library of Fluent Web Components",   "sideEffects": false,-  "version": "1.6.0",+  "version": "0.0.1",

We should start this as 0.1.0 or we'll have some issues representing breaking vs. non-breaking changes.

chrisdholt

comment created time in a day

pull request commentmicrosoft/fast

feat: add select spec

@eljefe223 Doesn't look like I'll get a chance to review today but I'll try to take a look first thing in the morning. Real quick, I wanted to mention that there's a lot of work on select happening in OpenUI. If you haven't checked that out, take a look since we want to try to align with them as much as possible and we may then also have some feedback into that process.

eljefe223

comment created time in a day

pull request commentmicrosoft/fast

fix: add full width to text-area and text-field controls

Would be good to get @CuddleBunny to review as well since I think this affected him.

SethDonohue

comment created time in a day

Pull request review commentmicrosoft/fast

feat(fast-element): move template instance timing and enable dynamic templates and styles

 Besides rendering content, attributes, and properties, you'll often want to add In both examples above, after your event handler is executed, `preventDefault()` will be called on the event object by default. You can return `true` from your handler to opt-out of this behavior. ::: -The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.\ No newline at end of file+The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.++## Templating and the element lifecycle++It is during the `connectedCallback` phase of the Custom Element lifecycle that `FASTElement` creates templates and binds the resulting view. The creation of the template only occurs the first time the element is connected, while binding happens every time the element is connected (with unbinding happening during the `disconnectedCallback` for symmetry).++:::note+In the future we're planning new optimizations that will enable us to safely determine when we do not need to unbind/rebind certain views.+:::++In most cases, the template that `FASTElement` renders is determined by the `template` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveTemplate()` that returns a template instance. If this method is present, it will be called during `connectedCallback` to obtain the template to use. This allows the element author to dynamically select completely different templates based on the state of the element at the time of connection.

I'm fearful of the internal logic getting a bit complicated and hard to reason about. So, I kept it to a straight priority. First check if the property has been set, then check the custom hook, then check the static definition. I think any advanced scenario can be handled by having code set the property as needed. This also allows the property to be surfaced on FoundationElement as an observable and be bound on a per instance basis as well, which would enable per element template or style overrides with very little effort.

EisenbergEffect

comment created time in a day

Pull request review commentmicrosoft/fast

feat(fast-element): move template instance timing and enable dynamic templates and styles

 Besides rendering content, attributes, and properties, you'll often want to add In both examples above, after your event handler is executed, `preventDefault()` will be called on the event object by default. You can return `true` from your handler to opt-out of this behavior. ::: -The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.\ No newline at end of file+The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.++## Templating and the element lifecycle++It is during the `connectedCallback` phase of the Custom Element lifecycle that `FASTElement` creates templates and binds the resulting view. The creation of the template only occurs the first time the element is connected, while binding happens every time the element is connected (with unbinding happening during the `disconnectedCallback` for symmetry).++:::note+In the future we're planning new optimizations that will enable us to safely determine when we do not need to unbind/rebind certain views.+:::++In most cases, the template that `FASTElement` renders is determined by the `template` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveTemplate()` that returns a template instance. If this method is present, it will be called during `connectedCallback` to obtain the template to use. This allows the element author to dynamically select completely different templates based on the state of the element at the time of connection.

If you return null from resolveTemplate() then it won't render any template. But you can come back later and set $fastController.template and that will trigger a render. Due to the timing of the template location now, you could have your resolveTemplate() implementation check the state of its attrs and observables and use that to choose one or another template, because that should all be setup by the time the hook gets called.

Does that answer your question?

EisenbergEffect

comment created time in a day

Pull request review commentmicrosoft/fast

feat(fast-element): move template instance timing and enable dynamic templates and styles

 export class Controller extends PropertyChangeNotifier {         return false;     } +    private finishInitialization() {+        const element = this.element;+        const boundObservables = this.boundObservables;++        // If we have any observables that were bound, re-apply their values.+        if (boundObservables !== null) {+            const propertyNames = Object.keys(boundObservables);++            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {+                const propertyName = propertyNames[i];+                (element as any)[propertyName] = boundObservables[propertyName];+            }++            this.boundObservables = null;+        }++        const definition = this.definition;++        if (this._template === null) {+            if ((this.element as any).resolveTemplate) {+                this._template = (this.element as any).resolveTemplate();+            } else if (definition.template) {+                this._template = definition.template || null;+            }+        }++        if (this._template !== null) {+            this.renderTemplate(this._template);+        }++        if (this._styles === null) {+            if ((this.element as any).resolveStyles) {+                this._styles = (this.element as any).resolveStyles();+            } else if (definition.styles) {+                this._styles = definition.styles || null;+            }+        }++        if (this._styles !== null) {+            this.addStyles(this._styles);+        }++        this.needsInitialization = false;+    }++    private renderTemplate(template: ElementViewTemplate | null | undefined) {+        const element = this.element;+        const host = getShadowRoot(element) || element;++        if (this.view !== null) {+            this.view.dispose();+            (this as Mutable<this>).view = null;+        } else if (!this.needsInitialization) {+            host.innerHTML = "";+        }++        if (template) {+            // we have a new template to render to the Light

Oops. 🤣 Old comment left around after I refactored. I pushed a commit that adds some better internal comments on what's going on thoughout.

EisenbergEffect

comment created time in a day

push eventmicrosoft/fast

Rob Eisenberg

commit sha 60ef53bdb7cbe72724b38564846bd97396caee11

docs(fast-element): added some internal code docs

view details

push time in a day

issue commentmicrosoft/fluentui

Proposal: Update web-components package to use the @fluentui/ namespace

If Fluent UI has been publishing under @fluentui, then I think we should make the change. @chrisdholt We'll want to coordinate the first publish under this name with an update to our fast site documentation. I can prepare those changes, given a day or so notice.

chrisdholt

comment created time in a day

push eventmicrosoft/fast

push time in a day

PR opened microsoft/fast

Reviewers
feat(fast-element): move template instance timing and enable dynamic templates and styles

Description

This PR moves the timing of the FASTElement template instantiation out of the constructor and into the connected callback. Additionally, new hooks for dynamic template and style selection have been added as well as the capability to hot swap templates and styles at any point for any FASTElement.

Motivation & context

This PR covers the work in the fast-element phase of #3361 by moving the template creation timing to the connected callback and introducing the resolveTemplate() and resolveStyles() hooks. Additionally, template and styles properties have been added to Controller so that the template and base styles for any FASTElement can be changed at any time. This enables the implementation of FoundationElement as called out in #3361 as well as scenarios around a future router web component, and more dynamic or conditional element rendering. Furthermore, the timing change helps ensure that elements are properly defined time-wise in more complex scenarios, addressing some bugs our partners have been seeing.

While working on this change, some additional refactoring was done around element definitions, in the attempt to consolidate logic and create a better API. A few new APIs were made public or improved on templates and views, as needed for the functionality of dynamic templates and styles.

In addition to these changes, Controller tests have been added to validate its correct function during construction, connection, and operation. Documentation has been updated and extended in several places to help bring further clarity around the lifecycle and new capabilities.

Reviewer Request: I would very much appreciate someone reviewing the fast-components via Storybook to ensure that no unexpected behavior has been introduced as a result of this change.

Issue type checklist

  • [ ] Chore: A change that does not impact distributed packages.
  • [ ] Bug fix: A change that fixes an issue, link to the issue above.
  • [x] New feature: A change that adds functionality.

While this doesn't appear to cause current functionality to break, it's possible that there are some unknown side-effects of the timing change. Additionally, some low-level APIs in fast-element have changes during the refactor. This is not likely to affect anyone though.

Process & policy checklist

  • [x] I have added tests for my changes.
  • [x] I have tested my changes.
  • [x] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+670 -197

0 comment

13 changed files

pr created time in a day

push eventmicrosoft/fast

EisenbergEffect

commit sha 57e7b2df6b461f333d8e4481d0ac4b0e4af293cc

fix(fast-element): revert prettier formatting

view details

push time in a day

startedhalkeye/critshow-bingo

started time in a day

push eventmicrosoft/fast

Rob Eisenberg

commit sha 2e0a1b10870f0a8b280ce723abd2b2d34d9e1a63

docs(fast-element): documenting new templating and styling features

view details

push time in a day

push eventmicrosoft/fast

Rob Eisenberg

commit sha bb28440100b19760214544b62cb0e02b9baccd81

test(fast-element): controller after connect dynamic template/style

view details

push time in a day

push eventmicrosoft/fast

Rob Eisenberg

commit sha 5479812da1924ffef27d0f6ea848b293901b7321

test(fast-element): add controller connect tests

view details

push time in a day

issue commentmicrosoft/fast

fast-text-field value binding in aurelia1 & aurelia2 issues

@mitchcapper FYI I'm talking to the Aurelia team as well. One related issue is that when using 2-way binding on a custom element with Aurelia, you have to configure Aurelia so that it knows how to bind in both directions. The configuration is different for au1 vs. au2. The Aurelia team will follow-up here with more information. We can then take that info and also update the FAST Aurelia docs for future community members.

mitchcapper

comment created time in a day

issue commentmicrosoft/fast

fast-text-field value binding in aurelia1 & aurelia2 issues

@mitchcapper Can you detail the difference between what you are seeing with Aurelia 1 vs. Aurelia 2. I'm not quite following there.

Also, thanks for the stackblitz link. That will help get to the bottom of this.

mitchcapper

comment created time in a day

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { css } from "@microsoft/fast-element";+import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";+import {+    accentFillActiveBehavior,+    accentFillHoverBehavior,+    accentFillRestBehavior,+    neutralFillHoverBehavior,+    neutralFillInputActiveBehavior,+    neutralFillInputHoverBehavior,+    neutralFillInputRestBehavior,+    neutralFillRestBehavior,+    neutralFocusBehavior,+    neutralForegroundRestBehavior,+    neutralOutlineRestBehavior,+} from "../styles/index";++export const TooltipStyles = css`+    :host {+        contain: layout;+        overflow: visible;+        height: 0;+        width: 0;+    }++    .tooltip {+        box-sizing: border-box;+        border-radius: calc(var(--corner-radius) * 1px);+        border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};+        border-color: ${neutralFocusBehavior.var};+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;+        background: ${neutralFillRestBehavior.var};+        color: ${neutralForegroundRestBehavior.var};+        padding: 4px;+        height: fit-content;+        width: fit-content;+        font: inherit;+        font-size: var(--type-ramp-base-font-size);+        line-height: var(--type-ramp-base-line-height);+        white-space: nowrap;+        z-index: 10000;

I think we should have a central way to manage the zindex for modals, tooltips, select popups, etc. For example, what if we have a modal with a select in it and there's a tooltip on something in the select popup? Do we alway treat tooltips as highest, then popups, then modals? Would something simple like that work? Can we just encode that in a simple lookup in foundation that can be used by various components and design systems?

scomea

comment created time in a day

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { css } from "@microsoft/fast-element";+import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";+import {+    accentFillActiveBehavior,+    accentFillHoverBehavior,+    accentFillRestBehavior,+    neutralFillHoverBehavior,+    neutralFillInputActiveBehavior,+    neutralFillInputHoverBehavior,+    neutralFillInputRestBehavior,+    neutralFillRestBehavior,+    neutralFocusBehavior,+    neutralForegroundRestBehavior,+    neutralOutlineRestBehavior,+} from "../styles/index";++export const TooltipStyles = css`+    :host {+        contain: layout;+        overflow: visible;+        height: 0;+        width: 0;+    }++    .tooltip {+        box-sizing: border-box;+        border-radius: calc(var(--corner-radius) * 1px);+        border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};+        border-color: ${neutralFocusBehavior.var};+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;+        background: ${neutralFillRestBehavior.var};+        color: ${neutralForegroundRestBehavior.var};+        padding: 4px;+        height: fit-content;+        width: fit-content;+        font: inherit;+        font-size: var(--type-ramp-base-font-size);+        line-height: var(--type-ramp-base-line-height);+        white-space: nowrap;+        z-index: 10000;+    }++    fast-anchored-region {+        display: flex;+        justify-content: center;+        align-items: center;+        overflow: visible;+    }++    :host(.top) fast-anchored-region,+    :host(.bottom) fast-anchored-region {+        flex-direction: row;+    }++    :host(.right) fast-anchored-region,+    :host(.left) fast-anchored-region {+        flex-direction: column;+    }++    :host(.top) .tooltip {+        margin-bottom: 4px;+    }++    :host(.bottom) .tooltip {+        margin-top: 4px;+    }++    :host(.left) .tooltip {+        margin-right: 4px;+    }++    :host(.right) .tooltip {+        margin-left: 4px;+    }

That makes good sense to me. If that's not enough we also have the new RTL behaviors that Nick wrote. Those are going to be more heavy weight than a standard CSS property though. Just mentioning it for completeness.

scomea

comment created time in a day

push eventmicrosoft/fast

Rob Eisenberg

commit sha 4a3ce8f512d101ca9aaaf97c221021a0c4a12a53

fix(fast-element): remove unnecessary null check in volatile decorator

view details

push time in 2 days

issue commentmicrosoft/fast

fast-text-field input doesn't change width

I'd be in favor of making the internal control 100%. I think that will result in the most intuitive behavior for consumers of the component when they are integrating it into a layout.

NPadrutt

comment created time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

I think that sounds fine.

scomea

comment created time in 2 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 3f26430fd3fd494fbf49a86a08f510822e781225

refactor(fast-element): param rename and docs update for template create

view details

push time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

There can be N doms in a web page. The document is one but so is each shadow DOM. The tooltip could exist directly in the document or also inside of a shadow dom. My assumption is that the tooltip is used in the same dom as its anchor, in which case you would need to use getRootNode(). If the anchor can be anywhere...then we probably need to change the design of this component or at least introduce the restriction that the tooltip and the anchor need to exist in the same DOM.

scomea

comment created time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

In the document or in the DOM scope that the tooltip is being used within?

scomea

comment created time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

Maybe I misunderstood the code...are you trying to find all :hover in the same "scope" as the current element? If so, then you would use getRootNode()

scomea

comment created time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

You don't need to recursively call it. Calling it once will get you the nearest shadow root that your element is in, or the document if it's not in a shadow DOM.

scomea

comment created time in 2 days

pull request commentmicrosoft/fast

fix: correct slider track margin to react to density level

I merged it for you 😄 @awentzel What do we need to do to enable @dlesaca to merge his approved PRs? Maybe we need to add him to a GH team?

dlesaca

comment created time in 2 days

push eventmicrosoft/fast

Dexter Lesaca

commit sha b7bafea174cc63ae3528394912facbebb3081c0c

fix: correct slider track margin to react to density level (#3607) Co-authored-by: Dexter Lesaca <dexterlesaca@JAYACALI-CON.redmond.corp.microsoft.com> Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com> Co-authored-by: Chris Holt <chhol@microsoft.com>

view details

push time in 2 days

delete branch microsoft/fast

delete branch : users/dlesaca/fix-slider-misalignment

delete time in 2 days

PR merged microsoft/fast

fix: correct slider track margin to react to density level area:fast-components improvement

<!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. -->

Description

<!--- Describe your changes. -->

Motivation & context

<!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. -->

The changes in this PR fixes #3596 by adding the --density value CSS variable to the margin-top of horizontally displayed fast-slider components as well as to the margin-left value of vertically displayed fast-slider components.

Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

  • [ ] Chore: A change that does not impact distributed packages.
  • [x] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Is this a breaking change?

  • [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

Adding or modifying component(s) in @microsoft/fast-components checklist

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

  • [ ] I have added tests for my changes.
  • [x] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

<!--- Formatting guidelines:

Accepted peer review title format: <type>: <description>

Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius

<type> is required to be one of the following:

    - chore: A change that does not impact distributed packages.
    - fix: A change which fixes an issue.
    - feat: A that adds functionality.

<description> is required for the CHANGELOG and speaks to what the user gets from this PR:

    - Be concise.
    - Use all lowercase characters. 
    - Use imperative, present tense (e.g. `add` not `adds`.)
    - Do not end your description with a period.
    - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

+2 -2

2 comments

1 changed file

dlesaca

pr closed time in 2 days

issue closedmicrosoft/fast

Slider thumb gets misaligned with the track when using the density slider

Describe the bug; what happened?

What are the steps to reproduce the issue?

  1. Go to https://fast.design
  2. Scroll down to the example form control
  3. Click the "styles" tab on the left of the panel
  4. Move the density slider to -3
  5. Notice that the slider is elevated well above the slider track.

What behavior did you expect? The slider thumb is center aligned with the slider track across density values.

In what environment did you see the issue? All

closed time in 2 days

chrisdholt

push eventmicrosoft/fast

Rob Eisenberg

commit sha aa20e973fb0b41b21a16e4a1982b6f141df2ade3

feat(fast-element): enable dynamic changing of primary styles

view details

push time in 2 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

No, because if your component is inside of another component's shadow dom, a selector executed against the document will not be able to fin it. You need to get the root node (which might be the document...but could be another shadow root) and then run the query selector on that.

scomea

comment created time in 2 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 0b2f2e823e4d69922def4a9d8996f11f6d3786de

feat(fast-element): enable dynamic changing of a component's template

view details

push time in 2 days

push eventmicrosoft/fast

Jazib Jafri

commit sha 6359b6c711622b654e5a6be3c189d431e1e2781f

chore: update urls in pr template Co-authored-by: Nicholas Rice <nicholas.rice119@gmail.com> Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com> Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com> Co-authored-by: Aaron Wentzel <16669785+awentzel@users.noreply.github.com> Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

push time in 2 days

PR merged microsoft/fast

Reviewers
chore: update urls in pr template

<!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. -->

Description

<!--- Describe your changes. --> Update urls to website in pull_request_template.md

Motivation & context

<!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> Fixes incorrect(old) urls to sections of website

Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

  • [x] Chore: A change that does not impact distributed packages.
  • [ ] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Is this a breaking change?

  • [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

Adding or modifying component(s) in @microsoft/fast-components checklist

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

  • [ ] I have added tests for my changes.
  • [ ] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

<!--- Formatting guidelines:

Accepted peer review title format: <type>: <description>

Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius

<type> is required to be one of the following:

    - chore: A change that does not impact distributed packages.
    - fix: A change which fixes an issue.
    - feat: A that adds functionality.

<description> is required for the CHANGELOG and speaks to what the user gets from this PR:

    - Be concise.
    - Use all lowercase characters. 
    - Use imperative, present tense (e.g. `add` not `adds`.)
    - Do not end your description with a period.
    - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

+2 -2

1 comment

1 changed file

JazibJafri

pr closed time in 2 days

push eventJazibJafri/fast

Kham Udom

commit sha c20dc95b61ffa1e2118bf3ea1c4037b9eefb8648

fix: add aria-label to item button to fix screen reader from reading out the Unicode (#3611) # Description The screen reader was reading out the Unicode, so I added an aria-label attribute to the to-do item button. By default it reads out "Remove item". ## Motivation & context <!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [x] **Bug fix**: A change that fixes an issue, link to the issue above. - [ ] **New feature**: A change that adds functionality. **Is this a breaking change?** - [ ] This change causes current functionality to break. <!--- If yes, describe the impact. --> **Adding or modifying component(s) in `@microsoft/fast-components` checklist** <!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: --> - [ ] I have added a new component - [ ] I have modified an existing component - [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition) - [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration) ## Process & policy checklist <!--- Review the list and check the boxes that apply. --> - [ ] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/en/contributing/standards) for this project. <!--- Formatting guidelines: Accepted peer review title format: <type>: <description> Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius <type> is required to be one of the following: - chore: A change that does not impact distributed packages. - fix: A change which fixes an issue. - feat: A that adds functionality. <description> is required for the CHANGELOG and speaks to what the user gets from this PR: - Be concise. - Use all lowercase characters. - Use imperative, present tense (e.g. `add` not `adds`.) - Do not end your description with a period. - Avoid redundant words. For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working --> Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

view details

Rob Eisenberg

commit sha e7708268419c903841db1de44d95d2a333d4f124

Merge branch 'master' into fix/pr-template-url

view details

push time in 2 days

pull request commentmicrosoft/fast

fix: correct slider track margin to react to density level

@dlesaca Feel free to merge at will once you update to master. Thanks for working on this!

dlesaca

comment created time in 2 days

pull request commentmicrosoft/fast

feat: update sync logic to fire on node selection

This PR is getting a little stale. @bheston Can you reach out to a few targeted individuals who you think can help with the review?

bheston

comment created time in 2 days

issue commentmicrosoft/fast

Add templates to build components for different integrations

Sounds good. I'll keep this open so we can consider it as part of the docs and CLI planned work.

Valks

comment created time in 2 days

issue closedmicrosoft/fast

text-field values are not sent to server Edge and Chrome

Describe the bug; what happened? I have a login page in a asp.net core razor page with a fast-text-field for the username and one for the password. Both have the name and ID set so that they should be mapped to the according Bind Property of the model. When I fill in both values and hit send in FireFox I do get both values in my page model on the server. In Chrome and Edge (Chromium based) both values stay null. When I replace the fast-text-field with a normal input or an bootstrap input it works as expected.

Also maybe related (if it's not let me know and i file a bug for that separatly: Autofilled credentials aren't shown in the text-field aswell. But when I navigate to a page where there are saved credentials in firefox and just click login to submit, I do get the correct autofilled values although in the UI both fields are empty. In Edge and Chrome I get null (as in this case expected since no value is to see as well).

What are the steps to reproduce the issue?

Example:

ReproductionSample.zip

  1. Open the attached solution and hit debug
  2. Start debugging and set a breakpoint in the LoginFast and the LoginBootstrap page
  3. Navigate to the LoginFast page fill in some information into the field and hit login
  4. See in the debug view that the username and password field in the Input Object are null.
  5. Navigate to LoginBootstrap and repeat to see that they are filled there.

What behavior did you expect? Entered value are correctly sent to server.

If applicable, provide screenshots:

In what environment did you see the issue?

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC] Windows
  • Browser [e.g. Edge, Chrome, Safari, FireFox]Edge (chromium, Version 84.0.522.40) / Chrome (84.0.4147.89)
  • Version [e.g. 1.8.0]

Is there any additional context?

closed time in 2 days

NPadrutt

issue commentmicrosoft/fast

text-field values are not sent to server Edge and Chrome

@NPadrutt Yes, if you don't mind, please create a separate issue for the credentials bug. We'll need to do some investigation on that to see if it's something we can fix.

I'm going to close this issue out in favor of the new issue related to creds.

NPadrutt

comment created time in 2 days

issue commentmicrosoft/fast

fast-text-field value binding in aurelia1 issues

Thanks @mitchcapper We'll try to take a look at this soon to figure out what's going on there. Sounds like a potential timing issue with web components lifecycle vs. Aurelia's bind lifecycle.

Just to be sure, can you let me know what version of the packages you are using? There was a release late last week that fixed a number of form issues.

mitchcapper

comment created time in 2 days

issue commentmicrosoft/fast

Add improved FAST component development guide to the documentation

We've got this document in the GitHub repo: https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md which also gets published here: https://www.fast.design/docs/community/contributor-guide

@dlesaca Feel free to contribute PRs to improve this 😄

dlesaca

comment created time in 2 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 2c15d3a8d043759bee04322233a1b4a9fd99ca03

fix(fast-element): decorator typing issue

view details

push time in 3 days

starteddtolnay/proc-macro-workshop

started time in 4 days

Pull request review commentmicrosoft/fast

fix: add aria-label to item button to fix screen reader from reading out the Unicode

 const template = html<TodoApp>`                     <span class="list-text ${x => (x.done ? "done" : "")}">                         ${x => x.description}                     </span>-                    <fast-button @click=${(x, c) => c.parent.removeTodo(x)}>+                    <fast-button+                        @click=${(x, c) => c.parent.removeTodo(x)}+                        aria-label="${x => x.ariaLabel}"

Since the label isn't going to change, I'd be inclined to remove the attr and just hard code the value in the template. Thoughts?

khamudom

comment created time in 5 days

issue commentmicrosoft/fast

Add Realtime editor component (Property panel)

The PR is now merged 😄 You can find the simple design property panel component code here: https://github.com/microsoft/fast/blob/master/examples/todo-app-tutorial/src/design-property-panel.ts

barahonajm

comment created time in 5 days

Pull request review commentmicrosoft/fast

feat: [DRAFT] tooltip component

+import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";+import { AnchoredRegion, AxisPositioningMode, AxisScalingMode } from "../anchored-region";+import { keyCodeEscape } from "@microsoft/fast-web-utilities";++export type TooltipPosition = "top" | "right" | "bottom" | "left";++const hiddenRegionStyle: string = `+     display: none;+     pointer-events: none;+`;++const visibleRegionStyle: string = `+     pointer-events: none;+`;++export class Tooltip extends FASTElement {+    @attr({ mode: "boolean" })+    public visible: boolean;+    private visibleChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateTooltipVisibility();+            this.updateLayout();+        }+    }++    @attr+    public anchor: string = "";+    private anchorChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @attr+    public delay: number = 300;++    @attr+    public position: TooltipPosition | null = null;+    private positionChanged(): void {+        if ((this as any).$fastController.isConnected) {+            this.updateLayout();+        }+    }++    @observable+    public anchorElement: HTMLElement | null = null;+    private anchorElementChanged(oldValue: HTMLElement | null): void {+        if ((this as any).$fastController.isConnected) {+            if (oldValue !== null && oldValue !== undefined) {+                oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);+                oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);+            }++            if (this.anchorElement !== null && this.anchorElement !== undefined) {+                this.anchorElement.addEventListener(+                    "mouseover",+                    this.handleAnchorMouseOver,+                    { passive: true }+                );+                this.anchorElement.addEventListener(+                    "mouseout",+                    this.handleAnchorMouseOut,+                    { passive: true }+                );++                const anchorId: string = this.anchorElement.id;++                document.querySelectorAll(":hover").forEach(element => {

Can't rely on being able to find it in the document. Might need to use this.getRootNode().

scomea

comment created time in 5 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 9150cdd4e2a0e156b5a028c1c4a7c0a2a7a6b192

feat(examples): todo app example (#3609) * feat(examples): new todo app demo * feat(examples): update todo app to use new form features * chore: remove bogus file * fix(examples): make submit todo guard boolean Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

view details

push time in 5 days

delete branch microsoft/fast

delete branch : users/eisenbergeffect/todo-demo

delete time in 5 days

PR merged microsoft/fast

Reviewers
feat(examples): todo app example

Description

We've had several requests from customers for more tutorials, a todo app tutorial specifically, and a component to manipulate the design system in real-time. This example creates a todo app with fast-element, uses our fast components internally, and includes a simple component to manipulate the design system.

A few additional points:

  • A future PR will add an actual step by step tutorial which takes people through building the app from scratch.
  • As part of this PR, the examples were re-organized to enable adding more examples in the future.
  • In the future we hope to have an official component for manipulating the design system. My hope is that this example will show our community how they can build something simple themselves in the mean time.

Process & policy checklist

  • [ ] I have added tests for my changes.
  • [x] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+501 -0

0 comment

47 changed files

EisenbergEffect

pr closed time in 5 days

push eventmicrosoft/fast

Jane Chu

commit sha f2a39489015be38f2372060a7898b0ef1cf96702

fix: the Navigation component can now drag and drop nested component (#3598)

view details

Jane Chu

commit sha f70ff9975a801cf8a9863d6a79fc61e62fbd4477

fix: remove an extra set of quotes in CSS template (#3594)

view details

Aaron Wentzel

commit sha bdf75aa618b47bf291d8d6782e94a605b8792c45

chore: add dependency as used in defintion files (#3586) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Nicholas Rice

commit sha ccba229c6c1133485d0fac92eae88cb3a6369495

fix: various fixes for form-associated custom elements (#3581) * ensure value property behaves correctly * adding additional test * correct event emission * cleanup * update value set on internal control Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com> Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha 1667eb44b9f21238602948027a71840448eca275

chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Mark Jones

commit sha ad6e0e91571f716854c2c2f1099460e99bc8528f

fix: fixed error in slider story causing issue in slider-label story (#3600) * fixed error in slider story causing issue in slider-label story

view details

Brian Heston

commit sha 9d32aa15cd5c18d51c90e35100b0284c5ebb3ca6

fix: update fast-card and component sampler color handling (#3597) * Updated fast-card and component sampler color handling

view details

Rob Eisenberg

commit sha c145e8ea8313597c70b279fe7fe5d488a6087f6a

docs: fix broken links (#3601)

view details

Nicholas Rice

commit sha f6463436a001d07a7cfbd5d87460c76cf8584e65

fix: add form submission and reset behavior to Button (#3603) * add button submit and reset fix * adding tests * remove debugger statements * remove duplicate proxy attachment code * make methods private Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

view details

John Kreitlow

commit sha db23f279dc646eeb043327f2cce7a96f9b89a0c4

fix: update docusaurus and use local fast-components min bundle (#3605) # Description * Create a new output bundle `fast-components.iife.min.js` for use on the documentation website * Upgrade Docusaurus and deps to `2.0.0-alpha.60` ## Motivation & context The current version of Docusaurus doesn't handle the `type="module"` attribute for script tags so we need a version that can be loaded and called with just a basic script tag. ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [x] **Bug fix**: A change that fixes an issue, link to the issue above. - [ ] **New feature**: A change that adds functionality. **Is this a breaking change?** - [ ] This change causes current functionality to break. <!--- If yes, describe the impact. --> **Adding or modifying component(s) in `@microsoft/fast-components` checklist** <!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: --> - [ ] I have added a new component - [ ] I have modified an existing component - [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition) - [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration) ## Process & policy checklist <!--- Review the list and check the boxes that apply. --> - [ ] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/en/contributing/standards) for this project. <!--- Formatting guidelines: Accepted peer review title format: <type>: <description> Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius <type> is required to be one of the following: - chore: A change that does not impact distributed packages. - fix: A change which fixes an issue. - feat: A that adds functionality. <description> is required for the CHANGELOG and speaks to what the user gets from this PR: - Be concise. - Use all lowercase characters. - Use imperative, present tense (e.g. `add` not `adds`.) - Do not end your description with a period. - Avoid redundant words. For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

view details

Kham Udom

commit sha 34ea7e2f3e87a5a27fd9e5475ecab2bc9a44f9eb

fix: exposing styles on all web components (#3602) * export styles on all components * update export to a const, add @public comment and move export to the bottom of file

view details

Mark Jones

commit sha 729472bc637585c4cf07f731ad16929991545052

added treeview to component documentation in sidebar (#3606)

view details

Chris Holt

commit sha cfaeab3cf9527765baf02122962dbb54c0e07c1b

Publish - @microsoft/fast-figma-plugin-msft@0.7.2 - @microsoft/fast-tooling-react@2.3.2 - @microsoft/fast-tooling-wasm@1.1.0 - @microsoft/fast-tooling@0.8.0 - @microsoft/fast-components@1.7.0 - @microsoft/fast-element@0.15.2 - @microsoft/fast-foundation@1.6.0 - @microsoft/fast-color-explorer@1.6.2 - @microsoft/fast-component-explorer@0.11.2 - @microsoft/fast-creator@0.2.2 - @microsoft/fast-tooling-examples@0.4.2 - fast-website@1.2.2 - @microsoft/site-utilities@0.4.2

view details

Mark Jones

commit sha fbc312df5cd4e46b0142a3cc56b3441d9b4245e0

fix: use design system direction support for glyph in treeview (#3608)

view details

Rob Eisenberg

commit sha 6e8053d506a53719be531f2b6c09021cbd6401c9

Merge branch 'master' into users/eisenbergeffect/todo-demo

view details

push time in 5 days

pull request commentmicrosoft/fast

feat: [DRAFT] tooltip component

My thoughts on the questions:

  • I don't think tooltips need to scroll. I did a quick test and from what I can tell the native tooltips don't scroll.
  • Current placement behavior and options seem good to me.
  • I don't think we need to render the tooltip slot content when it's now showing. I wouldn't make this controllable in our first version. If we get significant customer request for that, we could add it later. Not sure why we would really need that though.
scomea

comment created time in 5 days

Pull request review commentmicrosoft/fast

feat(examples): todo app example

+import {+    FASTElement,+    html,+    observable,+    customElement,+    css,+} from "@microsoft/fast-element";+import { FASTTextField } from "@microsoft/fast-components-msft";++const template = html<TodoForm>`+    <form @submit=${x => x.submitTodo()}>+        <fast-text-field+            :value=${x => x.description}+            @input=${(x, c) => x.onDescriptionInput(c.event)}+        ></fast-text-field>+        <fast-button type="submit" appearance="accent" ?disabled=${x => !x.canSubmitTodo}>+            Add Todo+        </fast-button>+    </form>+`;++const styles = css`+    form {+        display: flex;+    }++    fast-button {+        margin: 4px;+    }+`;++@customElement({+    name: "todo-form",+    template,+    styles,+})+export class TodoForm extends FASTElement {+    @observable public description: string = "";++    get canSubmitTodo() {+        return this.description;

Yes indeed. Pushed a fix for that.

EisenbergEffect

comment created time in 5 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 4b82ccb56e95d3e4308ddda3486e1e4eb00a0e0d

fix(examples): make submit todo guard boolean

view details

push time in 5 days

issue commentmicrosoft/fast

Add Realtime editor component (Property panel)

@barahonajm I'm not sure how soon we'll be able to create an official component for this, but I do have a PR with a demo of how to create your own in the meantime: https://github.com/microsoft/fast/pull/3609

barahonajm

comment created time in 5 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 23b2fc8c1dc91408d288a875aac31b9da4575d39

chore: remove bogus file

view details

push time in 5 days

PR opened microsoft/fast

Reviewers
feat(examples): todo app example

Description

We've had several requests from customers for more tutorials, a todo app tutorial specifically, and a component to manipulate the design system in real-time. This example creates a todo app with fast-element, uses our fast components internally, and includes a simple component to manipulate the design system.

A few additional points:

  • A future PR will add an actual step by step tutorial which takes people through building the app from scratch.
  • As part of this PR, the examples were re-organized to enable adding more examples in the future.
  • In the future we hope to have an official component for manipulating the design system. My hope is that this example will show our community how they can build something simple themselves in the mean time.

Process & policy checklist

  • [ ] I have added tests for my changes.
  • [x] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+1034 -0

0 comment

48 changed files

pr created time in 5 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha 6e6582f6efd4978827320d2e8d72771007bd5578

feat(examples): update todo app to use new form features

view details

push time in 5 days

issue commentmicrosoft/fast

Add templates to build components for different integrations

Ah, yes. I started putting together a todo example based on a few different requests. I haven't actually run that yet...so there may be some issues with it 🤣 I'm hoping to get it into PR form today. It's quite possible there's a tree shaking issue. Bundlers are pretty aggressive. If you feel comfortable putting together a simple repo on GitHub that shows the most basic version of your setup, I can try to take a look next week and see what's going wrong. Something I can quickly git clone, install, and run would help me greatly.

Valks

comment created time in 5 days

push eventmicrosoft/fast

Kham Udom

commit sha 34ea7e2f3e87a5a27fd9e5475ecab2bc9a44f9eb

fix: exposing styles on all web components (#3602) * export styles on all components * update export to a const, add @public comment and move export to the bottom of file

view details

push time in 6 days

delete branch microsoft/fast

delete branch : users/khamu/export-styles

delete time in 6 days

PR merged microsoft/fast

Reviewers
fix: exposing styles on all web components

<!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. -->

Description

Export the styles from the component's styles file in their respective index.

fixes #3593

Motivation & context

<!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. -->

Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

  • [ ] Chore: A change that does not impact distributed packages.
  • [x] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Is this a breaking change?

  • [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

Adding or modifying component(s) in @microsoft/fast-components checklist

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

  • [ ] I have added tests for my changes.
  • [x] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

<!--- Formatting guidelines:

Accepted peer review title format: <type>: <description>

Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius

<type> is required to be one of the following:

    - chore: A change that does not impact distributed packages.
    - fix: A change which fixes an issue.
    - feat: A that adds functionality.

<description> is required for the CHANGELOG and speaks to what the user gets from this PR:

    - Be concise.
    - Use all lowercase characters. 
    - Use imperative, present tense (e.g. `add` not `adds`.)
    - Do not end your description with a period.
    - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

+240 -0

0 comment

28 changed files

khamudom

pr closed time in 6 days

issue closedmicrosoft/fast

Exposing styles in fast components

What feature are you requesting?

I suggest to expose the styles in each components. For example CardStyles in the card component.

What would be the benefit of adding this feature?

Consumers could import them when building new or extending components.

Is there any additional context for your request?

It's already the case for the templates and it's very useful.

closed time in 6 days

ben-girardet

pull request commentmicrosoft/fast

chore: update creator card example configuration

@janechu Should we try to get this in for today's release?

janechu

comment created time in 6 days

issue commentmicrosoft/fast

text-field values are not sent to server Edge and Chrome

@nicholasrice Can we close this as done now?

NPadrutt

comment created time in 6 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha c145e8ea8313597c70b279fe7fe5d488a6087f6a

docs: fix broken links (#3601)

view details

Rob Eisenberg

commit sha 4946cf18116e50a788f5e2a6e457af04656855e1

Merge branch 'master' into users/khamu/export-styles

view details

push time in 6 days

push eventmicrosoft/fast

Rob Eisenberg

commit sha c145e8ea8313597c70b279fe7fe5d488a6087f6a

docs: fix broken links (#3601)

view details

push time in 6 days

delete branch microsoft/fast

delete branch : users/eisenbergeffect/docs-link-fixes

delete time in 6 days

PR merged microsoft/fast

Reviewers
docs: fix broken links

Description

This PR fixes some broken links in the docs that were discovered during a build test. The links were out of date being based on an older content structure.

Issue type checklist

  • [ ] Chore: A change that does not impact distributed packages.
  • [x] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Process & policy checklist

  • [ ] I have added tests for my changes.
  • [ ] I have tested my changes.
  • [x] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+3 -3

0 comment

3 changed files

EisenbergEffect

pr closed time in 6 days

push eventmicrosoft/fast

Nicholas Rice

commit sha ccba229c6c1133485d0fac92eae88cb3a6369495

fix: various fixes for form-associated custom elements (#3581) * ensure value property behaves correctly * adding additional test * correct event emission * cleanup * update value set on internal control Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com> Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha 1667eb44b9f21238602948027a71840448eca275

chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Mark Jones

commit sha ad6e0e91571f716854c2c2f1099460e99bc8528f

fix: fixed error in slider story causing issue in slider-label story (#3600) * fixed error in slider story causing issue in slider-label story

view details

Brian Heston

commit sha 9d32aa15cd5c18d51c90e35100b0284c5ebb3ca6

fix: update fast-card and component sampler color handling (#3597) * Updated fast-card and component sampler color handling

view details

Rob Eisenberg

commit sha 27f1a3e806d1434671e4a40c8bb3dcac55f9504c

Merge branch 'master' into users/eisenbergeffect/docs-link-fixes

view details

push time in 6 days

PR opened microsoft/fast

Reviewers
docs: fix broken links

Description

This PR fixes some broken links in the docs that were discovered during a build test. The links were out of date being based on an older content structure.

Issue type checklist

  • [ ] Chore: A change that does not impact distributed packages.
  • [x] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Process & policy checklist

  • [ ] I have added tests for my changes.
  • [ ] I have tested my changes.
  • [x] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.
+3 -3

0 comment

3 changed files

pr created time in 6 days

push eventmicrosoft/fast

push time in 6 days

create barnchmicrosoft/fast

branch : users/eisenbergeffect/docs-link-fixes

created branch time in 6 days

push eventmicrosoft/fast

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha 1667eb44b9f21238602948027a71840448eca275

chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Mark Jones

commit sha ad6e0e91571f716854c2c2f1099460e99bc8528f

fix: fixed error in slider story causing issue in slider-label story (#3600) * fixed error in slider story causing issue in slider-label story

view details

Rob Eisenberg

commit sha 5ed46f6062f592914b94ae8a36df819f696d16a0

Merge branch 'master' into users/bheston/fast-design-sampler-colors

view details

push time in 6 days

PR merged microsoft/fast

Reviewers
chore: remove fast-components-msft from prepare docs

<!--- Provide a summary of your changes in the title field above. For guidance on formatting, see the comment at the bottom of this template. -->

Description

Removes a reference to the microsoft package causing a break in the documentation site and pipeline. <!--- Describe your changes. -->

Motivation & context

<!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. -->

Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

  • [x] Chore: A change that does not impact distributed packages.
  • [ ] Bug fix: A change that fixes an issue, link to the issue above.
  • [ ] New feature: A change that adds functionality.

Is this a breaking change?

  • [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

Adding or modifying component(s) in @microsoft/fast-components checklist

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

  • [ ] I have added tests for my changes.
  • [ ] I have tested my changes.
  • [ ] I have updated the project documentation to reflect my changes.
  • [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

<!--- Formatting guidelines:

Accepted peer review title format: <type>: <description>

Example titles: chore: add unit tests for all components feat: add a border radius to button fix: update design system to use 3px border radius

<type> is required to be one of the following:

    - chore: A change that does not impact distributed packages.
    - fix: A change which fixes an issue.
    - feat: A that adds functionality.

<description> is required for the CHANGELOG and speaks to what the user gets from this PR:

    - Be concise.
    - Use all lowercase characters. 
    - Use imperative, present tense (e.g. `add` not `adds`.)
    - Do not end your description with a period.
    - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site: https://www.fast.design/docs/en/contributing/working -->

+0 -1

0 comment

1 changed file

chrisdholt

pr closed time in 6 days

push eventmicrosoft/fast

Chris Holt

commit sha 1667eb44b9f21238602948027a71840448eca275

chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

push time in 6 days

delete branch microsoft/fast

delete branch : users/chhol/remove-fast-components-msft-from-prepare-docs

delete time in 6 days

Pull request review commentmicrosoft/fast

fix: fixed error in slider story causing issue in slider-label story

 FASTSlider; FASTDesignSystemProvider;  addons.getChannel().addListener(STORY_RENDERED, (name: string) => {-    if (name.toLowerCase().startsWith("slider")) {+    if (name.toLowerCase().endsWith("slider")) {         const slider1: HTMLElement | null = document.getElementById("switcher");-        (slider1 as FASTSlider).valueTextFormatter = valueTextFormatter;+        if (slider1) {

Here's a quick refactor recommendation:

['switcher', 'switcher2', 'slider1'].forEach(x => {
  const slider = document.getElementById(x);
  slider && (slider as FASTSlider).valueTextFormatter = valueTextFormatter;
});
marjonlynch

comment created time in 6 days

push eventmicrosoft/fast

Jane Chu

commit sha f2a39489015be38f2372060a7898b0ef1cf96702

fix: the Navigation component can now drag and drop nested component (#3598)

view details

Jane Chu

commit sha f70ff9975a801cf8a9863d6a79fc61e62fbd4477

fix: remove an extra set of quotes in CSS template (#3594)

view details

Aaron Wentzel

commit sha bdf75aa618b47bf291d8d6782e94a605b8792c45

chore: add dependency as used in defintion files (#3586) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Nicholas Rice

commit sha ccba229c6c1133485d0fac92eae88cb3a6369495

fix: various fixes for form-associated custom elements (#3581) * ensure value property behaves correctly * adding additional test * correct event emission * cleanup * update value set on internal control Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com> Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

Rob Eisenberg

commit sha ebd2eb7b8932809e8807dcc9d2592450e2ad397d

Merge branch 'master' into users/chhol/remove-fast-components-msft-from-prepare-docs

view details

push time in 6 days

delete branch microsoft/fast

delete branch : users/chhol/fix-start-end-content

delete time in 6 days

push eventmicrosoft/fast

Chris Holt

commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169

fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

view details

push time in 6 days

more