(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,7 +1,7 @@
 # Next
 
 - [Copy] Add Copy component (by [@nkanderson](https://github.com/nkanderson) in [#270](https://github.com/puppetlabs/design-system/pull/270))
-- [Input] Add `iconButton` and `onClickIconButton` props for show/hide functionality (by [@eputnam](https://github.com/eputnam) in [#282](https://github.com/puppetlabs/design-system/pull/282))
+- [Input] Add `trailingButtonIcon`, `trailingButtonText`, and `trailingButtonProps` props for show/hide functionality, deprecate `trailingIcon` (by [@eputnam](https://github.com/eputnam) in [#282](https://github.com/puppetlabs/design-system/pull/282))
 - [Form] Use `forwardRef` in Form (by [@caseywilliams](https://github.com/caseywilliams) in [#283](https://github.com/puppetlabs/design-system/pull/283))
 - [Sidebar] Add `containerElement` prop to Sidebar.Item (by [@vine77](https://github.com/vine77) in [#279](https://github.com/puppetlabs/design-system/pull/279))
 

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

@@ -36,10 +36,14 @@ 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,
+  /** Additional props for the trailing Button */
+  trailingButtonProps: PropTypes.shape({}),
   /** Optional additional className */
   className: PropTypes.string,
   /** Optional inline styles */
@@ -48,8 +52,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 +65,14 @@ const defaultProps = {
   error: false,
   icon: null,
   trailingIcon: null,
-  iconButton: false,
+  trailingButtonIcon: null,
+  trailingButtonText: '',
+  trailingButtonProps: {},
   style: {},
   className: '',
   inputRef() {},
   onChange() {},
-  onClickIconButton() {},
+  onClickTrailingButton() {},
 };
 
 /**
@@ -88,26 +94,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 +119,34 @@ 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,14 @@ 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');