Merge branch 'master' into new-search-height

carbon-design-system · Oct 9, 2019 · 18bc529 · 18bc529
2 parents af55be7 + 0c05b81
commit 18bc529
Show file tree

Hide file tree

Showing 32 changed files with 237 additions and 56 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -96,12 +96,12 @@
     }
 
     &:focus {
-      color: $text-04;
+      color: $inverse-01;
       background-color: $interactive-03;
     }
 
     &:active {
-      background-color: $active-primary;
+      color: $inverse-01;
     }
 
     &:disabled,
@@ -112,6 +112,7 @@
     &.#{$prefix}--btn--disabled:focus {
       background: transparent;
       color: $disabled;
+      outline: none;
 
       & > .#{$prefix}--btn__icon path {
         fill: $disabled;
@@ -161,6 +162,7 @@
       color: $disabled;
       background: transparent;
       border-color: transparent;
+      outline: none;
 
       .#{$prefix}--btn__icon path {
         fill: $disabled;

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -18,17 +18,18 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-bottom: rem(8px);
+    margin-bottom: $carbon--spacing-02;
   }
 
   // Spacing above collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
     margin-top: rem(3px);
   }
 
-  // Remove spacing above collection of checkboxes if label is present
+  // Shift collection of checkboxes up if label is present
+  // to account for the 2px top margin for the first checkbox
   .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-top: 0;
+    margin-top: -#{$carbon--spacing-01};
   }
 
   // Spacing below collection of checkboxes

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -17,11 +17,12 @@
   //TOOLBAR
   //-------------------------------------------------
   .#{$prefix}--table-toolbar {
-    display: flex;
-    width: 100%;
     background: $ui-01;
+    display: flex;
     height: $layout-04;
+    overflow: hidden;
     position: relative; //need for batch actions
+    width: 100%;
   }
 
   .#{$prefix}--toolbar-content {

diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
@@ -40,6 +40,7 @@
   .#{$prefix}--date-picker-input__wrapper {
     display: flex;
     align-items: center;
+    position: relative;
 
     ~ .#{$prefix}--form-requirement {
       max-height: rem(200px);
@@ -130,6 +131,9 @@
     fill: $icon-01;
     cursor: pointer;
     z-index: 1;
+    // vertically center icon within parent container on IE11
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {

diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
@@ -26,6 +26,11 @@
     margin-top: rem(6px);
   }
 
+  // Remove spacing above collection of radio buttons if label is present
+  .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group {
+    margin-top: 0;
+  }
+
   // vertical radio button
   .#{$prefix}--radio-button-group--vertical {
     flex-direction: column;
@@ -37,6 +42,7 @@
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
+      line-height: carbon--mini-units(2.5);
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {

diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
@@ -101,13 +101,13 @@
     &:focus {
       // 20px / 14px = 1.4285714286
       transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01, inset 0 0 0 3px $ui-01;
-      background-color: $interactive-01;
+      box-shadow: inset 0 0 0 2px $interactive-04, inset 0 0 0 3px $ui-01;
+      background-color: $interactive-04;
     }
 
     &:active {
       transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01;
+      box-shadow: inset 0 0 0 2px $interactive-04;
     }
   }
 
@@ -130,7 +130,7 @@
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive-01;
+    background-color: $interactive-04;
   }
 
   // Disabled state

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -315,6 +315,9 @@
     margin-left: carbon--rem(56px);
     @include type-style('body-short-01');
     user-select: none;
+    // top offset needed to vertically center absolutely positioned flex child in IE11
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   //----------------------------------------------
@@ -435,6 +438,19 @@
     .#{$prefix}--toggle__check {
     fill: $disabled-02;
   }
