Browse Source

Add docs content, adjust component props and metrics

Force TextInput and Select to be `block`. Also, removed props regarding styling.
tags/0.3.0
TheoryOfNekomata 4 years ago
parent
commit
ca631e30b7
12 changed files with 137 additions and 69 deletions
  1. +1
    -0
      .gitignore
  2. +2
    -2
      lib/components/Checkbox/Checkbox.mdx
  3. +6
    -2
      lib/components/Checkbox/Checkbox.tsx
  4. +1
    -13
      lib/components/Icon/Icon.tsx
  5. +12
    -10
      lib/components/RadioButton/RadioButton.mdx
  6. +2
    -2
      lib/components/RadioButton/RadioButton.tsx
  7. +23
    -3
      lib/components/Select/Select.mdx
  8. +11
    -14
      lib/components/Select/Select.tsx
  9. +4
    -0
      lib/components/Slider/Slider.mdx
  10. +10
    -12
      lib/components/Slider/Slider.tsx
  11. +55
    -4
      lib/components/TextInput/TextInput.mdx
  12. +10
    -7
      lib/components/TextInput/TextInput.tsx

+ 1
- 0
.gitignore View File

@@ -68,3 +68,4 @@ typings/
dist/
.gitignore
.docz/
/docz.config.js

+ 2
- 2
lib/components/Checkbox/Checkbox.mdx View File

@@ -21,5 +21,5 @@ Component for values that have an on/off state.

## See Also

- <Link to="../lib-components-select-select">Select</Link> for a similar component suitable for selecting more values.
- <Link to="../lib-components-radio-button-radio-button">Radio Button</Link> for a similar component on selecting a single value among very few choices.
- <Link to="../select">Select</Link> for a similar component suitable for selecting more values.
- <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.

+ 6
- 2
lib/components/Checkbox/Checkbox.tsx View File

