Skip to content

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Jan 10, 2026

Previous Behavior

New Behavior

Added use${Component}Base__unstable hook for every component that contains state for logic, slots (but not default implementations), but not design-related props as per #35623. Exports are commented out intentionally, as we'll uncomment them in experimental branch for experimental release.

Example how to compose a custom Divider component:

import * as React from 'react';
import type { DividerBaseProps, DividerState } from '@fluentui/react-divider';
import { renderDivider_unstable, useDividerBase_unstable } from '@fluentui/react-divider';

type DividerProps = DividerBaseProps & {
  appearance?: 'default' | 'brand'
};

export const Divider = React.forwardRef<HTMLDivlement, DividerBaseProps>(
  ({ appearance = 'default', ...props }, ref) => {
    // Define state
    const state = useDividerBase_unstable(props, ref);

    // Apply styles (using any styling approach such as plain CSS, CSS Modules, TailwindCSS, or CSS-in-JS) based on the props and state
    state.root.className = [
      `divider`,
      `divider--${variant}`,
      state.root.className,
    ]
      .filter(Boolean)
      .join(' ');

    // render markup
    return renderDivider_unstable(state as DividerState);
  },
);

Note: No public API or behavior changes to existing components, all unit/VR tests are passing.

Related Issue(s)

@dmytrokirpa dmytrokirpa self-assigned this Jan 10, 2026
@github-actions
Copy link

github-actions bot commented Jan 10, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.286 MB
321.92 kB
1.286 MB
321.947 kB
62 B
27 B
react-divider
Divider
20.604 kB
7.576 kB
20.67 kB
7.599 kB
66 B
23 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.269 kB
20.055 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
237.407 kB
68.603 kB
react-components
react-components: FluentProvider & webLightTheme
43.608 kB
14.165 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
109.023 kB
36.011 kB
🤖 This report was generated against d9c1e788f99b8b174d60e0b555d71bb15ce16cdf

@github-actions
Copy link

Pull request demo site: URL

@dmytrokirpa dmytrokirpa requested a review from Hotell January 14, 2026 16:11
Copy link
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

@dmytrokirpa dmytrokirpa enabled auto-merge (squash) January 14, 2026 17:59
@dmytrokirpa dmytrokirpa merged commit 3383bfe into microsoft:master Jan 14, 2026
12 checks passed
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.

2 participants