Update deprecation styles in doc explorer

Closes #286 Adds a deprecated section for fields and enum values, moving deprecated references out of the common path, hiding them by default.
graphql · Jan 25, 2017 · 8f42beb · 8f42beb
1 parent 2daf82f
commit 8f42beb
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 75 deletions.
diff --git a/css/app.css b/css/app.css
@@ -1,7 +1,7 @@
-.graphiql-container {
+.graphiql-container,
+.graphiql-container button,
+.graphiql-container input {
   color: #141823;
-  display: flex;
-  flex-direction: row;
   font-family:
     system,
     -apple-system,
@@ -16,6 +16,11 @@
     arial,
     sans-serif;
   font-size: 14px;
+}
+
+.graphiql-container {
+  display: flex;
+  flex-direction: row;
   height: 100%;
   margin: 0;
   overflow: hidden;

diff --git a/css/doc-explorer.css b/css/doc-explorer.css
@@ -79,8 +79,12 @@
   text-decoration: underline;
 }
 
-.graphiql-container .doc-value-description {
-  padding: 4px 0 8px 12px;
+.graphiql-container .doc-value-description > :first-child {
+  margin-top: 4px;
+}
+
+.graphiql-container .doc-value-description > :last-child {
+  margin-bottom: 4px;
 }
 
 .graphiql-container .doc-category {
@@ -117,7 +121,7 @@
   color: #1F61A0;
 }
 
-.graphiql-container .value-name {
+.graphiql-container .enum-value {
   color: #0B7FC7;
 }
 
@@ -145,10 +149,52 @@
   color: #0B7FC7;
 }
 
-.graphiql-container .doc-alert-text {
-  color: #F00F00;
-  font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
-  font-size: 13px;
+.graphiql-container .doc-deprecation {
+  background: #fffae8;
+  box-shadow: inset 0 0 1px #bfb063;
+  color: #867F70;
+  line-height: 16px;
+  margin: 8px -8px;
+  max-height: 80px;
+  overflow: hidden;
+  padding: 8px;
+  border-radius: 3px;
+}
+
+.graphiql-container .doc-deprecation:before {
+  content: 'Deprecated:';
+  color: #c79b2e;
+  cursor: default;
+  display: block;
+  font-size: 9px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  line-height: 1;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.graphiql-container .doc-deprecation > :first-child {
+  margin-top: 0;
+}
+
+.graphiql-container .doc-deprecation > :last-child {
+  margin-bottom: 0;
+}
+
+.graphiql-container .show-btn {
+  -webkit-appearance: initial;
+  display: block;
+  border-radius: 3px;
+  border: solid 1px #ccc;
+  text-align: center;
+  padding: 8px 12px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fbfcfc;
+  color: #555;
+  cursor: pointer;
 }
 
 .graphiql-container .search-box-outer {

diff --git a/css/info.css b/css/info.css
@@ -94,7 +94,7 @@
   color: #1F61A0;
 }
 
-.CodeMirror-info .value-name {
+.CodeMirror-info .enum-value {
   color: #0B7FC7;
 }
 
@@ -105,7 +105,3 @@
 .CodeMirror-info .directive-name {
   color: #B33086;
 }
-
-.CodeMirror-info .enum-value {
-  color: #0B7FC7;
-}
diff --git a/src/components/DocExplorer/FieldDoc.js b/src/components/DocExplorer/FieldDoc.js
@@ -56,7 +56,7 @@ export default class FieldDoc extends React.Component {
         {
           field.deprecationReason &&
           <MarkdownContent
-            className="doc-alert-text"
+            className="doc-deprecation"
             markdown={field.deprecationReason}
           />
         }

diff --git a/src/components/DocExplorer/TypeDoc.js b/src/components/DocExplorer/TypeDoc.js
@@ -27,10 +27,16 @@ export default class TypeDoc extends React.Component {
     onClickField: PropTypes.func,
   }
 
-  shouldComponentUpdate(nextProps) {
+  constructor(props) {
+    super(props);
+    this.state = { showDeprecated: false };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
     return (
       this.props.type !== nextProps.type ||
-      this.props.schema !== nextProps.schema
+      this.props.schema !== nextProps.schema ||
+      this.state.showDeprecated !== nextState.showDeprecated
     );
   }
 
@@ -55,7 +61,7 @@ export default class TypeDoc extends React.Component {
 
     let typesDef;
     if (types && types.length > 0) {
-      typesDef = (
+      typesDef =
         <div className="doc-category">
           <div className="doc-category-title">
             {typesTitle}
@@ -65,83 +71,87 @@ export default class TypeDoc extends React.Component {
               <TypeLink type={subtype} onClick={onClickType} />
             </div>
           )}
-        </div>
-      );
+        </div>;
     }
 
     // InputObject and Object
     let fieldsDef;
+    let deprecatedFieldsDef;
     if (type.getFields) {
       const fieldMap = type.getFields();
       const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
-      fieldsDef = (
+      fieldsDef =
         <div className="doc-category">
           <div className="doc-category-title">
             {'fields'}
           </div>
-          {fields.map(field =>
-            <div key={field.name} className="doc-category-item">
-              <a
-                className="field-name"
-                onClick={event => onClickField(field, type, event)}>
-                {field.name}
-              </a>
-              {field.args && field.args.length > 0 && [
-                '(',
-                <span key="args">
-                  {field.args.map(arg =>
-                    <Argument
-                      key={arg.name}
-                      arg={arg}
-                      onClickType={onClickType}
-                    />
-                  )}
-                </span>,
-                ')'
-              ]}
-              {': '}
-              <TypeLink type={field.type} onClick={onClickType} />
-              {
-                (field.isDeprecated || field.deprecationReason) &&
-                <span className="doc-alert-text">{' (DEPRECATED)'}</span>
-              }
-            </div>
+          {fields.filter(field => !field.isDeprecated).map(field =>
+            <Field
+              key={field.name}
+              type={type}
+              field={field}
+              onClickType={onClickType}
+              onClickField={onClickField}
+            />
           )}
-        </div>
-      );
+        </div>;
+
+      const deprecatedFields = fields.filter(field => field.isDeprecated);
+      if (deprecatedFields.length > 0) {
+        deprecatedFieldsDef =
+          <div className="doc-category">
+            <div className="doc-category-title">
+              {'deprecated fields'}
+            </div>
+            {!this.state.showDeprecated ?
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated fields...'}
+              </button> :
+              deprecatedFields.map(field =>
+                <Field
+                  key={field.name}
+                  type={type}
+                  field={field}
+                  onClickType={onClickType}
+                  onClickField={onClickField}
+                />
+              )
+            }
+          </div>;
+      }
     }
 
     let valuesDef;
+    let deprecatedValuesDef;
     if (type instanceof GraphQLEnumType) {
-      valuesDef = (
+      const values = type.getValues();
+      valuesDef =
         <div className="doc-category">
           <div className="doc-category-title">
             {'values'}
           </div>
-          {type.getValues().map(value =>
-            <div key={value.name} className="doc-category-item">
-              <div className="enum-value">
-                {value.name}
-                {
-                  (value.isDeprecated || value.deprecationReason) &&
-                  <span className="doc-alert-text">{' (DEPRECATED)'}</span>
-                }
-              </div>
-              <MarkdownContent
-                className="doc-value-description"
-                markdown={value.description}
-              />
-              {
-                value.deprecationReason &&
-                <MarkdownContent
-                  className="doc-alert-text"
-                  markdown={value.deprecationReason}
-                />
-              }
-            </div>
+          {values.filter(value => !value.isDeprecated).map(value =>
+            <EnumValue key={value.name} value={value} />
           )}
-        </div>
-      );
+        </div>;
+
+      const deprecatedValues = values.filter(value => value.isDeprecated);
+      if (deprecatedValues.length > 0) {
+        deprecatedValuesDef =
+          <div className="doc-category">
+            <div className="doc-category-title">
+              {'deprecated values'}
+            </div>
+            {!this.state.showDeprecated ?
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated values...'}
+              </button> :
+              deprecatedValues.map(value =>
+                <EnumValue key={value.name} value={value} />
+              )
+            }
+          </div>;
+      }
     }
 
     return (
@@ -152,9 +162,79 @@ export default class TypeDoc extends React.Component {
         />
         {(type instanceof GraphQLObjectType) && typesDef}
         {fieldsDef}
+        {deprecatedFieldsDef}
         {valuesDef}
+        {deprecatedValuesDef}
         {!(type instanceof GraphQLObjectType) && typesDef}
       </div>
     );
   }
+
+  handleShowDeprecated = () => this.setState({ showDeprecated: true });
 }
+
+function Field({ type, field, onClickType, onClickField }) {
+  return (
+    <div className="doc-category-item">
+      <a
+        className="field-name"
+        onClick={event => onClickField(field, type, event)}>
+        {field.name}
+      </a>
+      {field.args && field.args.length > 0 && [
+        '(',
+        <span key="args">
+          {field.args.map(arg =>
+            <Argument
+              key={arg.name}
+              arg={arg}
+              onClickType={onClickType}
+            />
+          )}
+        </span>,
+        ')'
+      ]}
+      {': '}
+      <TypeLink type={field.type} onClick={onClickType} />
+      {
+        field.deprecationReason &&
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={field.deprecationReason}
+        />
+      }
+    </div>
+  );
+}
+
+Field.propTypes = {
+  type: PropTypes.object,
+  field: PropTypes.object,
+  onClickType: PropTypes.func,
+  onClickField: PropTypes.func,
+};
+
+function EnumValue({ value }) {
+  return (
+    <div className="doc-category-item">
+      <div className="enum-value">
+        {value.name}
+      </div>
+      <MarkdownContent
+        className="doc-value-description"
+        markdown={value.description}
+      />
+      {
+        value.deprecationReason &&
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={value.deprecationReason}
+        />
+      }
+    </div>
+  );
+}
+
+EnumValue.propTypes = {
+  value: PropTypes.object
+};