Abstract

The navigation and navigation configurations, though defined, are missing as specs. To ensure full documentation of how these items are structured and intended to work within the message system, they should be added to a spec.

Requirements

Add specification for navigation and navigation configs as part of the message system.

Abstract

The permutator is a C program compiled to WASM that creates permutations based on JSON schema. It should create permutations based on the "null" type.

Requirements

• Add permutations over the JSON schema type "null"
• Check for any enums and use these if provided
• Check for any examples and use these
• Check for any defaults and use these

Background

There appears to be a performance issue firing the end() hook for NavigationTreeItem when there is no drop target.

An issue does not seem to be filed against react-dnd, so this requires some investigation as to the cause. If no other solution presents itself, all navigation items may have to be droppable.

One solution is to cancel the drag if the drag leaves the <Navigation />.

Description

Increase the code coverage of the fast-color-picker to 100% across all statements, lines, branches, and functions.

Requirements

• Change the karma.conf.js file to use global coverage thresholds of statements, lines, branches and functions to 100
• Add the necessary tests to pass these new requirements for the fast-color-picker

Note: this must be done after microsoft/fast#4558 has been merged.

What happened?

When double clicking text the textarea appears and the cursor is placed at the end of the content. Typically for inline editing tools all text is selected to give the user an opportunity to start typing to completely overwrite the current text. The inline text editing should follow the same UX pattern.

This change should affect the <html-render-layer-inline-edit> component.

What package(s) are causing the problem?

@microsoft/fast-tooling

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Note: as an initial step, investigate if there is already a source for these JSON schemas

Description

Similar to how React components have Typescript interfaces for props that extend the HTMLElement attributes, the JSON schemas should also extend the possible attributes that are passed to the element.

Requirements

The JSON schema should include:

• data-* as additionalProperties
• all potential aria attributes
• all other inherent attributes to that element

Note: be sure to pay attention to extra JSON schema keywords that could prove useful, such as pattern, propertyNames.

These schemas should map to the TypeScript HTMLElement interface to line up more closely with the prop contract for components.

For information on JSON schemas here are a few good resources:

• https://json-schema.org/understanding-json-schema/
• https://www.jsonschema.net/

JSON schemas for HTML use should be placed in the fast-web-utilities package.
The file name should be html-element.schema.ts and be in the same format as other *.ts JSON schema exports, an example of which can be found here: https://github.com/microsoft/fast-dna/blob/master/packages/fast-components-react-base/src/checkbox/checkbox.schema.ts

It's not necessary to use any of the extra additions we include for our components such as reactProperties and this schema can stick to the typical JSON schema format.

Currently we use Ajv as our validation package, do add a spec file named html-element.schema.spec.ts and include the Ajv lib as a devDependency with sufficient tests to ensure your schema is correctly checking for all appropriate properties.

All apply style functions in the tooling library return objects. They should just be objects to improve perf.

Update: Most of these are cleaned up, however there are still a few in the fast-tooling-react/src/style/utilities.ts folder.

The user may want to see their view in the context of an iPhone, Android device, desktop browser, etc. This means that there should be 4 children props that can be configurable to accept components which could provide backgrounds and/or functionality.

Description

Add design for the custom CSS flexbox layout control. This control will exist in @microsoft/fast-tooling and allow the editing of all CSS properties related to flexbox.

Requirements

• Create a design for the flexbox layout control
• Add the design below

Design

Follow up

Create an issue for developing the CSS flexbox layout control and reference this issue for the design.

🙋 Feature Request

Code in /packages/tooling/fast-tooling/src/definitions/native/html-native.definition.ts needs test coverage after PR microsoft/fast#4607 is merged.

We should allow the interpretation of the "allOf" keyword in form to combine schemas. See: https://json-schema.org/understanding-json-schema/reference/combining.html#allof

Add an editor for a number pair that can be used in FAST tooling form.

