Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#365 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 3 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
9
Fork
4
Merge trung bình
3 ngày 12 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của DiamondLightSource/sci-react-ui

Tất cả issue của DiamondLightSource/sci-react-ui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.