diff --git a/.gitignore b/.gitignore
index 4f41954..d5e3b11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,3 +68,4 @@ typings/
dist/
.gitignore
.docz/
+/docz.config.js
diff --git a/lib/components/Checkbox/Checkbox.mdx b/lib/components/Checkbox/Checkbox.mdx
index 2b1c198..81d5bd9 100644
--- a/lib/components/Checkbox/Checkbox.mdx
+++ b/lib/components/Checkbox/Checkbox.mdx
@@ -21,5 +21,5 @@ Component for values that have an on/off state.
## See Also
-- Select for a similar component suitable for selecting more values.
-- Radio Button for a similar component on selecting a single value among very few choices.
+- Select for a similar component suitable for selecting more values.
+- RadioButton for a similar component on selecting a single value among very few choices.
diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 5654574..d32047a 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -119,6 +119,10 @@ const propTypes = {
* Short textual description indicating the nature of the component's value.
*/
label: PropTypes.any,
+ /**
+ * Name of the form field associated with this component.
+ */
+ name: PropTypes.string,
}
type Props = PropTypes.InferProps
@@ -129,10 +133,10 @@ type Props = PropTypes.InferProps
* @see {@link RadioButton} for a similar component on selecting a single value among very few choices.
* @type {React.ComponentType<{readonly label?: string} & React.ClassAttributes>}
*/
-const Checkbox = React.forwardRef(({ label = '', ...etcProps }, ref) => (
+const Checkbox = React.forwardRef(({ label = '', name, }, ref) => (
-
+
diff --git a/lib/components/Icon/Icon.tsx b/lib/components/Icon/Icon.tsx
index 1dd47f9..a94627b 100644
--- a/lib/components/Icon/Icon.tsx
+++ b/lib/components/Icon/Icon.tsx
@@ -35,18 +35,10 @@ const propTypes = {
* Size of the icon. This controls both the width and the height.
*/
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- /**
- * CSS style of the icon. For icon dimensions, use `size` instead.
- */
- style: PropTypes.object,
/**
* Describe of what the component represents.
*/
label: PropTypes.string,
- /**
- * Class name used for styling.
- */
- className: PropTypes.string,
}
type Props = PropTypes.InferProps
@@ -55,10 +47,7 @@ const Icon: React.FC = ({
name,
weight = '0.125rem',
size = '1.5rem',
- style = {},
label = name,
- className = '',
- ...etcProps
}) => {
const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon
@@ -68,9 +57,8 @@ const Icon: React.FC = ({
if (TheIcon !== null) {
return (
-
+
-
-
-
-
-
+
+
+
+
+
+
+
@@ -26,5 +28,5 @@ Component for values which are to be selected from a few list of options.
## See Also
-- Checkbox for a similar component on selecting values among very few choices.
-- Select for a similar component suitable for selecting more values.
+- Checkbox for a similar component on selecting values among very few choices.
+- Select for a similar component suitable for selecting more values.
diff --git a/lib/components/RadioButton/RadioButton.tsx b/lib/components/RadioButton/RadioButton.tsx
index a780ede..d6f8676 100644
--- a/lib/components/RadioButton/RadioButton.tsx
+++ b/lib/components/RadioButton/RadioButton.tsx
@@ -133,12 +133,12 @@ type Props = PropTypes.InferProps
*/
const RadioButton = React.forwardRef(
(
- { label = '', name, ...etcProps },
+ { label = '', name, },
ref
) => (
-
+
diff --git a/lib/components/Select/Select.mdx b/lib/components/Select/Select.mdx
index bbf7473..35a1a80 100644
--- a/lib/components/Select/Select.mdx
+++ b/lib/components/Select/Select.mdx
@@ -12,14 +12,34 @@ import Select from './Select'
Component for selecting values from a larger number of options.
-
+
## Props
+## Usage Notes
+
+The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
+To use the component together with layouts, see [TextInput](./textinput) for examples. Both `Select` and
+`TextInput` have similar strategies on usage with layouts.
+
## See Also
-- Checkbox for a similar component on selecting values among very few choices.
-- Radio Button for a similar component on selecting a single value among very few choices.
+- Checkbox for a similar component on selecting values among very few choices.
+- RadioButton for a similar component on selecting a single value among very few choices.
diff --git a/lib/components/Select/Select.tsx b/lib/components/Select/Select.tsx
index fedf997..04340ac 100644
--- a/lib/components/Select/Select.tsx
+++ b/lib/components/Select/Select.tsx
@@ -87,8 +87,9 @@ const Input = styled('select')({
margin: 0,
font: 'inherit',
minHeight: '4rem',
- minWidth: '8rem',
+ minWidth: '3rem',
maxWidth: '100%',
+ width: '100%',
zIndex: 1,
cursor: 'pointer',
transitionProperty: 'background-color, color',
@@ -177,10 +178,6 @@ const propTypes = {
* Short textual description indicating the nature of the component's value.
*/
label: PropTypes.any,
- /**
- * Class name for the component, used for styling.
- */
- className: PropTypes.string,
/**
* Short textual description as guidelines for valid input values.
*/
@@ -198,9 +195,9 @@ const propTypes = {
*/
disabled: PropTypes.bool,
/**
- * CSS styles.
+ * Name of the form field associated with this component.
*/
- style: PropTypes.object,
+ name: PropTypes.string,
}
type Props = PropTypes.InferProps
@@ -209,13 +206,12 @@ const Select = React.forwardRef(
(
{
label = '',
- className = '',
hint = '',
size = 'medium',
multiple = false,
disabled = false,
- style = {},
- ...etcProps
+ name,
+ children,
},
ref,
) => {
@@ -226,7 +222,7 @@ const Select = React.forwardRef(
}}
>
-
+ (
{stringify(label).length > 0 && ' '}
(
paddingBottom: VERTICAL_PADDING_SIZES[size!],
paddingRight: !multiple ? MIN_HEIGHTS[size!] : '1rem',
}}
- />
+ >
+ {children}
+
{stringify(hint).length > 0 && ' '}
{stringify(hint).length > 0 && (
diff --git a/lib/components/Slider/Slider.mdx b/lib/components/Slider/Slider.mdx
index 01150fe..3668c29 100644
--- a/lib/components/Slider/Slider.mdx
+++ b/lib/components/Slider/Slider.mdx
@@ -21,3 +21,7 @@ the component falls back into the original `` element.
## Props
+
+## See Also
+
+- [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.
diff --git a/lib/components/Slider/Slider.tsx b/lib/components/Slider/Slider.tsx
index 8990f58..3b6239c 100644
--- a/lib/components/Slider/Slider.tsx
+++ b/lib/components/Slider/Slider.tsx
@@ -200,10 +200,6 @@ const propTypes = {
* CSS size for the component length.
*/
length: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- /**
- * Class name used for styling.
- */
- className: PropTypes.string,
/**
* Is the component active?
*/
@@ -222,18 +218,14 @@ type Props = PropTypes.InferProps
* @param {'vertical' | 'horizontal'} [orientation] - The component orientation.
* @param {*} [label] - Short textual description indicating the nature of the component's value.
* @param {string | number} [length] - CSS size for the component length.
- * @param {string} [className] - Class name used for styling.
* @param {boolean} [disabled] - Is the component active?
- * @param {object} etcProps - The component props.
* @returns {React.ReactElement} The component elements.
*/
const Slider: React.FC = ({
orientation = 'horizontal',
label = '',
length = '16rem',
- className = '',
disabled = false,
- ...etcProps
}) => {
const [isClient, setIsClient] = React.useState(false)
@@ -250,10 +242,17 @@ const Slider: React.FC = ({
const perpendicularTransform = orientation === 'horizontal' ? 'translateY' : 'translateX'
+ const customBaseProps: any = {
+ orientation,
+ }
+
+ const customFallbackProps: any = {
+ orient: orientation,
+ }
+
if (isClient) {
return (
= ({
= ({
return (
= ({
{stringify(label).length > 0 && ' '}
+
+## Usage Notes
+
+The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
+To use the component together with layouts, see the following examples.
+
+### Inline
+
+The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
+act as guide to the user on how long the expected input values are.
+
+
+
+
+
+### Grid
+
+It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
+element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
+some content that is best displayed outside the component instead of putting in the `hint` prop.
+
+
+
+
+
+## See Also
+
+- Select for a graphically-similar component suitable for selecting more values.
diff --git a/lib/components/TextInput/TextInput.tsx b/lib/components/TextInput/TextInput.tsx
index 92d8e42..bf011d5 100644
--- a/lib/components/TextInput/TextInput.tsx
+++ b/lib/components/TextInput/TextInput.tsx
@@ -124,6 +124,7 @@ const Input = styled('input')({
minHeight: '4rem',
minWidth: '8rem',
maxWidth: '100%',
+ width: '100%',
zIndex: 1,
transitionProperty: 'background-color, color',
':focus': {
@@ -151,7 +152,7 @@ const TextArea = styled('textarea')({
margin: 0,
font: 'inherit',
minHeight: '4rem',
- minWidth: '16rem',
+ minWidth: '3rem',
maxWidth: '100%',
zIndex: 1,
transitionProperty: 'background-color, color',
@@ -201,10 +202,6 @@ const propTypes = {
* Short textual description indicating the nature of the component's value.
*/
label: PropTypes.any,
- /**
- * Class name for the component, used for styling.
- */
- className: PropTypes.string,
/**
* Short textual description as guidelines for valid input values.
*/
@@ -233,6 +230,10 @@ const propTypes = {
* Placeholder of the component when there is no value.
*/
placeholder: PropTypes.string,
+ /**
+ * How many rows should the component display if it accepts multiline input?
+ */
+ rows: PropTypes.number,
}
type Props = PropTypes.InferProps
@@ -241,7 +242,6 @@ const TextInput = React.forwardRef (
@@ -258,7 +259,7 @@ const TextInput = React.forwardRef
-
+ }
disabled={disabled!}
+ rows={rows!}
style={{
+ height: `calc(${MIN_HEIGHTS[size!]} * ${rows})`,
fontSize: INPUT_FONT_SIZES[size!],
minHeight: MIN_HEIGHTS[size!],
paddingTop: VERTICAL_PADDING_SIZES[size!],