Add boxsizing to playground (#1724)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1724

tsia!

Reviewed By: NickGerleman

Differential Revision: D64200150

fbshipit-source-id: f3ee6df648ec8ff29d8e26b0a3b3a5980fc8926b

website/src/components/FlexStyle.ts

@@ -9,6 +9,7 @@
 
 import {
   Align,
+  BoxSizing,
   Direction,
   Display,
   Edge,
@@ -60,6 +61,7 @@ export type FlexStyle = {
   borderInlineWidth?: number;
   borderBlockWidth?: number;
   bottom?: number | `${number}%`;
+  boxSizing?: 'border-box' | 'content-box';
   direction?: 'ltr' | 'rtl';
   display?: 'none' | 'flex';
   end?: number | `${number}%`;
@@ -154,6 +156,9 @@ export function applyStyle(node: YogaNode, style: FlexStyle = {}): void {
         case 'bottom':
           node.setPosition(Edge.Bottom, style.bottom);
           break;
+        case 'boxSizing':
+          node.setBoxSizing(boxSizing(style.boxSizing));
+          break;
         case 'direction':
           node.setDirection(direction(style.direction));
           break;
@@ -335,6 +340,16 @@ function alignItems(str?: AlignItems): Align {
   throw new Error(`"${str}" is not a valid value for alignItems`);
 }
 
+function boxSizing(str?: 'border-box' | 'content-box'): BoxSizing {
+  switch (str) {
+    case 'border-box':
+      return BoxSizing.BorderBox;
+    case 'content-box':
+      return BoxSizing.ContentBox;
+  }
+  throw new Error(`"${str}" is not a valid value for boxSizing`);
+}
+
 function direction(str?: 'ltr' | 'rtl'): Direction {
   switch (str) {
     case 'ltr':