feat: add select input component prop size

nexxtway · Oct 8, 2022 · 1db36b3 · 1db36b3
1 parent e010800
commit 1db36b3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/src/components/Select/index.d.ts b/src/components/Select/index.d.ts
@@ -25,6 +25,7 @@ export interface SelectProps extends BaseProps {
     hideLabel?: boolean;
     tabIndex?: number | string;
     variant?: 'default' | 'shaded';
+    size?: 'small' | 'medium' | 'large';
 }
 
 declare const Select: React.ComponentType<SelectProps>;

diff --git a/src/components/Select/index.js b/src/components/Select/index.js
@@ -67,6 +67,7 @@ class Select extends Component {
             hideLabel,
             tabIndex,
             variant,
+            size,
         } = this.props;
 
         return (
@@ -93,6 +94,7 @@ class Select extends Component {
                         disabled={disabled}
                         variant={variant}
                         ref={this.selectRef}
+                        size={size}
                     >
                         <Options options={options} />
                     </StyledSelect>
@@ -157,6 +159,8 @@ Select.propTypes = {
     /** The variant changes the appearance of the Select. Accepted variants include default
      * and shaded. This value defaults to default. */
     variant: PropTypes.oneOf(['default', 'shaded']),
+    /** The size of the input. Valid values are small, medium, and large. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 Select.defaultProps = {
@@ -179,6 +183,7 @@ Select.defaultProps = {
     hideLabel: false,
     tabIndex: undefined,
     variant: 'default',
+    size: 'medium',
 };
 
 export default withReduxForm(Select);
diff --git a/src/components/Select/styled/select.js b/src/components/Select/styled/select.js
@@ -2,7 +2,11 @@ import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 import { PADDING_MEDIUM } from '../../../styles/paddings';
-import { FONT_SIZE_TEXT_LARGE } from '../../../styles/fontSizes';
+import {
+    FONT_SIZE_TEXT_LARGE,
+    FONT_SIZE_HEADING_MEDIUM,
+    FONT_SIZE_TEXT_MEDIUM,
+} from '../../../styles/fontSizes';
 
 const StyledSelect = attachThemeAttrs(styled.select)`
     font: inherit;
@@ -21,6 +25,24 @@ const StyledSelect = attachThemeAttrs(styled.select)`
     transition: all 0.1s linear;
     box-sizing: border-box;
 
+    ${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;
+        `};
+
     &::-ms-expand {
         display: none;
     }
@@ -33,7 +55,17 @@ const StyledSelect = attachThemeAttrs(styled.select)`
         padding-right: 1.7375rem;
         border: 0.125rem ${props => props.palette.brand.main} solid;
         box-shadow: ${props => props.shadows.brand};
-        line-height: 2rem;
+        ${props =>
+            props.size === 'large' &&
+            `
+                // padding: 0 1.125rem;
+            `};
+    
+        ${props =>
+            props.size === 'small' &&
+            `
+                // padding: 0 0.75rem;
+            `};
     }
 
     &[disabled] {
@@ -48,8 +80,8 @@ const StyledSelect = attachThemeAttrs(styled.select)`
             box-shadow: none;
             background-color: ${props => props.palette.action.active};
             border: 0.0626rem ${props => props.palette.border.divider} solid;
-            padding-left: ${PADDING_MEDIUM};
-            padding-right: 1.8rem;
+            // padding-left: ${PADDING_MEDIUM};
+            // padding-right: 1.8rem;
         }
     }