diff --git a/website-next/src/components/Playground/Editor.tsx b/website-next/src/components/Playground/Editor.tsx index aa77a711bd..155357fe42 100644 --- a/website-next/src/components/Playground/Editor.tsx +++ b/website-next/src/components/Playground/Editor.tsx @@ -34,7 +34,11 @@ export default function Editor(props: Props) { return (
- +

Direction

-
-
+
+

Basis

-
+

Grow

-
+

Shrink

- - + +
); diff --git a/website-next/src/components/Playground/YogaEnumSelect.tsx b/website-next/src/components/Playground/YogaEnumSelect.tsx index bb98557686..dc9829ea70 100644 --- a/website-next/src/components/Playground/YogaEnumSelect.tsx +++ b/website-next/src/components/Playground/YogaEnumSelect.tsx @@ -59,37 +59,18 @@ export default class YogaEnumSelect extends Component { return key.replace(replacer, '').replace('_', ' ').toLowerCase(); }; - /* - {this.values.map(({key, value}) => ( - // @ts-ignore - - {this.getTitle(property, key)} - - ))} - - }> - - */ - render() { const property = PROPERTY_LOOKUP[this.props.property]; const selected = this.values.find(({value}) => value === this.props.value); return this.values.length > 3 ? ( - - + ) : (
{this.values.map(({key, value}) => ( @@ -102,8 +83,7 @@ export default class YogaEnumSelect extends Component { value === this.props.value && 'button--active', styles.button, )} - onClick={() => this.props.onChange(this.props.property, value)} - > + onClick={() => this.props.onChange(this.props.property, value)}> {this.getTitle(property, key)} ))} diff --git a/website-next/src/pages/index.tsx b/website-next/src/pages/index.tsx index b4d9aa5251..f8334f6fbb 100644 --- a/website-next/src/pages/index.tsx +++ b/website-next/src/pages/index.tsx @@ -57,14 +57,14 @@ const LazyPlayground = React.lazy( function PlaygroundSection() { return (
-
- - {() => ( - - - - )} - +
+ + {() => ( + + + + )} +
);