[ios, macos] Update and reformat documentation for runtime styling (#7475)

* [ios, macos] Optimized changelog for runtime styling

Changelog entries related to style JSON now lead off with the analogous portion of the runtime styling API.

* [ios, macos] Autolink cross-class property references in docs

jazzy can autolink `Class.property` references in documentation comments.

* [ios, macos] Removed extra blank lines

* [ios, macos] Corrected typo in MGLMultiPoint docs

* [ios, macos] Rewrote shape and feature docs

Rewrote documentation about MGLShape, its subclasses, and MGLFeature to emphasize runtime styling uses over annotation uses, associate each type with real-world concepts, cross-reference related style layer classes, and cross-reference related or easily confused shape classes. Links to the GeoJSON specification have been updated to RFC 7946.

* [ios, macos] Expanded style layer docs

With this change, documentation about style layer classes is nominally based on the documentation in the style specification. However, all the existing layer types’ documentation has been overridden to explain what the layer looks like, relate the layer to a real-world concept, and cross-reference related geometry classes. This change also corrects the description of MGLBackgroundStyleLayer, which erroneously stated that the identifier must be “background”, whereas that only happens to be true by default for Studio template styles.

* [ios, macos] Wrap style layer docs

* [ios, macos] Removed unused code

* [ios, macos] Corrected symbol references in docs

* [ios, macos] Corrected typo in abstract class exception

2 files changed, 52 insertions, 7 deletions

diff --git a/platform/darwin/scripts/generate-style-code.js b/platform/darwin/scripts/generate-style-code.js
index 9e79d0a321..46f55c889c 100644
--- a/platform/darwin/scripts/generate-style-code.js
+++ b/platform/darwin/scripts/generate-style-code.js
@@ -46,6 +46,15 @@ _.forOwn(cocoaConventions, function (properties, kind) {
     })
 });
 
