Skip to content

Commit b0d307b

Browse files
sileskysilesky
committed
wip
1 parent 230001c commit b0d307b

File tree

24 files changed

+2862
-189
lines changed

24 files changed

+2862
-189
lines changed

‎packages/signals/signals-integration-tests/.babelrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
]
7+
}

‎packages/signals/signals-integration-tests/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"build": "webpack",
1111
"test": "playwright test src/tests/signals-vanilla",
1212
"test:perf": "playwright test src/tests/performance",
13+
"test:custom": "playwright test src/tests/custom",
1314
"watch": "webpack -w",
1415
"lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
1516
"concurrently": "yarn run -T concurrently",
@@ -31,5 +32,8 @@
3132
"tslib": "^2.4.1",
3233
"webpack": "^5.76.0",
3334
"webpack-cli": "^4.8.0"
35+
},
36+
"dependencies": {
37+
"react-aria-components": "^1.5.0"
3438
}
3539
}

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@import "./theme.css";
2+
3+
.react-aria-Button {
4+
color: var(--text-color);
5+
background: var(--button-background);
6+
border: 1px solid var(--border-color);
7+
border-radius: 4px;
8+
appearance: none;
9+
vertical-align: middle;
10+
font-size: 1rem;
11+
text-align: center;
12+
margin: 0;
13+
outline: none;
14+
padding: 6px 10px;
15+
text-decoration: none;
16+
17+
&[data-pressed] {
18+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
19+
background: var(--button-background-pressed);
20+
border-color: var(--border-color-pressed);
21+
}
22+
23+
&[data-focus-visible] {
24+
outline: 2px solid var(--focus-ring-color);
25+
outline-offset: -1px;
26+
}
27+
28+
&[data-disabled]{
29+
border-color: var(--border-color-disabled);
30+
color: var(--text-color-disabled);
31+
}
32+
}
33+
34+
@keyframes toggle {
35+
from {
36+
opacity: 0;
37+
}
38+
39+
to {
40+
opacity: 1;
41+
}
42+
}

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

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

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import "./theme.css";
2+
@import './TextField.css';
3+
@import './Button.css';
4+
5+
.react-aria-Form {
6+
display: flex;
7+
flex-direction: column;
8+
align-items: start;
9+
gap: 8px;
10+
}
11+
12+
.react-aria-Form [role=alert] {
13+
border: 2px solid var(--invalid-color);
14+
background: var(--overlay-background);
15+
border-radius: 6px;
16+
padding: 12px;
17+
max-width: 250px;
18+
outline: none;
19+
20+
&:focus-visible {
21+
outline: 2px solid var(--focus-ring-color);
22+
outline-offset: 2px;
23+
}
24+
25+
h3 {
26+
margin-top: 0;
27+
}
28+
29+
p {
30+
margin-bottom: 0;
31+
}
32+
}

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

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

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import './Button.css';
2+
@import './Dialog.css';
3+
@import './Switch.css';
4+
@import "./theme.css";
5+
6+
.react-aria-Popover {
7+
--background-color: var(--overlay-background);
8+
9+
border: 1px solid var(--border-color);
10+
box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
11+
border-radius: 6px;
12+
background: var(--background-color);
13+
color: var(--text-color);
14+
outline: none;
15+
max-width: 250px;
16+
17+
.react-aria-OverlayArrow svg {
18+
display: block;
19+
fill: var(--background-color);
20+
stroke: var(--border-color);
21+
stroke-width: 1px;
22+
}
23+
24+
&[data-placement=top] {
25+
--origin: translateY(8px);
26+
27+
&:has(.react-aria-OverlayArrow) {
28+
margin-bottom: 6px;
29+
}
30+
}
31+
32+
&[data-placement=bottom] {
33+
--origin: translateY(-8px);
34+
35+
&:has(.react-aria-OverlayArrow) {
36+
margin-top: 6px;
37+
}
38+
39+
.react-aria-OverlayArrow svg {
40+
transform: rotate(180deg);
41+
}
42+
}
43+
44+
&[data-placement=right] {
45+
--origin: translateX(-8px);
46+
47+
&:has(.react-aria-OverlayArrow) {
48+
margin-left: 6px;
49+
}
50+
51+
.react-aria-OverlayArrow svg {
52+
transform: rotate(90deg);
53+
}
54+
}
55+
56+
&[data-placement=left] {
57+
--origin: translateX(8px);
58+
59+
&:has(.react-aria-OverlayArrow) {
60+
margin-right: 6px;
61+
}
62+
63+
.react-aria-OverlayArrow svg {
64+
transform: rotate(-90deg);
65+
}
66+
}
67+
68+
&[data-entering] {
69+
animation: popover-slide 200ms;
70+
}
71+
72+
&[data-exiting] {
73+
animation: popover-slide 200ms reverse ease-in;
74+
}
75+
}
76+
77+
@keyframes popover-slide {
78+
from {
79+
transform: var(--origin);
80+
opacity: 0;
81+
}
82+
83+
to {
84+
transform: translateY(0);
85+
opacity: 1;
86+
}
87+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import {
3+
Dialog,
4+
OverlayArrow,
5+
Popover as AriaPopover,
6+
PopoverProps as AriaPopoverProps,
7+
} from 'react-aria-components'
8+
9+
import './Popover.css'
10+
11+
export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
12+
children: React.ReactNode
13+
}
14+
15+
export function Popover({ children, ...props }: PopoverProps) {
16+
return (
17+
<AriaPopover {...props}>
18+
<OverlayArrow>
19+
<svg width={12} height={12} viewBox="0 0 12 12">
20+
<path d="M0 0 L6 6 L12 0" />
21+
</svg>
22+
</OverlayArrow>
23+
<Dialog>{children}</Dialog>
24+
</AriaPopover>
25+
)
26+
}

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

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

0 commit comments

Comments
 (0)