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:
To complete the custom CSS control the following issues must be resolved:
[x] 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>
[x] 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>
[x] Add a new web component for the <color> syntax microsoft/fast#4175
[x] 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.
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 branchfeatures/form-custom-control-cssis the css custom control which is comprised of the following files:packages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.props.tspackages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.props.tspackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.style.tspackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.property.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.props.tspackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.syntax.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utiilties.type.tsxpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.value.tsxRequirements
To complete the custom CSS control the following issues must be resolved:
<select>used inpackages/tooling/fast-tooling/react/src/form/custom-controls/control.css-ref.tsxto the@microsoft/fast-componentspackage's<fast-select><fast-select>to thepackages/tooling/fast-tooling/react/src/form/custom-controls/control.css.utilities.tsxwhen the syntax data specifies arefCombinatorTypeofexactlyOneeg. "absolute-size"refCombinatorTypeismixedwhich checks the exported syntaxes from thecss-datafile in@microsoft/fast-toolingbaseline-positionrefCombinatorTypeofexactlyOneuse a<fast-select>type's should be accounted for with<fast-number-field>once it becomes available:<number><percentage><number-percentage><color>syntax microsoft/fast#4175Note: More items will be added to this list as investigations are ongoing.