+String.prototype.wrap = function (cols, indent) {
+	let wrapRe = new RegExp(`(.{1,${cols - indent}})(?: +|\n|$)`, "gm");
+	return this.replace(wrapRe, "$1\n").replace(/\s+$/, "").indent(indent);
+};
+
+String.prototype.indent = function (cols) {
+	return this.replace(/^|\n/g, "$&" + " ".repeat(cols));
+};
+
 global.camelize = function (str) {
     return str.replace(/(?:^|-)(.)/g, function (_, x) {
         return x.toUpperCase();
@@ -126,7 +135,7 @@ global.testHelperMessage = function (property, layerType, isFunction) {
     }
 };
 
-global.propertyDoc = function (propertyName, property, layerType) {
+global.propertyDoc = function (propertyName, property, layerType, kind) {
     // Match references to other property names & values. 
     // Requires the format 'When `foo` is set to `bar`,'.
     let doc = property.doc.replace(/`([^`]+?)` is set to `([^`]+?)`/g, function (m, peerPropertyName, propertyValue, offset, str) {
@@ -157,11 +166,24 @@ global.propertyDoc = function (propertyName, property, layerType) {
         if (!property.units.match(/s$/)) {
             property.units += 's';
         }
-        doc += `
-
- This property is measured in ${property.units}.`;
+        doc += `\n\nThis property is measured in ${property.units}.`;
+    }
+    doc = doc.replace(/(p)ixel/gi, '$1oint').replace(/(\d)px\b/g, '$1pt');
+    if (kind !== 'enum') {
+        if ('default' in property) {
+            doc += `\n\nThe default value of this property is ${propertyDefault(property, layerType)}.`;
+            if (!property.required) {
+                doc += ' Set this property to `nil` to reset it to the default value.';
+            }
+        }
+        if ('requires' in property) {
+            doc += '\n\n' + propertyReqs(property, spec[`${kind}_${layerType}`], layerType);
+        }
+        if ('original' in property) {
+            doc += `\n\nThis attribute corresponds to the <a href="https://www.mapbox.com/mapbox-gl-style-spec/#layout-${layerType}-${property.original}"><code>${property.original}</code></a> layout property in the Mapbox Style Specification.`;
+        }
     }
-    return doc.replace(/(p)ixel/gi, '$1oint').replace(/(\d)px\b/g, '$1pt');
+    return doc;
 };
 
 global.propertyReqs = function (property, propertiesByName, type) {
@@ -365,11 +387,10 @@ const layers = Object.keys(spec.layer.type.values).map((type) => {
     }, []);
 
     return {
+        doc: spec.layer.type.values[type].doc,
         type: type,
         layoutProperties: _.sortBy(layoutProperties, ['name']),
         paintProperties: _.sortBy(paintProperties, ['name']),
-        layoutPropertiesByName: spec[`layout_${type}`],
-        paintPropertiesByName: spec[`paint_${type}`],
     };
 });
 
diff --git a/platform/darwin/scripts/style-spec-overrides-v8.json b/platform/darwin/scripts/style-spec-overrides-v8.json
index cfda85b7fb..f42c059f59 100644
--- a/platform/darwin/scripts/style-spec-overrides-v8.json
+++ b/platform/darwin/scripts/style-spec-overrides-v8.json
@@ -1,4 +1,28 @@
 {
+  "layer": {
+    "type": {
+      "values": {
+        "fill": {
+          "doc": "An `MGLFillStyleLayer` is a style layer that renders one or more filled (and optionally stroked) polygons on the map.\n\nUse a fill style layer to configure the visual appearance of polygon or multipolygon features in vector tiles loaded by an `MGLVectorSource` object or `MGLPolygon`, `MGLPolygonFeature`, `MGLMultiPolygon`, or `MGLMultiPolygonFeature` instances in an `MGLShapeSource` object."
+        },
+        "line": {
+          "doc": "An `MGLLineStyleLayer` is a style layer that renders one or more stroked polylines on the map.\n\nUse a line style layer to configure the visual appearance of polyline or multipolyline features in vector tiles loaded by an `MGLVectorSource` object or `MGLPolyline`, `MGLPolylineFeature`, `MGLMultiPolyline`, or `MGLMultiPolylineFeature` instances in an `MGLShapeSource` object."
+        },
+        "symbol": {
+          "doc": "An `MGLSymbolStyleLayer` is a style layer that renders icon and text labels at points or along lines on the map.\n\nUse a symbol style layer to configure the visual appearance of labels for features in vector tiles loaded by an `MGLVectorSource` object or `MGLShape` or `MGLFeature` instances in an `MGLShapeSource` object."
+        },
+        "circle": {
+          "doc": "An `MGLCircleStyleLayer` is a style layer that renders one or more filled circles on the map.\n\nUse a circle style layer to configure the visual appearance of point or point collection features in vector tiles loaded by an `MGLVectorSource` object or `MGLPointAnnotation`, `MGLPointFeature`, `MGLPointCollection`, or `MGLPointCollectionFeature` instances in an `MGLShapeSource` object.\n\nA circle style layer renders circles whose radii are measured in screen units. To display circles on the map whose radii correspond to real-world distances, use many-sided regular polygons and configure their appearance using an `MGLFillStyleLayer` object."
+        },
+        "raster": {
+          "doc": "An `MGLRasterStyleLayer` is a style layer that renders raster tiles on the map.\n\nUse a raster style layer to configure the color parameters of raster tiles loaded by an `MGLRasterSource` object. For example, you could use a raster style layer to render <a href=\"https://www.mapbox.com/satellite/\">Mapbox Satellite</a> imagery, a <a href=\"https://www.mapbox.com/help/define-tileset/#raster-tilesets\">raster tile set</a> uploaded to Mapbox Studio, or a raster map authored in <a href=\"https://tilemill-project.github.io/tilemill/\">TileMill</a>, the classic Mapbox Editor, or Mapbox Studio Classic."
+        },
+        "background": {
+          "doc": "An `MGLBackgroundStyleLayer` is a style layer that covers the entire map. Use a background style layer to configure a color or pattern to show below all other map content. If the style’s other layers use the Mapbox Streets source, the background style layer is responsible for drawing land, whereas the oceans and other bodies of water are drawn by `MGLFillStyleLayer` objects.\n\nA background style layer is typically the bottommost layer in a style, because it covers the entire map and can occlude any layers below it. You can therefore access it by getting the last item in the `MGLStyle.layers` array.\n\nIf the background style layer is transparent or omitted from the style, any portion of the map view that does not show another style layer is transparent."
+        }
+      }
+    }
+  },
   "layout_symbol": {
     "icon-text-fit-padding": {
       "doc": "Size of the additional area added to dimensions determined by `icon-text-fit`."