diff --git a/common/changes/office-ui-fabric-react/kysedate-comboBox-getClassNamesProp_2018-01-20-02-14.json b/common/changes/office-ui-fabric-react/kysedate-comboBox-getClassNamesProp_2018-01-20-02-14.json new file mode 100644 index 0000000000000..9c4b79fc3b8d3 --- /dev/null +++ b/common/changes/office-ui-fabric-react/kysedate-comboBox-getClassNamesProp_2018-01-20-02-14.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ComboBox: Add getClassNAmes prop to allow complete customization of the component", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "kysedate@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 22d0875891a1f..34f4311bd5f0d 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -281,16 +281,26 @@ export class ComboBox extends BaseComponent { let hasErrorMessage = (errorMessage && errorMessage.length > 0) ? true : false; - this._classNames = getClassNames( - getStyles(theme!, customStyles), - className!, - !!isOpen, - !!disabled, - !!required, - !!focused, - !!allowFreeform, - !!hasErrorMessage - ); + this._classNames = this.props.getClassNames ? + this.props.getClassNames( + theme!, + !!isOpen, + !!disabled, + !!required, + !!focused, + !!allowFreeform, + !!hasErrorMessage, + className) : + getClassNames( + getStyles(theme!, customStyles), + className!, + !!isOpen, + !!disabled, + !!required, + !!focused, + !!allowFreeform, + !!hasErrorMessage + ); return (
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index 2abc4a44c830c..c2c5ce268d6e9 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -4,6 +4,7 @@ import { ISelectableDroppableTextProps } from '../../utilities/selectableOption/ import { IStyle, ITheme } from '../../Styling'; import { IButtonStyles } from '../../Button'; import { IRenderFunction } from '../../Utilities'; +import { IComboBoxClassNames } from './ComboBox.classNames'; export interface IComboBox { /** @@ -101,6 +102,21 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps */ styles?: Partial; + /** + * Custom function for providing the classNames for the ComboBox. Can be used to provide + * all styles for the component instead of applying them on top of the default styles. + */ + getClassNames?: ( + theme: ITheme, + isOpen: boolean, + disabled: boolean, + required: boolean, + focused: boolean, + allowFreeForm: boolean, + hasErrorMessage: boolean, + className?: string + ) => IComboBoxClassNames; + /** * Styles for the caret down button. */