feat(TokenIput): add disabled state

narmi · May 28, 2024 · 91e9e05 · 91e9e05
1 parent bb434d3
commit 91e9e05
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/src/FieldToken/index.jsx b/src/FieldToken/index.jsx
@@ -9,7 +9,7 @@ const noop = () => {};
  * or other user selections we want to tokenize.
  */
 const FieldToken = React.forwardRef(function FieldToken(
-  { label, onDismiss = noop, testId },
+  { label, onDismiss = noop, disabled = false, testId },
   forwardedRef,
 ) {
   return (
@@ -24,27 +24,32 @@ const FieldToken = React.forwardRef(function FieldToken(
         "rounded--all--l",
         "fontSize--xs",
         "fontWeight--semibold",
+        {
+          "nds-fieldToken--disabled": disabled,
+        },
       ])}
       data-testid={testId}
     >
       <div className="whiteSpace--truncate" style={{ userSelect: "none" }}>
         {label}
       </div>
-      <div
-        className="narmi-icon-x margin--left--xs"
-        role="button"
-        aria-label={`Remove ${label}`}
-        tabIndex={0}
-        onClick={(e) => {
-          e.stopPropagation();
-          onDismiss(label);
-        }}
-        onKeyUp={({ key }) => {
-          if (key === "Enter" || key == " ") {
+      {!disabled && (
+        <div
+          className="narmi-icon-x margin--left--xs"
+          role="button"
+          aria-label={`Remove ${label}`}
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
             onDismiss(label);
-          }
-        }}
-      />
+          }}
+          onKeyUp={({ key }) => {
+            if (key === "Enter" || key == " ") {
+              onDismiss(label);
+            }
+          }}
+        />
+      )}
     </div>
   );
 });
@@ -59,6 +64,10 @@ FieldToken.propTypes = {
   onDismiss: PropTypes.func,
   /** Optional value for `data-testid` attribute */
   testId: PropTypes.string,
+  /**
+   * Disabled state for FieldToken
+   */
+  disabled: PropTypes.bool,
 };
 
 export default FieldToken;
diff --git a/src/FieldToken/index.scss b/src/FieldToken/index.scss
@@ -10,6 +10,10 @@
   // Truncate after 300px - no token should be wider than a small mobile viewport
   max-width: 300px;
 
+  &--disabled {
+    background: rgba(var(--theme-rgb-primary), var(--alpha-10));
+  }
+
   // Renders an icon with a small glyph inside a 16x16 click target
   .narmi-icon-x {
     cursor: pointer;

diff --git a/src/TokenInput/index.jsx b/src/TokenInput/index.jsx
@@ -31,6 +31,7 @@ const TokenInput = ({
   inputValue,
   tokens = [],
   delimiter = ",",
+  disabled = false,
   ...otherProps
 }) => {
   const inputRef = useRef(null);
@@ -76,6 +77,7 @@ const TokenInput = ({
       <TextInput
         ref={inputRef}
         label={label}
+        disabled={disabled}
         onChange={onInputChange}
         onBlur={() => {
           onInputChange(INPUT_RESET_EVENT);
@@ -91,7 +93,8 @@ const TokenInput = ({
               <FieldToken
                 key={label}
                 label={label}
-                onDismiss={handleTokenDismiss}
+                disabled={disabled}
+                onDismiss={disabled ? noop : handleTokenDismiss}
               />
             ))}
           </div>
@@ -120,6 +123,8 @@ TokenInput.propTypes = {
   onInputChange: PropTypes.func,
   /** Value of input element */
   inputValue: PropTypes.string,
+  /** Is the input disabled? */
+  disabled: PropTypes.bool,
   /**
    * Called with the list of selected tokens
    * as the argument when user updates tokens list

diff --git a/src/TokenInput/index.stories.js b/src/TokenInput/index.stories.js
@@ -27,6 +27,7 @@ export const UsingWithState = () => {
         </output>
       </div>
       <TokenInput
+        disabled
         label="Favorite Foods"
         fieldName="favorite_foods"
         fieldValue={value}