Merge branch 'master' into 7647-link-02-token

config/eslint-config-carbon/base.js

@@ -9,7 +9,11 @@
 
 module.exports = {
   parser: 'babel-eslint',
-  extends: ['eslint:recommended', require.resolve('./plugins/jsdoc')],
+  extends: [
+    'eslint:recommended',
+    require.resolve('./rules/best-practices'),
+    require.resolve('./plugins/jsdoc'),
+  ],
   rules: {
     // Handle cases where we are destructuring but may not be using the initial
     // variables

config/eslint-config-carbon/rules/best-practices.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  rules: {
+    // @see https://eslint.org/docs/rules/curly
+    curly: 'error',
+  },
+};

packages/cli/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@carbon/cli-reporter": "^10.4.0",
-    "@octokit/plugin-retry": "^2.2.0",
+    "@octokit/plugin-retry": "^3.0.7",
     "@octokit/plugin-throttling": "^2.6.0",
     "@octokit/rest": "^16.28.1",
     "@rollup/plugin-babel": "^5.2.2",

packages/cli/src/commands/sassdoc/tools.js

@@ -122,7 +122,9 @@ function createAnchorLink(name, heading) {
 function createMarkdownItem(item) {
   let str = '';
 
-  if (!item.context) return '';
+  if (!item.context) {
+    return '';
+  }
 
   let status = item.access === 'public' ? '✅' : '❌';
 
@@ -160,9 +162,13 @@ $${item.context.name}: ${item.context.value};
 
     if (item.parameter) {
       item.parameter.forEach((param) => {
-        if (paramStr) paramStr += `, `;
+        if (paramStr) {
+          paramStr += `, `;
+        }
         paramStr += `$${param.name}`;
-        if (param.default) paramStr += `: ${param.default}`;
+        if (param.default) {
+          paramStr += `: ${param.default}`;
+        }
       });
     }
 

packages/components/gulpfile.js

@@ -241,7 +241,9 @@ const convertToESMGulpPlugin = () =>
           }),
         ],
         onwarn: (warning, handle) => {
-          if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
+          if (warning.code !== 'EMPTY_BUNDLE') {
+            handle(warning);
+          }
         },
       })
         .then((bundle) => bundle.generate({ format: 'esm' }))

packages/components/package.json

@@ -139,7 +139,7 @@
     "jasmine-core": "^3.0.0",
     "karma": "^4.0.0",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.0",
+    "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
     "karma-html2js-preprocessor": "^1.1.0",
     "karma-ie-launcher": "^1.0.0",

packages/components/src/components/data-table/_data-table-core.scss

@@ -110,6 +110,14 @@
     background-color: $ui-03;
   }
 
+  .#{$prefix}--data-table.#{$prefix}--data-table--sort th {
+    padding: 0;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--sort .#{$prefix}--table-sort {
+    padding-left: $spacing-05;
+  }
+
   .#{$prefix}--data-table th:last-of-type {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;

packages/components/tests/pure-modules-test.js

