diff --git a/src/Pill/Pill.stories.tsx b/src/Pill/Pill.stories.tsx index f10ef52..e00294c 100644 --- a/src/Pill/Pill.stories.tsx +++ b/src/Pill/Pill.stories.tsx @@ -23,16 +23,40 @@ export default { type: { summary: "string[]" }, }, }, + error: { + description: "Error message to show below the input", + table: { + type: { summary: "boolean" }, + }, + }, + className: { + description: "CSS class", + table: { + type: { summary: "string" }, + }, + }, }, }; export const Default = (args: any) => ( -
- -
+ <> + +
+ +
+ + ); Default.args = { label: "Pill Component", placeholder: "Add options", initialPills: ["l_name", "l_name", "lname"], + error: false, + className: "customClass", }; diff --git a/src/Pill/index.tsx b/src/Pill/index.tsx index b632fa0..3443782 100644 --- a/src/Pill/index.tsx +++ b/src/Pill/index.tsx @@ -4,12 +4,12 @@ import { PillProps } from "./types"; import style from "./style/Pill.module.scss"; import Icon from "../Icon"; -export default function PillInput({ label, className, error, variants = [], placeholder, initialPills = [], onChange, ...props }: PillProps) { +export default function PillInput({ label, className, error, variants = [], placeholder, initialPills = [], onChange,...props }: PillProps) { const [pills, setPills] = useState(initialPills); const [inputValue, setInputValue] = useState(""); const variantStyles = classes(variants.map((c: string) => style[c])); - const containerClassName = classes([style.container, variantStyles, className]); + const inputWrapperClassName = classes([style.inputWrapper, variantStyles, className]); const handleInputChange = (event: any) => { setInputValue(event.target.value); @@ -48,7 +48,7 @@ export default function PillInput({ label, className, error, variants = [], plac ); const inputWrapper = ( -
+
{pills.map((pill, index) => (
{pill} @@ -62,14 +62,14 @@ export default function PillInput({ label, className, error, variants = [], plac onKeyDown={handleKeyDown} onBlur={onBlur} placeholder={pills.length === 0 ? placeholder : ""} - style={{ width: pills.length ? `${inputValue.length + 1}ch` : "100%" }} + style={{ width: pills.length ? `${inputValue.length + 1.5}ch` : "100%" }} {...props} />
); return ( -
+