Merge pull request #70 from MacPaw/feat/prefilled-and-disabled-tag-input

feat: add disabled state for tag input component
MacPaw · Aug 1, 2022 · 87e1736 · 87e1736
2 parents bdace38 + 69d6247
commit 87e1736
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

diff --git a/pages/tag-input.mdx b/pages/tag-input.mdx
@@ -7,7 +7,7 @@ export const BasicTagInput = () => {
     const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
     return (
       <div style={{ width: 300 }}>
-          <TagInput 
+          <TagInput
             id="BasicTagInput"
             tags={values}
             label="Tags"
@@ -23,7 +23,7 @@ export const BasicTagInput = () => {
 ```
 const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 
-<TagInput 
+<TagInput
     id="BasicTagInput"
     tags={values}
     label="Tags"
@@ -38,7 +38,7 @@ export const MaxHeightTagInput = () => {
     const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
     return (
       <div style={{ width: 300 }}>
-          <TagInput 
+          <TagInput
             id="MaxHeightTagInput"
             tags={values}
             label="Tags"
@@ -55,7 +55,7 @@ export const MaxHeightTagInput = () => {
 ```
 const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 
-<TagInput 
+<TagInput
     id="MaxHeightTagInput"
     tags={values}
     label="Tags"
@@ -77,7 +77,7 @@ export const KeyCodeTagInput = () => {
     const removeKeyCodes = ['Delete', 'Backspace', 'Escape'];
     return (
       <div style={{ width: 300 }}>
-          <TagInput 
+          <TagInput
             id="KeyCodeTagInput"
             tags={values}
             label="Tags"
@@ -97,7 +97,7 @@ const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 const addKeyCodes = ['Enter', 'Space', 'Comma'];
 const removeKeyCodes = ['Delete', 'Backspace', 'Escape'];
 
-<TagInput 
+<TagInput
     id="KeyCodeTagInput"
     tags={values}
     label="Tags"
@@ -115,7 +115,7 @@ export const ReadOnlyTagInput = () => {
     const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
     return (
       <div style={{ width: 300 }}>
-          <TagInput 
+          <TagInput
             id="ReadOnlyTagInput"
             tags={values}
             label="Read only tags"
@@ -130,21 +130,53 @@ export const ReadOnlyTagInput = () => {
 ```
 const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 
-<TagInput 
+<TagInput
     id="ReadOnlyTagInput"
     tags={values}
     label="Read only tags"
     isReadOnly
 />
 ```
 
+## Disabled tag input
+
+export const DisabledTagInput = () => {
+    const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
+    return (
+        <div style={{ width: 300 }}>
+            <TagInput
+                id="ReadOnlyTagInput"
+                tags={values}
+                label="Disabled input field"
+                disabled
+                isReadOnly
+            />
+        </div>
+    )
+}
+
+<DisabledTagInput />
+
+```
+const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
+
+<TagInput
+  id="ReadOnlyTagInput"
+  tags={values}
+  label="Disabled input field"
+  disabled
+  isReadOnly
+/>
+
+```
+
 ## With unique values
 
 export const UniqueTagInput = () => {
     const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
     return (
       <div style={{ width: 300 }}>
-          <TagInput 
+          <TagInput
             id="UniqueTagInput"
             tags={values}
             label="Unique tags"
@@ -161,7 +193,7 @@ export const UniqueTagInput = () => {
 ```
 const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 
-<TagInput 
+<TagInput
     id="UniqueTagInput"
     tags={values}
     label="Unique tags"
@@ -177,7 +209,7 @@ export const FormattedTagInput = () => {
     const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
     return (
       <div style={{ width: 300 }}>
-        <TagInput 
+        <TagInput
           id="FormattedTagInput"
           tags={values}
           label="Hash tags"
@@ -194,7 +226,7 @@ export const FormattedTagInput = () => {
 ```
 const [values, setValues] = useState([{ id:1, value:'Tag 1' }]);
 
-<TagInput 
+<TagInput
     id="FormattedTagInput"
     tags={values}
     label="Hash tags"
@@ -226,10 +258,10 @@ export const TagInputWithValidation = () => {
     setValues(nextValues);
     const hasWrongValues = nextValues.some(({color})=>color === 'warning');
     if(error && !hasWrongValues) setError('');
-  } 
+  }
   return (
     <div style={{ width: 300 }}>
-      <TagInput 
+      <TagInput
           id="TagInputWithValidation"
           tags={values}
           error={error}
@@ -265,13 +297,13 @@ const onChangeInput = () => setError('');
 
 const handleChange = (nextValues) => {
   setValues(nextValues);
-  
+
   const hasWrongValues = nextValues.some(({color})=>color === 'warning');
-  
+
   if(error && !hasWrongValues) setError('');
-} 
+}
 
-<TagInput 
+<TagInput
     id="TagInputWithValidation"
     tags={values}
     error={error}

diff --git a/src/Input/Input.scss b/src/Input/Input.scss
@@ -68,7 +68,7 @@
     font-size: 16px;
     font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
     line-height: 1.2;
-    border: 2px solid rgba(111, 114, 121, .16);
+    border: 2px solid var(--color-black-04);
     background: var(--color-white);
     transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
 

diff --git a/src/TagInput/TagInput.scss b/src/TagInput/TagInput.scss
@@ -5,7 +5,7 @@
 
   &-label {
     display: block;
-    
+
     &:hover + .tagList {
       border-color: var(--color-black)
     }
@@ -21,7 +21,30 @@
     .tag-input-label,
     .tagList {
       cursor: inherit;
-      pointer-events: none;
+    }
+    .tagList:hover {
+      border-color: var(--color-black-04);
+    }
+    .tag-input-label {
+      &:hover + .tagList {
+        border-color: var(--color-black-04);
+      }
+    }
+  }
+
+  &.-disabled {
+    cursor: not-allowed;
+    .tagList {
+      border: 2px solid transparent;
+      background: var(--color-black-08);
+    }
+    .tagList:hover {
+      border-color: transparent;
+    }
+    .tag-input-label {
+      &:hover + .tagList {
+        border-color: transparent;
+      }
     }
   }
 
@@ -32,7 +55,7 @@
     padding: 8px 10px;
     cursor: text;
     transition: border-color 200ms cubic-bezier(.25, .1, .25, 1);
-    border: 2px solid rgba(111, 114, 121, .16);
+    border: 2px solid var(--color-black-04);
     border-radius: 8px;
     flex-wrap: wrap;
 
@@ -53,7 +76,7 @@
       padding: 4px 8px 5px;
       box-sizing: border-box;
       background-color: transparent;
-      
+
       &:focus {
         outline: none;
       }

diff --git a/src/TagInput/TagInput.tsx b/src/TagInput/TagInput.tsx
@@ -25,6 +25,7 @@ export interface TagInput {
   removeKeyCodes?: string[];
   maxHeight?: string | number;
   isReadOnly?: boolean;
+  disabled?: boolean;
   isUnique?: boolean;
   isHandleClipboard?: boolean;
   onChange: (nextTags: TagInputListItem[]) => void;
@@ -49,6 +50,7 @@ const TagInput: React.FC<React.PropsWithChildren<TagInput>> = ({
   removeKeyCodes = [],
   maxHeight,
   isReadOnly,
+  disabled,
   isUnique,
   isHandleClipboard,
   onChange,
@@ -63,6 +65,7 @@ const TagInput: React.FC<React.PropsWithChildren<TagInput>> = ({
   const tagInputClassNames = cx('tag-input', className, {
     '-readonly': isReadOnly,
     '-error': showError,
+    '-disabled': disabled,
   });
 
   const checkIsUniqueTag = (tag: string, list: TagInputListItem[]) => {