Skip to content

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Mar 24, 2023

Previous Behavior

When multiple Checkboxes are inline, the unchecked and checked ones have different alignments.

image

New Behavior

Add vertical-align: middle to the Checkbox, to force it to always have the same alignment.

Related Issue(s)

@behowell behowell self-assigned this Mar 24, 2023
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 24, 2023
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ad1f6aa:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-checkbox
Checkbox
36.017 kB
10.84 kB
36.067 kB
10.856 kB
50 B
16 B
react-checkbox
CheckboxField
42.969 kB
12.782 kB
43.019 kB
12.787 kB
50 B
5 B
react-table
DataGrid
149.828 kB
40.646 kB
149.878 kB
40.662 kB
50 B
16 B
react-table
Table as DataGrid
137.968 kB
35.272 kB
138.018 kB
35.282 kB
50 B
10 B
react-table
Table (Selection only)
85.799 kB
21.299 kB
85.849 kB
21.303 kB
50 B
4 B
react-table
Table (Sort only)
85.129 kB
21.109 kB
85.179 kB
21.113 kB
50 B
4 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
67.994 kB
18.395 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.4 kB
57.516 kB
react-components
react-components: FluentProvider & webLightTheme
38.819 kB
12.351 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.185 kB
react-table
Table (Primitives only)
47.119 kB
12.703 kB
🤖 This report was generated against 0f112dce6a19b7124dd95f58d9096f40aeaedf9c

@size-auditor
Copy link

size-auditor bot commented Mar 24, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 0f112dce6a19b7124dd95f58d9096f40aeaedf9c (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 894 893 5000
Button mount 592 588 5000
Field mount 1550 1549 5000
FluentProvider mount 1094 1099 5000
FluentProviderWithTheme mount 283 292 10
FluentProviderWithTheme virtual-rerender 274 285 10
FluentProviderWithTheme virtual-rerender-with-unmount 284 284 10
InfoButton mount 204 203 5000
MakeStyles mount 1392 1405 50000
Persona mount 2136 2084 5000
SpinButton mount 1828 1853 5000

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@behowell behowell marked this pull request as ready for review March 24, 2023 22:36
@behowell behowell requested a review from a team as a code owner March 24, 2023 22:36
@behowell behowell merged commit 4fad4cb into microsoft:master Mar 24, 2023
@behowell behowell deleted the checkbox/inline-alignment branch March 24, 2023 22:37
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 27, 2023
* master: (47 commits)
  fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked (microsoft#27324)
  applying package updates
  Fix: Revert microsoft#26931 change due to new bug it introduced (microsoft#27323)
  chore(react-infobutton): Renaming content slot to info (microsoft#27316)
  applying package updates
  Fix bad release mismatch of react-select (microsoft#27321)
  applying package updates
  Fix react-combobox mismatch after bad release (microsoft#27319)
  docs: add section about media query sorting (microsoft#27307)
  applying package updates
  fix: sync packages and changefiles after bad release (microsoft#27317)
  applying package updates
  chore(react-datepicker-compat): Cleanup types, unused code, and restore utils tests (microsoft#27297)
  [Fluent 2 Theme] Fixing link color in dark theme (microsoft#27203)
  Tree documentation and stories (microsoft#27270)
  feat: Render theme CSS variables in SSR style element (microsoft#27277)
  chore (scripts): update create-package plop templates to use swc/helpers in deps (microsoft#27286)
  fix(DialogContent): adds padding to allow focus visibility (microsoft#27248)
  Adding Card component style hooks to shared context (microsoft#27295)
  Virtualizer: Static scroll hooks and embedded scrollview (microsoft#26985)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants