Merge branch 'master' into fix-search-autocomplete

.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

@@ -207,3 +207,65 @@ MyComponent.propTypes = {
 _Note: not every component will mirror the structure above. Some will need to
 incorporate `useEffect`, some will not. You can think of the outline above as
 slots that you can fill if you need this functionality in a component._
+
+### Style
+
+#### Naming event handlers
+
+<table>
+<thead><tr><th>Unpreferred</th><th>Preferred</th></tr></thead>
+<tbody>
+<tr><td>
+
+```jsx
+function MyComponent() {
+  function click() {
+    // ...
+  }
+  return <button onClick={click} />;
+}
+```
+
+</td><td>
+
+```jsx
+function MyComponent() {
+  function onClick() {
+    // ...
+  }
+  return <button onClick={onClick} />;
+}
+```
+
+</td></tr>
+<tr><td>
+
+```jsx
+function MyComponent({ onClick }) {
+  function handleClick(event) {
+    // ...
+    onClick(event);
+  }
+  return <button onClick={handleClick} />;
+}
+```
+
+</td><td>
+
+```jsx
+function MyComponent({ onClick }) {
+  function handleOnClick(event) {
+    // ...
+    onClick(event);
+  }
+  return <button onClick={handleOnClick} />;
+}
+```
+
+</td></tr>
+</tbody></table>
+
+When writing event handlers, we prefer using the exact name, `onClick` to a
+shorthand. If that name is already being used in a given scope, which often
+happens if the component supports a prop `onClick`, then we prefer to specify
+the function as `handleOnClick`.

packages/components/docs/sass.md

@@ -3439,7 +3439,6 @@ $carbon--spacing-06: 1.5rem;
   - [toast-notifications [mixin]](#toast-notifications-mixin)
   - [progress-indicator [mixin]](#progress-indicator-mixin)
   - [padding-td [mixin]](#padding-td-mixin)
-  - [tags [mixin]](#tags-mixin)
 
 ### ✅carbon--spacing-07 [variable]
 
@@ -17722,7 +17721,9 @@ List box styles
   // Menu status inside of a `list-box__field`
   .#{$prefix}--list-box__menu-icon {
     position: absolute;
+    top: 0;
     right: $carbon--spacing-05;
+    bottom: 0;
     height: 100%;
     transition: transform $duration--fast-01 motion(standard, productive);
     cursor: pointer;
@@ -21905,7 +21906,6 @@ Tag styles
     @include type-style('label-01');
 
     display: inline-flex;
-    position: relative;
     align-items: center;
     padding: 0 $carbon--spacing-03;
     height: 1.5rem;
@@ -21982,16 +21982,10 @@ Tag styles
     @include tag-theme($inverse-02, $inverse-01);
 
     cursor: pointer;
-    padding-right: calc(
-      #{$carbon--spacing-06} + #{rem(2px)}
-    ); // icon width + 2px space from right edge
+    padding-right: rem(2px);
   }
 
   .#{$prefix}--tag--filter > svg {
-    position: absolute;
-    right: rem(2px);
-    top: 50%;
-    transform: translateY(-50%);
     fill: $inverse-01;
     margin-left: rem(4px);
     padding: rem(2px);
@@ -22036,7 +22030,6 @@ Tag styles
   - [text-01 [variable]](#text-01-variable)
   - [inverse-02 [variable]](#inverse-02-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
-  - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
 

packages/components/src/components/list-box/_list-box.scss

@@ -327,7 +327,9 @@ $list-box-menu-width: rem(300px);
   // Menu status inside of a `list-box__field`
   .#{$prefix}--list-box__menu-icon {
     position: absolute;
+    top: 0;
     right: $carbon--spacing-05;
+    bottom: 0;
     height: 100%;
     transition: transform $duration--fast-01 motion(standard, productive);
     cursor: pointer;

packages/components/src/components/tag/_tag.scss

@@ -19,7 +19,6 @@
     @include type-style('label-01');
 
     display: inline-flex;
-    position: relative;
     align-items: center;
     padding: 0 $carbon--spacing-03;
     height: 1.5rem;
@@ -96,16 +95,10 @@
     @include tag-theme($inverse-02, $inverse-01);
 
     cursor: pointer;
-    padding-right: calc(
-      #{$carbon--spacing-06} + #{rem(2px)}
-    ); // icon width + 2px space from right edge
+    padding-right: rem(2px);
   }
 
   .#{$prefix}--tag--filter > svg {
-    position: absolute;
-    right: rem(2px);
-    top: 50%;
-    transform: translateY(-50%);
     fill: $inverse-01;
     margin-left: rem(4px);
     padding: rem(2px);

packages/react/src/components/Button/Button.js

@@ -112,7 +112,11 @@ Button.propTypes = {
    * Specify how the button itself should be rendered.
    * Make sure to apply all props to the root node and render children appropriately
    */
-  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  as: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.elementType,
+  ]),
 
   /**
    * Specify an optional className to be added to your Button

packages/react/src/components/ComposedModal/ComposedModal-story.js

@@ -139,15 +139,18 @@ storiesOf('ComposedModal', module)
     'Using Header / Footer Props',
     () => {
       const { size, ...rest } = props.composedModal();
+      const { hasScrollingContent, ...bodyProps } = props.modalBody();
       return (
         <ComposedModal {...rest} size={size || undefined}>
           <ModalHeader {...props.modalHeader()} />
-          <ModalBody {...props.modalBody()}>
-            <p className={`${prefix}--modal-content__text}`}>
+          <ModalBody
+            {...bodyProps}
+            aria-label={hasScrollingContent ? 'Modal content' : undefined}>
+            <p className={`${prefix}--modal-content__text`}>
               Please see ModalWrapper for more examples and demo of the
               functionality.
             </p>
-            {props.modalBody().hasScrollingContent && scrollingContent}
+            {hasScrollingContent && scrollingContent}
           </ModalBody>
           <ModalFooter {...props.modalFooter()} />
         </ComposedModal>
@@ -169,17 +172,20 @@ storiesOf('ComposedModal', module)
     'Using child nodes',
     () => {
       const { size, ...rest } = props.composedModal();
+      const { hasScrollingContent, ...bodyProps } = props.modalBody();
       return (
         <ComposedModal {...rest} size={size || undefined}>
           <ModalHeader {...props.modalHeader()}>
             <h1>Testing</h1>
           </ModalHeader>
-          <ModalBody {...props.modalBody()}>
+          <ModalBody
+            {...bodyProps}
+            aria-label={hasScrollingContent ? 'Modal content' : undefined}>
             <p>
               Please see ModalWrapper for more examples and demo of the
               functionality.
             </p>
-            {props.modalBody().hasScrollingContent && scrollingContent}
+            {hasScrollingContent && scrollingContent}
           </ModalBody>
           <ModalFooter>
             <Button kind="secondary">Cancel</Button>
@@ -228,6 +234,7 @@ storiesOf('ComposedModal', module)
         render() {
           const { open } = this.state;
           const { size, ...rest } = props.composedModal();
+          const { hasScrollingContent, ...bodyProps } = props.modalBody();
           return (
             <>
               <Button onClick={() => this.toggleModal(true)}>
@@ -239,12 +246,16 @@ storiesOf('ComposedModal', module)
                 size={size || undefined}
                 onClose={() => this.toggleModal(false)}>
                 <ModalHeader {...props.modalHeader()} />
-                <ModalBody {...props.modalBody()}>
+                <ModalBody
+                  {...bodyProps}
+                  aria-label={
+                    hasScrollingContent ? 'Modal content' : undefined
+                  }>
                   <p className={`${prefix}--modal-content__text`}>
                     Please see ModalWrapper for more examples and demo of the
                     functionality.
                   </p>
-                  {props.modalBody().hasScrollingContent && scrollingContent}
+                  {hasScrollingContent && scrollingContent}
                 </ModalBody>
                 <ModalFooter {...props.modalFooter()} />
               </ComposedModal>

packages/react/src/components/FileUploader/FileUploader.js

@@ -297,6 +297,12 @@ export default class FileUploader extends Component {
      */
     name: PropTypes.string,
 
+    /**
+     * Provide an optional `onChange` hook that is called each time the input is
+     * changed
+     */
+    onChange: PropTypes.func,
+
     /**
      * Provide an optional `onClick` hook that is called each time the button is
      * clicked
@@ -347,7 +353,9 @@ export default class FileUploader extends Component {
         Array.prototype.map.call(evt.target.files, file => file.name)
       ),
     });
-    this.props.onChange(evt);
+    if (this.props.onChange) {
+      this.props.onChange(evt);
+    }
   };
 
   handleClick = (evt, index) => {

packages/react/src/components/Pagination/Pagination-story.js

@@ -29,7 +29,7 @@ const props = () => ({
     'Previous page'
   ),
   forwardText: text(
-    'The description for the backward icon (forwardText)',
+    'The description for the forward icon (forwardText)',
     'Next page'
   ),
   pageSize: number('Number of items per page (pageSize)', 10),