enum title display

Summary: lower case and centerd

Reviewed By: emilsjolander

Differential Revision: D6998485

fbshipit-source-id: c06472afa4ccaa25ebf7c3c791d697b1fdc7732c

website/src/components/Page.css

@@ -50,3 +50,15 @@ h2 {
 .PageContent.withSpacing {
   padding-top: 35px;
 }
+
+.Page .ant-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 11px;
+  padding-right: 11px;
+}
+
+.Page .ant-dropdown-trigger .anticon {
+  margin-top: 3px;
+}

website/src/components/Playground/YogaEnumSelect.css

@@ -21,3 +21,7 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+
+.YogaEnumSelect .ant-radio-button-wrapper {
+  white-space: nowrap;
+}

website/src/components/Playground/YogaEnumSelect.js

@@ -57,13 +57,20 @@ export default class YogaEnumSelect extends Component<Props> {
     this.props.onChange(this.props.property, yoga[key]);
   };
 
+  getTitle = (property: string, key: string): string => {
+    const replacer = new RegExp(`^${property}_`);
+    return key
+      .replace(replacer, '')
+      .replace('_', ' ')
+      .toLowerCase();
+  };
+
   render() {
     let {property, ...props} = this.props;
     property = PROPERTY_LOOKUP[property];
     const selected = this.values.find(
       ({key, value}) => value === this.props.value,
     );
-    const replacer = new RegExp(`^${property}_`);
 
     return this.values.length > 3 ? (
       <div className="YogaEnumSelect">
@@ -73,13 +80,13 @@ export default class YogaEnumSelect extends Component<Props> {
             <Menu onClick={this.handleMenuClick}>
               {this.values.map(({key, value}) => (
                 <Menu.Item key={key} value={value}>
-                  {key.replace(replacer, '')}
+                  {this.getTitle(property, key)}
                 </Menu.Item>
               ))}
             </Menu>
           }>
           <Button>
-            {selected ? selected.key.replace(replacer, '') : ''}
+            {selected ? this.getTitle(property, selected.key) : ''}
             <Icon type="down" />
           </Button>
         </Dropdown>
@@ -92,7 +99,7 @@ export default class YogaEnumSelect extends Component<Props> {
         className="YogaEnumSelect">
         {this.values.map(({key, value}) => (
           <RadioButton key={key} value={value}>
-            {key.replace(new RegExp(`^${property}_`), '')}
+            {this.getTitle(property, key)}
           </RadioButton>
         ))}
       </RadioGroup>