Merge branch 'master' into fixed-side-nav-content-offset

.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: ''
 ---
 

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

packages/components/docs/sass.md

@@ -3635,6 +3635,8 @@ $spacing-03: $carbon--spacing-03;
 - **Alias**: `carbon--spacing-03`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [accordion [mixin]](#accordion-mixin)
+  - [snippet [mixin]](#snippet-mixin)
   - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [data-table-core [mixin]](#data-table-core-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
@@ -3685,6 +3687,7 @@ $spacing-05: $carbon--spacing-05;
   - [data-table-core [mixin]](#data-table-core-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
   - [modal [mixin]](#modal-mixin)
+  - [pagination [mixin]](#pagination-mixin)
   - [select [mixin]](#select-mixin)
   - [tabs [mixin]](#tabs-mixin)
   - [carbon-switcher [mixin]](#carbon-switcher-mixin)
@@ -3705,6 +3708,7 @@ $spacing-06: $carbon--spacing-06;
 - **Alias**: `carbon--spacing-06`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [data-table-core [mixin]](#data-table-core-mixin)
 
 ### ✅spacing-07 [variable]
@@ -3761,6 +3765,7 @@ $spacing-09: $carbon--spacing-09;
 - **Alias**: `carbon--spacing-09`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [modal [mixin]](#modal-mixin)
   - [select [mixin]](#select-mixin)
   - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
@@ -12643,7 +12648,7 @@ Accordion styles
     .#{$prefix}--accordion__content {
       display: block;
       padding-bottom: $carbon--spacing-06;
-      padding-top: $spacing-xs;
+      padding-top: $spacing-03;
       // Transition property for when the accordion opens
       transition: padding-top motion(entrance, productive) $duration--fast-02, padding-bottom
           motion(entrance, productive) $duration--fast-02;
@@ -12704,6 +12709,7 @@ Accordion styles
   - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
+  - [spacing-03 [variable]](#spacing-03-variable)
 
 ## breadcrumb
 
@@ -13415,7 +13421,7 @@ Code snippet styles
   }
 
   .#{$prefix}--snippet--inline code {
-    padding: 0 $spacing-xs;
+    padding: 0 $spacing-03;
   }
 
   // Single Line Snippet
@@ -13440,7 +13446,7 @@ Code snippet styles
   .#{$prefix}--snippet--single pre {
     white-space: nowrap;
     @include type-style('code-01');
-    padding-right: $spacing-xs;
+    padding-right: $spacing-03;
   }
 
   .#{$prefix}--snippet--single::after {
@@ -13543,8 +13549,8 @@ Code snippet styles
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
     height: $carbon--spacing-07;
     width: $carbon--spacing-07;
-    top: $spacing-xs;
-    right: $spacing-xs;
+    top: $spacing-03;
+    right: $spacing-03;
   }
 
   .#{$prefix}--snippet-button:hover {
@@ -13579,9 +13585,9 @@ Code snippet styles
     display: inline-flex;
     align-items: center;
     position: absolute;
-    right: $spacing-xs;
-    bottom: $spacing-xs;
-    padding: $spacing-xs;
+    right: $spacing-03;
+    bottom: $spacing-03;
+    padding: $spacing-03;
     padding-left: $carbon--spacing-05;
     color: $text-01;
     background-color: $field-01;
@@ -13599,7 +13605,7 @@ Code snippet styles
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
     fill: $text-01;
-    margin-left: $spacing-xs;
+    margin-left: $spacing-03;
     margin-bottom: rem(1px);
     transform: rotate(0deg);
     transition: $duration--moderate-01 motion(standard, productive);
@@ -13775,6 +13781,7 @@ Code snippet styles
   - [text-01 [variable]](#text-01-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [focus [variable]](#focus-variable)
+  - [spacing-03 [variable]](#spacing-03-variable)
   - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [icon-01 [variable]](#icon-01-variable)
@@ -14083,7 +14090,7 @@ Data table action styles
     .#{$prefix}--search-magnifier {
     height: $layout-04;
     width: $layout-04;
-    padding: $spacing-md;
+    padding: $spacing-05;
     left: 0;
     cursor: pointer;
     pointer-events: all;
@@ -14149,7 +14156,7 @@ Data table action styles
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-input {
-    padding-left: $spacing-3xl;
+    padding-left: $spacing-09;
     visibility: inherit;
   }
 
@@ -14214,7 +14221,7 @@ Data table action styles
     cursor: pointer;
     height: $layout-04;
     width: $layout-04;
-    padding: $spacing-md;
+    padding: $spacing-05;
     transition: background $duration--fast-02 motion(entrance, productive);
   }
 
@@ -14297,14 +14304,14 @@ Data table action styles
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-magnifier {
-    left: $spacing-md;
+    left: $spacing-05;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-input {
     height: $layout-04;
-    padding-left: $spacing-3xl;
+    padding-left: $spacing-09;
     border: none;
   }
 
@@ -14353,8 +14360,8 @@ Data table action styles
     top: 0;
     left: 0;
     align-items: center;
-    padding-left: $spacing-lg;
-    padding-right: $spacing-lg;
+    padding-left: $spacing-06;
+    padding-right: $spacing-06;
     width: 100%;
     height: 100%;
     pointer-events: none;
@@ -14510,7 +14517,7 @@ Data table action styles
       .#{$prefix}--search-magnifier {
       height: rem(32px);
       width: rem(32px);
-      padding: $spacing-xs;
+      padding: $spacing-03;
     }
 
     //hidden
@@ -14578,7 +14585,7 @@ Data table action styles
   .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
     height: rem(32px);
     width: rem(32px);
-    padding: $spacing-xs;
+    padding: $spacing-03;
   }
 
   .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {
@@ -14608,15 +14615,17 @@ Data table action styles
   - [prefix [variable]](#prefix-variable)
   - [ui-01 [variable]](#ui-01-variable)
   - [layout-04 [variable]](#layout-04-variable)
+  - [spacing-05 [variable]](#spacing-05-variable)
   - [hover-field [variable]](#hover-field-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [spacing-09 [variable]](#spacing-09-variable)
   - [layout-01 [variable]](#layout-01-variable)
   - [icon-01 [variable]](#icon-01-variable)
+  - [spacing-06 [variable]](#spacing-06-variable)
   - [interactive-01 [variable]](#interactive-01-variable)
   - [text-04 [variable]](#text-04-variable)
   - [icon-03 [variable]](#icon-03-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
-  - [spacing-05 [variable]](#spacing-05-variable)
 
 ### ❌data-table-core [mixin]
 
@@ -19738,7 +19747,7 @@ Pagination styles
     width: auto;
     min-width: auto;
     height: 100%;
-    padding: 0 2.5rem 0 $spacing-md;
+    padding: 0 2.5rem 0 $spacing-05;
     margin-right: -0.65rem;
     @include carbon--breakpoint('md') {
       padding-right: carbon--mini-units(4.5);
@@ -19885,6 +19894,7 @@ Pagination styles
   - [prefix [variable]](#prefix-variable)
   - [ui-01 [variable]](#ui-01-variable)
   - [ui-03 [variable]](#ui-03-variable)
+  - [spacing-05 [variable]](#spacing-05-variable)
   - [hover-ui [variable]](#hover-ui-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [text-02 [variable]](#text-02-variable)

packages/components/src/components/accordion/_accordion.scss

@@ -143,7 +143,7 @@
     .#{$prefix}--accordion__content {
       display: block;
       padding-bottom: $carbon--spacing-06;
-      padding-top: $spacing-xs;
+      padding-top: $spacing-03;
       // Transition property for when the accordion opens
       transition: padding-top motion(entrance, productive) $duration--fast-02,
         padding-bottom motion(entrance, productive) $duration--fast-02;