Merge branch 'master' into docs/add-react-handler-naming-guide

.github/ISSUE_TEMPLATE/accessibility-issue.md

@@ -2,7 +2,7 @@
 name: Accessibility Issue ♿
 about: Report an accessibility or usability issue
 title: ''
-labels: 'type: a11y ♿'
+labels: 'type: a11y ♿', 'squad: system'
 assignees: ''
 ---
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,8 +1,8 @@
 ---
-name: "Bug Report \U0001F41B"
+name: "Bug Report 🐛"
 about: Something isn't working as expected? Here is the right place to report.
 title: ''
-labels: "type: bug \U0001F41B"
+labels: "type: bug 🐛", "squad: system"
 assignees: ''
 ---
 

.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md

@@ -1,8 +1,8 @@
 ---
-name: "Feature request or enhancement \U0001F4A1"
+name: "Feature request or enhancement 💡"
 about: Suggest an idea for this project
 title: ''
-labels: "type: enhancement \U0001F4A1"
+labels: "type: enhancement 💡", "squad: system"
 assignees: ''
 ---
 
@@ -15,18 +15,22 @@ If you are reporting a bug or problem, please use the bug template instead.
 
 Please describe your request in one or two sentences.
 
-Clarify if you are asking for both design and development, or just design, or
-just development.
+Clarify if you are asking for design, development, or both design and
+development.
 
 ### Justification
 
 Provide the business reasons for this request.
 
 ### Desired UX and success metrics
 
+<!--alex disable failure-->
+
 Describe the full user experience for this feature. Also define the metrics by
 which we can measure success/failure for the user.
 
+<!--alex enable failure-->
+
 ### "Must have" functionality
 
 Highlight any "must have" needs and functionality for the request.
@@ -36,9 +40,13 @@ you to define functionality based on the desired UX.
 
 ### Specific timeline issues / requests
 
+<!--alex disable period-->
+
 Do you want this work within a specific time period? Is it related to an
 upcoming release?
 
+<!--alex enable period-->
+
 _NB: The Carbon team will try to work with your timeline, but it's not
 guaranteed. The earlier you make a request in advance of a desired delivery
 date, the better!_

.github/ISSUE_TEMPLATE/question.md

@@ -1,8 +1,8 @@
 ---
 name: Question ❓
-about: Usage question or discussion about Carbon Components.
+about: Usage question or discussion about Carbon components
 title: ''
-labels: 'type: question :question:'
+labels: 'type: question ❓', 'squad: system'
 assignees: ''
 ---
 

.github/labeler.yml

@@ -0,0 +1,2 @@
+'squad: system':
+  - ./**/*

.github/workflows/labeler.yml

@@ -0,0 +1,12 @@
+name: 'Label pull request'
+
+on:
+  - pull_request
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'

docs/style.md

@@ -60,6 +60,9 @@ row before the </tbody></table> line.
 ## Table of Contents
 
 - [Introduction](#introduction)
+- [JavaScript](#javascript)
+  - [Style](#style)
+    - [Be explicit](#be-explicit)
 - [React](#react)
   - [Guidelines](#guidelines)
     - [Writing a component](#writing-a-component)
@@ -90,6 +93,69 @@ code:
 _Inspired by
 [Minimal API Surface Area](https://www.youtube.com/watch?v=4anAwXYqLG8)_
 
+## JavaScript
+
+### Style
+
+#### Be explicit
+
+<table>
+<thead><tr><th>Unpreferred</th><th>Preferred</th></tr></thead>
+<tbody>
+<tr><td>
+
+```jsx
+const add = (a, b) => a + b;
+```
+
+</td><td>
+
+```jsx
+const add = (a, b) => {
+  return a + b;
+};
+```
+
+</td></tr>
+</tbody></table>
+
+Certain features in JavaScript have implicit behavior. One of these that we see
+most often is the implicit return behavior of arrow function expressions, for
+example:
+
+```js
+const add = (a, b) => a + b;
+```
+
+We've found that, while this style is terse and compact, it can be at odds with
+the fact that code is revisited often and that developers need to peak inside
+sometimes to see what is going on. For example, if we needed to debug a specific
+value in the function above then we would go through the following steps:
+
+```js
+// Step 1. The code as originally authored
+const add = (a, b) => a + b;
+
+// Step 2. Update the code to no longer use the implicit return
+const add = (a, b) => {
+  return a + b;
+};
+
+// Step 3. Add any debugging code or ways to introspect its values
+const add = (a, b) => {
+  console.log(a);
+  return a + b;
+};
+
+// Step 4. Undo these changes and bring back to original format
+const add = (a, b) => a + b;
+```
+
+If instead we had written this code without the implicit return then we would
+have saved three out of the four steps above. As a result, we tend to favor
+being explicit in how JavaScript is written instead of relying on implicit
+behavior.
+
 ## React
 
 ### Guidelines