Skip to content

chore(eslint): enforce consistent-type-imports across react packages#35966

Open
Copilot wants to merge 6 commits intomasterfrom
copilot/enforce-consistent-type-imports
Open

chore(eslint): enforce consistent-type-imports across react packages#35966
Copilot wants to merge 6 commits intomasterfrom
copilot/enforce-consistent-type-imports

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 9, 2026

Summary

Enforces the @typescript-eslint/consistent-type-imports ESLint rule across all vNext (react-components) packages, requiring import type for type-only imports.

Why: Using import type makes it explicit that an import is erased at compile time. This improves compatibility with tools that perform single-file transpilation (e.g. Babel, esbuild, SWC), reduces the risk of accidental runtime imports of type-only symbols, and keeps bundle size tight.

Changes

  • ESLint config — Added @typescript-eslint/consistent-type-imports rule to packages/eslint-plugin/src/configs/react/index.js
  • Auto-fix — Ran yarn nx run-many --target=lint --fix --projects="tag:vNext" --parallel=8 to convert all existing imports to import type where applicable (~75 packages)
  • Charts fix — Reverted broken export * expansions in packages/charts/react-charts that were incorrectly expanded by the no-export-all rule interaction; manually resolved residual linter issues
  • API snapshots — Regenerated 53 etc/api.md files (reflecting import type changes in public API surface)
  • Change files — Created beachball change files for all affected packages: minor bump for @fluentui/eslint-plugin, patch bump for all dependent packages

