Sfoglia il codice sorgente

Add opt-in features

Button, Select, and TextInput has now opt-in borders.
tags/0.3.0
parent
commit
dd7de30957
7 ha cambiato i file con 86 aggiunte e 13 eliminazioni
  1. +1
    -2
      lib/components/Button/Button.test.tsx
  2. +11
    -1
      lib/components/Button/Button.tsx
  3. +3
    -3
      lib/components/Select/Select.test.tsx
  4. +31
    -1
      lib/components/Select/Select.tsx
  5. +4
    -4
      lib/components/TextInput/TextInput.test.tsx
  6. +35
    -1
      lib/components/TextInput/TextInput.tsx
  7. +1
    -1
      package.json

+ 1
- 2
lib/components/Button/Button.test.tsx Vedi File

@@ -60,9 +60,8 @@ describe('on unknown kinds', () => {
})
})


it('should render a border', () => {
const wrapper = Enzyme.shallow(<Button />)
const wrapper = Enzyme.shallow(<Button border />)
expect(wrapper.find('button').find('span')).toHaveLength(1)
})



+ 11
- 1
lib/components/Button/Button.tsx Vedi File

@@ -149,6 +149,10 @@ const propTypes = {
* The type of the button, if element is set to "button".
*/
type: PropTypes.oneOf<ButtonType>(['submit', 'reset', 'button']),
/**
* Does the button display a border?
*/
border: PropTypes.bool,
}

type Props = PropTypes.InferProps<typeof propTypes>
@@ -165,6 +169,7 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
target,
rel,
type = 'button',
border = false,
},
ref,
) => {
@@ -175,7 +180,12 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
}
const buttonContent = (
<React.Fragment>
<Border />
{
border
&& (
<Border />
)
}
{stringify(children)}
</React.Fragment>
)


+ 3
- 3
lib/components/Select/Select.test.tsx Vedi File

@@ -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)
}
}),
)


+ 31
- 1
lib/components/Select/Select.tsx Vedi File

@@ -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<typeof propTypes>
@@ -212,6 +228,11 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
disabled = false,
name,
children,
border = false,
onChange,
onFocus,
onBlur,
...etcProps
},
ref,
) => {
@@ -221,7 +242,12 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
opacity: disabled ? 0.5 : undefined,
}}
>
<Border />
{
border
&& (
<Border />
)
}
<CaptureArea>
<LabelWrapper
style={{
@@ -235,6 +261,10 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
</LabelWrapper>
{stringify(label).length > 0 && ' '}
<Input
{...etcProps}
onChange={onChange as React.ChangeEventHandler}
onFocus={onFocus as React.FocusEventHandler}
onBlur={onBlur as React.FocusEventHandler}
ref={ref}
disabled={disabled!}
multiple={multiple!}


+ 4
- 4
lib/components/TextInput/TextInput.test.tsx Vedi File

@@ -31,7 +31,7 @@ it('should render an indicator as additional description for the content', () =>
fc.property(fc.string(1, 20), (indicator) => {
const wrapper = Enzyme.shallow(<TextInput indicator={indicator} />)

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)
}
}),
)


+ 35
- 1
lib/components/TextInput/TextInput.tsx Vedi File

@@ -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<typeof propTypes>
@@ -250,6 +266,11 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
autoResize = false,
placeholder = '',
rows = 3,
border = false,
onChange,
onFocus,
onBlur,
...etcProps
},
ref,
) => (
@@ -258,7 +279,12 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
opacity: disabled ? 0.5 : undefined,
}}
>
<Border />
{
border
&& (
<Border />
)
}
<CaptureArea>
<LabelWrapper
style={{
@@ -273,6 +299,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
{stringify(label).length > 0 && ' '}
{multiline && (
<TextArea
{...etcProps}
onChange={onChange as React.ChangeEventHandler}
onFocus={onFocus as React.FocusEventHandler}
onBlur={onBlur as React.FocusEventHandler}
placeholder={placeholder!}
ref={ref as React.Ref<HTMLTextAreaElement>}
disabled={disabled!}
@@ -289,6 +319,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
)}
{!multiline && (
<Input
{...etcProps}
onChange={onChange as React.ChangeEventHandler}
onFocus={onFocus as React.FocusEventHandler}
onBlur={onBlur as React.FocusEventHandler}
placeholder={placeholder!}
ref={ref as React.Ref<HTMLInputElement>}
disabled={disabled!}


+ 1
- 1
package.json Vedi File

@@ -1,6 +1,6 @@
{
"name": "@tesseract-design/react-common",
"version": "0.0.2",
"version": "0.1.0",
"description": "Common front-end components for Web using the Tesseract design system, written in React.",
"directories": {
"lib": "dist"


Caricamento…
Annulla
Salva