add ChipWithInput component (#11392)

ui/components/ui/chip/chip-with-input.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { COLORS } from '../../../helpers/constants/design-system';
+import Chip from '.';
+
+export function ChipWithInput({
+  className,
+  borderColor = COLORS.UI1,
+  inputValue,
+  setInputValue,
+}) {
+  return (
+    <Chip
+      className={classnames(className, 'chip--with-input')}
+      borderColor={borderColor}
+    >
+      {setInputValue && (
+        <input
+          type="text"
+          className="chip__input"
+          onChange={(e) => {
+            setInputValue(e.target.value);
+          }}
+          value={inputValue}
+        />
+      )}
+    </Chip>
+  );
+}
+
+ChipWithInput.propTypes = {
+  borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  className: PropTypes.string,
+  inputValue: PropTypes.string,
+  setInputValue: PropTypes.func,
+};

ui/components/ui/chip/chip.js

@@ -63,4 +63,6 @@ Chip.propTypes = {
   rightIcon: PropTypes.node,
   className: PropTypes.string,
   onClick: PropTypes.func,
+  inputValue: PropTypes.string,
+  setInputValue: PropTypes.func,
 };

ui/components/ui/chip/chip.scss

@@ -37,7 +37,20 @@
     }
   }
 
+  &--with-input &__input {
+    direction: ltr;
+    border: none;
+    background: transparent;
+    text-align: center;
+
+    &:focus {
+      text-align: left;
+    }
 
+    &:focus-visible {
+      outline: none;
+    }
+  }
 
   &--with-right-icon {
     padding-right: 4px;

ui/components/ui/chip/chip.stories.js

@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { select, text } from '@storybook/addon-knobs';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import ApproveIcon from '../icon/approve-icon.component';
 import Identicon from '../identicon/identicon.component';
+import { ChipWithInput } from './chip-with-input';
 import Chip from '.';
 
 export default {
@@ -80,3 +81,13 @@ export const WithBothIcons = () => (
     }
   />
 );
+export const WithInput = () => {
+  const [inputValue, setInputValue] = useState('');
+  return (
+    <ChipWithInput
+      inputValue={inputValue}
+      setInputValue={setInputValue}
+      borderColor={select('borderColor', COLORS, COLORS.UI3)}
+    />
+  );
+};