See: http://json-schema.org/draft/2019-09/json-schema-core.html#rfc.section.9.3.2.5

This should provide validation against property names for dictionaries:

• Any validation issue against property keys should invalidate the control
• If an enum is given, then the input should appear as a select

Determine how to handle functionality once a property name has been added, should a list of property names be generated instead of a list that can be added to?

There should be an interface for the Form that allows for patternProperties which should work in a simlar fashion to additionalProperties.

This should allow for a label, a property key, schema locations to follow the patternProperties path location when they match, and the use of form controls based on the requirements in the patternProperties.

The specification can be found here.

This will allow native HTML schemas that need to be written to include data-* attributes.

Related to microsoft/fast#2169
Related to microsoft/fast#1652

For the undo/redo buttons give them tooltips for indicating:

• "reset to $value" - stringify this eg. true for boolean to "true"
• "remove value"
• "no value is set"

Make this available as properties, see strings for internationalization.

Common shortcuts should have a documentation system and common messaging to be able to communicate similar actions across the exports of @microsoft/fast-tooling-react.

A few examples:

• Ctrl + Return navigates into an item if a new value has been entered in a form - may require tooltip as this is unintuitive
• Ctrl + G when selecting multiple items this may attempt to group them
• Ctrl + D duplicating an item
• delete deleting an item

MVP list:

• Ctrl + D duplicating an item
• Ctrl + Z undo the last action
• Ctrl + X cut
• Ctrl + C copy
• Ctrl + V paste
• delete deleting an item
• Shift + Return navigating to parent of current item

Once multi-selection is enabled:

• Return Select all items that are children of the parent
• Tab navigates through selected items

Requirements

• Write a spec with a full list of common shortcuts
• Create new issues based off these shortcuts for adding them to the utility proposed in microsoft/fast#3774

Related to microsoft/fast#1980 and microsoft/fast#2174

Reliant on microsoft/fast#2482

This will be slated for version 2.

Next steps

• Determine what, if any, additional functionality needs to be added to the shortcuts

The data permutator package has a few issues:

• Not using TypeScript
• Runs in memory and quickly runs into performance and memory issues
• Does not offer the opportunity to write to disk during the process

The related issues filed against it are:
microsoft/fast#225
microsoft/fast#224
microsoft/fast#223
microsoft/fast#74
microsoft/fast#72

These should be resolved during this refactor.

Requirements

• Should be in C so that it can take advantage of the performance of WASM
• Should include a basic testing suite
• Should take a callback which is to be fired every time a new permutation is resolved
• Should have different entry points so that it can be compiled to WASM for use in browser as well as imported as a shared library by another C program
• Should include a simple app to import it and showcase some basic functionality for local testing

Follow up issues

To mark the basic functionality as complete, the following issues should be completed:

• #3563
• #12
• #13
• #16
• #17
• #19

Description

Currently for integration between @skatejs and @microsoft/fast-components in a TypeScript React app there needs a separate definition file, which must be created manually see: https://www.fast.design/docs/integrations/react#typescript-and-tsx-support

This would be much easier to accomplish with a utility that can take component definitions (available for each of the @microsoft/fast-components) and convert them.

Requirements

• Create a utility in @microsoft/fast-tooling called mapComponentDefinitionToSkateJSTSDefinition

Note: Ensure this can be used in node as this utility will need to generate the contents for the .d.ts file as well as write them.

What happened?

When editing text inline, after a non space character has been entered, entering a character does not move the cursor. An example would be typing "Hello ", the cursor will show up after the "o" in "Hello" and not after the space.

This change should affect the <html-render-layer-inline-edit> component.

What package(s) are causing the problem?

@microsoft/fast-tooling

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Instead of specifying schema ids we should also categorize schemas by tags. This will allow a component to accept children with a tag of "typography" etc.

Description

The tests for the Ajv Validation service must be async or they will cause other tests to not be run, or to throw errors.

Requirements

