Skip to content

[Bug]: CheckBox'es don't align well with each other when in different checked states #27176

@wfwf1997

Description

@wfwf1997

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
    Memory: 27.47 GB / 31.21 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/cool-haze-q1xr6l

Bug Description

Actual Behavior

In Sample 1, the two CheckBox'es align with each other as good as in Sample 2 or 3. They should be in the same baseline.

Expected Behavior

Two CheckBox'es are not well aligned. The unchecked one looks higher.

And CheckBox'es seem to be good in Sample 2 and 3. However, the box itself in Sample 2 is a little bit higher than the one in Sample 3. The difference could be found by comparing the bottom dot of the colon with the bottom edge of the first box.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions