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
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/enzyme-react-wrapper-update-repro 0
Bug repro repository
generate massive amounts of fake data in Node.js and the browser
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
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!
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?
comment created time in a day
push eventmicrosoft/fast
commit sha cbcb2177c81740f6d6fc0be98973217dbb001e00
feat: export form-associated under alpha flag (#3618) * export form-associated under alpha flag * fix api docs Co-authored-by: nicholasrice <[email protected]>
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
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr closed time in a day
push eventnicholasrice/fast-ds-provider-interop
commit sha 7533433ad81726bc1536a0c51e96c0dd9b7df682
updating readme
push time in a day
push eventmicrosoft/fast
commit sha d78c32bf0157e488c0e979ebc98e18855c78abb2
fix api docs
push time in a day
PR opened microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr created time in a day
create barnchmicrosoft/fast
branch : users/nirice/fixing-documentation-for-direction-behavior
created branch 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.
comment created time in a day
PR opened microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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
commit sha df9309ad9bccb8294f86c54a5ca6e623147316ff
adding use-defaults
commit sha c83379fa6aa5192cf1fb390cb91927504b913861
wire react side
commit sha 4f295c55ea91424f083368ab3782ace56844c7d7
finalize demo
commit sha 14b38c34e373e8850e0bbce57d60a6663fc622e7
adding readme
commit sha f51082c8d0f6fb14ec6a2bfa0dcc01d7e38be78f
cleanup
push time in 2 days
push eventnicholasrice/fast-ds-provider-interop
commit sha 4270cbaa053506d903d0ae580a82ce0c759aa5dc
setup webpack
commit sha 50180acec34cdf984c83c63800422dd9bc9e46ac
create wrapper
push time in 2 days
push eventnicholasrice/fast-ds-provider-interop
commit sha bcbf667c33596a9260111248cd94d2a84154a0a1
init npm
commit sha 2a4ffe742858b514cf8626126f94dfd00407045e
adding dependencies
push time in 2 days
push eventJazibJafri/fast
commit sha cfaeab3cf9527765baf02122962dbb54c0e07c1b
Publish - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - [email protected] - @microsoft/[email protected]
commit sha fbc312df5cd4e46b0142a3cc56b3441d9b4245e0
fix: use design system direction support for glyph in treeview (#3608)
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 <[email protected]>
commit sha f9dd0a4ea86a1940023aaa45e1704f84cdc8ba36
docs(spec): add breadcrumb spec (#3552) # Description The file has specs for `fast-breadcrumb` and `fast-breadcrumb-item`  ## Motivation & context <!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [ ] **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 -->
commit sha eedd3a4cde757de1dee95c3e6a1e08de0f577675
Merge branch 'master' into fix/pr-template-url
push time in 2 days
push eventBrunoBlanes/fast
commit sha f9dd0a4ea86a1940023aaa45e1704f84cdc8ba36
docs(spec): add breadcrumb spec (#3552) # Description The file has specs for `fast-breadcrumb` and `fast-breadcrumb-item`  ## Motivation & context <!--- What problem does this change solve? --> <!--- Provide a link if you are addressing an open issue. --> ## Issue type checklist <!--- What type of change are you submitting? Put an x in the box that applies: --> - [ ] **Chore**: A change that does not impact distributed packages. - [ ] **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 -->
commit sha d71ffb841156b11f45c9f35a0d81eb9015888487
Merge branch 'master' into development/bruno-blanes
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?
comment created time in 5 days
push eventmicrosoft/fast
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 <[email protected]>
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
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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
commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169
fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <[email protected]>
commit sha 1667eb44b9f21238602948027a71840448eca275
chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <[email protected]>
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
commit sha 9d32aa15cd5c18d51c90e35100b0284c5ebb3ca6
fix: update fast-card and component sampler color handling (#3597) * Updated fast-card and component sampler color handling
commit sha c145e8ea8313597c70b279fe7fe5d488a6087f6a
docs: fix broken links (#3601)
commit sha 62db5ad44c48dece69dac37a5e4a312a8ae0a5ae
Merge branch 'master' into users/nirice/submit-button-submission-fix
push time in 6 days
push eventmicrosoft/fast
commit sha bef33d3c1e294b35500d80d4968bb22dda234964
make methods private
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
comment created time in 6 days
push eventmicrosoft/fast
commit sha d565dee0b8f4f4e25ce4d7ee208a0f3d291d9169
fix: correct class name for text field start/end styles (#3551) Co-authored-by: Rob Eisenberg <[email protected]>
commit sha 1667eb44b9f21238602948027a71840448eca275
chore: remove fast-components-msft from prepare docs (#3599) Co-authored-by: Rob Eisenberg <[email protected]>
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
commit sha 9d32aa15cd5c18d51c90e35100b0284c5ebb3ca6
fix: update fast-card and component sampler color handling (#3597) * Updated fast-card and component sampler color handling
commit sha 3afa604bf4660f92bad5e7bd228bee1f12697198
Merge branch 'master' into users/nirice/submit-button-submission-fix
push time in 6 days
push eventmicrosoft/fast
commit sha 624fb3777771c5736cccbfd07a68ae08823169d2
remove duplicate proxy attachment code
push time in 6 days
push eventmicrosoft/fast
commit sha d72d58e8a9cce6fe6dc9806c6f17355a7e4a452b
remove debugger statements
push time in 6 days
PR opened microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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
commit sha f2a39489015be38f2372060a7898b0ef1cf96702
fix: the Navigation component can now drag and drop nested component (#3598)
commit sha 0b8ec20dbafe773f85789084323ffd413795c525
Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes
push time in 6 days
push eventmicrosoft/fast
commit sha f3e61d467e058454263e288866ba2cac3387ea28
chore: update codeowners use absolute urll (#3577) Co-authored-by: Aaron Wentzel <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
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 -->
commit sha b97ad8a4dde613f17a1ace4a4865588aff2a35bc
Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes
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!
comment created time in 6 days
push eventJazibJafri/fast
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 <[email protected]> * align imports and doc links Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Jane Chu <[email protected]>
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 <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec
chore: fix typo in contributing.md (#3573) Co-authored-by: Nicholas Rice <[email protected]>
commit sha f3e61d467e058454263e288866ba2cac3387ea28
chore: update codeowners use absolute urll (#3577) Co-authored-by: Aaron Wentzel <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
commit sha 52ba6799bd5aa07d9a630afbb710b729a751da68
Merge branch 'master' into fix/pr-template-url
push time in 6 days
push eventmicrosoft/fast
commit sha f3e61d467e058454263e288866ba2cac3387ea28
chore: update codeowners use absolute urll (#3577) Co-authored-by: Aaron Wentzel <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
push time in 6 days
PR merged microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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!
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.
comment created time in 7 days
push eventnicholasrice/rushstack
commit sha 10c73a289aa7d9bef0c31e662dd693e0143ce4a0
Fix webpack typings/dependency
commit sha 05fe1a1c0c7c6c84c8894c9743c6f149791b8e4e
Add change file
commit sha e38756a7e7312c72487ea5215ed6e29cdbd53905
Fix optional peer dependencies
commit sha b925a7478a24796f4e34e3b517ee00aa7e9153d4
Update API
commit sha 3567d241434769666f6877ced46f9b8509faa2c1
Prevent using workspace protocol for peerDepedencies during conversion
commit sha 126022e0bf076ee0800159b2893083e59daa83b8
Remove incorrectly added workspace protocol
commit sha 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff
rush change
commit sha 90c4aa00879ba51991471318c5849f25976962b2
Revert "rush change" This reverts commit 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff.
commit sha 0f6b58dd0c48f957658f3768ae6397d63aeb776a
Revert "Remove incorrectly added workspace protocol" This reverts commit 126022e0bf076ee0800159b2893083e59daa83b8.
commit sha 67b6561d8e9944ebf47a4a060ffdbc3450660a13
Add tests
commit sha de273e0a2961f6b8b07a96191d672be500c52c64
Rush change
commit sha dae03ac192936df56570f4a4f17e7f1c303412a8
Make it a patch change
commit sha f157a7c5a1cac699d583578f686300d1b9080dfb
Make change request sorting stable based on package name
commit sha c4f25db64de6487e13c158103717b7042e761027
Merge pull request #2046 from dmichon-msft/dmichon/optional-peer [Module Minifier Plugin] Make @types/webpack peer dependency optional
commit sha 09c9bbb7253a8be338ce55869d1ccb5f2730ca4f
Merge pull request #2048 from D4N14L/fixWorkspaceConversionBug [rush-lib] Prevent "workspace:" notation conversion for peer dependencies
commit sha c785772b3966a9abec01405233614caec592537b
Prepare to publish a patch release of Rush
commit sha 4be730efd01ab613fc3ad02095b5673c0bde851f
Deleting change files and updating change logs for package updates.
commit sha 22520660021a27500b96d8d9b7f95786f4c8578b
Applying package updates.
commit sha 2679582444178a2c09f9de49b00f6e417f883cc4
Isolate the RSC dependency behind a new TaskPackageResolver class
commit sha 48fdc410c7cfea07f7514039e2d5af0776ed15b6
Bump Rush to 5.30.1
push time in 7 days
push eventnicholasrice/rushstack
commit sha 10c73a289aa7d9bef0c31e662dd693e0143ce4a0
Fix webpack typings/dependency
commit sha 05fe1a1c0c7c6c84c8894c9743c6f149791b8e4e
Add change file
commit sha e38756a7e7312c72487ea5215ed6e29cdbd53905
Fix optional peer dependencies
commit sha b925a7478a24796f4e34e3b517ee00aa7e9153d4
Update API
commit sha 3567d241434769666f6877ced46f9b8509faa2c1
Prevent using workspace protocol for peerDepedencies during conversion
commit sha 126022e0bf076ee0800159b2893083e59daa83b8
Remove incorrectly added workspace protocol
commit sha 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff
rush change
commit sha 90c4aa00879ba51991471318c5849f25976962b2
Revert "rush change" This reverts commit 3c4c8985c9626f52eff4688b5ccdb35b5c2af8ff.
commit sha 0f6b58dd0c48f957658f3768ae6397d63aeb776a
Revert "Remove incorrectly added workspace protocol" This reverts commit 126022e0bf076ee0800159b2893083e59daa83b8.
commit sha 67b6561d8e9944ebf47a4a060ffdbc3450660a13
Add tests
commit sha de273e0a2961f6b8b07a96191d672be500c52c64
Rush change
commit sha dae03ac192936df56570f4a4f17e7f1c303412a8
Make it a patch change
commit sha f157a7c5a1cac699d583578f686300d1b9080dfb
Make change request sorting stable based on package name
commit sha c4f25db64de6487e13c158103717b7042e761027
Merge pull request #2046 from dmichon-msft/dmichon/optional-peer [Module Minifier Plugin] Make @types/webpack peer dependency optional
commit sha 09c9bbb7253a8be338ce55869d1ccb5f2730ca4f
Merge pull request #2048 from D4N14L/fixWorkspaceConversionBug [rush-lib] Prevent "workspace:" notation conversion for peer dependencies
commit sha c785772b3966a9abec01405233614caec592537b
Prepare to publish a patch release of Rush
commit sha 4be730efd01ab613fc3ad02095b5673c0bde851f
Deleting change files and updating change logs for package updates.
commit sha 22520660021a27500b96d8d9b7f95786f4c8578b
Applying package updates.
commit sha 2679582444178a2c09f9de49b00f6e417f883cc4
Isolate the RSC dependency behind a new TaskPackageResolver class
commit sha 48fdc410c7cfea07f7514039e2d5af0776ed15b6
Bump Rush to 5.30.1
push time in 7 days
push eventmicrosoft/fast
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
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
commit sha d9dbe0fdd635a2cfcc92d5fe92aa3d5455043035
chore: remove react components from creator and replace with web components and native elements (#3226)
commit sha dba85da0daaad0ded3421ae01b98a9f0eeaf6e73
chore: correct import name and custom property name #3230
commit sha 47c03f01623f1045113641c5ca9c812c5fd36c7a
chore(web-components): add non-min script build (#3236)
commit sha cb339f92824034d048f5e840633ed3d7ded6b009
Publish - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected]
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
commit sha 297126ba5664b097d0203429d6a86be1fb6e2de0
chore: additional styling tweaks and editing of component configs (#3244)
commit sha 9a7de936738020d56819a6af0bd7d9a1bfc38dfc
chore: update docs to describe how to update a palette #3239 Co-authored-by: Jane Chu <[email protected]>
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 <[email protected]> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <[email protected]> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <[email protected]> * Update packages/web-components/fast-foundation/docs/guide/blazor.doc.md Co-authored-by: Daniel Roth <[email protected]> * Update packages/web-components/fast-foundation/docs/guide/aspnet.doc.md Co-authored-by: Daniel Roth <[email protected]> Co-authored-by: Daniel Roth <[email protected]>
commit sha b6cdc2d4cd136128312fa0f0e41f1fc3b4c58d97
chore: update pull request template and contributing files for components in the @microsoft/fast-components package (#3249)
commit sha ae87fe53ba3affb8e140199065ab78ddeaf5c4c5
chore: sync webpack-dev-server dependency versions, update websocket-extensions to safe version (#3243)
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
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
commit sha 339e09bca7c52aaaca73c9ce8639586d0068c10e
chore: pass through radio-group, radio, slider and slider-label component site definitions (#3251)
commit sha 81b164d20334835e3ec26ca7ea6112a48b065711
chore(web-components): add missing gitignore files and update api-report (#3258)
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
commit sha bc8e3747c57e4749131d4c59ab53e8553ba30632
Publish - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected]
commit sha 440c3f12510bb66ccd0d463f2b845e0ceb11847a
Publish - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected]
commit sha 62eff11685248f6e686eb761d2614f1f4a70d20e
fix: correct css part name for dialog component (#3260)
push time in 7 days
push eventmicrosoft/fast
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 <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec
chore: fix typo in contributing.md (#3573) Co-authored-by: Nicholas Rice <[email protected]>
commit sha a3fb9ae165b9aad15d48204012302d5935252675
Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes
push time in 7 days
push eventJazibJafri/fast
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 <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec
chore: fix typo in contributing.md (#3573) Co-authored-by: Nicholas Rice <[email protected]>
commit sha ad3d8c5ec20658ad2c168ad09feb9e15a3a33bd7
Merge branch 'master' into update/codeowner-url
push time in 7 days
push eventmicrosoft/fast
commit sha 12446ce398b6e43120c4b1ca16e06e03301b0eec
chore: fix typo in contributing.md (#3573) Co-authored-by: Nicholas Rice <[email protected]>
push time in 7 days
PR merged microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr closed time in 7 days
push eventJazibJafri/fast
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 -->
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
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 <[email protected]> * align imports and doc links Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Jane Chu <[email protected]>
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 <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
commit sha b07b92f5886df611d3aec41b8f734b7f3d881fa1
Merge branch 'master' into fix/typo-contributing
push time in 7 days
push eventmicrosoft/fast
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 <[email protected]> Co-authored-by: Nicholas Rice <[email protected]>
push time in 7 days
PR merged microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr closed time in 7 days
push eventJazibJafri/fast
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 <[email protected]> * align imports and doc links Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Jane Chu <[email protected]>
commit sha c54d82aaee77b01dcaf52c416e116591d93d41a0
Merge branch 'master' into fix/github-issues-url
push time in 7 days
issue commentmicrosoft/fast
Correct elevation algorithm in web-components
related to #3443
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.
comment created time in 7 days
push eventmicrosoft/fast
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 <[email protected]> * align imports and doc links Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Jane Chu <[email protected]>
commit sha d62cf09d731a16de62d58afd49e0badf32ea3879
Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes
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
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?
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?
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.
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?
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.
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?
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.
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
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?
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?
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
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
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.
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
comment created time in 8 days
push eventmicrosoft/fast
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 <[email protected]> * align imports and doc links Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Jane Chu <[email protected]>
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
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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:
- property switching ("left" -> "right")
- value inversion (20px -> -20px)
- 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
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
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
comment created time in 8 days
push eventJazibJafri/fast
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
commit sha df5e716e128e36469aff1599e40a940d57d4ae61
Merge branch 'master' into fix/github-issues-url
push time in 8 days
push eventJazibJafri/fast
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
commit sha d148eac1af77c2a9c1e9e35d3471e241c9be2704
Merge branch 'master' into fix/pr-template-url
push time in 8 days
push eventmicrosoft/fast
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
commit sha d287cca0d9894a62137d45557aea21c8ee32d085
Merge branch 'master' into users/nirice/form-associated-custom-elements-fixes
push time in 8 days
push eventmicrosoft/fast
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
commit sha 63329ad3a57af21efa316378852d29c97a7ef1db
Merge branch 'master' into users/nirice/direction-based-stylesheets
push time in 8 days
push eventmicrosoft/fast
commit sha 6c6ec439a775e3fd753ea11e1ca112a40c2cbd90
chore: correct provider creation docs (#3560) Co-authored-by: nicholasrice <[email protected]>
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
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr closed time in 8 days
issue closedmicrosoft/fast
https://fast.design/docs/components/design-system-provider#creating-a-design-system-provider
In these steps, you need to change the circled part:
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
<!--- 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:
- Updates
FormAssociatedto always set the the form value when value is changed (closes #3550 #3544) - The internal text input of text-field should have it's value property set, not it's attribute (closes #3448)
- Ensures fast-text-field and fast-text-area emit
changeandinputevents 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr created time in 8 days
create barnchmicrosoft/fast
branch : users/nirice/form-associated-custom-elements-fixes
created branch time in 8 days
push eventmicrosoft/fast
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 -->
commit sha 6baf938b7c33f63f4f0ebfd764b473696b49c58b
Merge branch 'master' into users/nirice/direction-based-stylesheets
push time in 8 days
push eventmicrosoft/fast
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 -->
commit sha dff4a9494a0ff244ce4361498f44f623a60ddf6c
Merge branch 'master' into users/nirice/correct-design-system-provider-documentation
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.
comment created time in 8 days
push eventmicrosoft/fast
commit sha 528ad8ba8396a491e2812ddf58395f876af9cee5
align imports and doc links
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
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.
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.
comment created time in 9 days
PR opened microsoft/fast
<!--- 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: -->
- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the definition file
- [ ] I have updated the configuration file
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 -->
pr created time in 9 days
push eventmicrosoft/fast
commit sha 7e42c69ab8f7033fc4ac419b24d40c28377b49ab
Update packages/web-components/fast-components/docs/design/localization.md Co-authored-by: Jane Chu <[email protected]>
push time in 9 days
push eventmicrosoft/fast
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 !!
commit sha 198232f6d4c6d6aa304498ccbfe6f238a2b3e55f
chore: update PR template label assignment (#3538)
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
commit sha 6d194d4d9130816413cb7081e653de69fbe4397a
Publish - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - @microsoft/[email protected] - [email protected] - @microsoft/[email protected]
commit sha 74fad2d4cb23e345a94f3debee093891a5ceb685
feat: add permutator that can permutate over the number type (#3537)
commit sha 4b499189a9b77bc0a3f459f94a3b1c59049d9813
docs: correct minor typo Fix a small typo "filed->field" in defining-elements.md
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 -->
commit sha fb9f88284d51b1d9849714cc9a4f2c73c143c3a0
Merge branch 'master' into users/nirice/direction-based-stylesheets
push time in 9 days
create barnchmicrosoft/fast
branch : users/nirice/correct-design-system-provider-documentation
created branch 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
Is there any additional context for your request?
Attach screenshots or images add detail to your request:
closed time in 9 days
Jeremy-Knudsen