Merge remote-tracking branch 'origin/publisher-production' into master

* origin/publisher-production:
  update version to v1.2.0 (#8562)
  Fix usage of String.includes which is es6 but not transformed by buble (#8565) (#8573)
  [docs] fix missing location prop to feedback component (#8554)
  Fix typo
  [docs] update dr-ui (#8548)
  [docs] fix errors on IE11 caused by dr-ui dependencies (#8544)
  updates directions plugin version (#8536)
  add dds sdk support
  squash (#8529)
  [docs] adds feedback component (#8507)

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 1.2.0
+
+## Features and improvements
+* Add `*-sort-key` layout property for circle, fill, and line layers, to dictate which features appear above others within a single layer([#8467](https://github.com/mapbox/mapbox-gl-js/pull/8467))
+* Add ability to instantiate maps with specific access tokens ([#8364](https://github.com/mapbox/mapbox-gl-js/pull/8364))
+* Accommodate `prefers-reduced-motion` settings in browser ([#8494](https://github.com/mapbox/mapbox-gl-js/pull/8494))
+* Add Map `visualizePitch` option that tilts the compass as the map pitches ([#8208](https://github.com/mapbox/mapbox-gl-js/issues/8208), fixed by [#8296](https://github.com/mapbox/mapbox-gl-js/pull/8296)) (h/t [pakastin](https://github.com/pakastin))
+* Make source options take precedence over TileJSON ([#8232](https://github.com/mapbox/mapbox-gl-js/pull/8232)) (h/t [jingsam](https://github.com/jingsam))
+* Make requirements for text offset properties more precise ([#8418](https://github.com/mapbox/mapbox-gl-js/pull/8418))
+* Expose `convertFilter` API in the style specification ([#8493](https://github.com/mapbox/mapbox-gl-js/pull/8493)
+
+## Bug fixes
+* Fix changes to `text-variable-anchor`, such that previous anchor positions would take precedence only if they are present in the updated array (considered a bug fix, but is technically a breaking change from previous behavior) ([#8473](https://github.com/mapbox/mapbox-gl-js/pull/8473))
+* Fix unbounded memory growth caused by failure to cancel requests to the cache (https://github.com/mapbox/mapbox-gl-js/pull/8472)
+* Fix rendering of opaque pass layers over heatmap and fill-extrusion layers ([#8440](https://github.com/mapbox/mapbox-gl-js/pull/8440))
+* Fix regression in tile load times compared to 0.54.0 ([#8431](https://github.com/mapbox/mapbox-gl-js/issues/8431), fixed by [#8434](https://github.com/mapbox/mapbox-gl-js/pull/8434))
+* Fix rendering of extraneous vertical line in vector tiles ([#8477](https://github.com/mapbox/mapbox-gl-js/issues/8477), fixed by [#8479](https://github.com/mapbox/mapbox-gl-js/pull/8479))
+* Turn off 'move' event listeners when removing a marker ([#8465](https://github.com/mapbox/mapbox-gl-js/pull/8465))
+* Fix class toggling on navigation control for IE ([#8495](https://github.com/mapbox/mapbox-gl-js/pull/8495)) (h/t [cs09g](https://github.com/cs09g))
+* Fix background rotation hovering on geolocate control ([#8367](https://github.com/mapbox/mapbox-gl-js/pull/8367)) (h/t [GuillaumeGomez](https://github.com/GuillaumeGomez))
+* Fix error in click events on markers where `startPos` is not defined ([#8462](https://github.com/mapbox/mapbox-gl-js/pull/8462)) (h/t [@msbarry](https://github.com/msbarry))
+* Fix malformed urls when using custom `baseAPIURL` of a certain form ([#8466](https://github.com/mapbox/mapbox-gl-js/pull/8466))
+
 ## 1.1.1
 
 ## 🐞 Bug fixes

batfish.config.js

@@ -71,7 +71,11 @@ module.exports = () => {
             }
         },
         devBrowserslist: false,
-        babelInclude: ['documentation']
+        babelInclude: [
+          'documentation',
+          'debounce-fn',
+          'mimic-fn'
+        ]
     };
 
     // Local builds treat the `dist` directory as static assets, allowing you to test examples against the

docs/components/api-item-member.js

@@ -51,7 +51,7 @@ class ApiItemMember extends React.Component {
 
                 {this.state.disclosed &&
                     <div className="toggle-target bg-gray-faint round py18 px18 mb12">
-                        <ApiItem nested={true} {...member}/>
+                        <ApiItem nested={true} location={this.props.location} {...member}/>
                     </div>}
             </div>
         );

docs/components/api-item.js

@@ -6,6 +6,8 @@ import {highlightJavascript} from '../components/prism_highlight.js';
 import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
 import ApiItemMember from './api-item-member';
 import IconText from '@mapbox/mr-ui/icon-text';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const linkerStack = new LinkerStack({})
     .namespaceResolver(docs, (namespace) => {
@@ -17,6 +19,21 @@ const formatters = createFormatters(linkerStack.link);
 
 class ApiItem extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            this.setState({ userName: MapboxPageShell.getUser() ?
+                MapboxPageShell.getUser().id :
+                undefined});
+        });
+    }
+
     md = (ast, inline) => {
         if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') {
             ast = {
@@ -37,7 +54,7 @@ class ApiItem extends React.Component {
                 <div>
                     <div className='py6 mt12 txt-m txt-bold'>{title}</div>
                     <div className='mb18'>
-                        {members.map((member, i) => <ApiItemMember key={i} {...member}/>)}
+                        {members.map((member, i) => <ApiItemMember {...this.props} key={i} {...member}/>)}
                     </div>
                 </div>;
 
@@ -160,6 +177,17 @@ class ApiItem extends React.Component {
                         <div className='py6 mt12 txt-m txt-bold'>Related</div>
                         <ul>{section.sees.map((see, i) => <li key={i}>{this.md(see, true)}</li>)}</ul>
                     </div>}
+
+                <div className="mt18">
+                    <Feedback
+                        site="Mapbox GL JS"
+                        section={section.name}
+                        type={`section on ${section.name}`}
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </section>
         );
     }

docs/components/example.js

@@ -6,6 +6,8 @@ import Prism from 'prismjs';
 import supported from '@mapbox/mapbox-gl-supported';
 import Icon from '@mapbox/mr-ui/icon';
 import CodeSnippet from '@mapbox/mr-ui/code-snippet';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const highlightTheme = require('raw-loader!@mapbox/dr-ui/css/prism.css'); // eslint-disable-line import/no-commonjs
 
@@ -15,7 +17,8 @@ export default function (html) {
             super(props);
             this.state = {
                 filter: '',
-                token: undefined
+                token: undefined,
+                userName: undefined
             };
         }
 
@@ -101,6 +104,15 @@ ${html}
                             </div>
                         </div>
                     </div>
+                    <div className="mt18">
+                        <Feedback
+                            site="Mapbox GL JS"
+                            type="example"
+                            location={this.props.location}
+                            userName={this.state.userName}
+                            webhook={constants.FORWARD_EVENT_WEBHOOK}
+                        />
+                    </div>
                 </PageShell>
             );
         }
@@ -113,7 +125,9 @@ ${html}
             doc.close();
 
             MapboxPageShell.afterUserCheck(() => {
-                this.setState({token: MapboxPageShell.getUserPublicAccessToken()});
+                this.setState({token: MapboxPageShell.getUserPublicAccessToken(), userName: MapboxPageShell.getUser() ?
+                    MapboxPageShell.getUser().id :
+                    undefined});
             });
         }
 

docs/components/markdown-page-shell.js

@@ -1,7 +1,26 @@
 import React from 'react';
 import PageShell from './page_shell';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 class MarkdownPageshell extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            // fetches username so we can identify them in segment
+            this.setState({
+                userName: MapboxPageShell.getUser() ?
+                    MapboxPageShell.getUser().id :
+                    undefined
+            });
+        });
+    }
     render() {
         const { frontMatter, location } = this.props;
         const meta = this.props.meta || {};
@@ -22,6 +41,14 @@ class MarkdownPageshell extends React.Component {
                 <div className="prose">
                     {this.props.children}
                 </div>
+                <div className="mt18">
+                    <Feedback
+                        site="Mapbox GL JS"
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </PageShell>
         );
     }

docs/constants.json

@@ -0,0 +1,6 @@
+{
+  "FORWARD_EVENT_WEBHOOK": {
+    "staging": "https://evj5gwoa8j.execute-api.us-east-1.amazonaws.com/hookshot/webhook",
+    "production": "https://2n40g6lyc9.execute-api.us-east-1.amazonaws.com/hookshot/webhook"
+  }
+}

docs/pages/api.js

@@ -66,7 +66,7 @@ export default class extends React.Component {
                     <div className='api-section'>
                         {docs.map((doc, i) => doc.kind === 'note' ?
                             <Note key={i} {...doc}/> :
-                            <ApiItem key={i} {...doc}/>)}
+                            <ApiItem location={this.props.location} key={i} {...doc}/>)}
                     </div>
                 </div>
             </PageShell>

docs/pages/example/mapbox-gl-directions.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/style-spec.js

@@ -8,6 +8,8 @@ import {highlightJavascript, highlightJSON} from '../components/prism_highlight'
 import entries from 'object.entries';
 import ref from '../../src/style-spec/reference/latest';
 import Icon from '@mapbox/mr-ui/icon';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const meta = {
     title: 'Style Specification',
@@ -68,19 +70,44 @@ function renderParams(params, maxLength) {
 }
 
 class SectionH2 extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            this.setState({ userName: MapboxPageShell.getUser() ?
+                MapboxPageShell.getUser().id :
+                undefined});
+        });
+    }
     render() {
         const {props} = this;
         return (
             <div className='style-spec-section-h2'>
                 <a id={props.id} className='anchor'/>
                 <h2><a className='unprose' href={`#${props.id}`} title={`link to ${props.title}`}>{props.title}</a></h2>
                 {this.props.children}
+                <div className="mt18">
+                    <Feedback
+                        site="Style Specification"
+                        section={props.title}
+                        type={`section on ${props.title}`}
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </div>
         );
     }
 }
 
 class SectionH3 extends React.Component {
+
     render() {
         const {props} = this;
         return (
@@ -233,6 +260,7 @@ class Item extends React.Component {
 }
 
 export default class extends React.Component {
+
     render() {
         return (
             <PageShell meta={meta}>
@@ -255,7 +283,7 @@ export default class extends React.Component {
                         <p>For platform-appropriate documentation of style-related features, developers using the Mapbox Maps SDK for iOS should consult the <a href='https://docs.mapbox.com/ios/maps/overview/'>iOS SDK API reference</a>, and developers using the Mapbox Maps SDK for macOS should consult the <a href='https://mapbox.github.io/mapbox-gl-native/macos/'>macOS SDK API reference</a>.</p>
                     </div>
 
-                    <SectionH2 id='root' title='Root Properties'>
+                    <SectionH2 location={this.props.location} id='root' title='Root Properties'>
                         <p>Root level properties of a Mapbox style specify the map's layers, tile sources and other
                             resources, and default values for the initial camera position when not specified
                             elsewhere.</p>
@@ -276,7 +304,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='light' title='Light'>
+                    <SectionH2 location={this.props.location} id='light' title='Light'>
                         <p>
                             A style's <code>light</code> property provides global light source for that style.
                         </p>
@@ -288,7 +316,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='sources' title='Sources'>
+                    <SectionH2 location={this.props.location} id='sources' title='Sources'>
                         <p>
                             Sources supply data to be shown on the map. The type of source is specified by the
                             <code>"type"</code> property, and must be one of {sourceTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
@@ -561,7 +589,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='sprite' title='Sprite'>
+                    <SectionH2 location={this.props.location} id='sprite' title='Sprite'>
                         <p>
                             A style's <code>sprite</code> property supplies a URL template for loading small images to use in
                             rendering <code>background-pattern</code>, <code>fill-pattern</code>, <code>line-pattern</code>,
@@ -618,7 +646,7 @@ export default class extends React.Component {
                         </p>
                     </SectionH2>
 
-                    <SectionH2 id='glyphs' title='Glyphs'>
+                    <SectionH2 location={this.props.location} id='glyphs' title='Glyphs'>
                         <p>
                             A style's <code>glyphs</code> property provides a URL template for loading signed-distance-field glyph sets in PBF format.
                         </p>
@@ -643,7 +671,7 @@ export default class extends React.Component {
                         </ul>
                     </SectionH2>
 
-                    <SectionH2 id='transition' title='Transition'>
+                    <SectionH2 location={this.props.location} id='transition' title='Transition'>
                         <p>
                             A <code>transition</code> property controls timing for the interpolation between a transitionable style
                             property's previous value and new value. A style's <a href='#root-transition' title='link to root-transition'>
@@ -659,7 +687,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='layers' title='Layers'>
+                    <SectionH2 location={this.props.location} id='layers' title='Layers'>
                         <p>
                             A style's <code>layers</code> property lists all of the layers available in that style. The type of
                             layer is specified by the <code>"type"</code> property, and must be one of {layerTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
@@ -700,7 +728,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='types' title='Types'>
+                    <SectionH2 location={this.props.location} id='types' title='Types'>
                         <p>A Mapbox style contains values of various types, most commonly as values for the style properties of a layer.</p>
                         <SectionH3 id='types-color' title='Color'>
                             <p>
@@ -764,7 +792,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='expressions' title='Expressions'>
+                    <SectionH2 location={this.props.location} id='expressions' title='Expressions'>
                         <p>The value for any <a href="#layout-property">layout property</a>, <a
                             href="#paint-property">paint property</a>, or <a href="#layer-filter">filter</a> may be
                             specified as an <em>expression</em>. An expression defines a formula for computing the
@@ -1037,7 +1065,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='other' title='Other'>
+                    <SectionH2 location={this.props.location} id='other' title='Other'>
                         <SectionH3 id='other-function' title='Function'>
                             <p>The value for any layout or paint property may be specified as
                               a <em>function</em>. Functions allow you to make the appearance of a map feature
@@ -1273,7 +1301,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='other-filter' title='Other filter'>
+                    <SectionH2 location={this.props.location} id='other-filter' title='Other filter'>
                         <p>In previous versions of the style specification, <a href="#layer-filter">filters</a> were defined using the deprecated syntax documented below. Though filters defined with this syntax will continue to work, we recommend using the more flexible <a href="#expressions">expression</a> syntax instead. Expression syntax and the deprecated syntax below cannot be mixed in a single filter definition.</p>
 
                         <InnerSection>