…-fix all vNext packages

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/cf4ff664-ec9d-43b5-8d2f-7862d1857a8e

Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>
@dmytrokirpa dmytrokirpa changed the title feat(eslint): enforce consistent-type-imports across packages/react-components/** chore(eslint): enforce consistent-type-imports across react-components packages Apr 9, 2026
@dmytrokirpa
Copy link
Copy Markdown
Contributor

@copilot

  • run yarn nx build for affected packages and commit the etc/api.md file
  • run yarn change to create changefiles for affected packages

…ent-type-imports

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/082bb11f-e273-437a-9eba-180cf522657d

Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 9, 2026

@copilot

  • run yarn nx build for affected packages and commit the etc/api.md file
  • run yarn change to create changefiles for affected packages

Done in 09b0aa96:

  • Built all affected tag:vNext packages with __FORCE_API_MD_UPDATE__=true — regenerated 53 etc/api.md files (the only changes are import { X }import type { X } in the API report headers, no API surface changes)
  • Created beachball patch change files for all 76 affected packages (+ minor for @fluentui/eslint-plugin)

One note: during the lint fix run, the @rnx-kit/no-export-all rule also auto-expanded export * statements in packages/charts/react-charts, which caused duplicate identifier TypeScript errors. I reverted those export * expansions (keeping only the consistent-type-imports fixes in react-charts), so the build passes cleanly.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
global-context
createContextSelector
537 B
339 B
531 B
335 B
-6 B
-4 B
react-charts
AreaChart
412.454 kB
126.449 kB
412.511 kB
126.45 kB
57 B
1 B
react-charts
DeclarativeChart
763.195 kB
220.506 kB
763.273 kB
220.535 kB
78 B
29 B
react-charts
DonutChart
322.883 kB
97.008 kB
322.93 kB
97.01 kB
47 B
2 B
react-charts
FunnelChart
314.436 kB
94.065 kB
314.483 kB
94.069 kB
47 B
4 B
react-charts
GanttChart
395.573 kB
119.965 kB
395.62 kB
119.97 kB
47 B
5 B
react-charts
GaugeChart
322.314 kB
96.46 kB
322.361 kB
96.466 kB
47 B
6 B
react-charts
GroupedVerticalBarChart
403.443 kB
122.537 kB
403.492 kB
122.546 kB
49 B
9 B
react-charts
HeatMapChart
397.644 kB
121.826 kB
397.691 kB
121.832 kB
47 B
6 B
react-charts
HorizontalBarChart
302.61 kB
89.151 kB
302.658 kB
89.15 kB
48 B
-1 B
react-charts
Legends
242.551 kB
71.624 kB
242.552 kB
71.625 kB
1 B
1 B
react-charts
LineChart
423.795 kB
128.511 kB
423.849 kB
128.529 kB
54 B
18 B
react-charts
PolarChart
351.496 kB
107.404 kB
351.497 kB
107.403 kB
1 B
-1 B
react-charts
SankeyChart
220.386 kB
67.867 kB
220.432 kB
67.873 kB
46 B
6 B
react-charts
ScatterChart
403.17 kB
122.639 kB
403.231 kB
122.654 kB
61 B
15 B
react-charts
Sparkline
91.393 kB
28.708 kB
91.4 kB
28.708 kB
7 B
react-charts
VerticalBarChart
439.914 kB
128.239 kB
439.961 kB
128.242 kB
47 B
3 B
react-charts
VerticalStackedBarChart
409.456 kB
124.056 kB
409.503 kB
124.059 kB
47 B
3 B
react-jsx-runtime
JSX Runtime
2.268 kB
1.019 kB
2.268 kB
1.018 kB

-1 B
react-portal
Portal
15.55 kB
5.398 kB
15.55 kB
5.394 kB

-4 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
priority-overflow
createOverflowManager
4.584 kB
1.873 kB
react
ActivityItem
71.22 kB
23.347 kB
react
Announced
38.472 kB
13.275 kB
react
Autofill
15.42 kB
4.766 kB
react
Breadcrumb
200.805 kB
59.601 kB
react
Button
194.354 kB
55.886 kB
react
ButtonGrid
179.242 kB
53.891 kB
react
Calendar
121.162 kB
36.83 kB
react
Callout
84.299 kB
27.593 kB
react
Check
53.206 kB
17.835 kB
react
Checkbox
59.978 kB
19.874 kB
react
ChoiceGroup
65.488 kB
21.465 kB
react
ChoiceGroupOption
58.769 kB
19.353 kB
react
Coachmark
92.7 kB
29.305 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
134.97 kB
42.125 kB
react
ComboBox
250.687 kB
71.515 kB
react
CommandBar
201.861 kB
59.387 kB
react
ContextualMenu
154.229 kB
47.566 kB
react
DatePicker
183.251 kB
55.892 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.929 kB
65.81 kB
react
Dialog
210.16 kB
62.358 kB
react
Divider
19.588 kB
6.84 kB
react
DocumentCard
215.843 kB
63.666 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
Dropdown
233.151 kB
67.962 kB
react
ExtendedPicker
96.823 kB
27.866 kB
react
Fabric
41.728 kB
14.343 kB
react
Facepile
209.377 kB
62.375 kB
react
FloatingPicker
240.865 kB
68.222 kB
react
FocusTrapZone
16.99 kB
5.891 kB
react
FocusZone
55.1 kB
17.451 kB
react
Grid
179.242 kB
53.891 kB
react
GroupedList
135.035 kB
40.67 kB
react
GroupedListV2
122.659 kB
37.758 kB
react
HoverCard
96.784 kB
30.688 kB
react
Icon
51.887 kB
17.263 kB
react
Icons
66.339 kB
24.385 kB
react
Image
46.901 kB
15.695 kB
react
Keytip
81.301 kB
26.677 kB
react
KeytipData
14.05 kB
4.583 kB
react
KeytipLayer
103.089 kB
31.9 kB
react
Keytips
105.873 kB
32.904 kB
react
Label
38.324 kB
13.241 kB
react
Layer
48.089 kB
16.348 kB
react
Link
39.665 kB
13.653 kB
react
List
39.346 kB
12.454 kB
react
MarqueeSelection
74.49 kB
22.402 kB
react
MessageBar
189.388 kB
56.33 kB
react
Modal
93.738 kB
30.223 kB
react
Nav
186.825 kB
55.723 kB
react
OverflowSet
33.354 kB
11.282 kB
react
Overlay
40.885 kB
14.077 kB
react
Panel
200.327 kB
59.336 kB
react
Persona
114.591 kB
36.435 kB
react
PersonaCoin
114.591 kB
36.435 kB
react
PersonaPresence
58.076 kB
19.372 kB
react
Pickers
297.91 kB
82.996 kB
react
Pivot
187.734 kB
56.5 kB
react
Popup
12.312 kB
4.197 kB
react
Positioning
22.764 kB
7.683 kB
react
PositioningContainer
73.445 kB
23.685 kB
react
ProgressIndicator
39.477 kB
13.528 kB
react
Rating
82.086 kB
26.09 kB
react
Fluent UI React (entire library)
1.019 MB
283.183 kB
react
ResizeGroup
13.35 kB
4.379 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.541 kB
17.718 kB
react
SearchBox
187.63 kB
55.936 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
231.35 kB
67.176 kB
react
Selection
42.418 kB
12.26 kB
react
Separator
35.365 kB
12.132 kB
react
Shimmer
49.249 kB
16.258 kB
react
ShimmeredDetailsList
240.71 kB
68.549 kB
react
Slider
57.627 kB
19.198 kB
react
SpinButton
191.297 kB
57.006 kB
react
Spinner
41.759 kB
14.468 kB
react
Stack
42.039 kB
14.389 kB
react
Sticky
32.577 kB
10.488 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
189.637 kB
57.417 kB
react
TeachingBubble
204.648 kB
60.317 kB
react
Text
36.886 kB
12.806 kB
react
TextField
80.798 kB
25.308 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
TimePicker
240.515 kB
69.311 kB
react
Toggle
46.201 kB
15.957 kB
react
Tooltip
87.073 kB
28.151 kB
react
Utilities
82.938 kB
25.15 kB
react
Viewport
23.872 kB
7.642 kB
react
WeeklyDayPicker
101.348 kB
31.644 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
103.484 kB
31.344 kB
react-aria
ARIA - useARIAButtonProps
1.354 kB
648 B
react-aria
ARIA - AriaLiveAnnouncer
3.293 kB
1.507 kB
react-avatar
Avatar
48.479 kB
15.359 kB
react-avatar
AvatarGroup
17.482 kB
7.002 kB
react-avatar
AvatarGroupItem
61.867 kB
19.384 kB
react-badge
Badge
24.24 kB
7.879 kB
react-badge
CounterBadge
24.963 kB
8.135 kB
react-badge
PresenceBadge
24.198 kB
8.81 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
115.162 kB
31.475 kB
react-button
Button
33.962 kB
9.022 kB
react-button
CompoundButton
40.843 kB
10.379 kB
react-button
MenuButton
38.866 kB
10.414 kB
react-button
SplitButton
47.663 kB
12.057 kB
react-button
ToggleButton
53.634 kB
11.155 kB
react-calendar-compat
Calendar Compat
149.292 kB
39.866 kB
react-card
Card - All
105.222 kB
29.475 kB
react-card
Card
97.84 kB
27.583 kB
react-card
CardFooter
12.774 kB
5.117 kB
react-card
CardHeader
15.303 kB
5.976 kB
react-card
CardPreview
12.854 kB
5.252 kB
react-charting
AreaChart
302.827 kB
94.751 kB
react-charting
ChartHoverCard
37.196 kB
12.7 kB
react-charting
DeclarativeChart
677.056 kB
191.292 kB
react-charting
DonutChart
203.52 kB
63.663 kB
react-charting
GanttChart
282.797 kB
88.761 kB
react-charting
GaugeChart
197.055 kB
61.221 kB
react-charting
GroupedVerticalBarChart
294.564 kB
91.795 kB
react-charting
HeatMapChart
285.643 kB
89.439 kB
react-charting
HorizontalBarChart
127.266 kB
39.944 kB
react-charting
HorizontalBarChartWithAxis
293.937 kB
91.167 kB
react-charting
Legends
151.485 kB
46.4 kB
react-charting
LineChart
332.438 kB
101.79 kB
react-charting
MultiStackedBarChart
181.754 kB
55.275 kB
react-charting
PieChart
134.305 kB
42.299 kB
react-charting
PolarChart
235.153 kB
74.294 kB
react-charting
SankeyChart
158.002 kB
49.166 kB
react-charting
ScatterChart
289.004 kB
91.071 kB
react-charting
Sparkline
87.616 kB
29.671 kB
react-charting
StackedBarChart
175.435 kB
52.872 kB
react-charting
TreeChart
84.809 kB
26.636 kB
react-charting
VerticalBarChart
303.589 kB
93.173 kB
react-charting
VerticalStackedBarChart
300.594 kB
92.797 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-checkbox
Checkbox
33.7 kB
11.421 kB
react-color-picker
ColorArea
47.538 kB
16.698 kB
react-color-picker
ColorPicker
16.169 kB
6.523 kB
react-color-picker
ColorSlider
39.712 kB
14.744 kB
react-combobox
Combobox (including child components)
105.599 kB
34.274 kB
react-combobox
Dropdown (including child components)
106.23 kB
34.229 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.743 kB
68.75 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-components
react-components: entire library
1.3 MB
324.812 kB
react-datepicker-compat
DatePicker Compat
225.158 kB
63.633 kB
react-dialog
Dialog (including children components)
102.117 kB
30.367 kB
react-divider
Divider
16.354 kB
5.928 kB
react-field
Field
22.393 kB
8.39 kB
react-image
Image
13.608 kB
5.533 kB
react-input
Input
26.28 kB
8.702 kB
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime
1.914 kB
908 B
react-label
Label
12.954 kB
5.258 kB
react-link
Link
16.173 kB
6.457 kB
react-list
List
87.11 kB
25.762 kB
react-list
ListItem
111.018 kB
32.682 kB
react-menu
Menu (including children components)
170.393 kB
51.915 kB
react-menu
Menu (including selectable components)
173.571 kB
52.494 kB
react-message-bar
MessageBar (all components)
23.294 kB
8.63 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.156 kB
1.818 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
5.908 kB
2.442 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.727 kB
823 B
react-overflow
hooks only
12.117 kB
4.627 kB
react-persona
Persona
55.434 kB
17.299 kB
react-popover
Popover
133.719 kB
41.451 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-positioning
usePositioning
28.889 kB
10.158 kB
react-positioning
useSafeZoneArea
12.445 kB
5 kB
react-progress
ProgressBar
20.212 kB
7.863 kB
react-provider
FluentProvider
23 kB
8.194 kB
react-radio
Radio
31.087 kB
9.656 kB
react-radio
RadioGroup
14.035 kB
5.7 kB
react-select
Select
26.165 kB
9.472 kB
react-slider
Slider
36.359 kB
12.03 kB
react-spinbutton
SpinButton
33.804 kB
11.125 kB
react-spinner
Spinner
23.703 kB
7.858 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
104.305 kB
29.944 kB
react-switch
Switch
36.333 kB
11.067 kB
react-table
DataGrid
159.783 kB
45.012 kB
react-table
Table (Primitives only)
40.997 kB
13.172 kB
react-table
Table as DataGrid
131.005 kB
36.012 kB
react-table
Table (Selection only)
69.391 kB
19.404 kB
react-table
Table (Sort only)
68.034 kB
19.022 kB
react-tag-picker
@fluentui/react-tag-picker - package
186.766 kB
55.907 kB
react-tags
InteractionTag
13.724 kB
5.47 kB
react-tags
Tag
29.648 kB
9.429 kB
react-tags
TagGroup
82.247 kB
24.152 kB
react-teaching-popover
TeachingPopover
112.414 kB
34.219 kB
react-text
Text - Default
15.295 kB
5.965 kB
react-text
Text - Wrappers
18.455 kB
6.292 kB
react-textarea
Textarea
24.668 kB
8.969 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
37.985 kB
7.895 kB
react-theme
Teams: Light theme
20.803 kB
5.851 kB
react-timepicker-compat
TimePicker
108.565 kB
35.848 kB
react-toast
Toast (including Toaster)
102.56 kB
30.608 kB
react-tooltip
Tooltip
57.105 kB
19.698 kB
react-tree
FlatTree
148.099 kB
42.211 kB
react-tree
PersonaFlatTree
149.927 kB
42.585 kB
react-tree
PersonaTree
145.987 kB
41.411 kB
react-tree
Tree
144.165 kB
41.037 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 2c3174eadee70cc3848ed0c135e8aeea7200a96d

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

@github-actions github-actions bot Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png 3 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 724 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 609 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 25 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 143 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 134 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png 2 Changed
vr-tests-react-components/TagPicker 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium.png 10380 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39083 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.2nd selected.chromium_3.png 119 Changed
vr-tests/Callout 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Left bottom edge.default.chromium.png 3182 Changed
vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png 1835 Changed
vr-tests/Callout.Bottom center.default.chromium.png 2128 Changed
vr-tests/Callout.Top right edge.default.chromium.png 1146 Changed
vr-tests/Callout.No callout width specified.default.chromium.png 2143 Changed
vr-tests/Callout.Root.default.chromium.png 2195 Changed
vr-tests/Coachmark 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Coachmark.Collapsed.default.chromium.png 159 Changed
vr-tests/react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png 11 Changed
vr-tests/react-charting-LineChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Events.default.chromium.png 1 Changed
vr-tests/react-charting-MultiStackBarChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png 343 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole.default.chromium.png 359 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

@dmytrokirpa dmytrokirpa marked this pull request as ready for review April 10, 2026 10:11
@dmytrokirpa dmytrokirpa requested review from a team as code owners April 10, 2026 10:11
@dmytrokirpa dmytrokirpa requested review from Hotell April 10, 2026 10:42
Copy link
Copy Markdown
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Hotell Hotell changed the title chore(eslint): enforce consistent-type-imports across react-components packages chore(eslint): enforce consistent-type-imports across react packages Apr 10, 2026
afterEach(sharedAfterEach);
it('renders Areachart correctly', async () => {
let wrapper = render(<AreaChart data={chartData} />);
const wrapper = render(<AreaChart data={chartData} />);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't change it manually, it was changed by eslint --fix

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.

4 participants