patternfly / patternfly/patternfly-react

ToolbarItem - expand-all variant should include expand all icon

未关闭
#9,641 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Breaking change :boom: PF Team
主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
9

描述

re: https://github.com/patternfly/patternfly-react/pull/9605/files

The expand all icon is currently something the user passes, but for us to mirror it automatically in RTL in the CSS, our component should be updated to include it for the user. This button is primarily for an expandable data-list and table, and the expand toggles in those components supply the icon, so the toolbar probably should, too, and would provide consistency in the icons used. We could probably do it a couple of ways:

  1. Keep everything the way it is now, but update <ToolbarExpandIconWrapper> to include the icon for the user. And rename it to <ToolbarExpandAllIcon>? That aligns with the core class. IMO that should be updated whether we use it as a wrapper or not.
  2. Update <ToolbarItem variant="expand-all"> to bundle the 1) toggle button, 2) <ToolbarExpandIconWrapper>/<ToolbarExpandAllIcon>, and 3) the icon. Chatting with @thatblindgeye, we could also allow tooltip props in case someone wants a tooltip for the button.

As far as I can tell, the data list and table do not allow the user to pass their own icon to the expandable toggle, so I don't know that we need to allow for that in the toolbar, either? If we do, there is a question of whether it should go in <ToolbarExpandIconWrapper>/<ToolbarExpandAllIcon> or not, which will rotate (when expanded) and mirror (in RTL) the icon the user passes.

My vote would be for the second option.


Jira Issue: PF-118

贡献指南

打开贡献指南

从这里开始

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

调研方向

首先检查 ToolbarItem 的 expand-all 变体和 ToolbarExpandIconWrapper 的实现,然后将它们与 data-list 和 table 组件中的可展开切换控件进行比较。确定应使用哪个提议的 API,并验证生成的图标在 expanded 和 RTL 状态下保持一致。

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

评估

技术栈
react, typescript
领域
frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
35/100

把新 issue 发到你的邮箱

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