feat: Standardize the plurality of className props and variables (#954)

sam-kvale-sap · web-flow · commit 2922bf3b1ab4 · 2020-04-02T09:43:15.000-05:00
* fix(props): Standardize the plurality of className props

* fix(checkbox): Use inputClassName as the prop instead of inputClasses
diff --git a/src/Forms/Checkbox.js b/src/Forms/Checkbox.js
@@ -28,7 +28,7 @@ const Checkbox = React.forwardRef(({
     indeterminate,
     inline,
     inputProps,
-    labelClasses,
+    labelClassName,
     labelProps,
     name,
     onChange,
@@ -59,9 +59,9 @@ const Checkbox = React.forwardRef(({
         }
     );
 
-    const labelClassNames = classnames(
+    const labelClasses = classnames(
         'fd-checkbox__label',
-        labelClasses
+        labelClassName
     );
 
     const checkId = id ? id : shortId.generate();
@@ -88,7 +88,7 @@ const Checkbox = React.forwardRef(({
                 type='checkbox'
                 value={value} />
             <FormLabel {...labelProps}
-                className={labelClassNames}
+                className={labelClasses}
                 disableStyles={disableStyles}
                 disabled={disabled}
                 htmlFor={checkId}>
@@ -112,7 +112,7 @@ Checkbox.propTypes = {
     indeterminate: PropTypes.bool,
     inline: PropTypes.bool,
     inputProps: PropTypes.object,
-    labelClasses: PropTypes.string,
+    labelClassName: PropTypes.string,
     labelProps: PropTypes.object,
     name: PropTypes.string,
     state: PropTypes.oneOf(FORM_STATES),
@@ -130,7 +130,7 @@ Checkbox.propDescriptions = {
     indeterminate: 'When true, the checkbox renders a "mixed" state.',
     inline: '_INTERNAL USE ONLY._',
     inputProps: 'Props to be spread to the component `<input>` element.',
-    labelClasses: 'Classes to be added to the component `<label>` element.',
+    labelClassName: 'Class name to be added to the component `<label>` element.',
     labelProps: 'Props to be spread to the component `<label>` element.',
     name: 'Sets the `name` for the checkbox input.',
     value: 'Sets the `value` for the checkbox input.'
diff --git a/src/Forms/FormRadioItem.js b/src/Forms/FormRadioItem.js
@@ -29,7 +29,7 @@ const FormRadioItem = React.forwardRef(({
         }
     }, []);
 
-    const inputClassNames = classnames(
+    const inputClassName = classnames(
         'fd-radio',
         {
             'fd-radio--compact': compact,
@@ -49,7 +49,7 @@ const FormRadioItem = React.forwardRef(({
             <input
                 {...inputProps}
                 checked={checked}
-                className={inputClassNames}
+                className={inputClassName}
                 disabled={disabled}
                 id={radioId}
                 name={name}
diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js
@@ -35,7 +35,7 @@ class InputGroup extends Component {
             },
         );
 
-        const getClassNames = (child) => classnames(
+        const getClassName = (child) => classnames(
             {
                 'fd-input-group__input': child.type.displayName !== InputGroupAddon.displayName
             },
@@ -51,7 +51,7 @@ class InputGroup extends Component {
                         return React.cloneElement(child, {
                             compact,
                             disabled,
-                            className: getClassNames(child)
+                            className: getClassName(child)
                         });
                     })}
                 </div>
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
@@ -138,14 +138,14 @@ class MultiInput extends Component {
         } = this.props;
 
 
-        const tokenizerClassNames = classnames(
+        const tokenizerClassName = classnames(
             'fd-tokenizer',
             {
                 'fd-tokenizer--compact': compact
             }
         );
 
-        const listClassNames = classnames(
+        const listClassName = classnames(
             'fd-list--dropdown',
             'fd-list--multi-input',
             {
@@ -163,7 +163,7 @@ class MultiInput extends Component {
 
         const popoverBody = (
             <List
-                className={listClassNames}
+                className={listClassName}
                 compact={compact}
                 disableStyles={disableStyles}
                 {...listProps}>
@@ -196,7 +196,7 @@ class MultiInput extends Component {
                         disabled={disabled}
                         onClick={this.showHideTagList}
                         validationState={!this.state.bShowList ? validationState : null}>
-                        <div {...tagProps} className={tokenizerClassNames}>
+                        <div {...tagProps} className={tokenizerClassName}>
                             <div className='fd-tokenizer__inner'>
                                 {this.state.tags.length > 0 && this.createTags()}
                                 <FormInput
diff --git a/src/Select/Select.js b/src/Select/Select.js
@@ -72,7 +72,7 @@ const Select = React.forwardRef(({
         </div>
     );
 
-    const listClassNames = classnames(
+    const listClassName = classnames(
         'fd-list--dropdown',
         {
             'fd-list--has-message': validationState?.state
@@ -82,7 +82,7 @@ const Select = React.forwardRef(({
     const popoverBody = () => {
         return React.cloneElement(children, {
             compact: compact,
-            className: listClassNames,
+            className: listClassName,
             role: 'listbox'
         });
     };
