Fluentui: icon field not available inside styles

[shahafal]

Environment Information

• Package version(s): 7.59.3
• Browser and OS versions: Windows (browser not relevant, error that makes code not being able to compile)

Please provide a reproduction of the bug in a codepen:

We defined this component:

<DatePicker ariaLabel={this.props.ariaLabel} className={this.props.className} styles={{ icon: { padding: 2 } }} firstDayOfWeek={this.getFirstDayOfWeek()} formatDate={this.dateFormatter} strings={this.strings.getValue()} onSelectDate={this.onDateSelected} value={this.props.value} />

And we are getting the following error:

Type '{ icon: { padding: number; }; }' is not assignable to type 'IStyleFunction'.
Object literal may only specify known properties, and 'icon' does not exist in type 'IStyleFunction'

Actual behavior:

Cannot use icon field in styles property.

Expected behavior:

Be able to use icon field in styles property.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Microsoft Power Query

[shahafal]

workaround:
const styles: Partial<IDatePickerStyles> = { icon: { padding: 2 } };
<DatePicker styles={styles as any} />

[cikuITreti]

It feels like IDatePickerProps.styles should be defined as IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles> instead of IStyleFunction<IDatePickerStyleProps, IDatePickerStyles>

[khmakoto]

Hi @shahafal, thanks for filing this issue! I think it is a bug that could be fixed with the suggestion from @cikuITreti. I'll have a PR shortly to fix this.

[msft-github-bot]

:tada:This issue was addressed in #11350, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

:tada:This issue was addressed in #11350, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site