feat(widget-object): add "summary" #4291 (#4398)

packages/netlify-cms-widget-object/src/ObjectControl.js

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ClassNames } from '@emotion/core';
-import { Map, List } from 'immutable';
+import { List, Map } from 'immutable';
-import { ObjectWidgetTopBar, lengths, colors } from 'netlify-cms-ui-default';
+import { colors, lengths, ObjectWidgetTopBar } from 'netlify-cms-ui-default';
+import { stringTemplate } from 'netlify-cms-lib-widgets';
 
 const styleStrings = {
   nestedObjectControl: `
@@ -126,6 +127,13 @@ export default class ObjectControl extends React.Component {
     return this.controlFor(singleField);
   };
 
+  objectLabel = () => {
+    const { value, field } = this.props;
+    const label = field.get('label', field.get('name'));
+    const summary = field.get('summary');
+    return summary ? stringTemplate.compileStringTemplate(summary, null, '', value) : label;
+  };
+
   render() {
     const { field, forID, classNameWrapper, forList, hasError } = this.props;
     const collapsed = forList ? this.props.collapsed : this.state.collapsed;
@@ -159,6 +167,7 @@ export default class ObjectControl extends React.Component {
                 <ObjectWidgetTopBar
                   collapsed={collapsed}
                   onCollapseToggle={this.handleCollapseToggle}
+                  heading={collapsed && this.objectLabel()}
                 />
               )}
               <div

website/content/docs/widgets/object.md

@@ -11,6 +11,7 @@ The object widget allows you to group multiple widgets together, nested under a
 
   * `default`: you can set defaults within each sub-field's configuration
   * `collapsed`: if added and labeled `true`, collapse the widget's content by default
+  * `summary`: specify the label displayed when the object is collapsed
   * `fields`: (**required**) a nested list of widget fields to include in your widget
 * **Example:**
 
@@ -18,6 +19,7 @@ The object widget allows you to group multiple widgets together, nested under a
   - label: "Profile"
     name: "profile"
     widget: "object"
+    summary: '{{fields.name}}: {{fields.birthdate}}'
     fields:
       - {label: "Public", name: "public", widget: "boolean", default: true}
       - {label: "Name", name: "name", widget: "string"}