Merge pull request #324 from puppetlabs/PDS-448-input-updates

(PDS-448) add size and shape props to input component

Author: melcherry98

packages/react-components/source/react/library/input/Input.js

@@ -30,6 +30,10 @@ const propTypes = {
   placeholder: PropTypes.string,
   /** Alternate visual variation */
   simple: PropTypes.bool,
+  /** Size of the input */
+  size: PropTypes.oneOf(['medium', 'large']),
+  /** Shape of the input */
+  shape: PropTypes.oneOf(['squared', 'rounded']),
   /** Is the input disabled */
   disabled: PropTypes.bool,
   /** Form error, causing element to render red when present */
@@ -61,6 +65,8 @@ const defaultProps = {
   value: '',
   placeholder: '',
   simple: false,
+  size: 'medium',
+  shape: 'squared',
   disabled: false,
   error: false,
   icon: null,
@@ -91,6 +97,8 @@ const Input = ({
   name,
   type,
   simple,
+  size,
+  shape,
   error,
   icon,
   trailingIcon,
@@ -151,11 +159,16 @@ const Input = ({
         id={name}
         name={name}
         type={isMultiline ? undefined : type}
-        className={classNames('rc-input', {
-          'rc-input-error': error,
-          'rc-input-simple': simple,
-          'rc-input-multiline': isMultiline,
-        })}
+        className={classNames(
+          'rc-input',
+          `rc-input-${size}`,
+          `rc-input-${shape}`,
+          {
+            'rc-input-error': error,
+            'rc-input-simple': simple,
+            'rc-input-multiline': isMultiline,
+          },
+        )}
         ref={inputRef}
         onChange={e => onChange(parseValue(e.target.value), e)}
         {...otherProps}

packages/react-components/source/react/library/input/Input.md

@@ -77,6 +77,53 @@ Inputs are available in a "simple" visual variant, primarily used for in-site se
 />
 ```
 
+### Size and Shape
+
+Inputs are available in two different sizes, "medium" and "large" and two different shapes, "squared" and "rounded". "medium" and "squared" inputs are the default.
+
+```jsx
+<Input
+  name="input-ex7"
+  value={state.value}
+  placeholder="blueberry spicehead"
+  icon="scatter"
+  shape="squared"
+  size="medium"
+  style={{ marginBottom: 10 }}
+  onChange={value => setState({ value })}
+/>
+<Input
+  name="input-ex7"
+  value={state.value}
+  placeholder="princess rainbow"
+  icon="integration"
+  shape="rounded"
+  size="medium"
+  style={{ marginBottom: 10 }}
+  onChange={value => setState({ value })}
+/>
+<Input
+  name="input-ex8"
+  value={state.value}
+  placeholder="twinkle starchild"
+  icon="star"
+  size="large"
+  shape="squared"
+  style={{ marginBottom: 10 }}
+  onChange={value => setState({ value })}
+/>
+<Input
+  name="input-ex9"
+  value={state.value}
+  placeholder="juniper lightning bug"
+  icon="activity"
+  size="large"
+  shape="rounded"
+  style={{ marginBottom: 10 }}
+  onChange={value => setState({ value })}
+/>
+```
+
 ### Inputs with icons
 
 #### Leading icon

packages/react-components/source/scss/library/components/forms/_input.scss

@@ -46,6 +46,22 @@
   box-shadow: 0 2px 0 0 $puppet-b300 !important;
 }
 
+.rc-input-squared {
+  border-radius: $puppet-common-border-radius;
+}
+
+.rc-input-rounded {
+  border-radius: 80px;
+}
+
+.rc-input-medium {
+  padding: 5px 7px;
+}
+
+.rc-input-large {
+  padding: 10px;
+}
+
 .rc-input-multiline {
   height: $puppet-common-spacing-base * 18;
   resize: vertical;