Library

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

System Info

OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 17.51 GB / 31.90 GB

Are you reporting Accessibility issue?

None

Reproduction

not really a reduction

Bug Description

Progress bar has an optional 'bar' slot & state. This makes using the custom style hooks a little tricker. I have to wrap it in a contitional:

export const useProgressBarStyles_unstable = (state: unknown) => {
  const progressStyles = useProgressBarStyles();
  const componentState = state as ProgressBarState;
  // todo file a bug on fluent component, bar in state should be required
  if (componentState.bar) {
    componentState.bar.className = mergeClasses(componentState.bar.className, progressStyles.bar);
  }
};

Ideally, I shouldn't have to check for null before styling.

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.