Skip to content

feat(components): [select & select-v2] add tag-effect prop#17445

Merged
tolking merged 1 commit intoelement-plus:devfrom
ntnyq:feat/select-tag-effect-prop
Jul 7, 2024
Merged

feat(components): [select & select-v2] add tag-effect prop#17445
tolking merged 1 commit intoelement-plus:devfrom
ntnyq:feat/select-tag-effect-prop

Conversation

@ntnyq
Copy link
Copy Markdown
Contributor

@ntnyq ntnyq commented Jul 5, 2024

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

This PR adds a prop to component Select and Select-v2.

With it makes it easier to change the tag style rather than to rewrite it via slot.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jul 5, 2024 •
edited
Loading

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jul 5, 2024

Hello @ntnyq, thank you for contributing to element-plus, please see our guideline to see how to make contribution

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jul 5, 2024 •
edited
Loading

🧪 Playground Preview: https://element-plus.run/?pr=17445
Please comment the example via this playground if needed.

@ntnyq
Copy link
Copy Markdown
Contributor Author

ntnyq commented Jul 5, 2024 •
edited
Loading

Example

@pull-request-triage
Copy link
Copy Markdown

pull-request-triage Bot commented Jul 5, 2024

👋 @ntnyq, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

@ntnyq
Copy link
Copy Markdown
Contributor Author

ntnyq commented Jul 5, 2024

/label Components:[select]

btea
btea reviewed Jul 6, 2024
View reviewed changes
Comment thread docs/en-US/component/select-v2.md Outdated
@btea btea added the Project::Enhancement New feature or request label Jul 6, 2024
btea
btea approved these changes Jul 6, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@btea btea left a comment

Choose a reason for hiding this comment

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

Thanks!

@tolking
Copy link
Copy Markdown
Member

tolking commented Jul 6, 2024

The style is a bit strange when tag-effect="plain"

Link

@ntnyq
Copy link
Copy Markdown
Contributor Author

ntnyq commented Jul 6, 2024 •
edited
Loading

Workarounds:

  1. Remove border-color: transparent; from .el-select__selection .el-tag, but it would add a lighter border for tagEffect light which is a breaking change for style.

  2. Add.el-select__selection .el-tag.el-tag--plain: { border-color: var(--el-tag-border-color) } to override the transparent border.

I'll commit workaround 2 and leave it for discussion.

Example

@tolking tolking merged commit 4a30d88 into element-plus:dev Jul 7, 2024
@element-bot element-bot mentioned this pull request Jul 12, 2024
Merged
3 tasks
@Shahzeb892 Shahzeb892 mentioned this pull request Aug 2, 2024
Open
@Bidur2054 Bidur2054 mentioned this pull request Aug 2, 2024
Open
@B1u3e B1u3e mentioned this pull request Sep 5, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tolking tolking tolking approved these changes

@btea btea btea approved these changes

Assignees

@ntnyq ntnyq

Labels

CommitMessage::Qualified Qualified commit message Contribution::Community Needs Review Project::Enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ntnyq @tolking @btea