profile
viewpoint
Nicholas Rice nicholasrice Microsoft Seattle, WA

awentzel/azure-nginx-ssl 0

Azure App Service for Linux - Static site with SSL support via http to https redirection

awentzel/azure-nginx-ssl-react 0

Azure Web Service for Linux - Static site with SSL, Nginx, and redirection to /index.html

nicholasrice/about-me 0

About Me for 201

nicholasrice/azure-nginx-ssl 0

Azure App Service for Linux - Static site with SSL support via http to https redirection

nicholasrice/DefinitelyTyped 0

The repository for high quality TypeScript type definitions.

nicholasrice/faker.js 0

generate massive amounts of fake data in Node.js and the browser

nicholasrice/fast 0

An unopinionated system of components, development tools, and utilities used à la carte or as a suite to build enterprise-grade websites and applications.

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.

Yep! I am pondering if that capability could be useful but can't think of a solid use-case at the moment

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

heh - the Light!

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.

Is it possible to conditionally override the template property from this method? For instance, does the controller defer to the template property template if the returned value from this is null?

EisenbergEffect

comment created time in a day

push eventmicrosoft/fast

Nicholas Rice

commit sha cbcb2177c81740f6d6fc0be98973217dbb001e00

feat: export form-associated under alpha flag (#3618) * export form-associated under alpha flag * fix api docs Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

view details

push time in a day

delete branch microsoft/fast

delete branch : users/nirice/export-form-associated

delete time in a day

PR merged microsoft/fast

Reviewers
feat: export form-associated under alpha flag

<!--- 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

FormAssociated was previously not exported because we expected a shifting API. We also have external components that need to leverage FormAssociated. This change exports the FormAssociated under the @alpha flag. This will allow external dependencies to import and use FormAssociated but we're protected from breaking changes due to the @alpha designation.

@alpha exports are not surfaced as exported types by api-extractor so this export will not exist on the documentation site. <!--- Describe your changes. -->

<!--- 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.
  • [ ] 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: -->

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/community/contributor-guide -->

+157 -20745

0 comment

9 changed files

nicholasrice

pr closed time in a day

push eventnicholasrice/fast-ds-provider-interop

nicholasrice

commit sha 7533433ad81726bc1536a0c51e96c0dd9b7df682

updating readme

view details

push time in a day

push eventmicrosoft/fast

nicholasrice

commit sha d78c32bf0157e488c0e979ebc98e18855c78abb2

fix api docs

view details

push time in a day

PR opened microsoft/fast

Reviewers
chore: correct export location in localization 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

Localization docs were sourcing an export from the wrong package - this change corrects that documentation. <!--- 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: -->

  • [ ] 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.
  • [ ] 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/community/contributor-guide -->

+79 -1

0 comment

2 changed files

pr created time in a day

issue commentmicrosoft/fast

fast-text-field input doesn't change width

https://github.com/microsoft/fast/issues/3269#issuecomment-644322338 mostly concerned setting height - there are two elements contained in a fast-textfield that are stacked vertically by default; the label and the textbox. What should grow when the height of the fast-textfield is adjusted? Is it always the the textbox? Both elements? Spacing between? There is likely an intuitive behavior here but I'm not 100% certain of what it is.

Width is a bit easier I think, at least for the default vertically stacked layout - growing to 100% host width seems intuitive to me.

NPadrutt

comment created time in a day

PR opened microsoft/fast

Reviewers
fix: export form-associated under alpha flag

<!--- 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

FormAssociated was previously not exported because we expected a shifting API. We also have external components that need to leverage FormAssociated. This change exports the FormAssociated under the @alpha flag. This will allow external dependencies to import and use FormAssociated but we're protected from breaking changes due to the @alpha designation.

@alpha exports are not surfaced as exported types by api-extractor so this export will not exist on the documentation site. <!--- 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: -->

  • [ ] 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.
  • [ ] 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/community/contributor-guide -->

+154 -20745

0 comment

9 changed files

pr created time in a day

create barnchmicrosoft/fast

branch : users/nirice/export-form-associated

created branch time in a day

push eventnicholasrice/fast-ds-provider-interop

nicholasrice

commit sha df9309ad9bccb8294f86c54a5ca6e623147316ff

adding use-defaults

view details

nicholasrice

commit sha c83379fa6aa5192cf1fb390cb91927504b913861

wire react side

view details

nicholasrice

commit sha 4f295c55ea91424f083368ab3782ace56844c7d7

finalize demo

view details

nicholasrice

commit sha 14b38c34e373e8850e0bbce57d60a6663fc622e7

adding readme

view details

nicholasrice

commit sha f51082c8d0f6fb14ec6a2bfa0dcc01d7e38be78f

cleanup

view details

push time in 2 days

push eventnicholasrice/fast-ds-provider-interop

nicholasrice

commit sha 4270cbaa053506d903d0ae580a82ce0c759aa5dc

setup webpack

view details

nicholasrice

commit sha 50180acec34cdf984c83c63800422dd9bc9e46ac

create wrapper

view details

push time in 2 days

push eventnicholasrice/fast-ds-provider-interop

nicholasrice

commit sha bcbf667c33596a9260111248cd94d2a84154a0a1

init npm

view details

nicholasrice

commit sha 2a4ffe742858b514cf8626126f94dfd00407045e

adding dependencies

view details

push time in 2 days

create barnchnicholasrice/fast-ds-provider-interop

branch : master

created branch time in 2 days

created repositorynicholasrice/fast-ds-provider-interop

created time in 2 days

push eventJazibJafri/fast

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 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

Kham Udom

commit sha f9dd0a4ea86a1940023aaa45e1704f84cdc8ba36

docs(spec): add breadcrumb spec (#3552) # Description The file has specs for `fast-breadcrumb` and `fast-breadcrumb-item` ![image](https://user-images.githubusercontent.com/37851220/88443820-ae553c00-cdce-11ea-9ab9-14d1482eab3e.png) ## 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. - [ ] **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. - [ ] 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 eedd3a4cde757de1dee95c3e6a1e08de0f577675

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

view details

push time in 2 days

push eventBrunoBlanes/fast

Kham Udom

commit sha f9dd0a4ea86a1940023aaa45e1704f84cdc8ba36

docs(spec): add breadcrumb spec (#3552) # Description The file has specs for `fast-breadcrumb` and `fast-breadcrumb-item` ![image](https://user-images.githubusercontent.com/37851220/88443820-ae553c00-cdce-11ea-9ab9-14d1482eab3e.png) ## 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. - [ ] **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. - [ ] 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 d71ffb841156b11f45c9f35a0d81eb9015888487

Merge branch 'master' into development/bruno-blanes

view details

push time in 2 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;

should this return a bool?

EisenbergEffect

comment created time in 5 days

push eventmicrosoft/fast

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

push time in 6 days

delete branch microsoft/fast

delete branch : users/nirice/submit-button-submission-fix

delete time in 6 days

PR merged microsoft/fast

Reviewers
fix: add form submission and reset behavior to Button

<!--- 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

#3534 describes an issue where a FASTButton[type=submit] does not actually submit the parent form. In fixing this, I also noticed that a FASTButton[type=reset] does not reset the form. This introduces a fix to both behaviors.

A FASTButton[type=reset] will simply invoke the reset() method of the associated form element when clicked.

Submission behavior is a bit more complicated. The FASTButton[type=submit] will try to use the requestSubmit() method of the form if it exists, supplying the method with the button's proxy element as the submitting element (see #3534) for more info. If the requestSubmit() method is unavailable (Safari) then the proxy's click() method will be invoked.

closes #3534 <!--- 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: -->

  • [ ] 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. -->

  • [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 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 -->

+146 -35

0 comment

5 changed files

nicholasrice

pr closed time in 6 days

issue closedmicrosoft/fast

type="submit" in fast-button won't work

Hello there, I want to create a button that submits a form, but the type submit seems not to work on buttons.

The packages I used were fast-components and fast-components-msft of which both don't work. I tried to locate an error in the Button component, but everything seems fine. So this might be unwanted behaviour/a bug.

HTML form to reproduce the missing feature/bug

<script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
<fast-design-system-provider use-defaults>
  <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
<!--     <input type="submit" value="Submit"> -->
    <fast-button type="submit" value="Save">Save</fast-button>
  </form>
</fast-design-system-provider>
  • Tried with the newest version of Edge Chromium and Chrome

Thanks for your help and keep up the good work 👍

-Philipp

closed time in 6 days

PhilippSonntagORGADATA

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

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 62db5ad44c48dece69dac37a5e4a312a8ae0a5ae

Merge branch 'master' into users/nirice/submit-button-submission-fix

view details

push time in 6 days

push eventmicrosoft/fast

nicholasrice

commit sha bef33d3c1e294b35500d80d4968bb22dda234964

make methods private

view details

push time in 6 days

Pull request review commentmicrosoft/fast

fix: add form submission and reset behavior to Button

+import { expect } from "chai";+import { customElement, html, DOM } from "@microsoft/fast-element";+import { classNames } from "@microsoft/fast-web-utilities";+import { Button } from "./button";++@customElement({+    name: "test-button",+    template: html`+        <slot></slot>+    `,+})+class TestElement extends Button {}++describe("Button", () => {+    describe("of type 'submit'", () => {+        it("should submit the parent form when clicked", () => {+            let wasSumbitted = false;+            let event: any;+            const form = document.createElement("form");+            const submit = document.createElement("test-button");+            submit.setAttribute("type", "submit");+            form.appendChild(submit);+            form.addEventListener("submit", e => {+                e.preventDefault();+                wasSumbitted = true;+                event = e;+            });+            document.body.appendChild(form);++            submit.click();++            expect(wasSumbitted).to.equal(true);+            expect(event.submitter).to.equal(submit["proxy"] as any);+        });+    });++    describe("of type 'reset'", () => {+        it("should submit the parent form when clicked", () => {+            let wasReset = false;+            const form = document.createElement("form");+            const reset = document.createElement("test-button");+            reset.setAttribute("type", "reset");+            form.appendChild(reset);+            document.body.appendChild(form);+            form.addEventListener("reset", () => {+                wasReset = true;+            });++            reset.click();++            expect(wasReset).to.equal(true);+        });+    });+});

=D

nicholasrice

comment created 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

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

Nicholas Rice

commit sha 3afa604bf4660f92bad5e7bd228bee1f12697198

Merge branch 'master' into users/nirice/submit-button-submission-fix

view details

push time in 6 days

push eventmicrosoft/fast

nicholasrice

commit sha 624fb3777771c5736cccbfd07a68ae08823169d2

remove duplicate proxy attachment code

view details

push time in 6 days

push eventmicrosoft/fast

nicholasrice

commit sha d72d58e8a9cce6fe6dc9806c6f17355a7e4a452b

remove debugger statements

view details

push time in 6 days

PR opened microsoft/fast

Reviewers
fix: add form submission and reset behavior to Button

<!--- 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

#3534 describes an issue where a FASTButton[type=submit] does not actually submit the parent form. In fixing this, I also noticed that a FASTButton[type=reset] does not reset the form. This introduces a fix to both behaviors.

A FASTButton[type=reset] will simply invoke the reset() method of the associated form element when clicked.

Submission behavior is a bit more complicated. The FASTButton[type=submit] will try to use the requestSubmit() method of the form if it exists, supplying the method with the button's proxy element as the submitting element (see #3534) for more info. If the requestSubmit() method is unavailable (Safari) then the proxy's click() method will be invoked.

closes #3534 <!--- 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: -->

  • [ ] 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.
  • [ ] 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 -->

+154 -16

0 comment

5 changed files

pr created time in 6 days

create barnchmicrosoft/fast

branch : users/nirice/submit-button-submission-fix

created branch 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

Nicholas Rice

commit sha 0b8ec20dbafe773f85789084323ffd413795c525

Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes

view details

push time in 6 days

push eventmicrosoft/fast

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

Nicholas Rice

commit sha b97ad8a4dde613f17a1ace4a4865588aff2a35bc

Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes

view details

push time in 6 days

Pull request review commentmicrosoft/fast

docs(spec): add breadcrumb spec

+# Breadcrumb++## Overview+A `fast-breadcrumb` component is used as a navigational aid, allowing users to maintain awareness of their locations within a program, app, or a website.++### Use Cases+- James is browsing an ecommerce website and is looking for a few items to add to his new kitchen. He needs a knife set, and an espresso machine. He checks out `Home and Kitchen` page, then selects `Kitchen and Dining`, first category he picks is `Cutlery`, he finds the sets of knives. There is now a breadcrumb trail of the pages James has clicked through. `Home and Kitchen /  Kitchen and Dining / Cutlery / Knife Sets`+He clicks on `Kitchen and Dining` to go back to the category of kitchen items, selects `Coffee and Espresso` finds the best one that suits his needs. If James wants to continue looking for another item for his kitchen, or other things for his home, he just needs to click on any of the links in the breadcrumb trail to continue his search.++### Prior Art/Examples+- [Ant Design](https://ant.design/components/breadcrumb/)+- [Atlaskit](https://atlaskit.atlassian.com/packages/core/breadcrumbs)+- [Carbon Design](https://www.carbondesignsystem.com/components/breadcrumb/code/)+- [FAST Breadcrumb (React)](https://www.npmjs.com/package/@microsoft/fast-components-react-msft)+- [Lightning Design System](https://www.lightningdesignsystem.com/components/breadcrumbs/#site-main-content)+- [Material UI](https://material-ui.com/components/breadcrumbs/)+- [Office Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb)++---++### API++*Component Name*+- `fast-breadcrumb`++*Properties*+- `slottedBreadcrumbItems` - an HTMLElement[] used in the slotted directive.++*Attribute*+- aria-current - attribute set on the last breadcrumb item, if it has an `href` set. It will always be `aria-current="page"`.++### Anatomy and Appearance++```html+<template+    role="navigation"+    aria-label="breadcrumb"+>+    <div role="list">+        <slot ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}></slot>+    </div>+</template>+```++*Slot Names*+- slotted directive, with a property called `slottedBreadcrumbItems`.++---++## Implementation++```html+<fast-breadcrumb>+    <fast-breadcrumb-item name="Home" href="#"></fast-breadcrumb-item>+    <fast-breadcrumb-item name="Template" href="#"></fast-breadcrumb-item>

I like this a lot better - not needing to add an an anchor inside. nice!

khamudom

comment created time in 6 days

push eventJazibJafri/fast

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

Nicholas Rice

commit sha 52ba6799bd5aa07d9a630afbb710b729a751da68

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

view details

push time in 6 days

push eventmicrosoft/fast

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

push time in 6 days

PR merged microsoft/fast

Reviewers
chore: update codeowners use absolute url

<!--- 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 url to CODEOWNERS file to absolute url instead of relative

Motivation & context

<!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> Using a relative url does not work outside of github, like in docs

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 -->

+1 -1

2 comments

1 changed file

JazibJafri

pr closed time in 6 days

issue commentmicrosoft/fast

Exposing styles in fast components

We had planned to do this but it looks like we haven't done that work yet. Thanks for filing!

ben-girardet

comment created time in 6 days

issue commentmicrosoft/fast

type="submit" in fast-button won't work

Did a bit of digging on this. There are a number of open issues discussing form-associated-custom-element (FACE) submit buttons:

  • https://github.com/whatwg/html/issues/5016
  • https://github.com/w3c/webcomponents/issues/814
  • https://github.com/w3c/webcomponents/issues/187
  • https://github.com/whatwg/html/issues/4187

The issues above discuss various approaches supporting FACE components with form submission capabilities and it seems likely the platform will provide this in the future, but right now it is not supported. There are a few approaches I can think of that we can take in the short term:

1.) FASTButtonInstance.form.submit()

A submit button can determine when form submission should take place and manually invoke the submit method. There are several behavioral differences between submit() and clicking a submit button outlined - see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit for more info:

  • no "submit" event emission
  • no constraint validation

2.) FASTButtonInstance.form.requestSubmit(this.proxy)

This approach circumvents the above two issues and is behaviorally consistent with a user clicking the submitter. It does, however, require that the submitter is a submit button and this API does not currently support being invoked with a form-associated custom elements submit button.

We could take an approach where we briefly append the FASTButton's proxy element which is a submit button and invoke the API with that element instead, removing the element (if appropriate) after submission. This would ensure the form is able to access important attributes such as formAction, formEnctype, formMethod, etc from the proxy instance. It would, however, mean that the submitting element is not the custom element - the SubmitEvent.submitter property would be the proxy element.

3.) FASTButtonInstance.form.requestSubmit()

Using the same API described above, we could invoke requestSubmit() without an argument. This would cause the submitting element to be the form itself.

4.) Emit a "submit" event

