Skip to content

Commit 835ba24

Browse files
fabien-mlfabien-ml
committed
feat(textfield): add primitive
1 parent 608555e commit 835ba24

18 files changed

+682
-120
lines changed

Diff for: ‎packages/textfield/CHANGELOG.md

Whitespace-only changes.

Diff for: ‎packages/textfield/LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Solid Aria Working Group
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎packages/textfield/README.md

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<p>
2+
<img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=TextField" alt="Solid Aria - TextField">
3+
</p>
4+
5+
# @solid-aria/textfield
6+
7+
[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
8+
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
9+
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/textfield?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/textfield)
10+
[![version](https://img.shields.io/npm/v/@solid-aria/textfield?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/textfield)
11+
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)
12+
13+
TextFields are text inputs that allow users to input custom text entries with a keyboard.
14+
15+
- [`createTextField`](#createtextfield) - Provides the behavior and accessibility implementation for a text field.
16+
17+
## Installation
18+
19+
```bash
20+
npm install @solid-aria/textfield
21+
# or
22+
yarn add @solid-aria/textfield
23+
# or
24+
pnpm add @solid-aria/textfield
25+
```
26+
27+
## `createTextField`
28+
29+
### Features
30+
31+
Text fields can be built with `<input>` or `<textarea>` and `<label>` elements, but you must manually ensure that they are semantically connected via ids for accessibility. `createTextField` helps automate this, and handle other accessibility features while allowing for custom styling.
32+
33+
- Built with a native `<input>` or `<textarea>` element
34+
- Visual and ARIA labeling support
35+
- Change, clipboard, composition, selection, and input event support
36+
- Required and invalid states exposed to assistive technology via ARIA
37+
- Support for description and error message help text linked to the input via ARIA
38+
39+
### How to use it
40+
41+
```tsx
42+
import { AriaTextFieldProps, createTextField } from "@solid-aria/textfield";
43+
44+
function TextField(props: AriaTextFieldProps<"input">) {
45+
let ref: HTMLInputElement | undefined;
46+
47+
const { labelProps, inputProps, descriptionProps, errorMessageProps } = createTextField(
48+
props,
49+
() => ref
50+
);
51+
52+
return (
53+
<div style={{ display: "flex", "flex-direction": "column", width: "200px" }}>
54+
<label {...labelProps}>{props.label}</label>
55+
<input {...inputProps} ref={ref} />
56+
<Show when={props.description}>
57+
<div {...descriptionProps} style={{ "font-size": "12px" }}>
58+
{props.description}
59+
</div>
60+
</Show>
61+
<Show when={props.errorMessage}>
62+
<div {...errorMessageProps} style={{ color: "red", "font-size": "12px" }}>
63+
{props.errorMessage}
64+
</div>
65+
</Show>
66+
</div>
67+
);
68+
}
69+
70+
function App() {
71+
return (
72+
<>
73+
<TextField label="Email" />
74+
<TextField
75+
label="Email"
76+
description="Enter an email for us to contact you about your order."
77+
/>
78+
<TextField label="Email" errorMessage="Please enter a valid email address." />
79+
</>
80+
);
81+
}
82+
```
83+
84+
### Internationalization
85+
86+
#### RTL
87+
88+
In right-to-left languages, text fields should be mirrored. Ensure that your CSS accounts for this.
89+
90+
## Changelog
91+
92+
All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.

Diff for: ‎packages/textfield/dev/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<title>Solid App</title>
8+
</head>
9+
<body>
10+
<noscript>You need to enable JavaScript to run this app.</noscript>
11+
<div id="root"></div>
12+
<script src="./index.tsx" type="module"></script>
13+
</body>
14+
</html>

Diff for: ‎packages/textfield/dev/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { render } from "solid-js/web";
2+
3+
function App() {
4+
return <div>Hello Solid Aria!</div>;
5+
}
6+
7+
render(() => <App />, document.getElementById("root") as HTMLDivElement);

Diff for: ‎packages/textfield/dev/vite.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { viteConfig } from "../../../configs/vite.config";
2+
3+
export default viteConfig;

Diff for: ‎packages/textfield/jest.config.cjs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const baseJest = require("../../configs/jest.config.cjs");
2+
3+
module.exports = {
4+
...baseJest
5+
};

Diff for: ‎packages/textfield/package.json

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@solid-aria/textfield",
3+
"version": "0.0.0",
4+
"private": false,
5+
"description": "Primitives for building accessible text field component.",
6+
"keywords": [
7+
"solid",
8+
"aria",
9+
"headless",
10+
"design",
11+
"system",
12+
"components"
13+
],
14+
"homepage": "https://github.com/solidjs-community/solid-aria/tree/main/packages/textfield#readme",
15+
"bugs": {
16+
"url": "https://github.com/solidjs-community/solid-aria/issues"
17+
},
18+
"repository": {
19+
"type": "git",
20+
"url": "git+https://github.com/solidjs-community/solid-aria.git"
21+
},
22+
"license": "MIT",
23+
"author": "Fabien Marie-Louise <[email protected]>",
24+
"contributors": [],
25+
"sideEffects": false,
26+
"type": "module",
27+
"main": "dist/index.cjs",
28+
"module": "dist/index.js",
29+
"types": "dist/index.d.ts",
30+
"files": [
31+
"dist"
32+
],
33+
"scripts": {
34+
"build": "tsup",
35+
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
36+
"dev": "vite serve dev --host",
37+
"test": "jest --passWithNoTests",
38+
"test:watch": "jest --watch --passWithNoTests",
39+
"typecheck": "tsc --noEmit"
40+
},
41+
"dependencies": {
42+
"@solid-aria/focus": "^0.1.4",
43+
"@solid-aria/label": "^0.1.4",
44+
"@solid-aria/types": "^0.1.2",
45+
"@solid-aria/utils": "^0.1.2",
46+
"@solid-primitives/props": "^2.1.7",
47+
"@solid-primitives/utils": "^2.1.0"
48+
},
49+
"devDependencies": {
50+
"solid-js": "^1.4.4"
51+
},
52+
"peerDependencies": {
53+
"solid-js": "^1.4.4"
54+
},
55+
"publishConfig": {
56+
"access": "public"
57+
},
58+
"primitive": {
59+
"name": "textfield",
60+
"stage": 0,
61+
"list": [],
62+
"category": ""
63+
}
64+
}

0 commit comments

Comments
 (0)