feat: add input component prop size

nexxtway · Sep 27, 2022 · dc25d9b · dc25d9b
1 parent 6ad629e
commit dc25d9b
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 1 deletion.
diff --git a/src/components/Input/index.d.ts b/src/components/Input/index.d.ts
@@ -58,6 +58,7 @@ export interface InputProps extends BaseProps {
     id?: string;
     variant?: 'default' | 'shaded' | 'bare';
     autoComplete?: string;
+    size?: 'small' | 'medium' | 'large';
 }
 
 declare const Input: ComponentType<InputProps>;

diff --git a/src/components/Input/index.js b/src/components/Input/index.js
@@ -147,6 +147,8 @@ Input.propTypes = {
      *
      * For a detailed list, go to: https://www.w3.org/TR/WCAG21/#input-purposes */
     autoComplete: PropTypes.string,
+    /** The size of the input. Valid values are small, and large. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 Input.defaultProps = {
@@ -182,6 +184,7 @@ Input.defaultProps = {
     label: undefined,
     labelAlignment: 'center',
     hideLabel: false,
+    size: 'medium',
 };
 
 export default withReduxForm(Input);
diff --git a/src/components/Input/inputBase/index.js b/src/components/Input/inputBase/index.js
@@ -122,6 +122,7 @@ export default class InputBase extends Component {
             isCentered,
             iconPosition,
             variant,
+            size,
         } = this.props;
         const isReadOnly = !!(!disabled && readOnly);
         const isPassword = type === 'password';
@@ -143,6 +144,7 @@ export default class InputBase extends Component {
                             iconPosition={iconPosition}
                             readOnly={readOnly}
                             error={error}
+                            size={size}
                         >
                             {icon}
                         </StyledIconContainer>
@@ -178,6 +180,7 @@ export default class InputBase extends Component {
                         icon={icon}
                         error={error}
                         variant={variant}
+                        size={size}
                     />
                     <RenderIf isTrue={isPassword}>
                         <TogglePasswordButton
@@ -247,6 +250,7 @@ InputBase.propTypes = {
     autoComplete: PropTypes.string,
     labelAlignment: PropTypes.oneOf(['left', 'center', 'right']),
     hideLabel: PropTypes.bool,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 InputBase.defaultProps = {
@@ -282,4 +286,5 @@ InputBase.defaultProps = {
     autoComplete: 'on',
     labelAlignment: 'center',
     hideLabel: false,
+    size: 'medium',
 };
diff --git a/src/components/Input/readme.md b/src/components/Input/readme.md
@@ -462,6 +462,42 @@ const inputStyles = {
         />
     </div>
 ```
+
+# Inputs of different sizes
+##### If you need to resize your input, you can do so using the `size` prop.
+
+```js
+import React from 'react';
+import { Input } from 'react-rainbow-components';
+
+const inputStyles = {
+    width: 300,
+};
+
+    <div className="rainbow-align-content_center rainbow-p-vertical_x-large rainbow-flex_wrap">
+        <Input
+            className="rainbow-p-around_medium"
+            style={inputStyles}
+            label="Input Label"
+            placeholder="Placeholder text"
+            size="small"
+        />
+        <Input
+            className="rainbow-p-around_medium"
+            style={inputStyles}
+            label="Input Label"
+            placeholder="Placeholder text"
+        />
+        <Input
+            className="rainbow-p-around_medium"
+            style={inputStyles}
+            label="Input Label"
+            placeholder="Placeholder text"
+            size="large"
+        />
+    </div>
+```
+
 # Input with a set value
 ##### This example shows an input base with a value controlled through a state and an initial value set by default.
 

diff --git a/src/components/Input/styled/iconContainer.js b/src/components/Input/styled/iconContainer.js
@@ -18,6 +18,21 @@ const IconContainer = attachThemeAttrs(styled.span)`
         width: 17px !important;
         height: 17px !important;
         font-size: 17px !important;
+        ${props =>
+            props.size === 'large' &&
+            `
+            width: 20px !important;
+            height: 20px !important;
+            font-size: 20px !important;
+        `};
+    
+        ${props =>
+            props.size === 'small' &&
+            `
+            width: 14px !important;
+            height: 14px !important;
+            font-size: 14px !important;
+        `};
     }
 
     :not(button) {

diff --git a/src/components/Input/styled/input.js b/src/components/Input/styled/input.js
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
-import { FONT_SIZE_TEXT_LARGE } from '../../../styles/fontSizes';
+import {
+    FONT_SIZE_TEXT_LARGE,
+    FONT_SIZE_TEXT_MEDIUM,
+    FONT_SIZE_HEADING_MEDIUM,
+} from '../../../styles/fontSizes';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
 const hasLeftIcon = props => props.icon && props.iconPosition === 'left';
@@ -21,6 +25,24 @@ const Input = attachThemeAttrs(styled.input)`
     font-size: ${FONT_SIZE_TEXT_LARGE};
     box-sizing: border-box;
     margin: 0;
+    
+    ${props =>
+        props.size === 'large' &&
+        `
+            padding: 0 1.2rem;
+            line-height: 3.275rem;
+            font-size: ${FONT_SIZE_HEADING_MEDIUM};
+            height: 3.4rem;
+        `};
+
+    ${props =>
+        props.size === 'small' &&
+        `
+            padding: 0 0.8rem;
+            line-height: 1.775rem;
+            font-size: ${FONT_SIZE_TEXT_MEDIUM};
+            height: 1.9rem;
+        `};
 
     ::-moz-focus-inner {
         border: 0;
@@ -39,12 +61,34 @@ const Input = attachThemeAttrs(styled.input)`
         border: 2px solid ${props => props.palette.brand.main};
         background-color: ${props => props.palette.background.main};
         box-shadow: ${props => props.shadows.brand};
+        ${props =>
+            props.size === 'large' &&
+            `
+                padding: 0 1.125rem;
+            `};
+    
+        ${props =>
+            props.size === 'small' &&
+            `
+                padding: 0 0.75rem;
+            `};
     }
 
     ::placeholder {
         color: ${props => props.palette.text.header};
         font-weight: 500;
         font-size: ${FONT_SIZE_TEXT_LARGE};
+        ${props =>
+            props.size === 'large' &&
+            `
+                font-size: ${FONT_SIZE_HEADING_MEDIUM};
+            `};
+    
+        ${props =>
+            props.size === 'small' &&
+            `
+                font-size: ${FONT_SIZE_TEXT_MEDIUM};
+            `};
     }
 
     &[disabled] {