Merge branch 'master' into 6591-modal-wrapper-docs

carbon-design-system · Oct 12, 2020 · b130b2f · b130b2f
2 parents 9183a4d + be4af97
commit b130b2f
Show file tree

Hide file tree

Showing 17 changed files with 153 additions and 15 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -0,0 +1,19 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "contributorsPerLine": 7,
+  "contributorsSortAlphabetically": false,
+  "badgeTemplate": "[![All Contributors](https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg?style=flat-square)](#contributors)",
+  "contributorTemplate": "<a href=\"<%= contributor.profile %>\"><img src=\"<%= contributor.avatar_url %>\" width=\"<%= options.imageSize %>px;\" alt=\"\"/><br /><sub><b><%= contributor.name %></b></sub></a>",
+  "types": {
+    "custom": {
+      "symbol": "🔭",
+      "description": "A custom contribution type.",
+      "link": "[<%= symbol %>](<%= url %> \"<%= description %>\"),"
+    }
+  },
+  "skipCi": "true",
+  "contributors": []
+}
diff --git a/README.md b/README.md
@@ -76,6 +76,16 @@ or help us improve the project documentation. If you're interested, definitely
 check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
 [Developer Guide](./docs/developer-handbook.md)! 👀
 
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the
+[all-contributors](https://github.com/kentcdodds/all-contributors)
+specification. Contributions of any kind welcome!
+
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -7453,6 +7453,7 @@ $support-03: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [listbox [mixin]](#listbox-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [toast-notifications [mixin]](#toast-notifications-mixin)
   - [number-input [mixin]](#number-input-mixin)
@@ -18375,7 +18376,8 @@ Form styles
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--time-picker[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
+  .#{$prefix}--list-box[data-invalid],
+  .#{$prefix}--list-box--warning {
     ~ .#{$prefix}--form-requirement {
       display: block;
       max-height: rem(200px);
@@ -18903,7 +18905,19 @@ List box styles
     fill: $support-01;
   }
 
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box__invalid-icon--warning {
+    fill: $support-03;
+  }
+
+  .#{$prefix}--list-box__invalid-icon--warning
+    path[data-icon-path='inner-path'] {
+    opacity: 1;
+    fill: $carbon__black-100;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(8);
     border-bottom: 0;
   }
@@ -19552,6 +19566,7 @@ List box styles
   - [field-02 [variable]](#field-02-variable)
   - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [support-01 [variable]](#support-01-variable)
+  - [support-03 [variable]](#support-03-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.21.0",
+  "version": "10.22.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",

diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -86,7 +86,8 @@
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--time-picker[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
+  .#{$prefix}--list-box[data-invalid],
+  .#{$prefix}--list-box--warning {
     ~ .#{$prefix}--form-requirement {
       display: block;
       max-height: rem(200px);

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -121,7 +121,19 @@ $list-box-menu-width: rem(300px);
     fill: $support-01;
   }
 
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box__invalid-icon--warning {
+    fill: $support-03;
+  }
+
+  .#{$prefix}--list-box__invalid-icon--warning
+    path[data-icon-path='inner-path'] {
+    opacity: 1;
+    fill: $carbon__black-100;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(8);
     border-bottom: 0;
   }

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react-hooks",
   "private": true,
-  "version": "10.15.0",
+  "version": "10.16.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,7 @@
     "autoprefixer": "^9.7.4",
     "babel-loader": "^8.1.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.21.0",
+    "carbon-components": "^10.22.0-rc.0",
     "css-loader": "^3.4.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2320,6 +2320,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "string",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/examples/react-router/package.json b/packages/react/examples/react-router/package.json
@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "carbon-components": "^9.68.10",
-    "carbon-components-react": "^6.81.4",
+    "carbon-components": "latest",
+    "carbon-components-react": "latest",
+    "carbon-icons": "latest",
     "node-sass": "^4.11.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.21.0",
+  "version": "7.22.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -84,7 +84,7 @@
     "babel-plugin-react-docgen": "^4.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.21.0",
+    "carbon-components": "^10.22.0-rc.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

diff --git a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap
@@ -24,6 +24,7 @@ exports[`Breadcrumb should render 1`] = `
             <a
               className="bx--link"
               href="www.carbondesignsystem.com"
+              rel={null}
             >
               Breadcrumb 1
             </a>
@@ -55,6 +56,7 @@ exports[`Breadcrumb should support rendering the current page 1`] = `
             <a
               className="bx--link"
               href="#a"
+              rel={null}
             >
               A
             </a>
@@ -73,6 +75,7 @@ exports[`Breadcrumb should support rendering the current page 1`] = `
             <a
               className="bx--link"
               href="#b"
+              rel={null}
             >
               B
             </a>
@@ -92,6 +95,7 @@ exports[`Breadcrumb should support rendering the current page 1`] = `
             <a
               className="bx--link"
               href="#c"
+              rel={null}
             >
               C
             </a>
@@ -123,6 +127,7 @@ exports[`Breadcrumb should support rendering the current page 2`] = `
             <a
               className="bx--link"
               href="#a"
+              rel={null}
             >
               A
             </a>
@@ -141,6 +146,7 @@ exports[`Breadcrumb should support rendering the current page 2`] = `
             <a
               className="bx--link"
               href="#b"
+              rel={null}
             >
               B
             </a>
@@ -162,6 +168,7 @@ exports[`Breadcrumb should support rendering the current page 2`] = `
               aria-current="page"
               className="bx--link"
               href="#c"
+              rel={null}
             >
               C
             </a>
@@ -195,6 +202,7 @@ exports[`Breadcrumb should support rendering without a trailing slash 1`] = `
             <a
               className="bx--link"
               href="www.carbondesignsystem.com"
+              rel={null}
             >
               Breadcrumb 1
             </a>

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -192,7 +192,9 @@ export const Playground = () => {
   );
 };
 
-export const IconButton = () => <Button {...props.iconOnly()} hasIconOnly />;
+export const IconButton = () => (
+  <Button renderIcon={Add16} iconDescription="Icon Description" hasIconOnly />
+);
 
 IconButton.story = {
   name: 'Icon Button',

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -66,6 +66,11 @@ const props = () => ({
     'Form validation UI content (invalidText)',
     'A valid value is required'
   ),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'This mode may perform worse on older machines'
+  ),
 });
 
 export default {

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -10,7 +10,11 @@ import { useSelect } from 'downshift';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import {
+  Checkmark16,
+  WarningAltFilled16,
+  WarningFilled16,
+} from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import deprecate from '../../prop-types/deprecate';
@@ -45,6 +49,8 @@ const Dropdown = React.forwardRef(function Dropdown(
     light,
     invalid,
     invalidText,
+    warn,
+    warnText,
     initialSelectedItem,
     selectedItem: controlledSelectedItem,
     downshiftProps,
@@ -76,9 +82,11 @@ const Dropdown = React.forwardRef(function Dropdown(
     selectedItem,
   } = useSelect(selectProps);
   const inline = type === 'inline';
+  const showWarning = !invalid && warn;
 
   const className = cx(`${prefix}--dropdown`, containerClassName, {
     [`${prefix}--dropdown--invalid`]: invalid,
+    [`${prefix}--dropdown--warning`]: showWarning,
     [`${prefix}--dropdown--open`]: isOpen,
     [`${prefix}--dropdown--inline`]: inline,
     [`${prefix}--dropdown--disabled`]: disabled,
@@ -132,12 +140,19 @@ const Dropdown = React.forwardRef(function Dropdown(
         className={className}
         invalid={invalid}
         invalidText={invalidText}
+        warn={warn}
+        warnText={warnText}
         light={light}
         isOpen={isOpen}
         id={id}>
         {invalid && (
           <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
         )}
+        {showWarning && (
+          <WarningAltFilled16
+            className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+          />
+        )}
         <button
           type="button"
           ref={ref}
@@ -178,7 +193,7 @@ const Dropdown = React.forwardRef(function Dropdown(
             })}
         </ListBox.Menu>
       </ListBox>
-      {!inline && !invalid && helper}
+      {!inline && !invalid && !warn && helper}
     </div>
   );
 });
@@ -310,6 +325,16 @@ Dropdown.propTypes = {
    * The dropdown type, `default` or `inline`
    */
   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.string,
 };
 
 Dropdown.defaultProps = {

diff --git a/packages/react/src/components/Link/Link-test.js b/packages/react/src/components/Link/Link-test.js
@@ -19,27 +19,38 @@ describe('Link', () => {
         A simple link
       </Link>
     );
+
     it('should use the appropriate link class', () => {
       expect(link.name()).toEqual('a');
       expect(link.hasClass(`${prefix}--link`)).toEqual(true);
     });
+
     it('should inherit the href property', () => {
       expect(link.props().href).toEqual('www.google.com');
     });
+
     it('should include child content', () => {
       expect(link.text()).toEqual('A simple link');
     });
+
     it('should all for custom classes to be applied', () => {
       expect(link.hasClass('some-class')).toEqual(true);
     });
+
     it('should support disabled link', () => {
       link.setProps({ disabled: true });
       expect(link.name()).toEqual('p');
       expect(link.hasClass(`${prefix}--link--disabled`)).toEqual(true);
     });
+
     it('should support inline link', () => {
       link.setProps({ inline: true });
       expect(link.hasClass(`${prefix}--link--inline`)).toEqual(true);
     });
+
+    it('should add rel="noopener" automatically if target="_blank"', () => {
+      link.setProps({ target: '_blank' });
+      expect(link.props().rel).toEqual('noopener');
+    });
   });
 });