+
+  //----------------------------------------------
+  // Skeleton
+  // ---------------------------------------------
+
+  .#{$prefix}--toggle__label.#{$prefix}--skeleton {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .#{$prefix}--toggle__label-text {
+      margin-bottom: $carbon--spacing-03;
+    }
+  }
 }
 
 @include exports('toggle') {

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js
@@ -14,9 +14,7 @@ export default class BreadcrumbSkeleton extends React.Component {
   render() {
     const item = (
       <div className={`${prefix}--breadcrumb-item`}>
-        <a href="/#" className={`${prefix}--link`}>
-          &nbsp;
-        </a>
+        <span className={`${prefix}--link`}>&nbsp;</span>
       </div>
     );
     return (

diff --git a/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap b/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap
@@ -8,32 +8,29 @@ exports[`BreadcrumbSkeleton should render 1`] = `
     <div
       className="bx--breadcrumb-item"
     >
-      <a
+      <span
         className="bx--link"
-        href="/#"
       >
          
-      </a>
+      </span>
     </div>
     <div
       className="bx--breadcrumb-item"
     >
-      <a
+      <span
         className="bx--link"
-        href="/#"
       >
          
-      </a>
+      </span>
     </div>
     <div
       className="bx--breadcrumb-item"
     >
-      <a
+      <span
         className="bx--link"
-        href="/#"
       >
          
-      </a>
+      </span>
     </div>
   </div>
 </BreadcrumbSkeleton>

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -54,7 +54,7 @@ const itemToElement = item => {
   return (
     <div>
       <span>{itemAsArray[0]}</span>
-      <span style={{ color: 'red' }}> {itemAsArray[1]}</span>
+      <span style={{ color: 'blue' }}> {itemAsArray[1]}</span>
     </div>
   );
 };

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -320,8 +320,8 @@ export default class ComboBox extends React.Component {
                 aria-labelledby={comboBoxA11yId}
                 tabIndex="0"
                 aria-disabled={disabled}
-                aria-controls={`${id}__menu`}
-                aria-owns={`${id}__menu`}
+                aria-controls={isOpen ? `${id}__menu` : null}
+                aria-owns={isOpen ? `${id}__menu` : null}
                 aria-autocomplete="list"
                 ref={this.textInput}
                 {...rest}
@@ -347,6 +347,7 @@ export default class ComboBox extends React.Component {
                 <ListBox.Selection
                   clearSelection={clearSelection}
                   translateWithId={translateWithId}
+                  disabled={disabled}
                 />
               )}
               <ListBox.MenuIcon

diff --git a/packages/react/src/components/DataTable/TableSelectRow.js b/packages/react/src/components/DataTable/TableSelectRow.js
@@ -7,9 +7,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { settings } from 'carbon-components';
 import InlineCheckbox from '../InlineCheckbox';
 import RadioButton from '../RadioButton';
 
+const { prefix } = settings;
 const TableSelectRow = ({
   ariaLabel,
   checked,
@@ -28,8 +31,11 @@ const TableSelectRow = ({
     disabled,
   };
   const InlineInputComponent = radio ? RadioButton : InlineCheckbox;
+  const tableSelectRowClasses = classNames(`${prefix}--table-column-checkbox`, {
+    [className]: className,
+  });
   return (
-    <td className={className}>
+    <td className={tableSelectRowClasses}>
       <InlineInputComponent
         {...selectionInputProps}
         {...(radio && {

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -90,7 +90,7 @@ const TableToolbarSearch = ({
         small
         className={className}
         value={value}
-        id={typeof id !== 'undefined' ? id : uniqueId}
+        id={typeof id !== 'undefined' ? id : uniqueId.toString()}
         aria-hidden={!expanded}
         labelText={labelText || t('carbon.table.toolbar.search.label')}
         placeHolderText={

diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarSearch-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarSearch-test.js
@@ -20,4 +20,10 @@ describe('DataTable.TableToolbarSearch', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+  it('should set an appropriate unique id', () => {
+    const wrapper = mount(
+      <TableToolbarSearch className="custom-class" onChange={jest.fn()} />
+    );
+    expect(typeof wrapper.find('Search').prop('id')).toBe('string');
+  });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -528,7 +528,9 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     onSelect={[Function]}
                     radio={true}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(RadioButton)
                         checked={false}
                         disabled={false}
@@ -613,7 +615,9 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     onSelect={[Function]}
                     radio={true}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(RadioButton)
                         checked={false}
                         disabled={false}
@@ -698,7 +702,9 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     onSelect={[Function]}
                     radio={true}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(RadioButton)
                         checked={false}
                         disabled={false}
@@ -1417,7 +1423,9 @@ exports[`DataTable selection should render 1`] = `
                     onSelect={[Function]}
                     radio={null}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(InlineCheckbox)
                         ariaLabel="Select row"
                         checked={false}
@@ -1484,7 +1492,9 @@ exports[`DataTable selection should render 1`] = `
                     onSelect={[Function]}
                     radio={null}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(InlineCheckbox)
                         ariaLabel="Select row"
                         checked={false}
@@ -1551,7 +1561,9 @@ exports[`DataTable selection should render 1`] = `
                     onSelect={[Function]}
                     radio={null}
                   >
-                    <td>
+                    <td
+                      className="bx--table-column-checkbox"
+                    >
                       <ForwardRef(InlineCheckbox)
                         ariaLabel="Select row"
                         checked={false}

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
@@ -20,7 +20,7 @@ exports[`DataTable.TableSelectRow should render 1`] = `
               onSelect={[MockFunction]}
             >
               <td
-                className="custom-class-name"
+                className="bx--table-column-checkbox custom-class-name"
               >
                 <ForwardRef(InlineCheckbox)
                   ariaLabel="Aria label"

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -175,9 +175,8 @@ export class FileUploaderButton extends Component {
             }
           }}
           htmlFor={this.uid}
-          role={role}
           {...other}>
-          {this.state.labelText}
+          <span role={role}>{this.state.labelText}</span>
         </label>
         <input
           className={`${prefix}--visually-hidden`}

diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js
@@ -98,15 +98,14 @@ export default function FileUploaderDropContainer(props) {
       <label
         className={labelClasses}
         htmlFor={id || uid.current}
-        role={role || 'button'}
         tabIndex={tabIndex || 0}
         onKeyDown={evt => {
           if (matches(evt, [keys.Enter, keys.Space])) {
             inputRef.current.click();
           }
         }}
         {...other}>
-        <div className={dropareaClasses}>
+        <div className={dropareaClasses} role={role || 'button'}>
           {labelText}
           <input
             type="file"