Skip to content

Refine Toggle dimensions to follow Figma spec #1636

@chrisbobbe

Description

@chrisbobbe

We plan to ship "Invisible mode" with a toggle switch that doesn't quite match the Figma. Quoting the PR:

#1631

Some known differences from the Figma, which won't be hard to fix but require upstream changes, so not totally trivial:

  • When the switch is on:

    • The switch should be 28px by 48px, not 36px by 56px.
    • The "thumb" (white circle with checkmark) should have radius 10px, not 12px.
  • When the switch is off:

    • The switch should be 26px by 46px, not 34px by 54px.
    • The "thumb" should have radius 7px, not 8px.

This issue is to resolve those differences.

Implementation

The upstream issue is flutter/flutter#131478 ; we should investigate and send a PR, then use the exposed configuration to resolve the TODO in the Toggle code.

Metadata

Metadata

Assignees

No one assigned

    Labels

    a-designVisual and UX designa-settingsUI to show and edit settings and do admin tasksupstreamWould benefit from work in Flutter or another upstream

    Type

    No type

    Projects

    Status

    No status

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions