Rename classNames to be more meaningful

Author: wojtekmaj

src/DatePicker.jsx

@@ -111,9 +111,9 @@ export default class DatePicker extends PureComponent {
     const [valueFrom] = [].concat(value);
 
     return (
-      <div className={`${baseClassName}__button`}>
+      <div className={`${baseClassName}__wrapper`}>
         <DateInput
-          className={`${baseClassName}__button__input`}
+          className={`${baseClassName}__inputGroup`}
           disabled={disabled}
           locale={locale}
           isCalendarOpen={isOpen}
@@ -129,7 +129,7 @@ export default class DatePicker extends PureComponent {
         />
         {clearIcon !== null && (
           <button
-            className={`${baseClassName}__clear-button ${baseClassName}__button__icon`}
+            className={`${baseClassName}__clear-button ${baseClassName}__button`}
             disabled={disabled}
             onClick={this.clear}
             onFocus={this.stopPropagation}
@@ -140,7 +140,7 @@ export default class DatePicker extends PureComponent {
         )}
         {calendarIcon !== null && (
           <button
-            className={`${baseClassName}__calendar-button ${baseClassName}__button__icon`}
+            className={`${baseClassName}__calendar-button ${baseClassName}__button`}
             disabled={disabled}
             onClick={this.toggleCalendar}
             onFocus={this.stopPropagation}

src/DatePicker.less

@@ -13,81 +13,82 @@
     color: rgb(109, 109, 109);
   }
 
-  &__button {
+  &__wrapper {
     display: flex;
     border: thin solid gray;
+  }
+
+  &__inputGroup {
+    @digit-width: .54em;
+    @dot-width: .217em;
+    // own padding + inputs padding + digits width + dots width
+    min-width: calc(~"(4px * 3) + " @digit-width * 8 ~" + " @dot-width * 2);
+    flex-grow: 1;
+    display: flex;
+    padding: 0 2px;
+    align-items: baseline;
+    box-sizing: content-box;
+
+    &__divider {
+      padding: 1px 0;
+    }
 
     &__input {
-      @digit-width: .54em;
-      @dot-width: .217em;
-      // own padding + inputs padding + digits width + dots width
-      min-width: calc(~"4px + (4px * 3) + " @digit-width * 8 ~" + " @dot-width * 2);
-      flex-grow: 1;
-      display: flex;
-      padding: 0 2px;
-      align-items: baseline;
-
-      &__divider {
-        padding: 1px 0;
+      min-width: @digit-width;
+      height: 100%;
+      position: relative;
+      padding: 0 1px;
+      border: 0;
+      background: none;
+      font: inherit;
+      box-sizing: content-box;
+      -moz-appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
       }
 
-      &__input {
-        min-width: @digit-width;
-        height: calc(100% - 2px);
-        position: relative;
-        padding: 1px;
-        border: 0;
-        background: none;
-        font: inherit;
-        box-sizing: content-box;
-        -moz-appearance: textfield;
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        &:invalid {
-          background: fade(red, 10%);
-        }
+      &:invalid {
+        background: fade(red, 10%);
+      }
 
-        &--hasLeadingZero {
-          margin-left: -@digit-width;
-          padding-left: calc(~"1px + " @digit-width);
-        }
+      &--hasLeadingZero {
+        margin-left: -@digit-width;
+        padding-left: calc(~"1px + " @digit-width);
       }
     }
+  }
 
-    &__icon {
-      border: 0;
-      background: transparent;
-      padding: 4px 6px;
+  &__button {
+    border: 0;
+    background: transparent;
+    padding: 4px 6px;
 
-      &:enabled {
-        cursor: pointer;
+    &:enabled {
+      cursor: pointer;
 
-        &:hover, &:focus {
-          svg {
-            g {
-              stroke: rgb(0, 120, 215);
-            }
-          }
-        }
-      }
-
-      &:disabled {
+      &:hover, &:focus {
         svg {
           g {
-            stroke: rgb(109, 109, 109);
+            stroke: rgb(0, 120, 215);
           }
         }
       }
+    }
 
+    &:disabled {
       svg {
-        display: inherit;
+        g {
+          stroke: rgb(109, 109, 109);
+        }
       }
     }
+
+    svg {
+      display: inherit;
+    }
   }
 
   &__calendar {

src/Divider.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Divider = ({ children }) => (
-  <span className="react-date-picker__button__input__divider">
+  <span className="react-date-picker__inputGroup__divider">
     {children}
   </span>
 );

src/__tests__/DateInput.jsx

@@ -23,7 +23,7 @@ const getKey = key => ({
 
 describe('DateInput', () => {
   const defaultProps = {
-    className: 'react-date-picker__button__input',
+    className: 'react-date-picker__inputGroup',
   };
 
   it('renders a native input and custom inputs', () => {
@@ -150,7 +150,7 @@ describe('DateInput', () => {
       <DateInput {...defaultProps} />
     );
 
-    const separators = component.find('.react-date-picker__button__input__divider');
+    const separators = component.find('.react-date-picker__inputGroup__divider');
 
     expect(separators).toHaveLength(2);
     expect(separators.at(0).text()).toBe('/');
@@ -164,7 +164,7 @@ describe('DateInput', () => {
       />
     );
 
-    const separators = component.find('.react-date-picker__button__input__divider');
+    const separators = component.find('.react-date-picker__inputGroup__divider');
     const customInputs = component.find('input[type="number"]');
 
     expect(separators).toHaveLength(customInputs.length - 1);
@@ -201,7 +201,7 @@ describe('DateInput', () => {
 
     expect(document.activeElement).toBe(dayInput.getDOMNode());
 
-    const separators = component.find('.react-date-picker__button__input__divider');
+    const separators = component.find('.react-date-picker__inputGroup__divider');
     const separatorKey = separators.at(0).text();
     dayInput.simulate('keydown', getKey(separatorKey));