Skip to content

Commit

Permalink
update text-fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@lerte
lerte committed Dec 1, 2024
1 parent dfa8361 commit fc77d7e
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 70 deletions.
53 changes: 27 additions & 26 deletions apps/docs/content/components/text-fields.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,33 @@ description: Text fields let users enter text into a UI

### TextField

| Name | Type | Default | Description |
| -------------------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isInvalid` | `boolean` | — | Whether the value is invalid. |
| `isDisabled` | `boolean` | — | Whether the input is disabled. |
| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean` | — | Whether user input is required on the input before form submission. |
| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |
| `value` | `string` | — | The current value (controlled). |
| `defaultValue` | `string` | — | The default value (uncontrolled). |
| `autoComplete` | `string` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `maxLength` | `number` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |
| `minLength` | `number` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |
| `pattern` | `string` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |
| `type` | `text` `search` `url` `tel` `email` `password` `string & {}` | 'text' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |
| `inputMode` | `none` `text` `tel` `url` `email` `numeric` `decimal` `search` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |
| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `validationBehavior` | `native` `aria` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
| `children` | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
| `variant` | `filled` `outlined` | 'filled' | |
| `suffixText` | `string` | — | |
| `prefixText` | `string` | — | |
| `leadingIcon` | `React.ReactNode` | — | |
| `trailingIcon` | `React.ReactNode` | — | |
| Name | Type | Default | Description |
| -------------------- | ----------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label` | `string` | — | Input label |
| `isInvalid` | `boolean` | — | Whether the value is invalid. |
| `isDisabled` | `boolean` | — | Whether the input is disabled. |
| `isReadOnly` | `boolean` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean` | — | Whether user input is required on the input before form submission. |
| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
| `autoFocus` | `boolean` | — | Whether the element should receive focus on render. |
| `value` | `string` | — | The current value (controlled). |
| `defaultValue` | `string` | — | The default value (uncontrolled). |
| `autoComplete` | `string` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `maxLength` | `number` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |
| `minLength` | `number` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |
| `pattern` | `string` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |
| `type` | `text` `textarea` `search` `url` `tel` `email` `password` `string & {}` | 'text' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |
| `inputMode` | `none` `text` `tel` `url` `email` `numeric` `decimal` `search` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |
| `name` | `string` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `validationBehavior` | `native` `aria` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
| `children` | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| `style` | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |
| `variant` | `filled` `outlined` | 'filled' | |
| `suffixText` | `string` | — | |
| `prefixText` | `string` | — | |
| `leadingIcon` | `React.ReactNode` | — | |
| `trailingIcon` | `React.ReactNode` | — | |

## Events

Expand Down
45 changes: 25 additions & 20 deletions apps/docs/src/usages/text-fields.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Icon, IconButton, TextField } from 'actify'
import { useEffect, useState } from 'react'

import { useState } from 'react'

export default () => {
const [showPassword, setShowPassword] = useState(false)
Expand All @@ -8,25 +9,29 @@ export default () => {
}

return (
<form className="grid gap-2 grid-cols-1 sm:grid-cols-2">
<TextField
label="Email"
suffixText="@actifyjs.com"
leadingIcon={<Icon>email</Icon>}
/>
<>
<form className="grid gap-2 grid-cols-1 sm:grid-cols-2">
<TextField
label="Email"
suffixText="@actifyjs.com"
leadingIcon={<Icon>email</Icon>}
/>

<TextField
label="Password"
variant="outlined"
autoComplete="off"
type={showPassword ? 'text' : 'password'}
leadingIcon={<Icon>lock</Icon>}
trailingIcon={
<IconButton onPress={handleClick}>
<Icon>{showPassword ? 'visibility_off' : 'visibility'}</Icon>
</IconButton>
}
/>
</form>
<TextField
label="Password"
variant="outlined"
autoComplete="off"
type={showPassword ? 'text' : 'password'}
leadingIcon={<Icon>lock</Icon>}
trailingIcon={
<IconButton onPress={handleClick}>
<Icon>{showPassword ? 'visibility_off' : 'visibility'}</Icon>
</IconButton>
}
/>
</form>
<TextField label="textarea" type="textarea" />
<TextField variant="outlined" label="textarea" type="textarea" />
</>
)
}
3 changes: 2 additions & 1 deletion packages/actify/src/components/Field/styles/field.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,7 +813,8 @@
display: flex;
padding-top: var(--_top-space);
padding-bottom: var(--_bottom-space);
& > input {
& > input,
& > textarea {
all: inherit;
padding: 0;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/actify/src/components/Table/TableHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { TableHeaderProps } from 'react-stately'

const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {
return <>{props.children}</>
}

export { TableHeader }
Loading

0 comments on commit fc77d7e

Please sign in to comment.