fix(community-input-group): Update min, max width and enable a11ly cl…

…ose text
telus · Mar 20, 2020 · fcd9218 · fcd9218
1 parent e83d94a
commit fcd9218
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/InputGroup/InputGroup.jsx b/packages/InputGroup/InputGroup.jsx
@@ -15,6 +15,7 @@ import { InputGroupStyle, LabelStyle } from './style'
 const InputGroup = ({
   id,
   className,
+  closeA11yText,
   placeholder,
   defaultValue,
   buttonText,
@@ -60,7 +61,7 @@ const InputGroup = ({
         />
         {!!inputValue && (
           <Close
-            a11yText="Close"
+            a11yText={closeA11yText}
             onClick={e => {
               setInputValue('')
               inputRef.current.focus()
@@ -86,6 +87,10 @@ InputGroup.propTypes = {
    * The class name
    */
   className: PropTypes.string,
+  /**
+   * The close a11y test
+   */
+  closeA11yText: PropTypes.string,
   /**
    * The textbox placeholder
    */
@@ -127,6 +132,7 @@ InputGroup.propTypes = {
 InputGroup.defaultProps = {
   id: '',
   className: '',
+  closeA11yText: 'Close',
   placeholder: '',
   defaultValue: '',
   buttonText: '',

diff --git a/packages/InputGroup/style.js b/packages/InputGroup/style.js
@@ -13,6 +13,8 @@ export const InputGroupStyle = styled.div(({ hasValue }) => ({
   flexWrap: 'nowrap',
   height: '52px',
   width: '100%',
+  maxWidth: '768px',
+  minWidth: '384px',
   borderRadius: '5px',
   '&:hover': {
     boxShadow: '0 0 0 1px #4B286D',