From 10061af491509426d6a38858af8323dc7afa65d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Thu, 15 Feb 2018 08:25:16 -0800
Subject: [PATCH] enum title display

Summary: lower case and centerd

Reviewed By: emilsjolander

Differential Revision: D6998485

fbshipit-source-id: c06472afa4ccaa25ebf7c3c791d697b1fdc7732c
---
 website/src/components/Page.css                   | 12 ++++++++++++
 .../src/components/Playground/YogaEnumSelect.css  |  4 ++++
 .../src/components/Playground/YogaEnumSelect.js   | 15 +++++++++++----
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/website/src/components/Page.css b/website/src/components/Page.css
index b7eb3b6f..1db9e029 100644
--- a/website/src/components/Page.css
+++ b/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;
+}
diff --git a/website/src/components/Playground/YogaEnumSelect.css b/website/src/components/Playground/YogaEnumSelect.css
index f5dc2ed3..f8e17e18 100644
--- a/website/src/components/Playground/YogaEnumSelect.css
+++ b/website/src/components/Playground/YogaEnumSelect.css
@@ -21,3 +21,7 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+
+.YogaEnumSelect .ant-radio-button-wrapper {
+  white-space: nowrap;
+}
diff --git a/website/src/components/Playground/YogaEnumSelect.js b/website/src/components/Playground/YogaEnumSelect.js
index b04df772..83ed8c98 100644
--- a/website/src/components/Playground/YogaEnumSelect.js
+++ b/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>