Merge pull request #230 from nginformatica/fix-chip-style

0.24.1 - Fixing ChipField props types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.vercel.app",

src/core/ChipField.tsx

@@ -1,35 +1,57 @@
 import React, { useMemo } from 'react'
 import ChipInput, { ChipRenderer } from 'material-ui-chip-input'
 import { InputLabelProps } from '@material-ui/core'
+import styled from 'styled-components'
 
 interface IProps<T extends TChipValues> {
-  allowDuplicates?: boolean
-  values: T[]
-  variant?: 'outlined' | 'standard' | 'filled'
-  disabled?: boolean
-  fullWidth?: boolean
-  fullWidthInput?: boolean
-  InputLabelProps?: InputLabelProps
-  label?: React.ReactNode
-  placeholder?: string
-  readOnly?: boolean
-  chipRenderer?: ChipRenderer
-  onAdd: (values: T) => void;
-  onDelete: (value: T, index?: number) => void;
+    allowDuplicates?: boolean
+    values: T[]
+    variant?: 'outlined' | 'standard' | 'filled'
+    disabled?: boolean
+    fullWidth?: boolean
+    fullWidthInput?: boolean
+    InputLabelProps?: InputLabelProps
+    label?: React.ReactNode
+    placeholder?: string
+    readOnly?: boolean
+    error?: boolean
+    chipRenderer?: ChipRenderer
+    onAdd: (values: string) => void
+    onDelete: (value: string, index?: number) => void
 }
 
 export type TChipValues = {
-  value: string | number
+    value: string | number
 }
 
+const StyledChipInput = styled(ChipInput)`
+    & > div > div {
+        padding: 0px !important;
+    }
+    & > div > div > div {
+        margin: 2px;
+    }
+    & > label {
+        top: -6px !important;
+        font-size: 14px !important;
+    }
+    & > label.MuiInputLabel-shrink {
+        top: 0px !important;
+    }
+    & > div > div > input {
+        padding: 10px !important;
+        font-size: 14px !important;
+    }
+`
+
 const ChipField = <T extends TChipValues>(props: IProps<T>) => {
     const values = useMemo(() =>
         props.values.map(item => item.value),
     [props.values]
     )
 
     return (
-        <ChipInput
+        <StyledChipInput
             { ...props }
             alwaysShowPlaceholder
             value={ values }

yarn.lock

@@ -1481,10 +1481,10 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@4.11.2":
-  version "4.11.2"
-  resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+"@material-ui/icons@4.9.1":
+  version "4.9.1"
+  resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
   dependencies:
     "@babel/runtime" "^7.4.4"