• Convert the tests in ajv-validation.service.spec.ts to async and ensure the tests do not skip over other tests
• Remove the file from the ignore glob in karma.conf.js

Abstract

The JSON schema we currently use as a reference is an unspecified version not pinned to a particular draft - http://json-schema.org/schema#.

This should be re-evaluated, partially because an issue has come up with security compliance scanning tools which identify http links which should be https and because pinning to a specific draft allows our validation to be more precise. This may or may not be an issue in reality as the draft links are not fetched but referred to as IDs for the validation tools.

Requirements

Investigate the most recent drafts from json-schema.org and determine if any specific draft should be used in FAST.

Description

The FAST tooling currently uses JSON schema, that is not going to change, however the description of the web components is initially expected to use VS Code customData format. This format does not define every part that might be useful for tooling. In addition, there is a missing maintenance story for web components whereby a web component author must manually create the customData format.

There is a new web component definition standard from open wc that includes an analyzer which can generate a JSON definition file.

Next steps

• Verify that VS Code will move to use this new web component definition standard from open wc
• Verify that the analyzer can work with FAST components
• Begin converting mapping files in @microsoft/fast-tooling to use the new web component definition standard

Abstract

The permutator is a C program compiled to WASM that creates permutations based on JSON schema. It should create permutations based on the "array" type.

Requirements

• Add permutations over the JSON schema type "array"
• Check for any enums and use these if provided
• Check for any examples and use these
• Check for any defaults and use these
• Check for any constraints and ensure that any randomly generated arrays meet the constraints, there may be minItems, maxItems etc. as possible array constraints

Description

The tests for the Monaco Adapter service must be async or they will cause other tests to not be run, or to throw errors.

Requirements

• Convert the tests in monaco-adapter.service.spec.ts to async and ensure the tests do not skip over other tests
• Remove the file from the ignore glob in karma.conf.js

Abstract

The permutator is a C program compiled to WASM that creates permutations based on JSON schema. It should create permutations based on the "string" type.

Requirements

• Add permutations over the JSON schema type "string"
• Check for any enums and use these if provided
• Check for any examples and use these
• Check for any defaults and use these
• Check for any constraints and ensure that any randomly generated strings meet the constraints

Add additional metadata that allows a user to map some property to a label so that the default "Item 1" etc does not show but that one does.

Background

In the Form component it is possible to navigate into objects. The objects when using default values are indicated as such with styling. Once data has been changed internally to the object it is then set and the default values no longer apply to the root property of the object.

This is not the case for arrays, as arrays are not mapped 1 to 1 with the JSON schema. The JSON schema has one description for an array item which is then mapped to however many array items exist.

Abstract

There should be a way to navigate arrays in the same way as objects which would then allow users to edit data from within that default array item.

Requirements

• Allow arrays to be navigated
• If the array item is modified, this should override the array, which will then consist of the single modified array item

Description

The current render functions located in navigation-tree-item.tsx should be React function components. This would give more simplicity and maintainability with the automatic inclusion of props so that order doesn't matter.

Abstract

Related to microsoft/fast#3773

The @microsoft/fast-tooling-react <Form /> accepts custom controls, one which is in progress and can be found in the feature branch features/form-custom-control-css is the css custom control which is comprised of the following files:

• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.props.ts
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.props.ts
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.style.ts
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.property.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.props.ts
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.syntax.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utiilties.type.tsx
• packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.value.tsx

Requirements

To complete the custom CSS control the following issues must be resolved:

• Convert the <select> used in packages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.tsx to the @microsoft/fast-components package's <fast-select>
• Add a <fast-select> to the packages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.tsx when the syntax data specifies a refCombinatorType of exactlyOne eg. "absolute-size"
• Add a new web component for refCombinatorType is mixed which checks the exported syntaxes from the css-data file in @microsoft/fast-tooling
  • If it includes a value which should be represented by a checkbox eg.baseline-position
  • If it includes a refCombinatorType of exactlyOne use a <fast-select>
