Skip to content

Commit 005d71c

Browse files
sileskysilesky
committed
wip
1 parent ec58d81 commit 005d71c

File tree

14 files changed

+769
-4
lines changed

14 files changed

+769
-4
lines changed

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/App.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
import React from 'react'
22
import { TextField } from './TextField'
3+
import { Select, SelectItem } from './Select'
34

45
export const App: React.FC = () => {
56
return (
67
<main>
7-
<TextField label="some-text-field" />
8+
<div>
9+
<h2>TextField</h2>
10+
<TextField label="some-text-field" />
11+
</div>
12+
<div>
13+
<h2>Select</h2>
14+
<Select>
15+
<SelectItem>Chocolate</SelectItem>
16+
<SelectItem>Mint</SelectItem>
17+
<SelectItem>Strawberry</SelectItem>
18+
<SelectItem>Vanilla</SelectItem>
19+
</Select>
20+
</div>
21+
);
822
</main>
923
)
1024
}

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/Checkbox.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@import "./theme.css";
2+
3+
.react-aria-Checkbox {
4+
--selected-color: var(--highlight-background);
5+
--selected-color-pressed: var(--highlight-background-pressed);
6+
--checkmark-color: var(--highlight-foreground);
7+
8+
display: flex;
9+
align-items: center;
10+
gap: 0.571rem;
11+
font-size: 1.143rem;
12+
color: var(--text-color);
13+
forced-color-adjust: none;
14+
15+
.checkbox {
16+
width: 1.143rem;
17+
height: 1.143rem;
18+
border: 2px solid var(--border-color);
19+
border-radius: 4px;
20+
transition: all 200ms;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
26+
svg {
27+
width: 1rem;
28+
height: 1rem;
29+
fill: none;
30+
stroke: var(--checkmark-color);
31+
stroke-width: 3px;
32+
stroke-dasharray: 22px;
33+
stroke-dashoffset: 66;
34+
transition: all 200ms;
35+
}
36+
37+
&[data-pressed] .checkbox {
38+
border-color: var(--border-color-pressed);
39+
}
40+
41+
&[data-focus-visible] .checkbox {
42+
outline: 2px solid var(--focus-ring-color);
43+
outline-offset: 2px;
44+
}
45+
46+
&[data-selected],
47+
&[data-indeterminate] {
48+
.checkbox {
49+
border-color: var(--selected-color);
50+
background: var(--selected-color);
51+
}
52+
53+
&[data-pressed] .checkbox {
54+
border-color: var(--selected-color-pressed);
55+
background: var(--selected-color-pressed);
56+
}
57+
58+
svg {
59+
stroke-dashoffset: 44;
60+
}
61+
}
62+
63+
&[data-indeterminate] {
64+
& svg {
65+
stroke: none;
66+
fill: var(--checkmark-color);
67+
}
68+
}
69+
70+
&[data-invalid] {
71+
.checkbox {
72+
--checkmark-color: var(--gray-50);
73+
border-color: var(--invalid-color);
74+
}
75+
76+
&[data-pressed] .checkbox {
77+
border-color: var(--invalid-color-pressed);
78+
}
79+
80+
&[data-selected],
81+
&[data-indeterminate] {
82+
.checkbox {
83+
background: var(--invalid-color);
84+
}
85+
86+
&[data-pressed] .checkbox {
87+
background: var(--invalid-color-pressed);
88+
}
89+
}
90+
}
91+
92+
&[data-disabled] {
93+
color: var(--text-color-disabled);
94+
95+
.checkbox {
96+
border-color: var(--border-color-disabled);
97+
}
98+
}
99+
}

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/Checkbox.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Checkbox as AriaCheckbox, CheckboxProps } from 'react-aria-components'
2+
import React from 'react'
3+
import './Checkbox.css'
4+
5+
export function Checkbox({ children, ...props }: CheckboxProps) {
6+
return (
7+
<AriaCheckbox {...props}>
8+
{({ isIndeterminate }) => (
9+
<>
10+
<div className="checkbox">
11+
<svg viewBox="0 0 18 18" aria-hidden="true">
12+
{isIndeterminate ? (
13+
<rect x={1} y={7.5} width={15} height={3} />
14+
) : (
15+
<polyline points="1 9 7 14 15 4" />
16+
)}
17+
</svg>
18+
</div>
19+
{children}
20+
</>
21+
)}
22+
</AriaCheckbox>
23+
)
24+
}
25+
26+
export { Checkbox as MyCheckbox }

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/ComboBox.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
@import './Checkbox.css';
2+
@import './ListBox.css';
3+
@import './Popover.css';
4+
@import './Form.css';
5+
@import './Button.css';
6+
@import "./theme.css";
7+
8+
.react-aria-ComboBox {
9+
color: var(--text-color);
10+
11+
.react-aria-Input {
12+
margin: 0;
13+
font-size: 1.072rem;
14+
background: var(--field-background);
15+
color: var(--field-text-color);
16+
border: 1px solid var(--border-color);
17+
border-radius: 6px;
18+
padding: 0.286rem 2rem 0.286rem 0.571rem;
19+
vertical-align: middle;
20+
21+
&[data-focused] {
22+
outline: none;
23+
outline: 2px solid var(--focus-ring-color);
24+
outline-offset: -1px;
25+
}
26+
}
27+
28+
.react-aria-Button {
29+
background: var(--highlight-background);
30+
color: var(--highlight-foreground);
31+
forced-color-adjust: none;
32+
border-radius: 4px;
33+
border: none;
34+
margin-left: -1.714rem;
35+
width: 1.429rem;
36+
height: 1.429rem;
37+
padding: 0;
38+
font-size: 0.857rem;
39+
cursor: default;
40+
41+
&[data-pressed] {
42+
box-shadow: none;
43+
background: var(--highlight-background);
44+
}
45+
}
46+
}
47+
48+
.react-aria-Popover[data-trigger=ComboBox] {
49+
width: var(--trigger-width);
50+
51+
.react-aria-ListBox {
52+
display: block;
53+
width: unset;
54+
max-height: inherit;
55+
min-height: unset;
56+
border: none;
57+
58+
.react-aria-Header {
59+
padding-left: 1.571rem;
60+
}
61+
}
62+
63+
.react-aria-ListBoxItem {
64+
padding: 0.286rem 0.571rem 0.286rem 1.571rem;
65+
66+
&[data-focus-visible] {
67+
outline: none;
68+
}
69+
70+
&[data-selected] {
71+
font-weight: 600;
72+
background: unset;
73+
color: var(--text-color);
74+
75+
&::before {
76+
content: '✓';
77+
content: '✓' / '';
78+
alt: ' ';
79+
position: absolute;
80+
top: 4px;
81+
left: 4px;
82+
}
83+
}
84+
85+
&[data-focused],
86+
&[data-pressed] {
87+
background: var(--highlight-background);
88+
color: var(--highlight-foreground);
89+
}
90+
}
91+
}
92+
93+
.react-aria-ListBoxItem[href] {
94+
text-decoration: none;
95+
cursor: pointer;
96+
}
97+
98+
.react-aria-ComboBox {
99+
.react-aria-Input {
100+
&[data-disabled] {
101+
border-color: var(--border-color-disabled);
102+
}
103+
}
104+
105+
.react-aria-Button {
106+
&[data-disabled] {
107+
background: var(--border-color-disabled);
108+
}
109+
}
110+
111+
.react-aria-Input {
112+
&[data-invalid]:not([data-focused]) {
113+
border-color: var(--invalid-color);
114+
}
115+
}
116+
117+
.react-aria-FieldError {
118+
font-size: 12px;
119+
color: var(--invalid-color);
120+
}
121+
122+
[slot=description] {
123+
font-size: 12px;
124+
}
125+
}

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/ComboBox.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
Button,
3+
ComboBox as AriaComboBox,
4+
ComboBoxProps as AriaComboBoxProps,
5+
FieldError,
6+
Input,
7+
Label,
8+
ListBox,
9+
ListBoxItem,
10+
ListBoxItemProps,
11+
Popover,
12+
Text,
13+
ValidationResult,
14+
} from 'react-aria-components'
15+
import React from 'react'
16+
17+
import './ComboBox.css'
18+
19+
export interface ComboBoxProps<T extends object>
20+
extends Omit<AriaComboBoxProps<T>, 'children'> {
21+
label?: string
22+
description?: string | null
23+
errorMessage?: string | ((validation: ValidationResult) => string)
24+
children: React.ReactNode | ((item: T) => React.ReactNode)
25+
}
26+
27+
export function ComboBox<T extends object>({
28+
label,
29+
description,
30+
errorMessage,
31+
children,
32+
...props
33+
}: ComboBoxProps<T>) {
34+
return (
35+
<AriaComboBox {...props}>
36+
<Label>{label}</Label>
37+
<div className="my-combobox-container">
38+
<Input />
39+
<Button>▼</Button>
40+
</div>
41+
{description && <Text slot="description">{description}</Text>}
42+
<FieldError>{errorMessage}</FieldError>
43+
<Popover>
44+
<ListBox>{children}</ListBox>
45+
</Popover>
46+
</AriaComboBox>
47+
)
48+
}
49+
50+
export function ComboBoxItem(props: ListBoxItemProps) {
51+
return <ListBoxItem {...props} />
52+
}

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/Dialog.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import "./theme.css";
2+
@import './Button.css';
3+
@import './TextField.css';
4+
@import './Modal.css';
5+
6+
.react-aria-Dialog {
7+
outline: none;
8+
padding: 30px;
9+
max-height: inherit;
10+
box-sizing: border-box;
11+
overflow: auto;
12+
13+
.react-aria-Heading[slot=title] {
14+
line-height: 1em;
15+
margin-top: 0;
16+
}
17+
}

‎packages/signals/signals-integration-tests/src/tests/custom-elements/components/Dialog.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Dialog as RACDialog, DialogProps } from 'react-aria-components'
2+
import './Dialog.css'
3+
import React from 'react'
4+
5+
export function Dialog(props: DialogProps) {
6+
return <RACDialog {...props} />
7+
}

0 commit comments

Comments
 (0)