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

feat(pagination) : add size prop #16858

Open
wants to merge 21 commits into
base: dev
Choose a base branch
from
Open

feat(pagination) : add size prop #16858

wants to merge 21 commits into from
+50 −21

Conversation

webvs2
Copy link
Contributor

@webvs2 webvs2 commented May 14, 2024 •
edited by btea

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.

close #16830

@pull-request-triage Pull Request Triage
Copy link

👋 @webvs2, seems like this is your first time contribution to element-plus.

  • Please make sure that you have read our guidelines and code of conduct before making a contribution.
  • 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.

@pull-request-triage pull-request-triage bot added 1st contribution Their very first contribution Needs Review labels May 14, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented May 14, 2024 •
edited

@github-actions GitHub Actions
Copy link

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

@webvs2 webvs2 changed the title flx [pagination]：add component prop 'size' and related style supplement flx (pagination) : add component prop 'size' and related style supplement May 14, 2024
@webvs2 webvs2 mentioned this pull request May 14, 2024
Open
@github-actions GitHub Actions
Copy link

github-actions bot commented May 14, 2024 •
edited

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

@btea btea changed the title flx (pagination) : add component prop 'size' and related style supplement feat(pagination) : add `size' prop May 15, 2024
@btea btea changed the title feat(pagination) : add `size' prop feat(pagination) : add size prop May 15, 2024
@btea
Copy link
Collaborator

btea commented May 15, 2024

I think it would also be good to add unified global setting size support to el-pagination. What do you think? cc @element-plus/backers

long4488296
long4488296 reviewed May 15, 2024
View reviewed changes
Copy link

@long4488296 long4488296 left a comment

Choose a reason for hiding this comment

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

微信截图_20240515110156-ok

ok!!!

@Liao-js
Copy link
Contributor

Liao-js commented May 15, 2024

I think it would be better to use useFormSize to get size for el-pagination.

@webvs2
Copy link
Contributor Author

webvs2 commented May 16, 2024

I think it would be better to use useFormSize to get size for el-pagination.

The purpose of this function is to get the size of the previous level rather than just relying on the global, and the use is that if the size is set like 'from', it is actually good to use the local t mentioned above, right?

@Liao-js
Copy link
Contributor

Liao-js commented May 16, 2024

The purpose of this function is to get the size of the previous level rather than just relying on the global

useFormSize obtains size in the order of props, formItem, form, globalConfig

@webvs2
Copy link
Contributor Author

webvs2 commented May 16, 2024

The purpose of this function is to get the size of the previous level rather than just relying on the global

useFormSize obtains size in the order of props, formItem, form, globalConfig

Yes, I looked at what the function does so it makes more sense to rely on the parent, which I will adjust

@btea
Copy link
Collaborator

btea commented May 19, 2024

We should keep small first, otherwise it will be a breaking change for users.

@webvs2
Copy link
Contributor Author

webvs2 commented May 20, 2024

我们应该保留在第一位，否则对用户来说将是一个重大变化。small

I do not understand

@btea
Copy link
Collaborator

btea commented May 20, 2024

We can add a new size prop, but we should not delete small. We can follow certain logic to ensure that users who use the small attribute are not affected.

@kooriookami
Copy link
Member

就是新旧api都先留着，旧的api可以在下个大版本中删除

@webvs2 webvs2 requested a review from btea May 23, 2024 03:04
tolking
tolking reviewed May 25, 2024
View reviewed changes
Copy link
Member

@tolking tolking left a comment

Choose a reason for hiding this comment

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

I think we can also add reminders for attribute changes

useDeprecated()

docs/en-US/component/pagination.md
@@ -67,7 +67,7 @@ pagination/more-elements

| Name | Description | Type | Default |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------ |
| small | whether to use small pagination | ^[boolean] | false |
| size | pagination size | ^[enum]`'large'\| 'default'\| 'small'` | 'default' |
Copy link
Member

Choose a reason for hiding this comment

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

The original prop should be retained to facilitate users to synchronize API changes

size ^(2.7.4)
small ^(deprecated)

docs/examples/pagination/more-elements.vue Outdated Show resolved Hide resolved
packages/components/table/src/table-body/styles-helper.ts
@@ -33,7 +33,6 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
) {
classes.push('current-row')
}

Copy link
Member

Choose a reason for hiding this comment

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

This change seems unnecessary

packages/components/pagination/src/pagination.ts
Comment on lines +192 to +194
const _size = useFormSize(
computed(() => (props.small ? 'small' : vnodeProps?.size))
)
Copy link
Member

Choose a reason for hiding this comment

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

The Pagination component should not belong to the form component, and I don't quite understand why it is handled this way

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think 'useFormSize' can be managed uniformly, and this will also work if the user puts it in 'from'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@long4488296 long4488296 long4488296 left review comments

@tolking tolking tolking left review comments

@btea btea Awaiting requested review from btea

At least 1 approving review is required to merge this pull request.

Assignees

@webvs2 webvs2

Labels
1st contribution Their very first contribution CommitMessage::Qualified Qualified commit message Contribution::Community Needs Review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Component] [pagination] el-config-provider 设置size="small" 后 el-pagination 尺寸错误
6 participants
@webvs2 @btea @Liao-js @kooriookami @long4488296 @tolking