Merge branch 'master' into feat/add-telemetry-to-pictograms

carbon-design-system · Dec 8, 2020 · 30408a5 · 30408a5
2 parents 17e5274 + 3707388
commit 30408a5
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 14 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -20579,10 +20579,6 @@ Modal styles
     &:focus {
       @include focus-outline('outline');
     }
-
-    > * {
-      @include type-style('body-long-01');
-    }
   }
 
   // Required so overflow-indicator disappears at end of content

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -262,10 +262,6 @@
     &:focus {
       @include focus-outline('outline');
     }
-
-    > * {
-      @include type-style('body-long-01');
-    }
   }
 
   // Required so overflow-indicator disappears at end of content

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -112,6 +112,13 @@
 
       svg {
         fill: $icon-02;
+
+        // Windows, Firefox HCM Fix
+        @media screen and (-ms-high-contrast: active),
+          screen and (prefers-contrast) {
+          // `ButtonText` is a CSS2 system color to help improve colors in HCM
+          fill: ButtonText;
+        }
       }
     }
 

diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { cleanup, render } from '@testing-library/react';
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import {
@@ -177,6 +178,16 @@ describe('Dropdown', () => {
       );
     });
   });
+
+  describe('Component API', () => {
+    afterEach(cleanup);
+
+    it('should accept a `ref` for the underlying button element', () => {
+      const ref = React.createRef();
+      render(<Dropdown {...mockProps} ref={ref} />);
+      expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox');
+    });
+  });
 });
 
 describe('DropdownSkeleton', () => {

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -17,6 +17,7 @@ import {
 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
+import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
@@ -116,7 +117,7 @@ const Dropdown = React.forwardRef(function Dropdown(
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-
+  const toggleButtonProps = getToggleButtonProps();
   const helper = helperText ? (
     <div className={helperClasses}>{helperText}</div>
   ) : null;
@@ -155,11 +156,11 @@ const Dropdown = React.forwardRef(function Dropdown(
         )}
         <button
           type="button"
-          ref={ref}
           className={`${prefix}--list-box__field`}
           disabled={disabled}
           aria-disabled={disabled}
-          {...getToggleButtonProps()}>
+          {...toggleButtonProps}
+          ref={mergeRefs(toggleButtonProps.ref, ref)}>
           <span className={`${prefix}--list-box__label`}>
             {selectedItem ? itemToString(selectedItem) : label}
           </span>

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -19,6 +19,7 @@ import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { useSelection } from '../../internal/Selection';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
+import mergeRefs from '../../tools/mergeRefs';
 
 const { prefix } = settings;
 const noop = () => {};
@@ -188,6 +189,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     }
   }
 
+  const toggleButtonProps = getToggleButtonProps();
+
   return (
     <div className={wrapperClasses}>
       {titleText && (
@@ -217,11 +220,11 @@ const MultiSelect = React.forwardRef(function MultiSelect(
         )}
         <button
           type="button"
-          ref={ref}
           className={`${prefix}--list-box__field`}
           disabled={disabled}
           aria-disabled={disabled}
-          {...getToggleButtonProps()}>
+          {...toggleButtonProps}
+          ref={mergeRefs(toggleButtonProps.ref, ref)}>
           {selectedItems.length > 0 && (
             <ListBox.Selection
               clearSelection={!disabled ? clearSelection : noop}

diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -7,7 +7,7 @@
 
 import { getByText, isElementVisible } from '@carbon/test-utils/dom';
 import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard';
-import { render, cleanup } from '@carbon/test-utils/react';
+import { cleanup, render } from '@testing-library/react';
 import React from 'react';
 import { act, Simulate } from 'react-dom/test-utils';
 import MultiSelect from '../';
@@ -400,5 +400,13 @@ describe('MultiSelect', () => {
       // the first option in the list to the the former third option in the list
       expect(optionsArray[0].title).toBe('Item 2');
     });
+
+    it('should accept a `ref` for the underlying button element', () => {
+      const ref = React.createRef();
+      const items = generateItems(4, generateGenericItem);
+      const label = 'test-label';
+      render(<MultiSelect id="test" label={label} items={items} ref={ref} />);
+      expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox');
+    });
   });
 });