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

Jump to bottom

fix(pro:textarea): placeholder color for textarea #1512

Merged
merged 2 commits into from
Mar 27, 2023
Merged

fix(pro:textarea): placeholder color for textarea #1512

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efdfc0a
fix(pro:textarea): placeholder color for textarea
kovsu Mar 24, 2023
7f13759
fix(pro:textarea): use placeholder in components
kovsu Mar 27, 2023
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
10 changes: 10 additions & 0 deletions packages/pro/style/mixins/placeholder.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.placeholder(@color: var(--ix-text-color-disabled)) {
&::placeholder {
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
color: @color;
}

&:placeholder-shown {
text-overflow: ellipsis;
}
}
Copy link

Choose a reason for hiding this comment

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

with the code review

  1. The code is properly indented and easy to read.
  2. The code follows the correct syntax and there are no typos.
  3. The comment provided is helpful in understanding the code.
  4. The opacity override is necessary for Firefox, but this may be handled differently depending on the browser.
  5. The use of the placeholder-shown selector should be tested to make sure it works as expected in all browsers.
  6. The color value is set using a variable, which is good practice.
  7. The text-overflow property should be tested to make sure it works correctly in all browsers.

2 changes: 2 additions & 0 deletions packages/pro/textarea/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../../style/mixins/placeholder.less';
Copy link
Member

Choose a reason for hiding this comment

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

@import '../../../components/style//mixins/placeholder.less';

直接用 components 里的就好了。

@import '../../style/mixins/reset.less';

.@{pro-textarea-prefix} {
Expand Down Expand Up @@ -130,6 +131,7 @@
width: 100%;
resize: none;
overflow: hidden;
.placeholder(@textarea-placeholder-color);

&[disabled] {
cursor: not-allowed;
Copy link

Choose a reason for hiding this comment

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

the code review:

  1. At line 1, you have imported the placeholder.less mixin. This is good practice as it allows you to reuse code and keep your codebase organized.

  2. At line 130, you have added a placeholder mixin which sets the textarea-placeholder-color variable. This will help ensure consistent styling across different textareas.

  3. At line 131, you have added a statement that sets the cursor to not-allowed when the textarea is disabled. This will prevent accidental changes to the textarea while still providing feedback to the user.

Overall, this is a well written patch that ensures consistent styling and prevents accidental changes.

Copy link

Choose a reason for hiding this comment

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

  1. The code looks good and there is no obvious bug risk.
  2. It would be better to add a comment above the @import statement to indicate what the placeholder.less file contains, as it can help with understanding the code better.
  3. The statement ".placeholder(@textarea-placeholder-color);" should be added inside a media query if it is necessary to keep the code responsive.

Expand Down