Merge branch 'main' into colors-package-example

carbon-design-system · Feb 9, 2023 · 75eabd7 · 75eabd7
2 parents bb94f7c + 8edafa0
commit 75eabd7
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 87 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -226,10 +226,12 @@ const ComboBox = React.forwardRef((props, ref) => {
 
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
+    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid,
   });
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
+
   return (
     <Downshift
       {...downshiftProps}
@@ -283,6 +285,7 @@ const ComboBox = React.forwardRef((props, ref) => {
             }
           },
         });
+
         const inputProps = getInputProps({
           // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
           'aria-labelledby': null,
@@ -303,11 +306,7 @@ const ComboBox = React.forwardRef((props, ref) => {
         });
 
         const handleFocus = (evt) => {
-          if (evt.target.type === 'button') {
-            setIsFocused(false);
-          } else {
-            setIsFocused(evt.type === 'focus' ? true : false);
-          }
+          setIsFocused(evt.type === 'focus');
         };
 
         const readOnlyEventHandlers = readOnly
@@ -394,6 +393,7 @@ const ComboBox = React.forwardRef((props, ref) => {
                             highlightedIndex === index ? true : null,
                           disabled: item.disabled,
                         });
+
                         return (
                           <ListBox.MenuItem
                             key={itemProps.id}

diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -61,8 +61,6 @@ export const Default = () => (
   <FluidTextArea
     labelText="Text Area label"
     placeholder="Placeholder text"
-    cols={50}
-    rows={4}
     id="text-area-1"
   />
 );
@@ -72,26 +70,20 @@ export const DefaultWithLayers = () => (
     <FluidTextArea
       labelText="Text Area label"
       placeholder="Placeholder text"
-      cols={50}
-      rows={4}
       id="text-area-1"
     />
     <br />
     <Layer>
       <FluidTextArea
         labelText="Text Area label"
         placeholder="Placeholder text"
-        cols={50}
-        rows={4}
         id="text-area-1"
       />
       <br />
       <Layer>
         <FluidTextArea
           labelText="Text Area label"
           placeholder="Placeholder text"
-          cols={50}
-          rows={4}
           id="text-area-1"
         />
       </Layer>

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
@@ -119,6 +119,7 @@ const TextArea = React.forwardRef(function TextArea(
   useIsomorphicEffect(() => {
     if (other.cols) {
       textareaRef.current.style.width = null;
+      textareaRef.current.style.resize = 'none';
     } else {
       textareaRef.current.style.width = `100%`;
     }

diff --git a/packages/react/src/internal/__tests__/ClickListener-test.js b/packages/react/src/internal/__tests__/ClickListener-test.js
@@ -1,13 +1,14 @@
 /**
- * Copyright IBM Corp. 2016, 2018
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';
 import ClickListener from '../ClickListener';
-import { shallow, mount } from 'enzyme';
+
+import { render } from '@testing-library/react';
 
 describe('ClickListener', () => {
   let onClickOutside;
@@ -22,73 +23,51 @@ describe('ClickListener', () => {
     handleRefSpy.mockRestore();
   });
 
-  it('should render', () => {
-    const wrapper = shallow(
-      <ClickListener onClickOutside={onClickOutside}>
-        <div>
-          <div className="child">Test</div>
-          <div className="child">Test</div>
-        </div>
-      </ClickListener>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should throw a PropType validation error if passed multiple children', () => {
-    // We need to make assertions on `console.error` that come from React, so let's
-    // disable the `no-console` eslint rules on certain lines.
-    // eslint-disable-next-line no-console
-    const originalConsoleError = console.error;
-    const mockConsoleError = jest.fn();
-    // eslint-disable-next-line no-console
-    console.error = mockConsoleError;
-
-    shallow(
-      <ClickListener onClickOutside={onClickOutside}>
-        <div className="child">Test</div>
-        <div className="child">Test</div>
-      </ClickListener>
-    );
-    expect(mockConsoleError).toHaveBeenCalledWith(
-      'Warning: Failed %s type: %s%s',
-      'prop',
-      'Invalid prop `children` of type `array` supplied to `ClickListener`, expected a single ReactElement.',
-      expect.anything() // this argument is the stack trace/report of the source file line and can change
-    );
-
-    // eslint-disable-next-line no-console
-    console.error = originalConsoleError;
+  describe('renders as expected - Component API', () => {
+    it('should render', () => {
+      const { container } = render(
+        <ClickListener onClickOutside={onClickOutside}>
+          <div>
+            <div className="child">Test</div>
+            <div className="child">Test</div>
+          </div>
+        </ClickListener>
+      );
+      expect(container).toMatchSnapshot();
+    });
   });
 
-  it('should invoke onClickOutside if click is outside of the component', () => {
-    mount(
-      <ClickListener onClickOutside={onClickOutside}>
-        <div>
-          <div className="child">Test</div>
-          <div className="child">Test</div>
-        </div>
-      </ClickListener>
-    );
+  describe('behaves as expected', () => {
+    it('should invoke onClickOutside if click is outside of the component', () => {
+      render(
+        <ClickListener onClickOutside={onClickOutside}>
+          <div>
+            <div className="child">Test</div>
+            <div className="child">Test</div>
+          </div>
+        </ClickListener>
+      );
 
-    const evt = new MouseEvent('click');
-    document.dispatchEvent(evt);
+      const evt = new MouseEvent('click');
+      document.dispatchEvent(evt);
 
-    expect(onClickOutside).toHaveBeenCalled();
-  });
+      expect(onClickOutside).toHaveBeenCalled();
+    });
 
-  it('should not overwrite any children function refs', () => {
-    const mockRef = jest.fn();
-    class Child extends React.Component {
-      render() {
-        return <div />;
+    it('should not overwrite any children function refs', () => {
+      const mockRef = jest.fn();
+      class Child extends React.Component {
+        render() {
+          return <div />;
+        }
       }
-    }
-    mount(
-      <ClickListener onClickOutside={onClickOutside}>
-        <Child ref={mockRef} />
-      </ClickListener>
-    );
-    expect(handleRefSpy).toHaveBeenCalledTimes(1);
-    expect(mockRef).toHaveBeenCalledTimes(1);
+      render(
+        <ClickListener onClickOutside={onClickOutside}>
+          <Child ref={mockRef} />
+        </ClickListener>
+      );
+      expect(handleRefSpy).toHaveBeenCalledTimes(1);
+      expect(mockRef).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/packages/react/src/internal/__tests__/__snapshots__/ClickListener-test.js.snap b/packages/react/src/internal/__tests__/__snapshots__/ClickListener-test.js.snap
@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClickListener should render 1`] = `
+exports[`ClickListener renders as expected - Component API should render 1`] = `
 <div>
-  <div
-    className="child"
-  >
-    Test
-  </div>
-  <div
-    className="child"
-  >
-    Test
+  <div>
+    <div
+      class="child"
+    >
+      Test
+    </div>
+    <div
+      class="child"
+    >
+      Test
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/styles/scss/components/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss
@@ -8,6 +8,7 @@
 @use '../list-box';
 @use '../../config' as *;
 @use '../../theme' as *;
+@use '../../utilities/focus-outline' as *;
 
 /// Combo box styles
 /// @access public
@@ -31,6 +32,10 @@
     border-bottom-color: $border-subtle;
   }
 
+  .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,