From 75647edeebee07894211e5fc98f00b3a6c8fe6f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20de=20la=20Pen=CC=83a?=
 <josh.delapena@stationfive.com>
Date: Mon, 25 May 2020 16:32:25 +0800
Subject: [PATCH] add chip container prop

---
 src/ChipInput.js | 6 +++++-
 stories/index.js | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/ChipInput.js b/src/ChipInput.js
index 7cd5362..3b1abd3 100644
--- a/src/ChipInput.js
+++ b/src/ChipInput.js
@@ -482,6 +482,7 @@ class ChipInput extends React.Component {
       blurBehavior,
       children,
       chipRenderer = defaultChipRenderer,
+      chipContainerStyle,
       classes,
       className,
       clearInputValueOnChange,
@@ -605,7 +606,8 @@ class ChipInput extends React.Component {
               [classes.disabled]: disabled,
               [classes.labeled]: label != null,
               [classes.error]: error
-            })}
+            },
+            chipContainerStyle)}
         >
           {variant === 'standard' && chipComponents}
           <InputComponent
@@ -654,6 +656,8 @@ ChipInput.propTypes = {
   /** A function of the type `({ value, text, chip, isFocused, isDisabled, isReadOnly, handleClick, handleDelete, className }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the `dataSource` array will be passed to `chipRenderer` as arguments `chip`, `value` and `text`. If `dataSource` is an array of objects and `dataSourceConfig` is present, then `value` and `text` will instead correspond to the object values defined in `dataSourceConfig`. If `dataSourceConfig` is not set and `dataSource` is an array of objects, then a custom `chipRenderer` must be set. `chip` is always the raw value from `dataSource`, either an object or a string. */
   chipRenderer: PropTypes.func,
   /** Whether the input value should be cleared if the `value` prop is changed. */
+  chipContainerStyle: PropTypes.object,
+  /** Override the input and chips container style */
   clearInputValueOnChange: PropTypes.bool,
   /** Data source for auto complete. This should be an array of strings or objects. */
   dataSource: PropTypes.array,
diff --git a/stories/index.js b/stories/index.js
index 355e8d9..1365799 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -300,3 +300,11 @@ storiesOf('ChipInput', module)
   .add('with "filled" variant full width', () => (
     <ChipInput defaultValue={['foo', 'bar']} variant='filled' label='Add Tags' fullWidth fullWidthInput />
   ))
+  .add('with custom container style', () => (
+    <ChipInput
+      defaultValue={['foo', 'bar']}
+      fullWidth
+      onChange={action('onChange')}
+      chipContainerStyle={{ marginTop: 0 }}
+    />
+  ))