[InputLabel] Add a FormControlClasses property (#8108)

mui · Sep 8, 2017 · 621bf6a · 621bf6a
1 parent 277f3e6
commit 621bf6a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -69,8 +69,8 @@ jobs:
           name: Is the size acceptable?
           command: yarn size
       - run:
-          name: Can we generate the docs?
-          command: yarn docs:api && yarn docs:build
+          name: Can we generate the api of the docs?
+          command: yarn docs:api
   test_browser:
     <<: *defaults
     steps:

diff --git a/src/Input/InputLabel.js b/src/Input/InputLabel.js
@@ -68,6 +68,10 @@ export type Props = {
    * If `true`, the label will be displayed in an error state.
    */
   error?: boolean,
+  /**
+   * `classes` property applied to the `FormControl` element.
+   */
+  FormControlClasses?: Object,
   /**
    * If `true`, the input of this label is focused.
    */
@@ -96,6 +100,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
     children,
     classes,
     className: classNameProp,
+    FormControlClasses,
     shrink: shrinkProp,
     margin: marginProp,
     ...other
@@ -126,7 +131,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
   );
 
   return (
-    <FormLabel className={className} {...other}>
+    <FormLabel className={className} classes={FormControlClasses} {...other}>
       {children}
     </FormLabel>
   );

diff --git a/src/Input/InputLabel.spec.js b/src/Input/InputLabel.spec.js
@@ -36,6 +36,13 @@ describe('<InputLabel />', () => {
     assert.strictEqual(wrapper.hasClass(classes.disabled), true);
   });
 
+  describe('props: FormControlClasses', () => {
+    it('should be able to change the FormLabel style', () => {
+      const wrapper = shallow(<InputLabel FormControlClasses={{ foo: 'bar' }}>Foo</InputLabel>);
+      assert.strictEqual(wrapper.props().classes.foo, 'bar');
+    });
+  });
+
   describe('with muiFormControl context', () => {
     let wrapper;
     let muiFormControl;

diff --git a/src/Progress/CircularProgress.js b/src/Progress/CircularProgress.js
@@ -74,11 +74,11 @@ function CircularProgress(props) {
   const { classes, className, color, size, mode, value, min, max, ...other } = props;
   const radius = size / 2;
   const rootProps = {};
-  const svgClasses = classNames(classes.svg, {
+  const svgClassName = classNames(classes.svg, {
     [classes.indeterminateSvg]: mode === 'indeterminate',
   });
 
-  const circleClasses = classNames(classes.circle, {
+  const circleClassName = classNames(classes.circle, {
     [classes.indeterminateCircle]: mode === 'indeterminate',
     [classes.determinateCircle]: mode === 'determinate',
   });
@@ -104,9 +104,9 @@ function CircularProgress(props) {
       {...rootProps}
       {...other}
     >
-      <svg className={svgClasses} viewBox={`0 0 ${size} ${size}`}>
+      <svg className={svgClassName} viewBox={`0 0 ${size} ${size}`}>
         <circle
-          className={circleClasses}
+          className={circleClassName}
           style={circleStyle}
           cx={radius}
           cy={radius}

diff --git a/src/Progress/LinearProgress.js b/src/Progress/LinearProgress.js
@@ -139,7 +139,7 @@ function LinearProgress(props) {
     [classes.accentDashed]: color === 'accent',
   });
 
-  const rootClasses = classNames(
+  const rootClassName = classNames(
     classes.root,
     {
       [classes.primaryColor]: color === 'primary',
@@ -149,14 +149,14 @@ function LinearProgress(props) {
     },
     className,
   );
-  const primaryClasses = classNames(classes.bar, {
+  const primaryClassName = classNames(classes.bar, {
     [classes.primaryColorBar]: color === 'primary',
     [classes.accentColorBar]: color === 'accent',
     [classes.indeterminateBar1]: mode === 'indeterminate' || mode === 'query',
     [classes.determinateBar1]: mode === 'determinate',
     [classes.bufferBar1]: mode === 'buffer',
   });
-  const secondaryClasses = classNames(classes.bar, {
+  const secondaryClassName = classNames(classes.bar, {
     [classes.bufferBar2]: mode === 'buffer',
     [classes.primaryColorBar]: color === 'primary' && mode !== 'buffer',
     [classes.primaryColor]: color === 'primary' && mode === 'buffer',
@@ -176,11 +176,11 @@ function LinearProgress(props) {
   }
 
   return (
-    <div className={rootClasses} {...rootProps} {...other}>
+    <div className={rootClassName} {...rootProps} {...other}>
       {mode === 'buffer' ? <div className={dashedClass} /> : null}
-      <div className={primaryClasses} style={inlineStyles.primary} />
+      <div className={primaryClassName} style={inlineStyles.primary} />
       {mode === 'determinate' ? null : (
-        <div className={secondaryClasses} style={inlineStyles.secondary} />
+        <div className={secondaryClassName} style={inlineStyles.secondary} />
       )}
     </div>
   );

diff --git a/src/Table/TableSortLabel.js b/src/Table/TableSortLabel.js
@@ -60,14 +60,14 @@ function TableSortLabel(props) {
     classNameProp,
   );
 
-  const iconClasses = classNames(classes.icon, {
+  const iconClassName = classNames(classes.icon, {
     [classes[direction]]: !!direction,
   });
 
   return (
     <ButtonBase className={className} component="span" disableRipple {...other}>
       {children}
-      <ArrowDownwardIcon className={iconClasses} />
+      <ArrowDownwardIcon className={iconClassName} />
     </ButtonBase>
   );
 }