@@ -71,7 +71,9 @@ describe('ES modules', () => {
         terser.terser(),
       ],
       onwarn: (warning, handle) => {
-        if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
+        if (warning.code !== 'EMPTY_BUNDLE') {
+          handle(warning);
+        }
       },
       treeshake: {
         annotations: false,
@@ -103,7 +105,9 @@ describe('ES modules', () => {
         terser.terser(),
       ],
       onwarn: (warning, handle) => {
-        if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
+        if (warning.code !== 'EMPTY_BUNDLE') {
+          handle(warning);
+        }
       },
       treeshake: {
         annotations: false,

packages/icon-build-helpers/src/builders/plugins/virtual.js

@@ -22,13 +22,18 @@ module.exports = function virtual(modules) {
     name: 'virtual',
 
     resolveId(id, importer) {
-      if (id in modules) return PREFIX + id;
+      if (id in modules) {
+        return PREFIX + id;
+      }
 
       if (importer) {
-        if (importer.startsWith(PREFIX))
+        if (importer.startsWith(PREFIX)) {
           importer = importer.slice(PREFIX.length);
+        }
         const resolved = path.resolve(path.dirname(importer), id);
-        if (resolvedIds.has(resolved)) return PREFIX + resolved;
+        if (resolvedIds.has(resolved)) {
+          return PREFIX + resolved;
+        }
       }
     },
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -638,6 +638,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
   },
   "ComposedModal" => Object {
@@ -1396,7 +1402,8 @@ Map {
         "persistent": Object {
           "type": "bool",
         },
-        "placeHolderText": Object {
+        "placeHolderText": [Function],
+        "placeholder": Object {
           "type": "string",
         },
         "searchContainerClass": Object {
@@ -1987,7 +1994,8 @@ Map {
       "persistent": Object {
         "type": "bool",
       },
-      "placeHolderText": Object {
+      "placeHolderText": [Function],
+      "placeholder": Object {
         "type": "string",
       },
       "searchContainerClass": Object {
@@ -4524,7 +4532,7 @@ Map {
     "defaultProps": Object {
       "closeButtonLabelText": "Clear search input",
       "onChange": [Function],
-      "placeHolderText": "",
+      "placeholder": "",
       "type": "text",
     },
     "propTypes": Object {
@@ -4566,7 +4574,8 @@ Map {
       "onKeyDown": Object {
         "type": "func",
       },
-      "placeHolderText": Object {
+      "placeHolderText": [Function],
+      "placeholder": Object {
         "type": "string",
       },
       "size": Object {

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

@@ -86,6 +86,11 @@ const props = () => ({
   direction: select('Dropdown direction (direction)', directions, 'bottom'),
   onChange: action('onChange'),
   onToggleClick: action('onClick'),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'This mode may perform worse on older machines'
+  ),
 });
 
 export const Playground = () => (

packages/react/src/components/ComboBox/ComboBox.js

@@ -10,7 +10,11 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
-import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import {
+  Checkmark16,
+  WarningAltFilled16,
+  WarningFilled16,
+} from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -199,6 +203,16 @@ export default class ComboBox extends React.Component {
      * Currently supports either the default type, or an inline variant
      */
     type: ListBoxPropTypes.ListBoxType,
+
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn: PropTypes.bool,
+
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText: PropTypes.node,
   };
 
   static defaultProps = {
@@ -331,10 +345,14 @@ export default class ComboBox extends React.Component {
       onToggleClick, // eslint-disable-line no-unused-vars
       downshiftProps,
       direction,
+      warn,
+      warnText,
       ...rest
     } = this.props;
+    const showWarning = !invalid && warn;
     const className = cx(`${prefix}--combo-box`, containerClassName, {
       [`${prefix}--list-box--up`]: direction === 'top',
+      [`${prefix}--combo-box--warning`]: showWarning,
     });
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
@@ -390,7 +408,9 @@ export default class ComboBox extends React.Component {
               invalidText={invalidText}
               isOpen={isOpen}
               light={light}
-              size={size}>
+              size={size}
+              warn={warn}
+              warnText={warnText}>
               <ListBox.Field
                 {...getToggleButtonProps({
                   disabled,
@@ -423,6 +443,11 @@ export default class ComboBox extends React.Component {
                     className={`${prefix}--list-box__invalid-icon`}
                   />
                 )}
+                {showWarning && (
+                  <WarningAltFilled16
+                    className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+                  />
+                )}
                 {inputValue && (
                   <ListBox.Selection
                     clearSelection={clearSelection}
@@ -470,7 +495,7 @@ export default class ComboBox extends React.Component {
                 </ListBox.Menu>
               )}
             </ListBox>
-            {helperText && !invalid && (
+            {helperText && !invalid && !warn && (
               <div id={comboBoxHelperId} className={helperClasses}>
                 {helperText}
               </div>

packages/react/src/components/DataTable/TableToolbarSearch.js

@@ -28,6 +28,7 @@ const TableToolbarSearch = ({
   onChange: onChangeProp,
   translateWithId: t,
   placeHolderText,
+  placeholder,
   labelText,
   expanded: expandedProp,
   defaultExpanded,
@@ -124,8 +125,10 @@ const TableToolbarSearch = ({
         value={value}
         id={typeof id !== 'undefined' ? id : uniqueId.toString()}
         labelText={labelText || t('carbon.table.toolbar.search.label')}
-        placeHolderText={
-          placeHolderText || t('carbon.table.toolbar.search.placeholder')
+        placeholder={
+          placeHolderText ||
+          placeholder ||
+          t('carbon.table.toolbar.search.placeholder')
         }
         onChange={onChange}
         {...rest}
@@ -192,10 +195,18 @@ TableToolbarSearch.propTypes = {
    */
   persistent: PropTypes.bool,
 
+  /**
+   * Deprecated in favor of `placeholder`
+   */
+  placeHolderText: deprecate(
+    PropTypes.string,
+    `\nThe prop \`placeHolderText\` for TableToolbarSearch has been deprecated in favor of \`placeholder\`. Please use \`placeholder\` instead.`
+  ),
+
   /**
    * Provide an optional placeholder text for the Search component
    */
-  placeHolderText: PropTypes.string,
+  placeholder: PropTypes.string,
 
   /**
    * Provide an optional className for the overal container of the Search

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -2298,7 +2298,7 @@ exports[`DataTable should render 1`] = `
                     id="custom-id"
                     labelText="Filter table"
                     onChange={[Function]}
-                    placeHolderText="Filter table"
+                    placeholder="Filter table"
                     size="sm"
                     tabIndex="0"
                     type="text"
@@ -3303,7 +3303,7 @@ exports[`DataTable sticky header should render 1`] = `
                     id="custom-id"
                     labelText="Filter table"
                     onChange={[Function]}
-                    placeHolderText="Filter table"
+                    placeholder="Filter table"
                     size="sm"
                     tabIndex="0"
                     type="text"

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -23,7 +23,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
       id="custom-id"
       labelText="Filter table"
       onChange={[Function]}
-      placeHolderText="Filter table"
+      placeholder="Filter table"
       size="sm"
       tabIndex="-1"
       type="text"

packages/react/src/components/DataTable/tools/filter.js

@@ -28,7 +28,9 @@ export const defaultFilterRows = ({
   rowIds.filter((rowId) =>
     headers.some(({ key }) => {
       const id = getCellId(rowId, key);
-      if (typeof cellsById[id].value === 'boolean') return false;
+      if (typeof cellsById[id].value === 'boolean') {
+        return false;
+      }
       return ('' + cellsById[id].value)
         .toLowerCase()
         .includes(inputValue.toLowerCase());

packages/react/src/components/DatePicker/DatePicker.js

@@ -55,7 +55,9 @@ const carbonFlatpickrMonthSelectPlugin = (config) => (fp) => {
       return;
     }
     fp.monthElements.forEach((elem) => {
-      if (!elem.parentNode) return;
+      if (!elem.parentNode) {
+        return;
+      }
       elem.parentNode.removeChild(elem);
     });
     fp.monthElements.splice(

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

@@ -211,7 +211,7 @@ export const Default = () => (
         {...searchProps}
         id="search-1"
         labelText="Search"
-        placeHolderText="Search"
+        placeholder="Search"
       />
     </FormGroup>