patternfly / patternfly/react-data-view

DataViewToolbar: Pagination misaligned from rest of toolbar

未关闭 适合新手
#692 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
TypeScript
星标
4
派生
21
PR 合并指标
30 天内没有已合并 PR

描述

Hey PatternFly team!😁

I was recently working with the DataViewToolbar component attempting to align the toolbar with the pagination in the same row. Currently, when passing a pagination prop to the component the pagination is not aligned in the same row as the rest of the toolbar. Example (and this same behavior is displayed in the examples in the component's docs):

Image

PatternFly's toolbar design guidelines recommend these be aligned in the same row.

After some investigation, I found the pagination is wrapped in a div that uses flex with a set width of 100%. This causes the pagination to render in its own row distinct from the rest of the toolbar. Link to code referenced

Please implement a fix that aligns the pagination in the same row as the rest of the toolbar. Thank you!😄


Jira Issue: PF-4529

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 packages/module/src/DataViewToolbar/DataViewToolbar.tsx 中 issue 引用的分页 wrapper 开始,然后将组件行为与 DataViewToolbar 文档中的示例进行比较。通过检查分页是否与其他 toolbar 内容渲染在同一行,并符合 toolbar 设计指南,确认修复结果。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
冷清
描述清晰度
描述清楚
新手友好度
78/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。