The FASTButton could emit a "submit" event when the the form should be submitted. I'm including this for completeness but I don't think this is a good option. App-authors would need to listen for this event on and then submit the form however they see fit (which would probably cause another submit event).

Proposal and notes

Unless anyone has any objections or better ideas my proposal is to implement #2 because I think it is the most behaviorally consistent with what we want. Down the line, when platform support for submit FACE components comes along we can update the element accordingly.

On a somewhat related note - a normal <button> element can be a submit button without the explicit [type="submit]. Is this something we want <fast-button> to support? Instinctually I think this is an edge-case and would bloat out the component un-necessarily but I thought I'd bring it up for discussion.

PhilippSonntagORGADATA

comment created time in 7 days

push eventnicholasrice/rushstack

David Michon

commit sha 10c73a289aa7d9bef0c31e662dd693e0143ce4a0

Fix webpack typings/dependency

view details

David Michon

commit sha 05fe1a1c0c7c6c84c8894c9743c6f149791b8e4e

Add change file

view details

David Michon

commit sha e38756a7e7312c72487ea5215ed6e29cdbd53905

Fix optional peer dependencies

view details

David Michon

commit sha b925a7478a24796f4e34e3b517ee00aa7e9153d4

Update API

view details

Daniel Nadeau

commit sha 3567d241434769666f6877ced46f9b8509faa2c1

Prevent using workspace protocol for peerDepedencies during conversion

view details

Daniel Nadeau

commit sha 126022e0bf076ee0800159b2893083e59daa83b8

Remove incorrectly added workspace protocol

view details

Daniel Nadeau

commit sha 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff

rush change

view details

Daniel Nadeau

commit sha 90c4aa00879ba51991471318c5849f25976962b2

Revert "rush change" This reverts commit 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff.

view details

Daniel Nadeau

commit sha 0f6b58dd0c48f957658f3768ae6397d63aeb776a

Revert "Remove incorrectly added workspace protocol" This reverts commit 126022e0bf076ee0800159b2893083e59daa83b8.

view details

Daniel Nadeau

commit sha 67b6561d8e9944ebf47a4a060ffdbc3450660a13

Add tests

view details

Daniel Nadeau

commit sha de273e0a2961f6b8b07a96191d672be500c52c64

Rush change

view details

Daniel Nadeau

commit sha dae03ac192936df56570f4a4f17e7f1c303412a8

Make it a patch change

view details

Daniel Nadeau

commit sha f157a7c5a1cac699d583578f686300d1b9080dfb

Make change request sorting stable based on package name

view details

Ian Clanton-Thuon

commit sha c4f25db64de6487e13c158103717b7042e761027

Merge pull request #2046 from dmichon-msft/dmichon/optional-peer [Module Minifier Plugin] Make @types/webpack peer dependency optional

view details

Pete Gonzalez

commit sha 09c9bbb7253a8be338ce55869d1ccb5f2730ca4f

Merge pull request #2048 from D4N14L/fixWorkspaceConversionBug [rush-lib] Prevent "workspace:" notation conversion for peer dependencies

view details

Pete Gonzalez

commit sha c785772b3966a9abec01405233614caec592537b

Prepare to publish a patch release of Rush

view details

Rushbot

commit sha 4be730efd01ab613fc3ad02095b5673c0bde851f

Deleting change files and updating change logs for package updates.

view details

Rushbot

commit sha 22520660021a27500b96d8d9b7f95786f4c8578b

Applying package updates.

view details

Pete Gonzalez

commit sha 2679582444178a2c09f9de49b00f6e417f883cc4

Isolate the RSC dependency behind a new TaskPackageResolver class

view details

Daniel Nadeau

commit sha 48fdc410c7cfea07f7514039e2d5af0776ed15b6

Bump Rush to 5.30.1

view details

push time in 7 days

push eventnicholasrice/rushstack

David Michon

commit sha 10c73a289aa7d9bef0c31e662dd693e0143ce4a0

Fix webpack typings/dependency

view details

David Michon

commit sha 05fe1a1c0c7c6c84c8894c9743c6f149791b8e4e

Add change file

view details

David Michon

commit sha e38756a7e7312c72487ea5215ed6e29cdbd53905

Fix optional peer dependencies

view details

David Michon

commit sha b925a7478a24796f4e34e3b517ee00aa7e9153d4

Update API

view details

Daniel Nadeau

commit sha 3567d241434769666f6877ced46f9b8509faa2c1

Prevent using workspace protocol for peerDepedencies during conversion

view details

Daniel Nadeau

commit sha 126022e0bf076ee0800159b2893083e59daa83b8

Remove incorrectly added workspace protocol

view details

Daniel Nadeau

commit sha 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff

rush change

view details

Daniel Nadeau

commit sha 90c4aa00879ba51991471318c5849f25976962b2

Revert "rush change" This reverts commit 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff.

view details

Daniel Nadeau

commit sha 0f6b58dd0c48f957658f3768ae6397d63aeb776a

Revert "Remove incorrectly added workspace protocol" This reverts commit 126022e0bf076ee0800159b2893083e59daa83b8.

view details

Daniel Nadeau

commit sha 67b6561d8e9944ebf47a4a060ffdbc3450660a13

Add tests

view details

Daniel Nadeau

commit sha de273e0a2961f6b8b07a96191d672be500c52c64

Rush change

view details

Daniel Nadeau

commit sha dae03ac192936df56570f4a4f17e7f1c303412a8

Make it a patch change

view details

Daniel Nadeau

commit sha f157a7c5a1cac699d583578f686300d1b9080dfb

Make change request sorting stable based on package name

view details

Ian Clanton-Thuon

commit sha c4f25db64de6487e13c158103717b7042e761027

Merge pull request #2046 from dmichon-msft/dmichon/optional-peer [Module Minifier Plugin] Make @types/webpack peer dependency optional

view details

Pete Gonzalez

commit sha 09c9bbb7253a8be338ce55869d1ccb5f2730ca4f

Merge pull request #2048 from D4N14L/fixWorkspaceConversionBug [rush-lib] Prevent "workspace:" notation conversion for peer dependencies

view details

Pete Gonzalez

commit sha c785772b3966a9abec01405233614caec592537b

Prepare to publish a patch release of Rush

view details

Rushbot

commit sha 4be730efd01ab613fc3ad02095b5673c0bde851f

Deleting change files and updating change logs for package updates.

view details

Rushbot

commit sha 22520660021a27500b96d8d9b7f95786f4c8578b

Applying package updates.

view details

Pete Gonzalez

commit sha 2679582444178a2c09f9de49b00f6e417f883cc4

Isolate the RSC dependency behind a new TaskPackageResolver class

view details

Daniel Nadeau

commit sha 48fdc410c7cfea07f7514039e2d5af0776ed15b6

Bump Rush to 5.30.1

view details

push time in 7 days

push eventmicrosoft/fast

Stephane Comeau

commit sha d2e7ead60e7973cead222843899829f879b67da0

feat: add data grid to base React component set (#3158) * Stack panel base functionality * add tests and schema update * Update read me * classnames applied * add classname tests * working * respond to feedback * add range change callback * fix classname refts * use existing Orientation enum * remove rendered range change callback * scrolling perf - scroll update delay * minor edits * rename some tests * remove itemspan overrides in favor of flat array * tweak classes, add comments * rip out smooth scrolling * fix rtl rendering * correct default scroll delay * update to new depot layout * cleanup * Stack panel base functionality * add tests and schema update * respond to feedback * working * working * new repo structure * clean up initialization * keyboarding work * focus management * focus management * page up/page dn work * focus work * page up/down focus works * fix lint issues * stub in tests and schemas * add tests (some still failing) and related fixes * fix merge issue * focus management fixes, rework handling data changes. * add virtualization test * add tests * update schemas * update read me * remove unwanted chagnes * add missing exports * add v2 schemas * respond to feedback * callback params as object, some renaming * non-virtualized mode like it should pt1 * non-virtualized data grid uses regular html layout for grid sizing. * repspond to feedback * run prettier * make more props optional * tweak read me * columnDefinition => column naming change * rename gridData => rows * don't expose all props in context * respond to feedback * run prettier * rename virtualize prop, fix column update bug, rearrange props, default virtualize prop is now false

view details

Rob Eisenberg

commit sha 72854734afb35ee3677d80b04f2226e1da9cc008

doc: add webpack guide (#3224) * doc: add webpack guide * doc(webpack): simplify build script * doc(webpack): improve build clean and dependencies * fix(webpack): remove unnecessary script block from sample html

view details

Jane Chu

commit sha d9dbe0fdd635a2cfcc92d5fe92aa3d5455043035

chore: remove react components from creator and replace with web components and native elements (#3226)

view details

Nicholas Rice

commit sha dba85da0daaad0ded3421ae01b98a9f0eeaf6e73

chore: correct import name and custom property name #3230

view details

Rob Eisenberg

commit sha 47c03f01623f1045113641c5ca9c812c5fd36c7a

chore(web-components): add non-min script build (#3236)

view details

nicholasrice

commit sha cb339f92824034d048f5e840633ed3d7ded6b009

Publish - @microsoft/fast-components-class-name-contracts-base@4.7.0 - @microsoft/fast-components-class-name-contracts-msft@4.8.6 - @microsoft/fast-components-react-base@4.26.0 - @microsoft/fast-components-react-msft@4.30.12 - @microsoft/fast-components-styles-msft@4.28.11 - @microsoft/fast-jss-manager-react@4.7.4 - @microsoft/fast-jss-manager@4.1.18 - @microsoft/fast-jss-utilities@4.7.14 - @microsoft/fast-layouts-react@4.11.11 - @microsoft/fast-storybook-design-system-addon@1.2.36 - @microsoft/fast-storybook-presets@1.2.4 - @microsoft/fast-figma-plugin-msft@0.6.4 - @microsoft/fast-tooling-react@2.2.0 - @microsoft/fast-tooling@0.5.0 - @microsoft/fast-components-msft@1.1.0 - @microsoft/fast-components@1.1.0 - @microsoft/fast-element@0.10.0 - @microsoft/fast-foundation@1.1.0 - @microsoft/fast-color-explorer@1.5.31 - @microsoft/fast-component-explorer@0.8.22 - @microsoft/fast-creator@0.0.4 - @microsoft/fast-tooling-examples@0.1.1 - @microsoft/site-utilities@0.0.3

view details

Jane Chu

commit sha 79d5aeb6e8c4d176d34f92ef7ba1597abb898d3e

chore: update the Component Explorer to use web components and native HTML elements (#3238) * chore: update explorer site to tooling v2 (#3026) * chore: consolidate schema and component dictionaries (#3040) * fix: ensure data cannot be updated until the preview is initialized, clean up logic with transparency and use site-utilities for widgets (#3117) * chore: remove style overrides and bring style parity with Creator (#3141) * chore: replace react components in Component Explorer with web components (#3178) * chore: add the theme switcher (#3191) * chore: reference component definitions from the site-utilities package (#3209) * chore: remove unused files * chore: address merge conflict, PR comment

view details

Jane Chu

commit sha 297126ba5664b097d0203429d6a86be1fb6e2de0

chore: additional styling tweaks and editing of component configs (#3244)

view details

Nicholas Rice

commit sha 9a7de936738020d56819a6af0bd7d9a1bfc38dfc

chore: update docs to describe how to update a palette #3239 Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

view details

Rob Eisenberg

commit sha 3cd9223fcbc3fa17a670ef5c051cac71900bc26d

docs(integration): add docs for asp.net, blazor, aurelia 1, and aurelia 2 (#3232) * doc(aspnet): add basic asp.net integration doc. * doc(blazor): add basic Blazor integration doc * doc(aurelia2): add basic aurelia 2 setup * doc(aurelia1): add aurelia 1 setup doc * doc(integrations): fix some typos * doc(integration): fix aurelia code format * doc(aspnet): remove empty row * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <daroth@microsoft.com> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <daroth@microsoft.com> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <daroth@microsoft.com> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <daroth@microsoft.com> * Update packages/web-components/fast-foundation/docs/guide/aspnet.doc.md Co-authored-by: Daniel Roth <daroth@microsoft.com> Co-authored-by: Daniel Roth <daroth@microsoft.com>

view details

Jane Chu

commit sha b6cdc2d4cd136128312fa0f0e41f1fc3b4c58d97

chore: update pull request template and contributing files for components in the @microsoft/fast-components package (#3249)

view details

Jane Chu

commit sha ae87fe53ba3affb8e140199065ab78ddeaf5c4c5

chore: sync webpack-dev-server dependency versions, update websocket-extensions to safe version (#3243)

view details

Rob Eisenberg

commit sha 187815e70eaf96a0a3812bd07412bc8d5850127c

docs(fast-element): add public API docs (#3252) * docs(fast-element): add API docs and improving doc consistency * docs(fast-element): add API docs for fast-element * docs(fast-element): more docs and consistency * doc(fast-element): add api doc comments and correct types * docs(fast-element): add api docs and improve consistency * docs(fast-element): add release tags to APIs * docs(fast-element): clarify some wording on the attribute accessor * docs(fast-element): add missing constructor docs * docs(fast-element): fix repeat doc typo

view details

Rob Eisenberg

commit sha ad07adb7524b14cd80ad6e9dc2314a7f8aed403a

docs(website): add introduction (#3241) * doc(introduction): begin writing intro * chore(docs): remove generated api.json files from git * chore(docs): fix some build issues * doc(website): finish intro * doc(website): some working improvements in the intro * docs(website): wording tweak in introduction * docs(introduction): fix some typos

view details

Mark Jones

commit sha 339e09bca7c52aaaca73c9ce8639586d0068c10e

chore: pass through radio-group, radio, slider and slider-label component site definitions (#3251)

view details

Rob Eisenberg

commit sha 81b164d20334835e3ec26ca7ea6112a48b065711

chore(web-components): add missing gitignore files and update api-report (#3258)

view details

Stephane Comeau

commit sha 4e03a0eb7f779d3764e64af56b9c477aec966af9

feat: add styled version of data grid (#3229) * add styled data grid * run prettier * fix linting issue * tweak style * data grid scrolling panels should not be tabbable

view details

Chris Holt

commit sha bc8e3747c57e4749131d4c59ab53e8553ba30632

Publish - @microsoft/fast-layouts-react@4.11.12 - @microsoft/fast-figma-plugin-msft@0.6.5 - @microsoft/fast-tooling-react@2.2.1 - @microsoft/fast-animation@4.0.14 - @microsoft/fast-components-msft@1.1.1 - @microsoft/fast-components@1.1.1 - @microsoft/fast-element@0.10.1 - @microsoft/fast-foundation@1.1.1 - @microsoft/fast-color-explorer@1.5.32 - @microsoft/fast-component-explorer@0.8.23 - @microsoft/fast-creator@0.0.5 - @microsoft/fast-tooling-examples@0.1.2 - @microsoft/site-utilities@0.0.4

view details

Jane Chu

commit sha 440c3f12510bb66ccd0d463f2b845e0ceb11847a

Publish - @microsoft/fast-components-class-name-contracts-base@4.7.1 - @microsoft/fast-components-class-name-contracts-msft@4.8.7 - @microsoft/fast-components-foundation-react@3.1.10 - @microsoft/fast-components-react-base@4.26.1 - @microsoft/fast-components-react-msft@4.30.13 - @microsoft/fast-components-styles-msft@4.28.12 - @microsoft/fast-jss-manager-react@4.7.5 - @microsoft/fast-jss-manager@4.1.19 - @microsoft/fast-jss-utilities@4.7.15 - @microsoft/fast-layouts-react@4.11.13 - @microsoft/fast-react-utilities@1.1.7 - @microsoft/fast-storybook-design-system-addon@1.2.37 - @microsoft/fast-storybook-presets@1.2.5 - @microsoft/fast-figma-plugin-msft@0.6.6 - @microsoft/fast-tooling-react@2.2.2 - @microsoft/fast-tooling@0.5.1 - @microsoft/fast-animation@4.0.15 - @microsoft/fast-colors@5.0.10 - @microsoft/eslint-config-fast-dna@1.1.3 - @microsoft/fast-tslint-rules@3.1.3 - @microsoft/fast-web-utilities@4.5.1 - @microsoft/fast-components-msft@1.1.2 - @microsoft/fast-components@1.1.2 - @microsoft/fast-element@0.10.2 - @microsoft/fast-foundation@1.1.2 - @microsoft/fast-color-explorer@1.5.33 - @microsoft/fast-component-explorer@0.8.24 - @microsoft/fast-creator@0.0.6 - @microsoft/fast-tooling-examples@0.1.3 - @microsoft/site-utilities@0.0.5

view details

Chris Holt

commit sha 62eff11685248f6e686eb761d2614f1f4a70d20e

fix: correct css part name for dialog component (#3260)

view details

push time in 7 days

push eventmicrosoft/fast

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

Nicholas Rice

commit sha a3fb9ae165b9aad15d48204012302d5935252675

Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes

view details

push time in 7 days

push eventJazibJafri/fast

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

Nicholas Rice

commit sha ad3d8c5ec20658ad2c168ad09feb9e15a3a33bd7

Merge branch 'master' into update/codeowner-url

view details

push time in 7 days

push eventmicrosoft/fast

Jazib Jafri

commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec

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

view details

push time in 7 days

PR merged microsoft/fast

Reviewers
chore: fix typo in contributing.md

<!--- 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. --> Fix minor typo in contributing.md

Motivation & context

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

Fixes a typo

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 -->

+1 -1

1 comment

1 changed file

JazibJafri

pr closed time in 7 days

push eventJazibJafri/fast

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

Nicholas Rice

commit sha b07b92f5886df611d3aec41b8f734b7f3d881fa1

Merge branch 'master' into fix/typo-contributing

view details

push time in 7 days

push eventmicrosoft/fast

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

push time in 7 days

PR merged microsoft/fast

Reviewers
chore: correct issues label url

<!--- 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 change updates the url pointing to good-first-issue label on github to the correct label community:good-first-issue

Motivation & context

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

Joining the community section on fast website points to correct github label for community:good-first-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 -->

+4 -4

5 comments

3 changed files

JazibJafri

pr closed time in 7 days

push eventJazibJafri/fast

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

Nicholas Rice

commit sha c54d82aaee77b01dcaf52c416e116591d93d41a0

Merge branch 'master' into fix/github-issues-url

view details

push time in 7 days

issue commentmicrosoft/fast

Correct elevation algorithm in web-components

related to #3443

nicholasrice

comment created time in 7 days

issue closedmicrosoft/fast

Migrate elevation into the design system

What feature are you requesting? Elevation configurations are currently hard-coded into the utility functions. Turn these into a system so they can be adjusted and applied algorithmically similar to the color system.

What would be the benefit of adding this feature? Enabling control of elevation through the design system to be able to customize and coordinate with other platforms and environments.

What solution would be ideal for you? Ability to control up to three elevation configurations per element: ambient, penumbra, and umbra.

closed time in 7 days

bheston

issue commentmicrosoft/fast

Migrate elevation into the design system

This looks like the same issue as #3443. Closing this issue in favor of the former because it has more activity.

bheston

comment created time in 7 days

push eventmicrosoft/fast

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

Nicholas Rice

commit sha d62cf09d731a16de62d58afd49e0badf32ea3879

Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes

view details

push time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation+                item.setAttribute("role", "group");+                item.setAttribute("aria-roledescription", "slide");++                return item;+            });+        }+    }++    public handleFlipperClick(direction: 1 | -1, e: Event): void {+        this.incrementSlide(direction);+    }++    public handleFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                if (+                    e.target !== this.nextFlipperDefault &&+                    e.target !== this.previousFlipperDefault+                ) {+                    break;+                }+            case keyCodeEnter:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public handleDefaultFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public change = (): void => {+        // sethdonohue - reference to carousel is passed for the author to get access to the paused, activeSlideId, and other states.+        this.$emit("change", this.carousel);+    };++    public adjust(adjustment: number): void {+        this.prevActiveTabIndex = this.activeTabIndex;+        if (this.loop) {+            this.activeTabIndex = wrapInBounds(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        } else {+            this.activeTabIndex = limit(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        }+        this.setComponent();+    }++    private slideIds: string[] = [];+    private autoplayTimer: number | void;+    private pausedTimeout: number | void;+    private firstFocus: boolean = true;+    private startTime: number = 0;+    private stopTime: number = 0;++    private incrementSlide = (direction: 1 | -1): void => {+        const tempLength: number = this.basicPattern+            ? this.items.length+            : this.tabs.length;+        const tempIndex: number = this.basicPattern+            ? this.activeSlideIndex+            : this.activeTabIndex;+        this.focused = false;+        let adjustment: number = 0;++        if (this.basicPattern) {+            if (this.loop) {+                adjustment = wrapInBounds(0, tempLength - 1, tempIndex + direction);+            } else {+                adjustment = limit(0, tempLength - 1, tempIndex + direction);+            }+            this.activeSlideId = this.slideIds[adjustment];+            this.itemsChanged();+        } else {+            this.adjust(direction);+            this.focused = true;+        }++        this.change();+    };++    private autoplayNextItem = (): void => {+        this.startTime = Date.now();+        this.incrementSlide(1);+    };++    private generateSlideIds(): void {+        this.slideIds = [];+        this.slideIds = this.items.map((item: HTMLElement, index: number) => {+            return item.getAttribute("id")+                ? (item.getAttribute("id") as string)+                : `slide-${index + 1}`;+        });+    }++    private togglePlay(): void {+        this.paused = !this.paused;+    }++    private startAutoPlay(): void {+        if (!this.paused) {+            this.stopAutoPlay();+            this.startTime = Date.now();+            this.autoplayTimer = window.setInterval(+                this.autoplayNextItem,+                this.autoplayInterval+            );+        }+    }++    private stopAutoPlay(): void {+        this.autoplayTimer = window.clearInterval(this.autoplayTimer as number);+    }++    private handleRotationMouseDown = (e: Event): void => {+        if (this.firstFocus) {+            this.firstFocus = false;+        }+        this.togglePlay();+    };++    private handleRotationKeyDown = (e: KeyboardEvent) => {+        switch (e.keyCode) {+            case keyCodeEnter:+            case keyCodeSpace:+                this.handleRotationMouseDown(e);+                break;+        }+    };++    private handleFocusIn = (e: FocusEvent): void => {+        // sethdonohue - per ARIA spec we need to stop rotation whenever keyboard focus is brought to the carousel unless the user specifically requests it to start again+        // sethdonohue - if firstFocus is true then we are focusing in with the keyboard and not the mousedown fired off of the rotation control so we can still pause. This prevents toggle being fired twice if the rotation control click event is also the first focus event on the carousel+        if (this.firstFocus) {+            if (this.autoplay) {+                this.paused = true;+            }+            this.firstFocus = false;+        }+    };++    private handleBlur(e: Event): void {+        this.focused = false;+    }++    private handleMouseOver = () => {+        if (!this.paused) {+            this.stopTime = Date.now();+            window.clearTimeout(this.pausedTimeout as number);+            this.stopAutoPlay();+        }+    };++    private handleMouseLeave = () => {+        if (!this.paused) {+            // sethdonohue - timer for proper pause of rotation+            const timeDiff: number =+                this.autoplayInterval - (this.stopTime - this.startTime);+            if (timeDiff) {+                window.clearTimeout(this.pausedTimeout as number);+                window.clearInterval(this.autoplayTimer as number);+                this.pausedTimeout = setTimeout(() => {+                    this.autoplayNextItem();+                    this.startAutoPlay();+                }, timeDiff);+            }+        }+        this.focused = false;+    };++    private handleTabsKeypress = (e: KeyboardEvent): void => {+        // sethdonohue - pause the carousel if the right, left, home, end keys are pressed in the case of when autoplay has been restarted by the user and the focus is on the tabs+        switch (e.keyCode) {+            case KeyCodes.arrowLeft:+            case KeyCodes.arrowRight:+            case KeyCodes.home:+            case KeyCodes.end:+                this.paused = true;+                break;+        }+    };++    private handleTabsFocusIn = (e: FocusEvent): void => {+        this.focused = true;+        e.stopPropagation();+        if (this.firstFocus) {+            this.paused = true;+        }+        this.firstFocus = false;+    };++    private handleTabsFocusOut = (e: FocusEvent): void => {+        // sethdonohue - if we focus out of tabs or any tabs children we need to ensure tabs doesn't steal focus+        this.focused = false;+        // sethdonohue - if we focus outside of the carousel then first focus needs to be reset+        if (!this.carousel.contains(e.relatedTarget as Node)) {+            this.firstFocus = true;+        }+    };++    public connectedCallback(): void {+        super.connectedCallback();+        if (this.autoplay) {+            this.startAutoPlay();+        } else {+            this.paused = true;+        }++        // sethdonohue - per ARIA autoplay must pause when mouse is hovering over the carousel+        this.carousel.addEventListener("mouseover", this.handleMouseOver);+        this.carousel.addEventListener("mouseleave", this.handleMouseLeave);++        // sethdonohue - per ARIA rotating must stop when keyboard focus enters the carousel and not restart unless the user explicitly requests it to.

I think most or all of these can and should be declared in the template

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation+                item.setAttribute("role", "group");+                item.setAttribute("aria-roledescription", "slide");++                return item;+            });+        }+    }++    public handleFlipperClick(direction: 1 | -1, e: Event): void {+        this.incrementSlide(direction);+    }++    public handleFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                if (+                    e.target !== this.nextFlipperDefault &&+                    e.target !== this.previousFlipperDefault+                ) {+                    break;+                }+            case keyCodeEnter:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public handleDefaultFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public change = (): void => {+        // sethdonohue - reference to carousel is passed for the author to get access to the paused, activeSlideId, and other states.+        this.$emit("change", this.carousel);+    };++    public adjust(adjustment: number): void {+        this.prevActiveTabIndex = this.activeTabIndex;+        if (this.loop) {+            this.activeTabIndex = wrapInBounds(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        } else {+            this.activeTabIndex = limit(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        }+        this.setComponent();+    }++    private slideIds: string[] = [];+    private autoplayTimer: number | void;+    private pausedTimeout: number | void;+    private firstFocus: boolean = true;+    private startTime: number = 0;+    private stopTime: number = 0;++    private incrementSlide = (direction: 1 | -1): void => {+        const tempLength: number = this.basicPattern+            ? this.items.length+            : this.tabs.length;+        const tempIndex: number = this.basicPattern+            ? this.activeSlideIndex+            : this.activeTabIndex;+        this.focused = false;+        let adjustment: number = 0;++        if (this.basicPattern) {+            if (this.loop) {+                adjustment = wrapInBounds(0, tempLength - 1, tempIndex + direction);+            } else {+                adjustment = limit(0, tempLength - 1, tempIndex + direction);+            }+            this.activeSlideId = this.slideIds[adjustment];+            this.itemsChanged();+        } else {+            this.adjust(direction);+            this.focused = true;+        }++        this.change();+    };++    private autoplayNextItem = (): void => {+        this.startTime = Date.now();+        this.incrementSlide(1);+    };++    private generateSlideIds(): void {+        this.slideIds = [];+        this.slideIds = this.items.map((item: HTMLElement, index: number) => {+            return item.getAttribute("id")+                ? (item.getAttribute("id") as string)+                : `slide-${index + 1}`;+        });+    }++    private togglePlay(): void {+        this.paused = !this.paused;+    }++    private startAutoPlay(): void {+        if (!this.paused) {+            this.stopAutoPlay();+            this.startTime = Date.now();+            this.autoplayTimer = window.setInterval(+                this.autoplayNextItem,+                this.autoplayInterval+            );+        }+    }++    private stopAutoPlay(): void {+        this.autoplayTimer = window.clearInterval(this.autoplayTimer as number);+    }++    private handleRotationMouseDown = (e: Event): void => {+        if (this.firstFocus) {+            this.firstFocus = false;+        }+        this.togglePlay();+    };++    private handleRotationKeyDown = (e: KeyboardEvent) => {+        switch (e.keyCode) {+            case keyCodeEnter:+            case keyCodeSpace:+                this.handleRotationMouseDown(e);+                break;+        }+    };++    private handleFocusIn = (e: FocusEvent): void => {+        // sethdonohue - per ARIA spec we need to stop rotation whenever keyboard focus is brought to the carousel unless the user specifically requests it to start again+        // sethdonohue - if firstFocus is true then we are focusing in with the keyboard and not the mousedown fired off of the rotation control so we can still pause. This prevents toggle being fired twice if the rotation control click event is also the first focus event on the carousel+        if (this.firstFocus) {+            if (this.autoplay) {+                this.paused = true;+            }+            this.firstFocus = false;+        }+    };++    private handleBlur(e: Event): void {+        this.focused = false;+    }++    private handleMouseOver = () => {+        if (!this.paused) {+            this.stopTime = Date.now();+            window.clearTimeout(this.pausedTimeout as number);+            this.stopAutoPlay();+        }+    };++    private handleMouseLeave = () => {+        if (!this.paused) {+            // sethdonohue - timer for proper pause of rotation+            const timeDiff: number =+                this.autoplayInterval - (this.stopTime - this.startTime);+            if (timeDiff) {+                window.clearTimeout(this.pausedTimeout as number);+                window.clearInterval(this.autoplayTimer as number);+                this.pausedTimeout = setTimeout(() => {+                    this.autoplayNextItem();+                    this.startAutoPlay();+                }, timeDiff);+            }+        }+        this.focused = false;+    };++    private handleTabsKeypress = (e: KeyboardEvent): void => {+        // sethdonohue - pause the carousel if the right, left, home, end keys are pressed in the case of when autoplay has been restarted by the user and the focus is on the tabs+        switch (e.keyCode) {+            case KeyCodes.arrowLeft:+            case KeyCodes.arrowRight:+            case KeyCodes.home:+            case KeyCodes.end:+                this.paused = true;+                break;+        }+    };++    private handleTabsFocusIn = (e: FocusEvent): void => {+        this.focused = true;+        e.stopPropagation();

Why are you stopping propagation?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation+                item.setAttribute("role", "group");+                item.setAttribute("aria-roledescription", "slide");++                return item;+            });+        }+    }++    public handleFlipperClick(direction: 1 | -1, e: Event): void {+        this.incrementSlide(direction);+    }++    public handleFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                if (+                    e.target !== this.nextFlipperDefault &&+                    e.target !== this.previousFlipperDefault+                ) {+                    break;+                }+            case keyCodeEnter:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public handleDefaultFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public change = (): void => {+        // sethdonohue - reference to carousel is passed for the author to get access to the paused, activeSlideId, and other states.+        this.$emit("change", this.carousel);+    };++    public adjust(adjustment: number): void {+        this.prevActiveTabIndex = this.activeTabIndex;+        if (this.loop) {+            this.activeTabIndex = wrapInBounds(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        } else {+            this.activeTabIndex = limit(+                0,+                this.tabs.length - 1,+                this.activeTabIndex + adjustment+            );+        }+        this.setComponent();+    }++    private slideIds: string[] = [];+    private autoplayTimer: number | void;+    private pausedTimeout: number | void;+    private firstFocus: boolean = true;+    private startTime: number = 0;+    private stopTime: number = 0;++    private incrementSlide = (direction: 1 | -1): void => {+        const tempLength: number = this.basicPattern+            ? this.items.length+            : this.tabs.length;+        const tempIndex: number = this.basicPattern+            ? this.activeSlideIndex+            : this.activeTabIndex;+        this.focused = false;+        let adjustment: number = 0;++        if (this.basicPattern) {+            if (this.loop) {+                adjustment = wrapInBounds(0, tempLength - 1, tempIndex + direction);+            } else {+                adjustment = limit(0, tempLength - 1, tempIndex + direction);+            }+            this.activeSlideId = this.slideIds[adjustment];+            this.itemsChanged();+        } else {+            this.adjust(direction);+            this.focused = true;+        }++        this.change();+    };++    private autoplayNextItem = (): void => {+        this.startTime = Date.now();+        this.incrementSlide(1);+    };++    private generateSlideIds(): void {+        this.slideIds = [];+        this.slideIds = this.items.map((item: HTMLElement, index: number) => {+            return item.getAttribute("id")+                ? (item.getAttribute("id") as string)+                : `slide-${index + 1}`;+        });+    }++    private togglePlay(): void {+        this.paused = !this.paused;+    }++    private startAutoPlay(): void {+        if (!this.paused) {+            this.stopAutoPlay();+            this.startTime = Date.now();+            this.autoplayTimer = window.setInterval(+                this.autoplayNextItem,+                this.autoplayInterval+            );+        }+    }++    private stopAutoPlay(): void {+        this.autoplayTimer = window.clearInterval(this.autoplayTimer as number);+    }++    private handleRotationMouseDown = (e: Event): void => {+        if (this.firstFocus) {+            this.firstFocus = false;+        }+        this.togglePlay();+    };++    private handleRotationKeyDown = (e: KeyboardEvent) => {+        switch (e.keyCode) {+            case keyCodeEnter:+            case keyCodeSpace:+                this.handleRotationMouseDown(e);+                break;+        }+    };++    private handleFocusIn = (e: FocusEvent): void => {+        // sethdonohue - per ARIA spec we need to stop rotation whenever keyboard focus is brought to the carousel unless the user specifically requests it to start again

Can you put some these comments on new lines so they don't scroll the editor quite as much?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation+                item.setAttribute("role", "group");+                item.setAttribute("aria-roledescription", "slide");++                return item;+            });+        }+    }++    public handleFlipperClick(direction: 1 | -1, e: Event): void {+        this.incrementSlide(direction);+    }++    public handleFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                if (+                    e.target !== this.nextFlipperDefault &&+                    e.target !== this.previousFlipperDefault+                ) {+                    break;+                }+            case keyCodeEnter:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public handleDefaultFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:+                this.paused = true;+                this.incrementSlide(direction);+                break;+        }+    };++    public change = (): void => {+        // sethdonohue - reference to carousel is passed for the author to get access to the paused, activeSlideId, and other states.+        this.$emit("change", this.carousel);

you don't need to provide this.carousel because that is a reference to the WC itself, which is just the this object in this context. The author can access the carousel by inspecting event.target to read any data about the carousel they wish to read.

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation+                item.setAttribute("role", "group");+                item.setAttribute("aria-roledescription", "slide");++                return item;+            });+        }+    }++    public handleFlipperClick(direction: 1 | -1, e: Event): void {+        this.incrementSlide(direction);+    }++    public handleFlipperKeypress = (direction: 1 | -1, e: KeyboardEvent): void => {+        switch (e.keyCode) {+            case keyCodeSpace:

is the keyCodeSpace handling necessary?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(

You only need to invoke setAttribute if the id isn't already there - maybe update to not invoke it if that case is met.

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work

same comment here - do you need to tag yourself or is this generally useful context?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}

do you need this observable callback? Doesn't seem you're doing anything with it.

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {

this can be slimmed up: this.notabfocus = !this.focused

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

 As defined by the W3C: - `aria-label` - optional, based on implementation** - `paused` - boolean whether the rotation is paused or not - `activeslideid` - string+- `basicpattern` - boolean whether or not the carousel follows the basic or tabbed pattern per ARIA spec, defaults to tabbed when basicpattern is false

is "basicpattern" terminology that we came up with? It doesn't seem very descriptive to me so if so I think we should look for a more descriptive name. If we're referencing a named pattern from ARIA or some other resource, can we link off to it to provide additional context?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {+        this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+    }++    @attr({ attribute: "aria-labelledby" })+    public arialabelledby: string;++    @attr({ attribute: "aria-label" })+    public arialabel: string;++    @observable+    public focused: boolean = false;+    public focusedChanged() {+        if (this.focused) {+            this.notabfocus = false;+        } else {+            this.notabfocus = true;+        }+    }++    /**+     * Whether or not to focus the tab on change+     * @public+     * HTML Attribute: notabfocus+     */+    @observable+    public notabfocus: boolean = true;+    public nottabfocusChanged(): void {}++    public setComponent(): void {+        this.activeid = this.tabIds[this.activeTabIndex] as string;+        this.change();+        this.setTabs();+        this.handleActiveIndicatorPosition();+        this.setTabPanels();+        if (!this.notabfocus) {+            this.focusTab();+        }+        this.change();+    }++    public activeindicator = false;++    @observable+    public activeSlideIndex: number = 0;+    public basicContent: HTMLDivElement;+    public carousel: HTMLDivElement;+    public previousFlipperDefault: HTMLElement;+    public previousFlipperSlottedItem: HTMLElement[];+    public nextFlipperDefault: HTMLElement;+    public nextFlipperSlottedItem: HTMLElement[];+    public rotationControl: HTMLElement;+    public rotationControlItem: HTMLElement[];+    public tablistRef: HTMLElement;+    public tabPanelsContainerRef: HTMLElement;++    @observable+    public items: HTMLElement[];+    public itemsChanged(): void {+        if (this.items.length && this.basicPattern) {+            this.generateSlideIds();++            //sethdonohue - if activeSlideId attribute was set by implementation then we need to sync the activeSlideIndex for incrementing to work+            if (this.activeSlideId) {+                this.activeSlideIndex = this.slideIds.indexOf(this.activeSlideId);+            } else {+                this.activeSlideId = this.slideIds[this.activeSlideIndex] as string;+            }++            this.items.forEach((item: HTMLElement, index: number) => {+                if (index === this.activeSlideIndex) {+                    item.classList.add("active-slide");+                    item.removeAttribute("hidden");+                } else {+                    item.setAttribute("hidden", "");+                }+                if (+                    !item.getAttribute("aria-label") ||+                    !item.getAttribute("aria-labelledby")+                ) {+                    item.setAttribute(+                        "aria-label",+                        `${index + 1} of ${this.items.length}`+                    );+                }++                item.setAttribute(+                    "id",+                    item.getAttribute("id")+                        ? (item.getAttribute("id") as string)+                        : `slide-${index + 1}`+                );++                item.classList.add("slide");+                // sethdonohue - per ARIA spec role=group and roledescription=slide must be on the slide container for basicPattern (not tabbed) implementation

Is this note specific to you? If not, can you remove the user tagging?

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import { attr, observable, DOM } from "@microsoft/fast-element";+import { Tabs } from "../tabs";+import {+    keyCodeSpace,+    keyCodeEnter,+    wrapInBounds,+    limit,+    KeyCodes,+} from "@microsoft/fast-web-utilities";+import { applyMixins } from "../utilities";+import { ARIAGlobalStatesAndProperties } from "../patterns";++/**+ * An Carousel Custom HTML Element.+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#carousel | ARIA carousel }.+ *+ * @public+ */+export class Carousel extends Tabs {+    @attr({ mode: "fromView" })+    public autoplay: boolean = true;++    @attr({ mode: "fromView" })+    public loop: boolean = true;++    @attr({ mode: "boolean" })+    public paused: boolean = false;+    public pausedChanged(): void {+        if (!this.paused) {+            this.focused = false;+            this.notabfocus = true;+            this.startAutoPlay();+        } else {+            this.notabfocus = false;+            this.stopAutoPlay();+        }+        if (this.change) {+            this.change();+        }+    }++    @attr({ attribute: "basicpattern", mode: "boolean" })+    public basicPattern: boolean = false;++    @attr({ attribute: "autoplay-interval" })+    public autoplayInterval: number = 6000;++    @attr({ attribute: "activeslideid" })+    public activeSlideId: string;+    public activeSlideIdChanged(): void {

Can you add tsdoc comments for all of these public properties, and ensure that any public properties not intended to be used by app authors are tagged as @internal

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

+import {+    html,+    ref,+    slotted,+    when,+    ViewTemplate,+    elements,+} from "@microsoft/fast-element";+import { Carousel } from "./carousel";+import { FlipperDirection } from "../flipper";++const pauseIcon: string = `<svg viewBox="0 0 16 16" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg"><path d="M13.9944 14.9875C13.9944 15.1284 13.9722 15.2582 13.9277 15.3769C13.8758 15.503 13.8016 15.6106 13.7051 15.6996C13.6161 15.7886 13.5086 15.8628 13.3825 15.9221C13.2638 15.974 13.1377 16 13.0042 16H11.0014C10.8679 16 10.7381 15.974 10.612 15.9221C10.4933 15.8628 10.3857 15.7886 10.2893 15.6996C10.2003 15.6106 10.1298 15.503 10.0779 15.3769C10.026 15.2582 10 15.1284 10 14.9875V1.00139C10 0.867872 10.026 0.738062 10.0779 0.611961C10.1298 0.493278 10.2003 0.38943 10.2893 0.300417C10.3857 0.203987 10.4933 0.12981 10.612 0.077886C10.7381 0.025962 10.8679 0 11.0014 0H13.0042C13.1377 0 13.2638 0.025962 13.3825 0.077886C13.5086 0.12981 13.6161 0.203987 13.7051 0.300417C13.8016 0.38943 13.8758 0.493278 13.9277 0.611961C13.9722 0.738062 13.9944 0.867872 13.9944 1.00139V14.9875ZM5.99444 14.9875C5.99444 15.1284 5.96847 15.2582 5.91655 15.3769C5.86463 15.503 5.79416 15.6106 5.70515 15.6996C5.61613 15.7886 5.50858 15.8628 5.38248 15.9221C5.26379 15.974 5.13398 16 4.99305 16H2.99026C2.84933 16 2.72323 15.974 2.61196 15.9221C2.49328 15.8628 2.38572 15.7886 2.28929 15.6996C2.20028 15.6106 2.12981 15.503 2.07789 15.3769C2.02596 15.2582 2 15.1284 2 14.9875V1.00139C2 0.867872 2.02596 0.738062 2.07789 0.611961C2.12981 0.493278 2.20028 0.38943 2.28929 0.300417C2.38572 0.203987 2.49328 0.12981 2.61196 0.077886C2.73064 0.025962 2.85675 0 2.99026 0H4.99305C5.13398 0 5.26379 0.025962 5.38248 0.077886C5.50858 0.12981 5.61613 0.203987 5.70515 0.300417C5.79416 0.38943 5.86463 0.493278 5.91655 0.611961C5.96847 0.738062 5.99444 0.867872 5.99444 1.00139V14.9875Z"></path></svg>`;++const playIcon: string = `<svg viewBox="0 0 16 16" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg"><path d="M1 0V16L15.0083 8L1 0Z"></path></svg>`;++const basicTemplate: ViewTemplate = html<Carousel>`+    <div class="carousel-content" ${ref("basicContent")}>+        <slot ${slotted({ property: "items", filter: elements() })}></slot>+    </div>+`;++const tabbedTemplate: ViewTemplate = html<Carousel>`+    <div class="carousel-content">+        <div class="tablist" part="tablist" role="tablist" ${ref("tablistRef")}>+            <slot class="tab" name="tab" part="tab" ${slotted("tabs")}></slot>+        </div>+        <div class="tabpanel" ${ref("tabPanelsContainerRef")}>+            <slot name="tabpanel" part="tabpanel" ${slotted("tabpanels")}></slot>+        </div>+    </div>+`;++/**+ * The template for the {@link @microsoft/fast-foundation#(Carousel:class)} component.+ * @public+ */+export const CarouselTemplate = html<Carousel>`+<template+    role="group"+    aria-roledescription="carousel"+    ${ref("carousel")}+>+    <div+        class="rotation-control"+        aria-label="${x =>+            x.paused+                ? "start automatic slide rotation"+                : "stop automatic slide rotation"}"+        ${ref("rotationControl")}+    >+        <slot+            name="rotation-control"+            part="rotation-control"+            ${slotted("rotationControlItem")}+        >+            <fast-button appearance="neutral">+                ${x =>+                    x.paused+                        ? html`+                              ${playIcon}+                          `+                        : html`+                              ${pauseIcon}+                          `}+            </fast-button>+        </slot>+    </div>+    <div +        class="previous-flipper flipper"+        @click=${(x, c) => x.handleFlipperClick(-1, c.event as MouseEvent)}+        @keypress=${(x, c) => x.handleFlipperKeypress(-1, c.event as KeyboardEvent)}+    >+        <slot name="previous-button" part="previous-button" ${slotted(+            "previousFlipperSlottedItem"+        )}>+            <fast-flipper aria-label="previous slide" aria-hidden="${x =>+                !x.basicPattern ? "true" : "false"}" direction=${+    FlipperDirection.previous+}+                ${ref("previousFlipperDefault")}+>+        </slot>+    </div>+    <div+        class="next-flipper flipper"+        @click=${(x, c) => x.handleFlipperClick(1, c.event as MouseEvent)}+        @keypress=${(x, c) => x.handleFlipperKeypress(1, c.event as KeyboardEvent)}+    >+        <slot name="next-button" part="next-button" ${slotted("nextFlipperSlottedItem")}>+            <fast-flipper aria-label="next slide" aria-hidden="${x =>

We don't want to bake strings into the template here because they can't be easily localized - you should make the labels property driven or find another mechanism to make the labels configurable

SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

 As defined by the W3C:  - **Next and Previous Controls:** Simple buttons [aka flippers] that allow for control of displaying the next and previous slides. +- **Rotation COntrol:** Simple button controlling the start and stop of automatic slide rotation.
- **Rotation Control:** Simple button controlling the start and stop of automatic slide rotation.
SethDonohue

comment created time in 8 days

Pull request review commentmicrosoft/fast

feat: add carousel wc following basic and tabbed pattern

 export * from "./text-area/index"; export * from "./text-field/index"; export * from "./tree-view/index"; export * from "./tree-item/index";+export * from "./utilities/components/carousel-test-slide";

If this is just for testing I don't think it should be exported by the bundle

SethDonohue

comment created time in 8 days

push eventmicrosoft/fast

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

push time in 8 days

delete branch microsoft/fast

delete branch : users/nirice/direction-based-stylesheets

delete time in 8 days

PR merged microsoft/fast

Reviewers
feat: adding directional stylesheet behavior

<!--- 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

This change implements the directional stylesheet behavior described in #3246. This will allow component authors to supply a stylesheet to be applied for both LTR and RTL specific component instances.

This change adds the behavior to @microsoft/fast-foundation but does require use with a Design System Provider that implements a direction property set to either "ltr" or "rtl".

closes #3246 <!--- 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: -->

  • [ ] 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: -->

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 -->

+197 -1

0 comment

6 changed files

nicholasrice

pr closed time in 8 days

issue closedmicrosoft/fast

How are LTR and RTL specific CSS rules applied?

We currently don't have guidance or reference implementations for handling RTL style rules that cannot be achieved directly through platform features (grid, flex, margin-inline-start, etc). The solution should support the following:

  1. property switching ("left" -> "right")
  2. value inversion (20px -> -20px)
  3. value replacement (0deg -> -90deg)

Complication

LTR and RTL specific style rules is sometimes accomplished through [dir="ltr"] and [dir="rtl"] selectors. This approach will not work with style encapsulation without setting the dir attribute on every custom element w/ encapsulated styles.

Options

Behavior stylesheets

We could write a Behavior to attach/detach based on document direction. While likely the most robust solution, this would relies on JavaScript execution for every component on initialization. Additionally, accurately determining document direction is not the most straight forward operation.

CSS Custom Properties + calc

Value inversion is easily accomplished through CSS calc and CSS Custom Properties:

html {
   /* LTR */
   --dir-inverter: 1;

   /* RTL */
   --dir-inverter: -1;
}
/* ... */
:host {
    left: calc(var(--dir-inverter) * 20px);
}

Additionally, certain property replacements can be accomplished w/ CSS Custom Properties and calc. Take the following where right and left should switch:

html {
    /* LTR */
    --ltr: 1;
    --rtl: dskfjadsklj; /* gibberish that invalidates a calc statement */

    /* RTL */
    --ltr: dskfjadsklj; /* gibberish that invalidates a calc statement */
    --rtl: 1;
}


:host {
   left: calc(var(--ltr) * 20px);
   right: calc(var(--rtl) * 20px);
}

I don't believe that 2. is possible w/ CSS Calc + CSS Custom Properties.

Others?

I'm not certain what our other options are - please chime in with ideas if you have them.

closed time in 8 days

nicholasrice

PR closed microsoft/fast

Reviewers
fix: mimic the events on fast-text-field to match the standard HTML input

<!--- 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

Updated handleTextInput to emit input and added more events for @keydown, @blur and @focus. This is to mimic the behavior on the platform's <input /> element. The change will now happen on key enter and blur when a value has changed.

Motivation & context

Fixes #3453

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 -->

+5 -2

5 comments

1 changed file

khamudom

pr closed time in 8 days

pull request commentmicrosoft/fast

fix: mimic the events on fast-text-field to match the standard HTML input

Closing because this work will be is being done in #3581

khamudom

comment created time in 8 days

push eventJazibJafri/fast

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 df5e716e128e36469aff1599e40a940d57d4ae61

Merge branch 'master' into fix/github-issues-url

view details

push time in 8 days

push eventJazibJafri/fast

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 d148eac1af77c2a9c1e9e35d3471e241c9be2704

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

view details

push time in 8 days

push eventmicrosoft/fast

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 d287cca0d9894a62137d45557aea21c8ee32d085

Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes

view details

push time in 8 days

push eventmicrosoft/fast

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 63329ad3a57af21efa316378852d29c97a7ef1db

Merge branch 'master' into users/nirice/direction-based-stylesheets

view details

push time in 8 days

push eventmicrosoft/fast

Nicholas Rice

commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90

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

view details

push time in 8 days

delete branch microsoft/fast

delete branch : users/nirice/correct-design-system-provider-documentation

delete time in 8 days

PR merged microsoft/fast

Reviewers
chore: correct provider creation 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

This change corrects several documentation errors in the "Creating a Design System Provider" section.

closes #3556 <!--- 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 -->

+4 -4

0 comment

1 changed file

nicholasrice

pr closed time in 8 days

issue closedmicrosoft/fast

Wrong code in website

https://fast.design/docs/components/design-system-provider#creating-a-design-system-provider

In these steps, you need to change the circled part:

image

From fast-components to fast-foundation

closed time in 8 days

limefrogyank

issue openedmicrosoft/fast

Add FormAssociation mechanism to automatically map proxy values

The FormAssociated base class leverages a proxy element to support browsers that do not support native form-association. Currently most components add a change handler and manually update the proxy element when parallel properties on the custom element change. This logic is largely duplicated.

We should provide a simple way to declare that a property should be reflected to the proxy element so that logic can be encapsulated. In general the mapping is 1-1 but there is 1 case where the value is mapped via the setAttribute API so there will need to be some level of configuration required.

This could look something like:

// before:
@attr
public name: string = ""
private nameChanged() {
  if (this.proxy instanceof HTMLElement) {
    this.proxy.name = this.name
  }
}

// After
@attr
@formAssociatedMapToProxy
public name: string = ""

created time in 8 days

PR opened microsoft/fast

Reviewers
Users/nirice/form associated custom elements fixes

<!--- 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

This change addresses a number of issues with form-associated controls:

  1. Updates FormAssociated to always set the the form value when value is changed (closes #3550 #3544)
  2. The internal text input of text-field should have it's value property set, not it's attribute (closes #3448)
  3. Ensures fast-text-field and fast-text-area emit change and input events appropriately (closes #3453)

<!--- 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: -->

  • [ ] 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.
  • [ ] 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 -->

+239 -125

0 comment

12 changed files

pr created time in 8 days

push eventmicrosoft/fast

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 6baf938b7c33f63f4f0ebfd764b473696b49c58b

Merge branch 'master' into users/nirice/direction-based-stylesheets

view details

push time in 8 days

push eventmicrosoft/fast

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 dff4a9494a0ff244ce4361498f44f623a60ddf6c

Merge branch 'master' into users/nirice/correct-design-system-provider-documentation

view details

push time in 8 days

issue commentmicrosoft/fast

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

Thanks for the detailed description @NPadrutt! This looks related to https://github.com/microsoft/fast/issues/3550 - working on a fix now.

NPadrutt

comment created time in 8 days

push eventmicrosoft/fast

nicholasrice

commit sha 528ad8ba8396a491e2812ddf58395f876af9cee5

align imports and doc links

view details

push time in 8 days

Pull request review commentmicrosoft/fast

feat: adding directional stylesheet behavior

+---+id: localization+title: Localization+custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-components/docs/design/localization.md+---++## Document Direction+Many CSS layout properties like [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) automatically handle reflow depending on the [document's primary direction](https://www.w3.org/International/questions/qa-html-dir). There are also CSS [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) that can be used as well to apply localized margins, paddings, borders and positioning. Unfortunately, browser support for these properties is limited and there are still styling cases not covered by these properties (directional glyphs, transforms, etc). That is why FAST provides several mechanisms to apply direction-based styles.++### DesignSystemProvider+The [`FASTDesignSystemProvider`](/docs/api/fast-components-msft.fastdesignsystemprovider/) exposes a `direction` property. This should be set to the primary document direction and defaults to `ltr`. This value will be used to inform the stylesheet behaviors described below.++### `inlineStartBehavior` and `inlineEndBehavior`+[inlineStartBehavior](/docs/api/fast-components-msft.inlinestartbehavior/) and [inlineEndBehavior](/docs/api/fast-components-msft.inlineendbehavior/) can be used to apply localized [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) properties. These are drop-in replacements for the browsers `inline-start` and `inline-end` float values and should be used when the native values are not supported. If your browser-matrix supports `inline-start` and `inline-end` float values, please use the native values.

oops I'll correct

nicholasrice

comment created time in 8 days

pull request commentmicrosoft/fast

fix: mimic the events on fast-text-field to match the standard HTML input

I figured out why input events bubble out of the control but change events do not. input event's have the composed flag and bubble through shadow DOM boundaries but change event's do not.

@khamudom I'm doing a round of bug fixes surrounding form components. If you don't mind, I'll merge this work in with that work and get all the components working as expected.

khamudom

comment created time in 9 days

Pull request review commentmicrosoft/fast

fix: mimic the events on fast-text-field to match the standard HTML input

 export class TextField extends FormAssociated<HTMLInputElement> {      * @internal      */     public handleTextInput(): void {-        if (this.control && this.control.value) {+        if (this.control) {             this.value = this.control.value;         }+        this.$emit("input", this.value);

You don't need to emit an input event - it will bubble from the shadowed input.

khamudom

comment created time in 9 days

PR opened microsoft/fast

Reviewers
chore: correct provider creation 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

This change corrects several documentation errors in the "Creating a Design System Provider" section.

closes #3556 <!--- 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: -->

  • [ ] 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.
  • [ ] 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 -->

+4 -4

0 comment

1 changed file

pr created time in 9 days

push eventmicrosoft/fast

Nicholas Rice

commit sha 7e42c69ab8f7033fc4ac419b24d40c28377b49ab

Update packages/web-components/fast-components/docs/design/localization.md Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

view details

push time in 9 days

push eventmicrosoft/fast

Chris Holt

commit sha 9e67f52a8fd3e1736e3882ef7e2fa3f25e63a396

fix: update nested to be observable and set isNestedItem method to readonly (#3539) * fix: update nested to be observable and set isNestedItem method to readonly * remove !!

view details

Rob Eisenberg

commit sha 198232f6d4c6d6aa304498ccbfe6f238a2b3e55f

chore: update PR template label assignment (#3538)

view details

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

Nicholas Rice

commit sha fb9f88284d51b1d9849714cc9a4f2c73c143c3a0

Merge branch 'master' into users/nirice/direction-based-stylesheets

view details

push time in 9 days

issue closedmicrosoft/fast

Add the ability to change the accent color palette source color in the plugin

What feature are you requesting? Ability to change the accent source color to any custom accent color. Right now, we just use the default accent (#0078d4) base color to generate the backround color ramp.

What would be the benefit of adding this feature? The ability for customers to use a custom accent color to generate the accent color ramp, which would align to our design system.

What solution would be ideal for you? I am thinking a treeview that is part of a set of global variables like this one. The treeview item would consist of a color swatch to visualize the color, coupled with an editable input field to show/edit the precise base color.

What alternatives have you considered? This UI could also live under a global/recipe pivot like we have in https://www.fast.design image

Is there any additional context for your request?

Attach screenshots or images add detail to your request:

closed time in 9 days

Jeremy-Knudsen
more