Merge branch '3615-definition-tooltip-dismiss-esc' of https://github.…

…com/emyarod/carbon into pr/emyarod/5147
carbon-design-system · Jan 27, 2020 · aab6ae7 · aab6ae7
2 parents 9ea4bd9 + ad2bf18
commit aab6ae7
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 88 deletions.
diff --git a/packages/components/docs/migration/migrate-to-10.x.md b/packages/components/docs/migration/migrate-to-10.x.md
@@ -74,15 +74,17 @@ initial `v10` release.
 **IMPORTANT NOTE**: Most of deprecated variables, mixins and functions will be
 _removed_ soon after the initial `v10` release.
 
-| `scss` path         | v10                                                                           |
-| ------------------- | ----------------------------------------------------------------------------- |
-| `src`               | Deprecated in v10, use `scss` instead [Migrate](../../src/migrate-to-10.x.md) |
-| `scss/globals`      | [Migrate](../../src/globals/scss/migrate-to-10.x.md)                          |
-| `scss/globals/grid` | [Migrate](../../src/globals/scss/grid/migrate-to-10.x.md)                     |
+| `scss` path          | v10                                                                           |
+| -------------------- | ----------------------------------------------------------------------------- |
+| `src`                | Deprecated in v10, use `scss` instead [Migrate](../../src/migrate-to-10.x.md) |
+| `scss/globals`       | [Migrate](../../src/globals/scss/migrate-to-10.x.md)                          |
+| `scss/globals/grid`  | [Migrate](../../src/globals/scss/grid/migrate-to-10.x.md)                     |
+| `scss/globals/layer` | Deprecated in v10 [Migrate](../../src/globals/scss/migrate-to-10.x.md)        |
 
 ### Features
 
 | Sass feature        | v10     |
 | ------------------- | ------- |
 | `font-size` mixin   | Removed |
 | `line-height` mixin | Removed |
+| `layer` mixin       | Removed |
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -20453,6 +20453,7 @@ Progress indicator styles
     margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
     color: $text-01;
+    text-align: start;
   }
 
   //CURRENT STYLING
@@ -20489,6 +20490,7 @@ Progress indicator styles
 
   //interactive button
   .#{$prefix}--progress-step-button {
+    @include button-reset();
     display: flex;
   }
 
@@ -20547,15 +20549,25 @@ Progress indicator styles
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    padding-bottom: rem(24px);
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     display: list-item;
-    min-height: 6rem;
+    min-height: 3.625rem;
     width: initial;
     min-width: initial;
+  }
 
-    svg {
-      display: inline-block;
-      margin: 0.1rem 0.5rem;
-    }
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    display: inline-block;
+    margin: 0.1rem 0.5rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    margin-right: 0.7rem;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step--current svg {
@@ -20565,9 +20577,10 @@ Progress indicator styles
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
     width: initial;
-    max-width: none;
+    max-width: rem(160px);
     vertical-align: top;
     margin: 0;
+    white-space: initial;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
@@ -22419,11 +22432,11 @@ Text input styles
     }
   }
 
-  .#{$prefix}--text-input--large {
+  .#{$prefix}--text-input--xl {
     height: rem(48px);
   }
 
-  .#{$prefix}--text-input--small {
+  .#{$prefix}--text-input--sm {
     height: rem(32px);
   }
 

diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -132,6 +132,7 @@
     margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
     color: $text-01;
+    text-align: start;
   }
 
   //CURRENT STYLING
@@ -168,6 +169,7 @@
 
   //interactive button
   .#{$prefix}--progress-step-button {
+    @include button-reset();
     display: flex;
   }
 
@@ -226,15 +228,25 @@
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    padding-bottom: rem(24px);
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     display: list-item;
-    min-height: 6rem;
+    min-height: 3.625rem;
     width: initial;
     min-width: initial;
+  }
 
-    svg {
-      display: inline-block;
-      margin: 0.1rem 0.5rem;
-    }
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    display: inline-block;
+    margin: 0.1rem 0.5rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    margin-right: 0.7rem;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step--current svg {
@@ -244,9 +256,10 @@
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
     width: initial;
-    max-width: none;
+    max-width: rem(160px);
     vertical-align: top;
     margin: 0;
+    white-space: initial;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -44,11 +44,11 @@
     }
   }
 
-  .#{$prefix}--text-input--large {
+  .#{$prefix}--text-input--xl {
     height: rem(48px);
   }
 
-  .#{$prefix}--text-input--small {
+  .#{$prefix}--text-input--sm {
     height: rem(32px);
   }
 

diff --git a/packages/components/src/globals/scss/migrate-to-10.x.md b/packages/components/src/globals/scss/migrate-to-10.x.md
@@ -140,7 +140,7 @@ No change
 
 ## `_layer.scss`
 
-No change
+- Removed, replaced with `box-shadow` mixin
 
 ### Internal
 

diff --git a/packages/react/.storybook/styles.scss b/packages/react/.storybook/styles.scss
@@ -18,7 +18,6 @@ $prefix: 'bx';
 @import '~carbon-components/scss/globals/scss/theme';
 @import '~carbon-components/scss/globals/scss/mixins';
 @import '~carbon-components/scss/globals/scss/layout';
-@import '~carbon-components/scss/globals/scss/layer';
 @import '~carbon-components/scss/globals/scss/spacing';
 @import '~carbon-components/scss/globals/scss/typography';
 @import '~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -581,10 +581,14 @@ export default class DataTable extends React.Component {
    *
    * @param {Event} event
    */
