Merge fcd787e into 462100a

packages/matchbox/src/components/Connect/Connect.js

@@ -1,46 +1,45 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Connect.module.scss';
-import classnames from 'classnames';
-
-class Connect extends Component {
-  static displayName = 'Connect';
-
-  static propTypes = {
-    left: PropTypes.node,
-    right: PropTypes.node,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {
-      left,
-      right,
-      children
-    } = this.props;
-
-    const leftMarkup = left
-      ? <div className={styles.Left}>{left}</div>
-      : null;
-
-    const rightMarkup = right
-      ? <div className={styles.Right}>{right}</div>
-      : null;
-
-    const primaryClasses = classnames(
-      styles.Primary,
-      left && styles.hasLeft,
-      right && styles.hasRight,
-    );
-
-    return (
-      <div className={styles.Connect}>
-        {leftMarkup}
-        <div className={primaryClasses}>{children}</div>
-        {rightMarkup}
-      </div>
-    );
+import { Box } from '../Box';
+import { tokens } from '@sparkpost/design-tokens';
+import styled from 'styled-components';
+
+const FocusHandler = styled(Box)`
+  &:focus-within {
+    position: relative;
+    z-index: ${tokens.zIndex_default};
   }
+`;
+
+function Connect(props) {
+  const { left, right, children } = props;
+
+  const leftMarkup = left ? (
+    <FocusHandler flex="0 0 auto" mr="-1px">
+      {left}
+    </FocusHandler>
+  ) : null;
+
+  const rightMarkup = right ? (
+    <FocusHandler flex="0 0 auto" ml="-1px">
+      {right}
+    </FocusHandler>
+  ) : null;
+
+  return (
+    <Box display="flex">
+      {leftMarkup}
+      <FocusHandler flex="1">{children}</FocusHandler>
+      {rightMarkup}
+    </Box>
+  );
 }
 
+Connect.displayName = 'Connect';
+Connect.propTypes = {
+  left: PropTypes.node,
+  right: PropTypes.node,
+  children: PropTypes.node,
+};
+
 export default Connect;

packages/matchbox/src/components/Connect/tests/Connect.test.js

@@ -1,32 +1,57 @@
 import React from 'react';
 import Connect from '../Connect';
-import { shallow } from 'enzyme';
+import 'jest-styled-components';
 
 describe('Connect', () => {
-  let wrapper;
-  let props;
-  beforeEach(() => {
-    props = {
-      left: <button>Button on Left</button>,
-      right: <button>Button on Right</button>
-
-    };
-
-    wrapper = shallow(<Connect {...props}><input type="text" /></Connect>);
-  });
+  const subject = props =>
+    global.mountStyled(
+      <Connect {...props}>
+        <input type="text" />
+      </Connect>,
+    );
 
   it('renders correctly with connected components on left & right', () => {
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = subject({
+      left: <button>Button on Left</button>,
+      right: <button>Button on Right</button>,
+    });
+    expect(wrapper).toHaveStyleRule('display', 'flex');
+    expect(wrapper.find('div').at(1)).toHaveStyleRule('flex', '0 0 auto');
+    expect(wrapper.find('div').at(2)).toHaveStyleRule('flex', '1');
+    expect(
+      wrapper
+        .find('div')
+        .at(2)
+        .find('input'),
+    ).toExist();
+    expect(wrapper.find('div').at(3)).toHaveStyleRule('flex', '0 0 auto');
   });
 
   it('renders correctly with connected components on left', () => {
-    wrapper.setProps({ right: null });
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = subject({
+      left: <button>Button on Left</button>,
+    });
+    expect(wrapper).toHaveStyleRule('display', 'flex');
+    expect(
+      wrapper
+        .find('div')
+        .at(1)
+        .find('button'),
+    ).toExist();
+    expect(wrapper.find('button')).toHaveLength(1);
   });
 
   it('renders correctly with connected components on right', () => {
-    wrapper.setProps({ left: null });
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = subject({
+      right: <button>Button on Right</button>,
+    });
+    expect(wrapper).toHaveStyleRule('display', 'flex');
+    expect(
+      wrapper
+        .find('div')
+        .at(2)
+        .find('button'),
+    ).toExist();
+    expect(wrapper.find('button')).toHaveLength(1);
   });
-
 });

packages/matchbox/src/components/Select/Select.js

@@ -11,6 +11,7 @@ import { HelpText } from '../HelpText';
 import { margin } from 'styled-system';
 import { createPropTypes } from '@styled-system/prop-types';
 import { pick, omit } from '@styled-system/props';
+import useInputDescribedBy from '../../hooks/useInputDescribedBy';
 
 const Option = ({ option }) => {
   if (typeof option === 'object') {
@@ -72,8 +73,8 @@ const StyledChevron = styled(KeyboardArrowDown)`
   ${chevron}
 `;
 
-const StyledWrapper = styled(Box)`
-  {margin}
+const StyledWrapper = styled('div')`
+  ${margin}
 `;
 
 function Select(props) {
@@ -93,19 +94,11 @@ function Select(props) {
   } = props;
   const systemProps = pick(rest);
   const componentProps = omit(rest);
-
-  // Generates an aria-describedby attribute for
-  // HelpText and Error if props.id is present
-  const describedBy = React.useMemo(() => {
-    let ids = '';
-    if (id && error) {
-      ids = `${id}-error`;
-    }
-    if (id && helpText) {
-      ids = `${id}-helptext ${ids}`;
-    }
-    return ids.length ? { 'aria-describedby': ids.trim() } : {};
-  }, [error, helpText, id]);
+  const { describedBy, errorId, helpTextId } = useInputDescribedBy({
+    id,
+    hasHelpText: !!helpText,
+    hasError: !!error,
+  });
 
   const requiredIndicator = required ? (
     <Box as="span" pr="200" aria-hidden="true">
@@ -121,20 +114,12 @@ function Select(props) {
     >
       {requiredIndicator}
       {error && errorInLabel && (
-        <Box
-          as={Error}
-          id={id ? `${id}-error` : null}
-          wrapper="span"
-          error={error}
-          fontWeight="400"
-        />
+        <Box as={Error} id={errorId} wrapper="span" error={error} fontWeight="400" />
       )}
     </Label>
   );
 
-  const helpMarkup = helpText ? (
-    <HelpText id={id ? `${id}-helptext` : null}>{helpText}</HelpText>
-  ) : null;
+  const helpMarkup = helpText ? <HelpText id={helpTextId}>{helpText}</HelpText> : null;
 
   return (
     <StyledWrapper {...systemProps}>
@@ -156,7 +141,7 @@ function Select(props) {
         </StyledSelect>
         <StyledChevron size={24} disabled={disabled} />
       </Box>
-      {error && !errorInLabel && <Error id={id ? `${id}-error` : null} error={error} />}
+      {error && !errorInLabel && <Error id={errorId} error={error} />}
       {helpMarkup}
     </StyledWrapper>
   );

packages/matchbox/src/components/Select/styles.js

@@ -9,6 +9,7 @@ export const select = props => `
 
 export const chevron = props => `
   position: absolute;
+  z-index: ${tokens.zIndex_default};
   right: ${tokens.spacing_300};
   height: 100%;
   fill: ${tokens.color_blue_700};