(CDPE-3578) Add trailingButton* props and deprecate trailingIcon

This commit changes what we're doing a little bit with the button functionality in the Input component. We decided to leave the leading icon out of it all together and just add a trailing button. Now, to add a trailing button, users can either define the trailingButtonIcon prop and/or the trailingButtonText with the onClickTrailingButton prop to get the button going. I also added a trailingButtonProps prop so users can pass things like aria-label to the button. Also, trailingIcon is deprecated.

Author: eputnam

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Next
 
-- [Input] Add iconButton and onClickIconButton props for show/hide functionality
+- [Input] Add trailingButton* props for show/hide functionality, deprecate trailingIcon
 
 # 5.22.0 (2020-08-12)
 

packages/react-components/source/react/library/input/Input.js

@@ -36,10 +36,12 @@ const propTypes = {
   error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   /** Optional icon rendered before input area */
   icon: PropTypes.string,
-  /** Optional icon rendered after input area */
+  /** @deprecated Optional icon rendered after input area */
   trailingIcon: PropTypes.string,
-  /** Whether or not the icon is rendered as a button */
-  iconButton: PropTypes.bool,
+  /** Icon for rendered trailing button */
+  trailingButtonIcon: PropTypes.string,
+  /** Text for rendered trailing button. Can be used with or without trailingButtonIcon*/
+  trailingButtonText: PropTypes.string,
   /** Optional additional className */
   className: PropTypes.string,
   /** Optional inline styles */
@@ -48,8 +50,8 @@ const propTypes = {
   inputRef: PropTypes.func,
   /** Change handler. Passed in order: new value, original event. Additionally, other event handlers and and props are propagated to the inner input element for use as needed */
   onChange: PropTypes.func,
-  /** Function for button click (use iconButton to make icon clickable) */
-  onClickIconButton: PropTypes.func,
+  /** Function for trailing button click */
+  onClickTrailingButton: PropTypes.func,
 };
 
 const defaultProps = {
@@ -61,12 +63,15 @@ const defaultProps = {
   error: false,
   icon: null,
   trailingIcon: null,
+  trailingButtonIcon: null,
+  trailingButtonText: '',
+  trailingButtonProps: {},
   iconButton: false,
   style: {},
   className: '',
   inputRef() {},
   onChange() {},
-  onClickIconButton() {},
+  onClickTrailingButton() {},
 };
 
 /**
@@ -88,26 +93,23 @@ const Input = ({
   error,
   icon,
   trailingIcon,
-  iconButton,
+  trailingButtonIcon,
+  trailingButtonText,
+  trailingButtonProps,
   className,
   style,
   inputRef,
   onChange,
-  onClickIconButton,
+  onClickTrailingButton,
   ...otherProps
 }) => {
   const isMultiline = type === 'multiline';
 
   const Element = isMultiline ? 'textarea' : 'input';
 
-  const lIcon = iconButton ? (
-    <Button
-      className="rc-input-icon rc-input-button-icon leading edge"
-      icon={icon}
-      type="transparent"
-      onClick={() => onClickIconButton()}
-    />
-  ) : (
+  const showTrailingButton = !!trailingButtonIcon || !!trailingButtonText;
+
+  const lIcon = (
     <Icon
       className="rc-input-icon leading"
       width="16px"
@@ -116,26 +118,31 @@ const Input = ({
     />
   );
 
-  const tIcon = iconButton ? (
-    <Button
-      className="rc-input-icon rc-input-button-icon trailing edge"
-      icon={trailingIcon}
-      type="transparent"
-      onClick={() => onClickIconButton()}
-    />
-  ) : (
+  /** trailingIcon is deprecated */
+  const tIcon = (
     <Icon
-      className="rc-input-icon trailing"
+      className={`rc-input-icon trailing ${showTrailingButton && "with-trailing-button"}`}
       width="16px"
       height="16px"
       type={trailingIcon}
     />
   );
 
+  const trailingButton = (
+      <Button
+          className="rc-input-icon rc-input-button-icon trailing edge"
+          icon={trailingButtonIcon}
+          type="transparent"
+          onClick={() => onClickTrailingButton()}
+          {...trailingButtonProps}
+      >{trailingButtonText}</Button>
+  )
+
   return (
     <div className={classNames('rc-input-container', className)} style={style}>
       {icon && lIcon}
       {trailingIcon && tIcon}
+      {showTrailingButton && trailingButton}
       <Element
         id={name}
         name={name}

packages/react-components/source/react/library/input/Input.md

@@ -120,12 +120,12 @@ const type = state['input-ex13-show'] ? 'text' : 'password';
     name="input-ex13"
     type={type}
     value={state['input-ex13-value']}
-    trailingIcon="eye"
-    iconButton
+    trailingButtonIcon="eye"
+    trailingButtonProps={{"aria-label":"toggle show/hide text"}}
     placeholder="Use the trailing icon for showing/hiding passwords"
     style={exampleStyle}
     onChange={value => setState({ 'input-ex13-value': value })}
-    onClickIconButton={value => setState({ 'input-ex13-show': !state['input-ex13-show']})}
+    onClickTrailingButton={value => setState({ 'input-ex13-show': !state['input-ex13-show']})}
   />
 </div>;
 ```

packages/react-components/source/scss/library/components/forms/_input.scss

@@ -66,10 +66,6 @@
     left: $puppet-common-spacing-base * 2;
   }
 
-  .rc-input-icon.leading.edge {
-    left: $puppet-common-spacing-base * 0;
-  }
-
   .rc-input-icon.trailing {
     right: $puppet-common-spacing-base * 2;
   }
@@ -78,6 +74,10 @@
     right: $puppet-common-spacing-base * 0;
   }
 
+  .rc-input-icon.trailing.with-trailing-button {
+    right: $puppet-common-spacing-base * 9;
+  }
+
   .rc-input-icon.leading ~ .rc-input {
     padding-left: 31px;
   }

packages/react-components/test/input/input.js

@@ -130,9 +130,18 @@ describe('<Input />', () => {
     ).to.have.className('rc-input-simple');
   });
 
-  it('should respond to click events if trailingIcon, iconButton, and onClickButtonIcon are provided', () => {
+  it('should respond to click events if trailingButtonIcon and onClickTrailingButton are provided', () => {
     const onClick = sinon.spy();
-    const wrapper = mount(<Input {...requiredProps} trailingIcon="eye" iconButton onClickIconButton={onClick} />);
+    const wrapper = mount(<Input {...requiredProps} trailingButtonIcon="eye" onClickTrailingButton={onClick} />);
+
+    wrapper.find('button').simulate('click');
+
+    expect(onClick.called).to.equal(true);
+  });
+
+  it('should respond to click events if trailingButtonText and onClickTrailingButton are provided', () => {
+    const onClick = sinon.spy();
+    const wrapper = mount(<Input {...requiredProps} trailingButtonText="Click me" onClickTrailingButton={onClick} />);
 
     wrapper.find('button').simulate('click');