Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#365 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
design, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
9
Forks
4
Merge moyen
3 j 12 h
PR mergées (30 j)
14

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de DiamondLightSource/sci-react-ui

Toutes les issues de DiamondLightSource/sci-react-ui

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.