Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input): [input] fix input small size of font #2203

Merged
merged 1 commit into from
Sep 29, 2024
Merged

fix(input): [input] fix input small size of font #2203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/theme/src/input/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,13 +255,19 @@

&-small {
.input-size(var(--tv-Input-small-height));
.@{input-prefix-cls}__inner {
font-size: var(--tv-Input-small-font-size);
}
.@{input-prefix-cls}__suffix {
top: var(--tv-Input-suffix-top-small);
}
}

&-mini {
.input-size(var(--tv-Input-mini-height));
.@{input-prefix-cls}__inner {
font-size: var(--tv-Input-small-font-size);
}
Comment on lines +268 to +270
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consider using a different font size for mini inputs.

While the addition of the font size for the mini input's inner element is consistent with the PR objective, it currently uses the same variable as the small input (var(--tv-Input-small-font-size)).

Mini inputs are typically smaller than small inputs. Consider creating a new variable for mini input font size, e.g., var(--tv-Input-mini-font-size), and use it here:

.@{input-prefix-cls}__inner {
  font-size: var(--tv-Input-mini-font-size);
}

Don't forget to define this new variable in the appropriate variables file (likely vars.less).

.@{input-prefix-cls}__suffix {
top: var(--tv-Input-suffix-top-mini);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/input/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
--tv-Input-font-size: var(--tv-font-size-md);
// 输入框计数器字体大小
--tv-Input-count-font-size: var(--tv-font-size-sm);
// small和mini尺寸字体大小
--tv-Input-small-font-size: var(--tv-font-size-sm);
Comment on lines +21 to +22
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Action Required: --tv-Input-small-font-size Variable Not Utilized

The new variable --tv-Input-small-font-size is currently not used in any .vue, .js, .ts, or .less files. This means the intended fix for the small input font size may not be applied.

  • Next Steps:
    1. Integrate the Variable: Ensure that --tv-Input-small-font-size is applied to the relevant input components where the small font size is needed.
    2. Update the Shell Script: Modify the search script to correctly recognize .vue files or use an alternative method to verify the usage of the new variable.
    3. Complete PR Checklist: Make sure all PR checklist items are addressed to avoid incomplete implementations.
🔗 Analysis chain

Approved: New variable for small input font size

The addition of --tv-Input-small-font-size aligns with the PR objective to fix the small font size for inputs. Using var(--tv-font-size-sm) is appropriate for smaller inputs.

However, I have a few suggestions and questions:

  1. The comment mentions both "small" and "mini" sizes, but the variable name only includes "small". Consider either:

    • Updating the comment to "// small尺寸字体大小" to match the variable name, or
    • Adding a separate variable for mini size if needed.

  2. Could you provide information on where and how this new variable will be applied in the codebase? This would help ensure it's being used correctly.

  3. Remember to complete the PR checklist items to ensure all necessary steps have been taken.

To verify the usage of this new variable, please run the following script:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for usage of the new --tv-Input-small-font-size variable

# Search for the new variable in .vue, .js, .ts, and .less files
echo "Searching for usage of --tv-Input-small-font-size:"
rg --type vue --type js --type ts --type less "tv-Input-small-font-size"

# If no results, it might not be used yet
if [ $? -ne 0 ]; then
    echo "The new variable --tv-Input-small-font-size is not used in any .vue, .js, .ts, or .less files."
    echo "Please ensure it's applied where needed to fix the small input font size issue."
fi

Length of output: 600

// 输入框高度v
--tv-Input-height: var(--tv-size-height-md);
// 输入框边框圆角
Expand Down
Loading