improvement: allow viewing model when Try-It-Out is enabled (via #4723)

src/core/components/model-example.jsx

@@ -15,13 +15,13 @@ export default class ModelExample extends React.Component {
 
   constructor(props, context) {
     super(props, context)
-    let { getConfigs } = this.props
+    let { getConfigs, isExecute } = this.props
     let { defaultModelRendering } = getConfigs()
     if (defaultModelRendering !== "example" && defaultModelRendering !== "model") {
       defaultModelRendering = "example"
     }
     this.state = {
-      activeTab: defaultModelRendering
+      activeTab: isExecute ? "example" : defaultModelRendering
     }
   }
 
@@ -33,6 +33,12 @@ export default class ModelExample extends React.Component {
     })
   }
 
+  componentWillReceiveProps(props) {
+    if (props.isExecute && props.isExecute !== this.props.isExecute) {
+      this.setState({ activeTab: "example" })
+    }
+  }
+
   render() {
     let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath } = this.props
     let { defaultModelExpandDepth } = getConfigs()
@@ -40,19 +46,19 @@ export default class ModelExample extends React.Component {
 
     return <div>
       <ul className="tab">
-        <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
+        <li className={ "tabitem" + ( this.state.activeTab === "example" ? " active" : "") }>
-          <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
+          <a className="tablinks" data-name="example" onClick={ this.activeTab }>{isExecute ? "Edit Value" : "Example Value"}</a>
         </li>
-        { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
+        { schema ? <li className={ "tabitem" + ( this.state.activeTab === "model" ? " active" : "") }>
           <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
         </li> : null }
       </ul>
       <div>
         {
-          (isExecute || this.state.activeTab === "example") && example
+          this.state.activeTab === "example" && example
         }
         {
-          !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
+          this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                      getComponent={ getComponent }
                                                      getConfigs={ getConfigs }
                                                      specSelectors={ specSelectors }

src/style/_layout.scss

@@ -396,8 +396,7 @@
     {
         font-size: 12px;
 
-        min-width: 100px;
+        min-width: 60px;
-        min-width: 90px;
         padding: 0;
 
         cursor: pointer;
@@ -409,6 +408,7 @@
             position: relative;
 
             padding-left: 0;
+            padding-right: 12px;
 
             &:after
             {