fix: text field snapshot test failures

daangn · Jan 4, 2025 · ac8a74e · ac8a74e
1 parent 14bc878
commit ac8a74e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/docs/public/__registry__/ui/text-field.json b/docs/public/__registry__/ui/text-field.json
@@ -9,7 +9,7 @@
     {
       "name": "text-field.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/textField.css\";\n\nimport * as React from \"react\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { TextField as SeedTextField } from \"@seed-design/react\";\n\nexport interface TextFieldProps\n  extends Omit<SeedTextField.RootProps, \"prefix\"> {\n  label?: React.ReactNode;\n\n  indicator?: React.ReactNode;\n\n  prefixIcon?: React.ReactNode;\n\n  prefix?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  suffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n\n  errorMessage?: React.ReactNode;\n\n  hideCharacterCount?: boolean;\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      description,\n      errorMessage,\n      prefix,\n      prefixIcon,\n      suffix,\n      suffixIcon,\n      indicator,\n      label,\n      children,\n      hideCharacterCount,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const renderCharacterCount =\n      !hideCharacterCount && otherProps.maxGraphemeCount;\n\n    return (\n      <SeedTextField.Root ref={ref} {...otherProps}>\n        <SeedTextField.Header>\n          <SeedTextField.Label>{label}</SeedTextField.Label>\n          <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>\n        </SeedTextField.Header>\n        <SeedTextField.Field>\n          {prefixIcon && <SeedTextField.PrefixIcon svg={prefixIcon} />}\n          {prefix && (\n            <SeedTextField.PrefixText>{prefix}</SeedTextField.PrefixText>\n          )}\n          {children}\n          {suffix && (\n            <SeedTextField.SuffixText>{suffix}</SeedTextField.SuffixText>\n          )}\n          {suffixIcon && <SeedTextField.SuffixIcon svg={suffixIcon} />}\n          {indicator && (\n            <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>\n          )}\n        </SeedTextField.Field>\n        <SeedTextField.Footer>\n          {description && (\n            <SeedTextField.Description>{description}</SeedTextField.Description>\n          )}\n          {errorMessage && (\n            <SeedTextField.ErrorMessage>\n              <SeedTextField.ErrorIcon\n                svg={<IconExclamationmarkCircleFill />}\n              />\n              {errorMessage}\n            </SeedTextField.ErrorMessage>\n          )}\n          {renderCharacterCount && (\n            <SeedTextField.CharacterCountArea>\n              <SeedTextField.CharacterCount />\n              <SeedTextField.MaxCharacterCount>\n                /{otherProps.maxGraphemeCount}\n              </SeedTextField.MaxCharacterCount>\n            </SeedTextField.CharacterCountArea>\n          )}\n        </SeedTextField.Footer>\n      </SeedTextField.Root>\n    );\n  },\n);\nTextField.displayName = \"TextField\";\n\nexport interface TextFieldInputProps extends SeedTextField.InputProps {}\n\nexport const TextFieldInput = SeedTextField.Input;\n\nexport interface TextFieldTextareaProps extends SeedTextField.TextareaProps {}\n\nexport const TextFieldTextarea = SeedTextField.Textarea;\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/textField.css\";\n\nimport * as React from \"react\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { TextField as SeedTextField } from \"@seed-design/react\";\n\nexport interface TextFieldProps\n  extends Omit<SeedTextField.RootProps, \"prefix\"> {\n  label?: React.ReactNode;\n\n  indicator?: React.ReactNode;\n\n  prefixIcon?: React.ReactNode;\n\n  prefix?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  suffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n\n  errorMessage?: React.ReactNode;\n\n  hideCharacterCount?: boolean;\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      description,\n      errorMessage,\n      prefix,\n      prefixIcon,\n      suffix,\n      suffixIcon,\n      indicator,\n      label,\n      children,\n      hideCharacterCount,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const renderCharacterCount =\n      !hideCharacterCount && otherProps.maxGraphemeCount;\n    const renderDescription = description && !otherProps.invalid;\n    const renderErrorMessage = errorMessage && otherProps.invalid;\n    const renderFooter =\n      renderDescription || renderErrorMessage || renderCharacterCount;\n    const renderHeader = label || indicator;\n\n    return (\n      <SeedTextField.Root ref={ref} {...otherProps}>\n        {renderHeader && (\n          <SeedTextField.Header>\n            <SeedTextField.Label>{label}</SeedTextField.Label>\n            <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>\n          </SeedTextField.Header>\n        )}\n        <SeedTextField.Field>\n          {prefixIcon && <SeedTextField.PrefixIcon svg={prefixIcon} />}\n          {prefix && (\n            <SeedTextField.PrefixText>{prefix}</SeedTextField.PrefixText>\n          )}\n          {children}\n          {suffix && (\n            <SeedTextField.SuffixText>{suffix}</SeedTextField.SuffixText>\n          )}\n          {suffixIcon && <SeedTextField.SuffixIcon svg={suffixIcon} />}\n          {indicator && (\n            <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>\n          )}\n        </SeedTextField.Field>\n        {renderFooter && (\n          <SeedTextField.Footer>\n            {renderDescription && (\n              <SeedTextField.Description>\n                {description}\n              </SeedTextField.Description>\n            )}\n            {renderErrorMessage && (\n              <SeedTextField.ErrorMessage>\n                <SeedTextField.ErrorIcon\n                  svg={<IconExclamationmarkCircleFill />}\n                />\n                {errorMessage}\n              </SeedTextField.ErrorMessage>\n            )}\n            {renderCharacterCount && (\n              <SeedTextField.CharacterCountArea>\n                <SeedTextField.CharacterCount />\n                <SeedTextField.MaxCharacterCount>\n                  /{otherProps.maxGraphemeCount}\n                </SeedTextField.MaxCharacterCount>\n              </SeedTextField.CharacterCountArea>\n            )}\n          </SeedTextField.Footer>\n        )}\n      </SeedTextField.Root>\n    );\n  },\n);\nTextField.displayName = \"TextField\";\n\nexport interface TextFieldInputProps extends SeedTextField.InputProps {}\n\nexport const TextFieldInput = SeedTextField.Input;\n\nexport interface TextFieldTextareaProps extends SeedTextField.TextareaProps {}\n\nexport const TextFieldTextarea = SeedTextField.Textarea;\n"
     }
   ]
 }
