diff --git a/lib/components/Button/Button.test.tsx b/lib/components/Button/Button.test.tsx
index c2f286c..e8de787 100644
--- a/lib/components/Button/Button.test.tsx
+++ b/lib/components/Button/Button.test.tsx
@@ -60,9 +60,8 @@ describe('on unknown kinds', () => {
})
})
-
it('should render a border', () => {
- const wrapper = Enzyme.shallow()
+ const wrapper = Enzyme.shallow()
expect(wrapper.find('button').find('span')).toHaveLength(1)
})
diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
index 6bd84b1..d545b89 100644
--- a/lib/components/Button/Button.tsx
+++ b/lib/components/Button/Button.tsx
@@ -149,6 +149,10 @@ const propTypes = {
* The type of the button, if element is set to "button".
*/
type: PropTypes.oneOf(['submit', 'reset', 'button']),
+ /**
+ * Does the button display a border?
+ */
+ border: PropTypes.bool,
}
type Props = PropTypes.InferProps
@@ -165,6 +169,7 @@ const Button = React.forwardRef {
@@ -175,7 +180,12 @@ const Button = React.forwardRef
-
+ {
+ border
+ && (
+
+ )
+ }
{stringify(children)}
)
diff --git a/lib/components/Select/Select.test.tsx b/lib/components/Select/Select.test.tsx
index 8e61a09..3e334d6 100644
--- a/lib/components/Select/Select.test.tsx
+++ b/lib/components/Select/Select.test.tsx
@@ -61,11 +61,11 @@ it('should render a hint for describing valid input values', () => {
const renderedLabel = stringify(label)
if (renderedLabel.length > 0) {
- expect(wrapper.find('div').children()).toHaveLength(5)
+ expect(wrapper.find('div').children()).toHaveLength(4)
- expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
+ expect(wrapper.find('div').childAt(2)).toHaveText(`(${renderedLabel})`)
} else {
- expect(wrapper.find('div').children()).toHaveLength(3)
+ expect(wrapper.find('div').children()).toHaveLength(2)
}
}),
)
diff --git a/lib/components/Select/Select.tsx b/lib/components/Select/Select.tsx
index 04340ac..25fca9f 100644
--- a/lib/components/Select/Select.tsx
+++ b/lib/components/Select/Select.tsx
@@ -198,6 +198,22 @@ const propTypes = {
* Name of the form field associated with this component.
*/
name: PropTypes.string,
+ /**
+ * Does the button display a border?
+ */
+ border: PropTypes.bool,
+ /**
+ * Event handler triggered when the component changes value.
+ */
+ onChange: PropTypes.func,
+ /**
+ * Event handler triggered when the component receives focus.
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Event handler triggered when the component loses focus.
+ */
+ onBlur: PropTypes.func,
}
type Props = PropTypes.InferProps
@@ -212,6 +228,11 @@ const Select = React.forwardRef(
disabled = false,
name,
children,
+ border = false,
+ onChange,
+ onFocus,
+ onBlur,
+ ...etcProps
},
ref,
) => {
@@ -221,7 +242,12 @@ const Select = React.forwardRef(
opacity: disabled ? 0.5 : undefined,
}}
>
-
+ {
+ border
+ && (
+
+ )
+ }
(
{stringify(label).length > 0 && ' '}
fc.property(fc.string(1, 20), (indicator) => {
const wrapper = Enzyme.shallow()
- expect(wrapper.find('div').childAt(2)).toHaveText(indicator)
+ expect(wrapper.find('div').childAt(1)).toHaveText(indicator)
}),
)
})
@@ -44,11 +44,11 @@ it('should render a hint for describing valid input values', () => {
const renderedLabel = stringify(label)
if (renderedLabel.length > 0) {
- expect(wrapper.find('div').children()).toHaveLength(4)
+ expect(wrapper.find('div').children()).toHaveLength(3)
- expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
+ expect(wrapper.find('div').childAt(2)).toHaveText(`(${renderedLabel})`)
} else {
- expect(wrapper.find('div').children()).toHaveLength(2)
+ expect(wrapper.find('div').children()).toHaveLength(1)
}
}),
)
diff --git a/lib/components/TextInput/TextInput.tsx b/lib/components/TextInput/TextInput.tsx
index bf011d5..27f8a55 100644
--- a/lib/components/TextInput/TextInput.tsx
+++ b/lib/components/TextInput/TextInput.tsx
@@ -234,6 +234,22 @@ const propTypes = {
* How many rows should the component display if it accepts multiline input?
*/
rows: PropTypes.number,
+ /**
+ * Does the button display a border?
+ */
+ border: PropTypes.bool,
+ /**
+ * Event handler triggered when the component changes value.
+ */
+ onChange: PropTypes.func,
+ /**
+ * Event handler triggered when the component receives focus.
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Event handler triggered when the component loses focus.
+ */
+ onBlur: PropTypes.func,
}
type Props = PropTypes.InferProps
@@ -250,6 +266,11 @@ const TextInput = React.forwardRef (
@@ -258,7 +279,12 @@ const TextInput = React.forwardRef
-
+ {
+ border
+ && (
+
+ )
+ }
0 && ' '}
{multiline && (