@@ -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<typeof propTypes>
@@ -129,10 +133,10 @@ type Props = PropTypes.InferProps<typeof propTypes>
* @see {@link RadioButton} for a similar component on selecting a single value among very few choices.
* @type {React.ComponentType<{readonly label?: string} & React.ClassAttributes<unknown>>}
*/
const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ label = '', ...etcProps }, ref) => (
const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ label = '', name, }, ref) => (
<Base>
<CaptureArea>
<Input {...etcProps} ref={ref} type="checkbox" />
<Input ref={ref} type="checkbox" name={name!} />
<IndicatorWrapper>
<Border />
<Indicator>


+ 1
- 13
lib/components/Icon/Icon.tsx View File

@@ -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<typeof propTypes>
@@ -55,10 +47,7 @@ const Icon: React.FC<Props> = ({
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<Props> = ({

if (TheIcon !== null) {
return (
<span {...etcProps} style={style!}>
<span>
<StyledIcon
className={className!}
as={TheIcon}
size={undefined}
color={undefined}


+ 12
- 10
lib/components/RadioButton/RadioButton.mdx View File

@@ -1,22 +1,24 @@
---
name: Radio Button
route: /components/radio-button
name: RadioButton
route: /components/radiobutton
menu: Components
---

import { Playground, Props, Link } from 'docz'
import RadioButton from './RadioButton'

# Radio Button
# RadioButton

Component for values which are to be selected from a few list of options.

<Playground>
<div style={{ margin: '1rem 0' }}>
<RadioButton name="flavor" label="Chocolate" />
</div>
<div style={{ margin: '1rem 0' }}>
<RadioButton name="flavor" label="Vanilla" />
<div style={{ display: 'grid', gap: '1rem', }}>
<div>
<RadioButton name="flavor" label="Chocolate" />
</div>
<div>
<RadioButton name="flavor" label="Vanilla" />
</div>
</div>
</Playground>

@@ -26,5 +28,5 @@ Component for values which are to be selected from a few list of options.

## See Also

- <Link to="../lib-components-checkbox-checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
- <Link to="../lib-components-select-select">Select</Link> for a similar component suitable for selecting more values.
- <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
- <Link to="../select">Select</Link> for a similar component suitable for selecting more values.

+ 2
- 2
lib/components/RadioButton/RadioButton.tsx View File

@@ -133,12 +133,12 @@ type Props = PropTypes.InferProps<typeof propTypes>
*/
const RadioButton = React.forwardRef<HTMLInputElement, Props>(
(
{ label = '', name, ...etcProps },
{ label = '', name, },
ref
) => (
<Base>
<CaptureArea>
<Input {...etcProps} ref={ref} name={name} type="radio" />
<Input ref={ref} name={name} type="radio" />
<IndicatorWrapper>
<Border />
<Indicator />


+ 23
- 3
lib/components/Select/Select.mdx View File

@@ -12,14 +12,34 @@ import Select from './Select'
Component for selecting values from a larger number of options.

<Playground>
<Select />
<Select>
<optgroup
label="Fruits"
>
<option value="mango">Mango</option>
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
</optgroup>
<optgroup
label="Classic"
>
<option value="chocolate">Chocolate</option>
<option value="vanilla">Vanilla</option>
</optgroup>
</Select>
</Playground>

## Props

<Props of={Select} />

## 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

- <Link to="../lib-components-checkbox-checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
- <Link to="../lib-components-radio-button-radio-button">Radio Button</Link> for a similar component on selecting a single value among very few choices.
- <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
- <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.

+ 11
- 14
lib/components/Select/Select.tsx View File

@@ -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<typeof propTypes>
@@ -209,13 +206,12 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
(
{
label = '',
className = '',
hint = '',
size = 'medium',
multiple = false,
disabled = false,
style = {},
...etcProps
name,
children,
},
ref,
) => {
@@ -226,7 +222,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
}}
>
<Border />
<CaptureArea className={className!}>
<CaptureArea>
<LabelWrapper
style={{
paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
@@ -239,12 +235,11 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
</LabelWrapper>
{stringify(label).length > 0 && ' '}
<Input
{...etcProps}
ref={ref}
disabled={disabled!}
multiple={multiple!}
name={name!}
style={{
...style,
verticalAlign: 'top',
fontSize: INPUT_FONT_SIZES[size!],
height: multiple ? undefined : MIN_HEIGHTS[size!],
@@ -254,7 +249,9 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
paddingBottom: VERTICAL_PADDING_SIZES[size!],
paddingRight: !multiple ? MIN_HEIGHTS[size!] : '1rem',
}}
/>
>
{children}
</Input>
</CaptureArea>
{stringify(hint).length > 0 && ' '}
{stringify(hint).length > 0 && (


+ 4
- 0
lib/components/Slider/Slider.mdx View File

@@ -21,3 +21,7 @@ the component falls back into the original `<input type="range">` element.
## Props

<Props of={Slider} />

## See Also

- [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.

+ 10
- 12
lib/components/Slider/Slider.tsx View File

@@ -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<typeof propTypes>
* @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<Props> = ({
orientation = 'horizontal',
label = '',
length = '16rem',
className = '',
disabled = false,
...etcProps
}) => {
const [isClient, setIsClient] = React.useState(false)

@@ -250,10 +242,17 @@ const Slider: React.FC<Props> = ({

const perpendicularTransform = orientation === 'horizontal' ? 'translateY' : 'translateX'

const customBaseProps: any = {
orientation,
}

const customFallbackProps: any = {
orient: orientation,
}

if (isClient) {
return (
<Wrapper
className={className!}
style={{
opacity: disabled ? 0.5 : undefined,
[parallelDimension]: length!,
@@ -288,7 +287,7 @@ const Slider: React.FC<Props> = ({
</TransformWrapper>
</SizingWrapper>
<Base
{...etcProps}
{...customBaseProps}
disabled={disabled!}
style={{
[parallelDimension]: length,
@@ -319,7 +318,6 @@ const Slider: React.FC<Props> = ({

return (
<Wrapper
className={className!}
style={{
opacity: disabled ? 0.5 : undefined,
[parallelDimension]: length!,
@@ -358,7 +356,7 @@ const Slider: React.FC<Props> = ({
</LabelWrapper>
{stringify(label).length > 0 && ' '}
<FallbackSlider
{...etcProps}
{...customFallbackProps}
style={{
width: length!,
}}


+ 55
- 4
lib/components/TextInput/TextInput.mdx View File

@@ -1,13 +1,13 @@
---
name: Text Input
route: /components/text-input
name: TextInput
route: /components/textinput
menu: Components
---

import { Playground, Props } from 'docz'
import { Playground, Props, Link } from 'docz'
import TextInput from './TextInput'

# Text Input
# TextInput

Component for inputting textual values.

@@ -18,3 +18,54 @@ Component for inputting textual values.
## Props

<Props of={TextInput} />

## 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.

<Playground>
<form>
I am <span style={{ display: 'inline-block', width: '16rem', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', }}><TextInput label="Address" hint="city, state and country" /></span>.
</form>
</Playground>

### 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.

<Playground>
<form
style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
>
<div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
<TextInput label="Address line 1" hint="unit/house number, building" />
</div>
<div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
<TextInput label="Address line 2" hint="street, area" />
</div>
<div>
<TextInput size="large" label="City/Town" />
</div>
<div>
<TextInput size="large" label="State/Province" />
</div>
<div>
<TextInput size="large" label="Country" hint="abbreviations are accepted" />
<small>
Consult the <a href="#">fees table</a> for shipping fee details.
</small>
</div>
</form>
</Playground>

## See Also

- <Link to="../select">Select</Link> for a graphically-similar component suitable for selecting more values.

+ 10
- 7
lib/components/TextInput/TextInput.tsx View File

@@ -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<typeof propTypes>
@@ -241,7 +242,6 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
(
{
label = '',
className = '',
hint = '',
indicator = null,
size = 'medium',
@@ -249,6 +249,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
disabled = false,
autoResize = false,
placeholder = '',
rows = 3,
},
ref,
) => (
@@ -258,7 +259,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
}}
>
<Border />
<CaptureArea className={className!}>
<CaptureArea>
<LabelWrapper
style={{
paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
@@ -275,7 +276,9 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
placeholder={placeholder!}
ref={ref as React.Ref<HTMLTextAreaElement>}
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!],


Loading…
Cancel
Save