diff --git a/docs/registry/ui/text-field.tsx b/docs/registry/ui/text-field.tsx
@@ -46,13 +46,20 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
   ) => {
     const renderCharacterCount =
       !hideCharacterCount && otherProps.maxGraphemeCount;
+    const renderDescription = description && !otherProps.invalid;
+    const renderErrorMessage = errorMessage && otherProps.invalid;
+    const renderFooter =
+      renderDescription || renderErrorMessage || renderCharacterCount;
+    const renderHeader = label || indicator;
 
     return (
       <SeedTextField.Root ref={ref} {...otherProps}>
-        <SeedTextField.Header>
-          <SeedTextField.Label>{label}</SeedTextField.Label>
-          <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
-        </SeedTextField.Header>
+        {renderHeader && (
+          <SeedTextField.Header>
+            <SeedTextField.Label>{label}</SeedTextField.Label>
+            <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
+          </SeedTextField.Header>
+        )}
         <SeedTextField.Field>
           {prefixIcon && <SeedTextField.PrefixIcon svg={prefixIcon} />}
           {prefix && (
@@ -67,27 +74,31 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             <SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
           )}
         </SeedTextField.Field>
-        <SeedTextField.Footer>
-          {description && (
-            <SeedTextField.Description>{description}</SeedTextField.Description>
-          )}
-          {errorMessage && (
-            <SeedTextField.ErrorMessage>
-              <SeedTextField.ErrorIcon
-                svg={<IconExclamationmarkCircleFill />}
-              />
-              {errorMessage}
-            </SeedTextField.ErrorMessage>
-          )}
-          {renderCharacterCount && (
-            <SeedTextField.CharacterCountArea>
-              <SeedTextField.CharacterCount />
-              <SeedTextField.MaxCharacterCount>
-                /{otherProps.maxGraphemeCount}
-              </SeedTextField.MaxCharacterCount>
-            </SeedTextField.CharacterCountArea>
-          )}
-        </SeedTextField.Footer>
+        {renderFooter && (
+          <SeedTextField.Footer>
+            {renderDescription && (
+              <SeedTextField.Description>
+                {description}
+              </SeedTextField.Description>
+            )}
+            {renderErrorMessage && (
+              <SeedTextField.ErrorMessage>
+                <SeedTextField.ErrorIcon
+                  svg={<IconExclamationmarkCircleFill />}
+                />
+                {errorMessage}
+              </SeedTextField.ErrorMessage>
+            )}
+            {renderCharacterCount && (
+              <SeedTextField.CharacterCountArea>
+                <SeedTextField.CharacterCount />
+                <SeedTextField.MaxCharacterCount>
+                  /{otherProps.maxGraphemeCount}
+                </SeedTextField.MaxCharacterCount>
+              </SeedTextField.CharacterCountArea>
+            )}
+          </SeedTextField.Footer>
+        )}
       </SeedTextField.Root>
     );
   },

diff --git a/packages/qvism-preset/src/text-field.recipe.ts b/packages/qvism-preset/src/text-field.recipe.ts
@@ -104,17 +104,16 @@ const textField = defineRecipe({
       font: "inherit",
 
       [pseudo(":is(input)")]: {
-        border: "none",
         paddingInline: 0,
-        background: "none",
       },
 
       [pseudo(":is(textarea)")]: {
-        border: "none",
         minHeight: "90px",
         width: "100%",
       },
 
+      background: "none",
+      border: "none",
       outline: "none",
       resize: "none",
       flexGrow: 1,

diff --git a/packages/stylesheet/textField.css b/packages/stylesheet/textField.css
@@ -67,16 +67,15 @@
     font: inherit;
 }
 .textField__value:is(input) {
-    border: none;
     padding-inline: 0;
-    background: none;
 }
 .textField__value:is(textarea) {
-    border: none;
     min-height: 90px;
     width: 100%;
 }
 .textField__value {
+    background: none;
+    border: none;
     outline: none;
     resize: none;
     flex-grow: 1;