Skip to content

Commit ac8a74e

Browse files
malangcatmalangcat
committed
fix: text field snapshot test failures
1 parent 14bc878 commit ac8a74e

File tree

4 files changed

+41
-32
lines changed

4 files changed

+41
-32
lines changed

‎docs/public/__registry__/ui/text-field.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
{
1010
"name": "text-field.tsx",
1111
"type": "ui",
12-
"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"
12+
"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"
1313
}
1414
]
1515
}

‎docs/registry/ui/text-field.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,20 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
4646
) => {
4747
const renderCharacterCount =
4848
!hideCharacterCount && otherProps.maxGraphemeCount;
49+
const renderDescription = description && !otherProps.invalid;
50+
const renderErrorMessage = errorMessage && otherProps.invalid;
51+
const renderFooter =
52+
renderDescription || renderErrorMessage || renderCharacterCount;
53+
const renderHeader = label || indicator;
4954

5055
return (
5156
<SeedTextField.Root ref={ref} {...otherProps}>
52-
<SeedTextField.Header>
53-
<SeedTextField.Label>{label}</SeedTextField.Label>
54-
<SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
55-
</SeedTextField.Header>
57+
{renderHeader && (
58+
<SeedTextField.Header>
59+
<SeedTextField.Label>{label}</SeedTextField.Label>
60+
<SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
61+
</SeedTextField.Header>
62+
)}
5663
<SeedTextField.Field>
5764
{prefixIcon && <SeedTextField.PrefixIcon svg={prefixIcon} />}
5865
{prefix && (
@@ -67,27 +74,31 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
6774
<SeedTextField.Indicator>{indicator}</SeedTextField.Indicator>
6875
)}
6976
</SeedTextField.Field>
70-
<SeedTextField.Footer>
71-
{description && (
72-
<SeedTextField.Description>{description}</SeedTextField.Description>
73-
)}
74-
{errorMessage && (
75-
<SeedTextField.ErrorMessage>
76-
<SeedTextField.ErrorIcon
77-
svg={<IconExclamationmarkCircleFill />}
78-
/>
79-
{errorMessage}
80-
</SeedTextField.ErrorMessage>
81-
)}
82-
{renderCharacterCount && (
83-
<SeedTextField.CharacterCountArea>
84-
<SeedTextField.CharacterCount />
85-
<SeedTextField.MaxCharacterCount>
86-
/{otherProps.maxGraphemeCount}
87-
</SeedTextField.MaxCharacterCount>
88-
</SeedTextField.CharacterCountArea>
89-
)}
90-
</SeedTextField.Footer>
77+
{renderFooter && (
78+
<SeedTextField.Footer>
79+
{renderDescription && (
80+
<SeedTextField.Description>
81+
{description}
82+
</SeedTextField.Description>
83+
)}
84+
{renderErrorMessage && (
85+
<SeedTextField.ErrorMessage>
86+
<SeedTextField.ErrorIcon
87+
svg={<IconExclamationmarkCircleFill />}
88+
/>
89+
{errorMessage}
90+
</SeedTextField.ErrorMessage>
91+
)}
92+
{renderCharacterCount && (
93+
<SeedTextField.CharacterCountArea>
94+
<SeedTextField.CharacterCount />
95+
<SeedTextField.MaxCharacterCount>
96+
/{otherProps.maxGraphemeCount}
97+
</SeedTextField.MaxCharacterCount>
98+
</SeedTextField.CharacterCountArea>
99+
)}
100+
</SeedTextField.Footer>
101+
)}
91102
</SeedTextField.Root>
92103
);
93104
},

‎packages/qvism-preset/src/text-field.recipe.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,17 +104,16 @@ const textField = defineRecipe({
104104
font: "inherit",
105105

106106
[pseudo(":is(input)")]: {
107-
border: "none",
108107
paddingInline: 0,
109-
background: "none",
110108
},
111109

112110
[pseudo(":is(textarea)")]: {
113-
border: "none",
114111
minHeight: "90px",
115112
width: "100%",
116113
},
117114

115+
background: "none",
116+
border: "none",
118117
outline: "none",
119118
resize: "none",
120119
flexGrow: 1,

‎packages/stylesheet/textField.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,15 @@
6767
font: inherit;
6868
}
6969
.textField__value:is(input) {
70-
border: none;
7170
padding-inline: 0;
72-
background: none;
7371
}
7472
.textField__value:is(textarea) {
75-
border: none;
7673
min-height: 90px;
7774
width: 100%;
7875
}
7976
.textField__value {
77+
background: none;
78+
border: none;
8079
outline: none;
8180
resize: none;
8281
flex-grow: 1;

0 commit comments

Comments
 (0)