feat(input): add counter example (#3096)

Author: engai

ui/components/input/base/_index.scss

@@ -61,6 +61,28 @@
     }
   }
 
+  /**
+   * @summary Modifier for number input with increment and decrement buttons
+   *
+   * @selector .slds-input_counter
+   * @restrict .slds-input, input
+   * @modifier
+   */
+  &_counter {
+    text-align: center;
+    padding: 0 $spacing-xx-large;
+
+    &[type='number'] {
+      appearance: textfield;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+
   /**
    * Used to apply an input size to another element thats a non input
    * Because sometimes I need elements the same height as inputs
@@ -287,3 +309,27 @@
     color: $color-text-error;
   }
 }
+
+/**
+ * @summary Positions decrement button within counter input field
+ *
+ * @selector .slds-input__button_decrement
+ * @restrict button
+ */
+.slds-input__button_decrement {
+  position: absolute;
+  bottom: 0.25rem;
+  left: 0.75rem;
+}
+
+/**
+ * @summary Positions increment button within counter input field
+ *
+ * @selector .slds-input__button_increment
+ * @restrict button
+ */
+.slds-input__button_increment {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.75rem;
+}

ui/components/input/base/example.jsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import SvgIcon from '../../../shared/svg-icon';
+import ButtonIcon from '../../button-icons/';
 import classNames from 'classnames';
 import { SpinnerContainer, Spinner } from '../../spinners/base/example';
 
@@ -369,5 +370,36 @@ export let examples = [
         </div>
       </div>
     )
+  },
+  {
+    id: 'counter',
+    label: 'Counter',
+    element: (
+      <FormElement className="slds-text-align_center">
+        <ButtonIcon
+          className="slds-button_icon-small slds-input__button_decrement"
+          symbol="error"
+          assistiveText={'Decrement counter'}
+          title={'Decrement counter'}
+        />
+        <FormElementLabel id="user-count-01" className="slds-m-right_none">
+          Input Label
+        </FormElementLabel>
+        <FormElementControl>
+          <Input
+            className="slds-input_counter"
+            id="user-count-01"
+            type="number"
+            placeholder={1}
+          />
+        </FormElementControl>
+        <ButtonIcon
+          className="slds-button_icon-small slds-input__button_increment"
+          symbol="new"
+          assistiveText={'Increment counter'}
+          title={'Increment counter'}
+        />
+      </FormElement>
+    )
   }
 ];