diff --git a/docs/content/TextInput.md b/docs/content/TextInput.md index 4742b24de80..5207883add2 100644 --- a/docs/content/TextInput.md +++ b/docs/content/TextInput.md @@ -27,4 +27,6 @@ Native `` attributes are forwarded to the underlying React `input` compon | block | Boolean | | Adds `display: block` to element | | variant | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. | width | String or Number | | Set the width of the input | +| maxWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input | +| minWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input | | icon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the right edge. | diff --git a/index.d.ts b/index.d.ts index 44689f8d24a..9f67ffb0bfa 100644 --- a/index.d.ts +++ b/index.d.ts @@ -269,6 +269,8 @@ declare module '@primer/components' { export interface TextInputProps extends CommonProps, StyledSystem.WidthProps, + StyledSystem.MaxWidthProps, + StyledSystem.MinWidthProps, Omit, 'color' | 'size' | 'width'> { block?: boolean icon?: React.ReactElement diff --git a/src/TextInput.js b/src/TextInput.js index f8fa325704c..2f77cd7c9ac 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -5,7 +5,7 @@ import systemPropTypes from '@styled-system/prop-types' import {omit, pick} from '@styled-system/props' import styled, {css} from 'styled-components' import Octicon from './StyledOcticon' -import {variant, width} from 'styled-system' +import {variant, width, minWidth, maxWidth} from 'styled-system' import {COMMON, get} from './constants' import theme from './theme' @@ -120,6 +120,8 @@ const Wrapper = styled.span` } ${COMMON} ${width} + ${minWidth} + ${maxWidth} ${sizeVariants} ` @@ -127,6 +129,8 @@ TextInput.defaultProps = {theme} TextInput.propTypes = { block: PropTypes.bool, + maxWidth: systemPropTypes.layout.maxWidth, + minWidth: systemPropTypes.layout.minWidth, variant: PropTypes.oneOf(['small', 'large']), ...COMMON.propTypes, width: systemPropTypes.layout.width