Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Change Proposal: Align Button and IconButton with the design (sizes, radius)

未关闭
  • 哪里不对？
#365 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 3 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
35/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript
领域
design, frontend

调研方向

This is a design proposal; no implementation files or tests are named. Start by reading the Button and IconButton implementations and their stories, then compare their current sizing and radius with the stated Figma values. Done means both components use the specified 32/36/40px heights and matching radius, with stories, guidance, and changelog updated; first wait for maintainer review and acceptance.

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

描述

needs-triage

What is being proposed?

Bring Button and IconButton in line with the DiamondDS Figma design:

  1. Explicit, whole-pixel heights for Button and IconButton at each size, instead of sizes derived from MUI padding and line-height.
  2. Square IconButton with the same corner radius as Button (MUI default is round).

Text field sizing and an outlined IconButton are related but are out of scope here. Each will be proposed separately (see "Related, separate proposals").

Why is this needed?

  • Code and Figma disagree, and the code values are fractional:

    Control Figma (S / M / L) sci-react-ui today (MUI)
    Button 32 / 36 / 40 30.75 / 36.5 / 42.25
    IconButton 32 / 36 / 40 34 / 40 / 48

    Fractional heights give blurry borders and misaligned rows. IconButton is up to 8px larger than the design at large.

  • Small Button and small IconButton do not line up in the same row (30.75 vs 34).

  • A plain IconButton has no border or fill until hover, so a standalone "+" next to a search field reads as decoration rather than as a control.

  • A round IconButton next to rectangular buttons, inputs and toggle buttons looks inconsistent.

What will change?

  • Behaviour: none. Only appearance and dimensions change.
  • Sizes: Button and IconButton get explicit heights (IconButton is square: width = height), with box-sizing: border-box so outlined and contained variants stay the same height.
    • Button: 32 / 36 / 40.
    • IconButton: 32 / 36 / 40.
  • Radius: IconButton uses the same radius as Button.
  • Stories, guidance and the changelog are updated.

Interface changes (if any)

None. No new props. The existing size values (small, medium, large) keep their names but map to the new dimensions.

<IconButton aria-label="New file" size="small"><Add /></IconButton> // now 32×32, square

No change to existing props. The existing size values (small, medium, large) keep their names but map to the new dimensions.

Breaking change?

  • Yes

It is not an API break, but it is a visible change for apps already using these components:

  • IconButton is smaller (small 34 → 32, medium 40 → 36, large 48 → 40) and square instead of round.
  • Button changes by about 1–2px (small 30.75 → 32, medium 36.5 → 36, large 42.25 → 40).
  • Apps that override IconButton size or radius with sx should check their overrides.

Mitigation: note it in the changelog and release notes, and tell teams with apps on the library before release so they can check their layouts.

Related, separate proposal: text field sizes

Not part of this change, but they affect it.

  • Text field sizes: small (40) and medium (56) match Figma but not the 32 / 36 / 40 button scale, so a small field is 8px taller than a small Button or IconButton. A separate proposal will cover smaller field sizes, the default size and floating labels in dense fields. Until then, a small field (40) pairs exactly with a large Button or IconButton (40).
  • Outlined IconButton: a new variant="outlined" so a standalone icon action (for example "new file" next to a search field) has a visible border at rest. It is not in Figma yet, so the design comes first.

Next steps

A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.

主要语言
TypeScript
星标
9
派生
4
平均合并
3 天 12 小时
30 天内合并 PR
14

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

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

DiamondLightSource/sci-react-ui 的其他 Issue

查看 DiamondLightSource/sci-react-ui 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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