Adding a new box model web component to the fast-tooling package. This component renders a UI similar to the box model UI in the browser dev tools for modifying margin, border, padding, width and height css styles. When the component's "value" property is set to a valid CSS style string it will parse the values taking into account shorthand styles and order precedence to populate the UI. Then when any of the input fields are modified the component will attempt to construct the most efficient style string that represents the UI intent while preserving all other styles in the original string. The value property will then contain the new style string and a change event is emitted.
The component should correctly handle the following styles:
margin
margin-top
margin-bottom
margin-left
margin-right
padding
padding-top
padding-bottom
padding-left
padding-right
width
height
border
border-width
border-top
border-top-width
border-bottom
border-bottom-width
border-left
border-left-width
border-right
border-right-width
To test, pull down the branch, change to the /packages/fast-tooling folder and run "npm start". This will open the test site in a browser. Click the "CSS Box Model" button in the left menu.
Type a valid CSS string (i.e. "margin:10px;border:1px solid red;width:50%;") into the top text box and the UI should populate. Modify a value in one of the UI inputs and the bottom text box will update to the new CSS string.
🎫 Issues
Closes: #73
👩💻 Reviewer Notes
✅ Checklist
General
[x] I have added tests for my changes.
[x] I have tested my changes.
[ ] I have updated the project documentation to reflect my changes.
Pull Request
📖 Description
Adding a new box model web component to the fast-tooling package. This component renders a UI similar to the box model UI in the browser dev tools for modifying margin, border, padding, width and height css styles. When the component's "value" property is set to a valid CSS style string it will parse the values taking into account shorthand styles and order precedence to populate the UI. Then when any of the input fields are modified the component will attempt to construct the most efficient style string that represents the UI intent while preserving all other styles in the original string. The value property will then contain the new style string and a change event is emitted.
The component should correctly handle the following styles:
To test, pull down the branch, change to the /packages/fast-tooling folder and run "npm start". This will open the test site in a browser. Click the "CSS Box Model" button in the left menu. Type a valid CSS string (i.e. "margin:10px;border:1px solid red;width:50%;") into the top text box and the UI should populate. Modify a value in one of the UI inputs and the bottom text box will update to the new CSS string.
🎫 Issues
Closes: #73
👩💻 Reviewer Notes
✅ Checklist
General
⏭ Next Steps