Feature Request

Summary

There should be a version number in the top left of the application as a FAST badge. This should be stored as a cookie on a users machine, so that if there is a new update an indicator should display. When clicked this should then have an overlay that the user can click/scroll through to see bug fixes and features that have been added since they last visited the site.

Description

It has been noted by several people that the terminology for the branches is confusing as release is tied to the staging server. For more clarity release will be renamed to stage and all relevant documentation updated. This will help collaborators who might otherwise find confusing between why there is a distinction between main and release. Additionally all "release" terms will be converted to "milestone" to align with GitHub naming.

Description

The current "Design Tokens" tab does not represent what the tab is intended for. Instead this should be an area where default HTML elements can have global values set and libraries can register to have their own section inside for controlling their variables, in the case of FAST and Fluent web components this might be design tokens.

Requirements

• Change the name of the tab "Design Tokens" to "Global"

Open questions

• If a component library does not have design tokens, what happens to the tab
• How can we approach scoped design token implementations when updating the navigation

Description

With the completion of microsoft/design-to-code#81 we will want to convert all web component libraries to use the custom elements manifest to interpret attributes and convert them to JSON Schema.

Requirements

• Use the web component manifest to convert incoming libraries (FAST components and Fluent UI components at this time) to the JSON schema dictionaries needed for the Message System
  • Ensure that this conversion generates files that are deployed and dynamically imported for performance

Description

Create a way for the "ALPHA" badge, which will be updated as releases are updated (eg, BETA, v1.0.0 etc.), to indicate that there are new changes since a user last arrived.

Design requirement for #27

Requirements

• Create a design for an indicator that there are new changes since the user last visited create.fast.design
• Create a way to open up a modal showing the new changes
• Create a design for the modal (the one that will be used will be the FAST components modal, but the internals can be designed)
• Surface information in a way that will be easy to navigate (continuous scroll or pagination)
  • Take into account that multiple changes may have been made since the user last visited, account for multiple update cycles
  • Also consider that this should follow a similar CHANGELOG format, with version numbers at the top, the time and date of the change and a list of changes either as "Feature", "Fixes" or "Breaking changes" (we can rename these)

Description

When the main branch updates, trigger a deployment to production servers with a Webpack build. This will include a server "Swap" from Staging to Production. Staging then would be updated on the next merge to the release branch.

Description

Unordered lists <ul> should include 3 <li> items which themselves contain the short Lorem ipsum.