• As a follow up to the above, the following type's should be accounted for with <fast-number-field> once it becomes available:
  • <number>
  • <percentage>
  • <number-percentage>
• Add a new web component for the <color> syntax microsoft/fast#4175
• Add the ability to override one or more CSS properties with a custom control microsoft/fast#4613

Note: More items will be added to this list as investigations are ongoing.

Add an input that has advanced keyboard control and treats numbers in strings with incrementing/decrementing numbers.

This input should be created as a configurable web component in fast-tooling which can take an arbitrary modifier that can transform a number during a change event. It should use the form-associated pattern.

An accompanying React component should be added in the fast-tooling-react/src/form as a css-unit.

The units that should work are the w3 recommended units for screen:

• px
• em
• rem
• %

The component should use FormItemBase.

Expect to add:

• softRemove
• renderDefaultValueIndicator
• renderBadge
• renderInvalidMessage

The component should accept:

• All props specified in FormItemCommon
• An optional multipleOf

Example interaction:

1. value is "10px"
2. multipleOf is undefined
3. user pushed the up arrow
4. callback is fired with the value being "11px"

A component to take a cue from for the stying is the number-field.

If the unit is 1, Shift+upArrow is x10

Next steps

• Consult with design on what the desired UI/UX should be, text-field or a number-field and a select with the appropriate units.
• Consider where this can be used in the CSS control

What package(s) should this feature be added to?

@microsoft/fast-tooling

Summary

Currently in order to commit text (or submit it) the user must press Enter. In general if the edited text is focused away, such as from a click to another area or from tabbing away from the textarea, the text should be committed. The UX expectation for this action follows other design tools where it is not expected that the text should revert when focus is lost.

This change should affect the <html-render-layer-inline-edit> component.

Abstract

At the moment the only method prototypes have of creating logic is from a defined set of Component provided to them via a library.

This becomes difficult to deal with when it is necessary to associate logic between components.

There should therefore be a feature implemented cross-cutting several tooling exports that will add this functionality. This can be done by allowing the creation of components that will serve as test components that are not exported but viewable.

Use cases

• A project in Creator may have a button that triggers a state change such as opening a flyout
• A scenario in the Component Explorer may have a button that triggers the hide/show of a modal dialog
• A project in Creator may need to pass arbitrary data from a root location such as language
• A project in Creator may need to provide data from an external API
• A scenario in the Component Explorer that requires a component created by the user to be shown for documentation purposes

Affected exports

• mapDataToComponents
  This function would now need to interpret the extra logic needed to complete the functionality mapping. An open question would be how do plugins fit in, should strings represent the logic with the use of Function?
• mapDataToCodePreview
  This function may need to be re-evaluated so that the strings can be editable. This would provide the surface to edit the string above but would come with certain risks.

Data structure

• The data structure of project files may need to be evaluated

Description

The tests for the Shortcuts service must be async or they will cause other tests to not be run, or to throw errors.

Requirements

• Convert the tests in shortcuts.service.spec.ts to async and ensure the tests do not skip over other tests
• Remove the file from the ignore glob in karma.conf.js

Abstract

The shortcut utility should have a way to register with a context menu so that some of the shortcut keys can be accessed that way.

Requirements

• Write a spec in @microsoft/fast-tooling for a web component based context menu that registers with the MessageSystem

Additional information

• When custom messages sent by the utility defined in microsoft/fast#3774 are sent, add them as possible shown items in the context menu
• The context menu should have an open-ended method for registering new actions which may or may not contain shortcut items

The Form creates a textarea for properties with type string. This is currently not set to the number of lines it allows, it should detect how much space it needs and grow/shrink based on the amount of content with a minimum number of lines at 1 and a maximum at 7.

If a component is active in the <Navigation /> component and focused, pressing the delete key should remove it from data.

Reliant on #14

