Merge branch 'master' into multiselect-4888

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]
 
@@ -18814,6 +18823,11 @@ Inline notification styles
     }
   }
 
+  .#{$prefix}--inline-notification--hide-close-button
+    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
+    margin-right: $carbon--spacing-03;
+  }
+
   .#{$prefix}--inline-notification__close-button {
     @include focus-outline('reset');
     display: flex;
@@ -19738,7 +19752,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 +19899,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;

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -53,7 +53,7 @@
   }
 
   .#{$prefix}--snippet--inline code {
-    padding: 0 $spacing-xs;
+    padding: 0 $spacing-03;
   }
 
   // Single Line Snippet
@@ -78,7 +78,7 @@
   .#{$prefix}--snippet--single pre {
     white-space: nowrap;
     @include type-style('code-01');
-    padding-right: $spacing-xs;
+    padding-right: $spacing-03;
   }
 
   .#{$prefix}--snippet--single::after {
@@ -181,8 +181,8 @@
   .#{$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 {
@@ -217,9 +217,9 @@
     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;
@@ -237,7 +237,7 @@
 
   .#{$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);

packages/components/src/components/copy-button/_copy-button.scss

@@ -38,7 +38,7 @@
       @include layer('overlay');
       @include type-style('body-short-01');
       top: 1.1rem;
-      padding: $spacing-2xs;
+      padding: $spacing-02;
       color: $inverse-01;
       content: attr(data-feedback);
       transform: translateX(-50%);