diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss index 26ee0b3d34f2..e0a467f2797c 100644 --- a/packages/components/src/components/select/_select.scss +++ b/packages/components/src/components/select/_select.scss @@ -88,6 +88,16 @@ } } + .#{$prefix}--select-input--sm { + height: rem(32px); + max-height: rem(32px); + } + + .#{$prefix}--select-input--xl { + height: rem(48px); + max-height: rem(48px); + } + .#{$prefix}--select--disabled .#{$prefix}--label, .#{$prefix}--select--disabled .#{$prefix}--form__helper-text { color: $disabled-02; diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js index a9bc969d34a4..19a8494ddfa4 100644 --- a/packages/react/src/components/Select/Select-story.js +++ b/packages/react/src/components/Select/Select-story.js @@ -9,12 +9,18 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, text } from '@storybook/addon-knobs'; +import { withKnobs, boolean, text, select } from '@storybook/addon-knobs'; import Select from '../Select'; import SelectItem from '../SelectItem'; import SelectItemGroup from '../SelectItemGroup'; import SelectSkeleton from '../Select/Select.Skeleton'; +const sizes = { + 'Extra large size (xl)': 'xl', + 'Regular size (lg)': '', + 'Small size (sm)': 'sm', +}; + const props = { select: () => ({ className: 'some-class', @@ -23,6 +29,7 @@ const props = { 'Put control in-line with label (inline in )', false), hideLabel: boolean('No label (hideLabel in )', false), diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js index a99a6874022a..27e19e717ffe 100644 --- a/packages/react/src/components/Select/Select.js +++ b/packages/react/src/components/Select/Select.js @@ -31,6 +31,7 @@ const Select = React.forwardRef(function Select( invalidText, helperText, light, + size, ...other }, ref @@ -47,6 +48,10 @@ const Select = React.forwardRef(function Select( [`${prefix}--visually-hidden`]: hideLabel, [`${prefix}--label--disabled`]: disabled, }); + const inputClasses = classNames({ + [`${prefix}--select-input`]: true, + [`${prefix}--select-input--${size}`]: size, + }); const errorId = `${id}-error-msg`; const error = invalid ? (
@@ -70,7 +75,7 @@ const Select = React.forwardRef(function Select( {...other} {...ariaProps} id={id} - className={`${prefix}--select-input`} + className={inputClasses} disabled={disabled || undefined} aria-invalid={invalid || undefined} ref={ref}> @@ -202,6 +207,11 @@ Select.propTypes = { * select since Pagination renders one for us. */ noLabel: PropTypes.bool, + + /** + * Specify the size of the Text Input. Currently supports either `sm` or `xl` as an option. + */ + size: PropTypes.oneOf(['sm', 'xl']), }; Select.defaultProps = { @@ -212,6 +222,7 @@ Select.defaultProps = { invalidText: '', helperText: '', light: false, + size: '', }; export default Select;