Notes

• This requires testing and integrating the shortcuts service to work in the manual testing application and doing any relevant missing work (such as capturing key events on an element e.g. the <body> element)
• Adding a delete key shortcut action for ctrl + delete to remove a component (dictionary item)

Describe the bug; what happened?

When the <Form /> from @microsoft/fast-tooling-react encounters piece of text, during typing the cursor will move to the end of the textarea.

What behavior did you expect?

The cursor should remain where it is so that a user can type in the middle of sentences/paragraphs.

The following bug was found during an automated accessibility scan using Accessibility Insights for web.

ARIA Required Parent: Ensures elements with an ARIA role that require parent roles are contained by them
The Navigation Menu component includes items with a role of menuitem but is missing a required parent (menu or menubar respectively) for those roles.

What behavior did you expect?
When items have a role of "menuitem", the Navigation Menu should have a role of "menu".

Abstract

The permutator is a C program compiled to WASM that creates permutations based on JSON schema. It should create permutations based on the "object" type.

Requirements

• Add permutations over the JSON schema type "object"
• Check for any enums and use these if provided
• Check for any examples and use these
• Check for any defaults and use these
• Check for any constraints and ensure that any randomly generated objects meet the constraints, this includes required etc.
• Start by generating the minimum number of items using the required properties first, then extrapolating from those sets with the optional properties

If a component is active in the component and focused, pressing Ctrl + D key should remove it from data.

Reliant on #14

Background

The new message system and ecosystem of components for the @microsoft/fast-tooling and @microsoft/fast-tooling-react packages can be confusing when reading through the documentation for the first time.

Requirements

Create a diagram of how the message system works and a diagram of how the components in the React package interface with that message system.

Navigation should have an icon for each item. This includes:

• Objects
• Arrays
• Children
• Children items

Edit: Changed to needs-investigation as this may not be necessary and should have design input during consideration.

There should be an option allowing responsiveness to be on any device.

Description

Add updated styling for the resize button on the <Viewer /> component in the @microsoft/fast-tooling-react package.

Requirements

• Create a design with the Viewer that showcases a new button in the bottom right corner
• Add a the design below

Design

Follow up

Create an issue for completing the development work in <Viewer />.

The issue should contain:

• The removal of the bottom left resize button
• Updated styling as per this issue
• The removal of styling for the scrollbars

The following bug was found during an automated accessibility scan using Accessibility Insights for web.

aria-valid-attr-value: Ensures all ARIA attributes have valid values
Navigation Menu Items include an attribute of aria-controls which is pointing to an ID which does not exist.

What behavior did you expect?
aria-controls is used only when needed and correlates to an ID on the document.

Save the last state of anyOf/oneOf selections so that when picking through them they can have user data.

This affects the MessageSystem (@microsoft/fast-tooling) as well as the Form (@microsoft/fast-tooling-react).

The MessageSystem should store the last picked anyOf/oneOf with a new incoming/outgoing message and the Form should reference this stored value.

The Form should be able to interpret the $ref keyword and use it to map to internal and external JSON schemas. See: https://json-schema.org/understanding-json-schema/structuring.html?highlight=ref#reuse

Notes:

• There is a potential issue with regards to circular references.
• Due to the new dependency on ajv there is a potential for using similar libraries and techniques which include json-schema-traverse to find $refs and uri-js for $ref URI lookup.
• This may have architectural implications for the DataDictionary

Abstract

The permutator is a C program compiled to WASM that creates permutations based on JSON schema. It should create permutations based on the "boolean" type.

Requirements

• Add permutations over the JSON schema type "boolean"
• Check for any enums and use these if provided
• Check for any examples and use these
• Check for any defaults and use these

Abstract

The data and data dictionary, though defined, are missing as specs. To ensure full documentation of how these items are structured and intended to work within the message system, they should be added to a spec.

Requirements

Add specification for data and data dictionaries as part of the message system.