[Bug]: ProgressBar has an optional state variable

[mltejera]

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.

[mltejera]

@GeoffCox FYI

[miroslavstastny]

Unfortunately, this is by design. Based on the slot attribute presence in the state object we decide whether to render the slot or not:

fluentui/packages/react-components/react-utilities/src/compose/getSlots.ts

Lines 71 to 73 in 336f91d

	if (state[slotName] === undefined) {
	return [null, undefined as R[K]];
	}

[GeoffCoxMSFT]

Unfortunately, this is by design. Based on the slot attribute presence in the state object we decide whether to render the slot or not:

fluentui/packages/react-components/react-utilities/src/compose/getSlots.ts

Lines 71 to 73 in 336f91d

	if (state[slotName] === undefined) {
	return [null, undefined as R[K]];
	}

The useProgressBar hooks always sets the bar to be a 'div' component regardless if the slot is empty coming in on props. The conditional logic in the style hook or render will ever find bar to be undefined.

const bar = resolveShorthand(props.bar, {
    required: true,
  });

Sometimes we make a prop in state required that is optional in props. This puts the burden on the use hook to provide a default value when the prop is not specified.

The bar is defined as non-nullable so callers cannot set it to null. The style hook seems to do indeterminate state when the bar is there and the value prop is null. The comments on the bar slot indicate that not passing the bar slot will make the progress indeterminate.

Are we missing a case where the bar ends up being undefined for a particular scenario to work?

[miroslavstastny]

Sorry @mltejera, I was too quick closing the issue, as the bar is always set in the component hook, it should be optional on props but required on state. Thanks @GeoffCoxMSFT for reopening.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.