In the app/configs/{library-name}/*.examples.ts files there are examples which get auto added if that element is added via the Form. These are the ones that should be edited for this task.

Requirements

• Add example data for ul elements (see above)
• Add example data for li elements (see above)

Description

Currently the runtime environment is just the webpack dev server configuration which is not what is used on the server. Ideally the server configuration should be the same as the local production configuration.

Investigation

Investigate the use of Docker to allow a similar run time environment to that of the server. This should not slow down local development time but should serve as a check against any potential issues that might occur on the production site.

Helpful links

• https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
• https://blog.alexellis.io/mutli-stage-docker-builds/
• https://docs.docker.com/develop/develop-images/multistage-build/

Description

Font family and font size should be available in the CSS Layout component for "textual" elements.

Related to #50

Requirements

• Identify all HTML elements that can hold text (h1, p, button, span, etc.)
• Add CSS Layout component ability to change font family and font size

Description

Investigate how the canvas area can use a base <body> element instead of the current <div> to allow full control of the page to the editor. This also pertains to @microsoft/fast-tooling <html-render> and sub-components on how they deal with extra padding currently needed to allow the pill to be displayed.

Take into account what changes will need to be made for fast-tooling and fast-creator.

Determine a list of changes and issues that should be filed in either repository.

Feature Request

Summary

The fieldset is using the default stylings coming from the browser, this is in conflict with the rest of the CSS styles that are currently available.

Either the stylings should be updated, or the fieldset should be removed and replaced with the same label/field relationship.

Description

Add a Ctrl + S to save a project. This should save via a backend to a users account.

Notes

• Blocked by not having user accounts available.

Feature Request

Summary

This change should update every time there is a navigation update. The Monaco Editor should scroll to the element that has been selected.

Examples

• A user has clicked on a navigation item in the Navigation component
• A user has clicked on an element inside the canvas

Feature Request

Summary

This feature is to facilitate communication, it will be a method by which all changelog items from the release are shown to any user accessing the app, determined by the last time the app was opened.

Examples

Requirements

• Store in localStorage information about when the user last visited the app
  • If this is the first time the user is accessing the app, do not show a "new" indicator
  • If there are new items since the user has last access the app, show a "new" indicator which when clicked will open the modal
• Determine how to break up releases into multiple json files that can be fetched dynamically so as not to bulk up the application for users
• Create a utility that scrapes the changelog.json for both @microsoft/fast-tooling and @microsoft/fast-creator and renders HTML in a modal, depending on design with multiple pages or scrolling to show multiple releases
• Trigger the modal via the button/anchor with the "new" indicator mechanism
• When the button/anchor with the "new" indicator mechanism is pressed, a list of previous updates should still be available and timestamped (?) which can be reviewed at any time

Describe the bug; what happened?

When uploading a project file that includes several nested components, the call stack will be exceeded if those components are drag and dropped from the <Navigation /> component. The problem appears to occur in the <Form />.

What are the steps to reproduce the issue?

1. Go to https://create.fast.design
2. Click on the ^ chevron in the lower left
3. Choose a project file
4. Open up the Navigation and perform a drag and drop

If applicable, provide screenshots:

Uncaught RangeError: Maximum call stack size exceeded
    at Module.DataType (index.js:1)
    at Module.DataType (index.js:1)
    at getBreadcrumbs (breadcrumb.js:16)
    at getBreadcrumbs (breadcrumb.js:26)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:35)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
    at resolveDictionaryBreadcrumbs (breadcrumb.js:40)

The above error occurred in the <Form> component:
    in Form (created by withJSS(Form))
    in withJSS(Form) (created by Creator)
    in div (created by Pane)
    in Pane (created by withJSS(Pane))
    in withJSS(Pane) (created by Creator)
    in div (created by Row)
    in Row (created by withJSS(Row))
    in withJSS(Row) (created by Creator)
    in div (created by Container)
    in Container (created by withJSS(Container))
    in withJSS(Container) (created by Creator)
    in div (created by Context.Consumer)
    in DesignSystemProvider (created by Context.Consumer)
    in Background (created by Creator)
    in Creator (created by Context.Consumer)
    in Route (created by App)
    in DesignSystemProvider (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App
    in Unknown

Is there any additional context?

Some investigation reveals that modifying the ./packages/tooling/fast-tooling-react/src/form/utilities/breadcrumb.ts on line 95 to:

if (typeof breadcrumbParent !== "undefined" && (breadcrumbParent.id !== dictionaryId && breadcrumbParent.dataLocation !== navigationConfigId)) {

prevents the call stack error, but causes other issues during the drop phase.

Feature Request

Summary

This feature would add a github workflow that runs a scheduled cron job at the same interval as the publish in FAST tooling, an hour later. It should:

• Check to see if packages have been updated
• If they have, update them to their new versions
• Run npm install to update the package lock file
• Run the convert:version-files scripts to update the version files
• Commit these updates and merge them to the stage branch (dependent on #88)

Other requirements:

• Allow this to be run via dispatch

Feature Request

Summary

The Creator should be able to handle multi-page workflows. This should also involve Eugene with the FAST2Figma plugin and the prototyping tool that Figma currently contains. This will be part of the prototyping story.

Examples

A marketing page with "about", "contact" etc. which a user may design in a multi-page prototype and want to see that clicking on anchors will navigate between the pages.

Requirements

Requirements gathering will involve:

• Jane Chu (proposal)
• Rob Eisenberg
• Eugene Gavriloff
• Brian Heston

Description

There should be a server.js file using express and helmet which can serve the production build of the Creator site.

Requirements

• The production site should be directly usable in an iframe by Figma2FAST, thus the CORS policy should allow receipt of a postMessage from any origin, or should whitelist a domain which @studioab can provide

Update instances of deprecated attributes names on fast-tooling components once PR microsoft/design-to-code#164 is complete.
The HTMLRenderLayerNavigation.resizeobserverselector attribute is replaced with "resize-observer-selector" and the File.progressCallback attribute is replaced with "progress-callback".

Description

There should be a .yml file that is triggered by a pull request and will be required for a pull request to be merged.

Requirements

• This .yml file should be used as a build gate for pull requests to the release branch which is currently the default branch
• The command to test all changes should be npm run test
• The check should include a check of prettier

Description

Currently component definitions are written manually, they should however be able to be generated from TypeScript.

Investigation

Determine whether a library such as web component analyzer can be used to generate these files.

When viewing https://explore.fast.design and https://create.fast.design on https://gtmetrix.com for performance analysis both fully between 4-6 seconds. Ideally, all FAST sites would fully load in under 2 seconds.

There are a few issues on GTMetrix reports that can be improved when looking at the following analysis performed.

• https://gtmetrix.com/reports/explore.fast.design/juD3Zt5W
• https://gtmetrix.com/reports/create.fast.design/ayCCuK2f

Description

The Creator currently has a very large state object which controls all aspects of the app. This is unweildy and will not scale well going forward. A state management system would help isolate state update logic in a more methodical manner, this may be achieved using the DI and Observables from @microsoft/fast-element. Due to mutation, this could be close to a mobx implementation

Requirements

• Convert all state logic in the Creator to use reducers and actions (or whatever you decide makes sense semantically)
• The reducers and actions should be in their own folders and be named around what state property they are modifying, or with an appropriate naming convention for a set of state properties
• The state (or store) should be in it's own folder for initialization, this should be broken up in a manner that makes sense, ideally we do not use one giant state object. Certain conceptual pieces, such as the data for the page can be separate from the layout of the site and the configuration of the preview area.

Description

Replace the current Preview React component in Creator with a new Preview web component. The new component is to be created in fast-creator with the intent of migrating it to fast-tooling later.

Summary

Examples

Abstract

There are some secrets pertaining to the server environment that may not be readily apparent to contributors, it would be good to know where these secrets originate from, whether that is GitHub or ADO.

Examples

• Secret(s) in the server.js file
• Secret(s) in the cd-create-stage.yml file

It also might be worthwhile to have README files in any directory where files of this type exist to explain the the presence of secrets and also have link to documentation used to create the files for future contributors who may be unfamiliar with what the .yml files are for etc. as well as links to any markdown files in the CONTRIBUTORS.md file under a devops section.

Feature Request

Summary

The preview app carries unnecessary extra weight of the React library. This can be mitigated by converting the app to web components as it is relatively simple.

Feature Request

Summary

See the Add FAST tooling E2E testing for details on E2E testing dependencies.

Creator should only test for functionality specific to the Creator application. This includes such user interactions as "login", "user settings/account settings" etc. The FAST tooling will take care of the testing of packages and their interaction with each other by use of a manual testing app that simulates a Creator-like application.

Requirements

• Update this main issue with a list of issues for adding Cypress and related E2E testing issues

Integrate the new Box Model component into Creator. This should replace the margin, padding and width CSS fields.

Dependent on: microsoft/design-to-code#73

Feature Request

Summary

There is currently no footer in the newly migrated app. This needs to be rectified for security and compliance reasons.

This could be in the actual footer, or as a link to another page that shows the information required for compliance.

Bug Report

What Happened?

Uploading JSON using the upload button causes library components to not be found.

Requirements

• If the upload button is used, check the items in the dictionary to determine which component libraries should be enabled
• Test for any other runtime errors occuring

Abstract

Now that Monaco has been added, it should also have intellisense for users editing code.

Requirements

• Add intellisense from FAST components & native elements to the Monaco editor in the Component Explorer site
• Add intellisense from FAST components & native elements to the Monaco editor in the Creator site

Status

Currently blocked by microsoft/monaco-editor#1723

Feature Request

Allow for individual user's branches users/name/* to trigger a deployment to a temporary service where the PR can be tested in real world scenario and then upon PR completion this temporary service would be destroyed.

Summary

Allowing for PRs to be tested remotely without requiring local build/start/run. This will drastically speed up the testability of PRs and make it easier for others to review and provide feedback.

Feature Request

Summary

There should be a user settings page.

Examples

• Users should be able to change font size on the Monaco Editor

Description

Currently the site is not a PWA, it does not use a manifest file etc. This was due to, potentially, server side issues with cache-busting.

Investigation

Add steps in to implement the Creator site as a PWA. This includes:

• Completion and implementation of #13
• Creating a manifest file and any other files needed for the PWA
• Test that cache busting is working as expected (hashed values for linked files and no caching of the index.html file)

What happened?

Adding a piece of linked data using the <Form /> components linked data control, then pressing the "unset" arrow causes a runtime issue, does not remove the components.

What package(s) are causing the problem?

@microsoft/fast-tooling-react

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

Investigate what appropriate services offered by Azure are available for AI and Machine Learning.

Requirements:
Any code that generates models must be able to run on a local machine (no tight coupling with a specific service).

Additional notes on some of the things that might be part of the Machine Learning models:

• Analyze images (computer vision)
• OCR
• Color detection
• Component detection
• Nesting patterns

Description

HTML elements can have default accessibility guidance, for example an <img /> element may need to have alt attribute.

Requirements

• Add guidance for each HTML element for accessibility, adding an accessibility category where necessary

Description

The design token differences for fluent web components vs fast web components should be reflected in the design tokens pane.

Requirements

• Confer with design on how this should be treated as this is a top level api
• Determine if a UI update is needed so that different libraries can have different configs applied to them

Description

Currently the Form, or right rail, is a mess as it contains unordered attributes which can be confusing for the end user.

Requirements

• Categorize all HTML elements and libraries with categories so that the visual elements are on top and the other attributes are in an "Advanced" category

Notes

• Should this be related to fast-foundation? Investigate whether there is some extra metadata that can be added perhaps via the web component specification

Description

Lighthouse (Edge DevTools) is showing a low score on a11y for Creator.

Investigation

• Run Lighthouse against create.fast.design
  • Identify any issues in FAST tooling and file them
  • Identify any issues in Creator and file them
• Run Lighthouse against explore.create.design
  • Identify any issues in FAST tooling and file them
  • Identify any issues in Creator and file them

Feature Request

Summary

The "What's New" feature relies on beachball generated JSON, therefore even though the Creator is not a distributed package, it must version similarly to FAST tooling packages so that updates can be picked up.

Description

One of the global variables that should be available is updating the font family and font size.

Requirements

• Add font family and font size to the global variables tab (this might be named "Design Tokens")

Notes

• This is problematic in terms of "how to add font families to the document" and which font families are included
• Needs more thought on how to present changing fonts based on the ramp to the user

Description

There may be instances where an outside source (via iframe) will need to update the Creator with different libraries before updating to use a data dictionary. This API could lookn like:

{
    "type": "library::add",
    "libraries": ["fast"]
}

As an additional requirement, it may be prudent to take another look at the ability to update the data dictionary, ensure it only includes the data dictionary and it also has a "type". This should be relatively safe to change, due to there presently being only one outside contributors.

Description

Add default text to the HTML button.

Similar to #49

Requirements

• Add the short Lorem ipsum to the HTML button by default when it is added via the Form.

Description

There is not enough distinction for what the preview switch is doing as there is already a "preview" in the canvas.

Requirements

• Change the preview switch to a play/pause button
• Separate the play/pause from the global variables (rtl, theme, accent color) with a divider and padding

Feature Request

Summary

Shortcut actions are being added in @microsoft/fast-tooling which consist of the following:

• Delete
• Duplicate
• Undo
• Redo

Add the Shortcuts service and these actions to the Creators root body element and preview body element.

Description

Currently no text nodes are being displayed in the Navigation. This may have to do with disallowing string types, as we want to continue disallowing string attributes, but do want to allow text nodes, investigate how this can be accomplished.

Description

Components and libraries may make available certain component and library level CSS variables. These should be registered in such a way that the color picker can gain access to them.

Requirements

• Investigate what will need to go into this task and create issues and requirements for it

Notes

• Potentially related to web component specification which may have these details

Bug Report

The Fluent Dialog component takes focus when it is initialized. This results in text fields in the right panel losing focus with each key press. Investigate if it is possible to block something within an iframe from taking focus from something in a parent window.

What Happened?

Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]

Additional information

This may be related to the completion of microsoft/design-to-code#144 where a solution may be found.

Describe the bug; what happened?

After adding a <fast-anchor> and then clicking on it, the page will reload and the top portion of the page will be missing.

What are the steps to reproduce the issue?

1. Go to create.fast.design
2. Add <fast-anchor> using the right panel dropdown
3. Click on the <fast-anchor> that appears in the preview area

What behavior did you expect?

This should not attempt to navigate away from the page, this behavior should be blocked. Additionally, no part of the page should disappear.