-  handleOnInputValueChange = event => {
+  handleOnInputValueChange = (event, defaultValue) => {
     if (event.target) {
       this.setState({ filterInputValue: event.target.value });
     }
+
+    if (defaultValue) {
+      this.setState({ filterInputValue: defaultValue });
+    }
   };
 
   render() {

diff --git a/packages/react/src/components/DataTable/TableExpandHeader.js b/packages/react/src/components/DataTable/TableExpandHeader.js
@@ -6,6 +6,7 @@
  */
 
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { ChevronRight16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
@@ -19,6 +20,7 @@ const TableExpandHeader = ({
   isExpanded,
   onExpand,
   expandIconDescription,
+  children,
   ...rest
 }) => {
   const className = cx(`${prefix}--table-expand`, headerClassName);
@@ -42,8 +44,36 @@ const TableExpandHeader = ({
           />
         </button>
       )}
+      {children}
     </th>
   );
 };
 
+TableExpandHeader.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ariaLabel: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether this row is expanded or not. This helps coordinate data
+   * attributes so that `TableExpandRow` and `TableExapndedRow` work together
+   */
+  isExpanded: PropTypes.bool.isRequired,
+
+  /**
+   * Hook for when a listener initiates a request to expand the given row
+   */
+  onExpand: PropTypes.func.isRequired,
+
+  /**
+   * The description of the chevron right icon, to be put in its SVG `<title>` element.
+   */
+  expandIconDescription: PropTypes.string,
+};
+
 export default TableExpandHeader;
diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -40,17 +40,32 @@ const TableToolbarSearch = ({
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const [expandedState, setExpandedState] = useState(
+    defaultExpanded || defaultValue
+  );
   const expanded = controlled ? expandedProp : expandedState;
   const searchRef = useRef(null);
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState(defaultValue || '');
   const uniqueId = useMemo(getInstanceId, []);
 
+  const [focusTarget, setFocusTarget] = useState(null);
+
   useEffect(() => {
-    if (!controlled && expandedState && searchRef.current) {
-      searchRef.current.querySelector('input').focus();
+    if (focusTarget) {
+      focusTarget.current.querySelector('input').focus();
+      setFocusTarget(null);
     }
-  }, [controlled, expandedState]);
+  }, [focusTarget]);
+
+  useEffect(
+    () => {
+      if (defaultValue) {
+        onChangeProp('', defaultValue);
+      }
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   const searchContainerClasses = cx({
     [searchContainerClass]: searchContainerClass,
@@ -71,6 +86,11 @@ const TableToolbarSearch = ({
     }
   };
 
+  const onClick = e => {
+    setFocusTarget(searchRef);
+    handleExpand(e, true);
+  };
+
   const onChange = e => {
     setValue(e.target.value);
     if (onChangeProp) {
@@ -83,15 +103,14 @@ const TableToolbarSearch = ({
       tabIndex={expandedState ? '-1' : tabIndex}
       role="search"
       ref={searchRef}
-      onClick={event => handleExpand(event, true)}
+      onClick={event => onClick(event)}
       onFocus={event => handleExpand(event, true)}
       onBlur={event => !value && handleExpand(event, false)}
       className={searchContainerClasses}>
       <Search
         size="sm"
         tabIndex={expandedState ? tabIndex : '-1'}
         className={className}
-        defaultValue={defaultValue}
         value={value}
         id={typeof id !== 'undefined' ? id : uniqueId.toString()}
         aria-hidden={!expanded}

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -13,7 +13,6 @@ import isEqual from 'lodash.isequal';
 import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
-import Checkbox from '../Checkbox';
 import Selection from '../../internal/Selection';
 import { sortingPropTypes } from './MultiSelectPropTypes';
 import { defaultItemToString } from './tools/itemToString';
@@ -357,7 +356,10 @@ export default class MultiSelect extends React.Component {
                     />
                   </ListBox.Field>
                   {isOpen && (
-                    <ListBox.Menu aria-labelledby={`${labelId}`} id={id}>
+                    <ListBox.Menu
+                      aria-multiselectable="true"
+                      aria-labelledby={`${labelId}`}
+                      id={id}>
                       {sortItems(items, {
                         selectedItems: {
                           top: selectedItems,
@@ -378,19 +380,21 @@ export default class MultiSelect extends React.Component {
                           <ListBox.MenuItem
                             key={itemProps.id}
                             isActive={isChecked}
+                            role="option"
+                            aria-selected={isChecked}
+                            tabIndex={-1}
                             isHighlighted={highlightedIndex === index}
                             title={itemText}
                             {...itemProps}>
-                            <Checkbox
-                              id={`${itemProps.id}__checkbox`}
-                              title={useTitleInItem ? itemText : null}
-                              name={itemText}
-                              checked={isChecked}
-                              disabled={disabled}
-                              readOnly={true}
-                              tabIndex="-1"
-                              labelText={itemText}
-                            />
+                            <div className={`${prefix}--checkbox-wrapper`}>
+                              <span
+                                title={useTitleInItem ? itemText : null}
+                                className={`${prefix}--checkbox-label`}
+                                data-contained-checkbox-state={isChecked}
+                                id={`${itemProps.id}__checkbox`}>
+                                {itemText}
+                              </span>
+                            </div>
                           </ListBox.MenuItem>
                         );
                       })}

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number } from '@storybook/addon-knobs';
+import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { ProgressIndicator, ProgressStep } from '../ProgressIndicator';
 import ProgressIndicatorSkeleton from '../ProgressIndicator/ProgressIndicator.Skeleton';
@@ -22,9 +22,10 @@ storiesOf('ProgressIndicator', module)
     'Default',
     () => (
       <ProgressIndicator
+        vertical={boolean('Vertical', false)}
         currentIndex={number('Current progress (currentIndex)', 1)}>
         <ProgressStep
-          label="First step"
+          label={text('Label', 'First step')}
           description="Step 1: Getting started with Carbon Design System"
           secondaryLabel="Optional label"
         />