Skip to content

Commit 941ff92

Browse files
y-corey-core
authored
Merge branch 'main' into propagate-disabled
2 parents 890aae2 + 65cf601 commit 941ff92

File tree

104 files changed

+734
-560
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+734
-560
lines changed

‎.changeset/fast-actors-report.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
'@qwik-ui/headless': minor
3+
---
4+
5+
## Bundling improvements
6+
7+
We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well.
8+
9+
## Dot notation
10+
11+
The biggest change of v0.4 is the addition of dot notation to the API. Also known as "namespaced components".
12+
13+
This includes our largest breaking change to Qwik UI yet. We hope it is the largest ever, and want to ensure a much smoother transition going forward. Before we can do that, we need to make sure the API's are consistent across the library.
14+
15+
**The component API's have been updated to use dot notation.**
16+
17+
We believe that dot notation will significantly improve the developer experience. Below are some of the benefits of dot notation.
18+
19+
### Simple Imports
20+
21+
In previous versions, imports needed to be defined for each component.
22+
23+
```tsx
24+
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
25+
```
26+
27+
While this is trivial with three components, it can be a pain with the more "pieces" a component has.
28+
29+
```tsx
30+
import {
31+
Combobox,
32+
ComboboxControl,
33+
ComboboxIcon,
34+
ComboboxInput,
35+
ComboboxLabel,
36+
ComboboxListbox,
37+
ComboboxOption,
38+
ComboboxPopover,
39+
ComboboxTrigger,
40+
ResolvedOption,
41+
} from '@qwik-ui/headless';
42+
```
43+
44+
In v0.4, the new import syntax is the following:
45+
46+
```tsx
47+
import { Collapsible, Combobox } from '@qwik-ui/headless';
48+
```
49+
50+
### TypeScript Autocomplete
51+
52+
The searchability of available components has also been improved. You can now use the autocomplete feature to find a specific sub-component.
53+
54+
![component autocomplete](image-1.png)
55+
56+
### Improved legibility
57+
58+
For longer component names, the dot notation is arguably more legible. For example, `Combobox.Listbox` vs. `ComboboxListbox`.
59+
60+
### Migration Cheat Sheet
61+
62+
As an easier way to migrate, we've created a mini cheat sheet below. If you have any questions, or need help migrating, don't hesistate to reach out to us on Discord.
63+
64+
**Components named <Component>, like <Accordion> are now <Accordion.Root />**
65+
66+
> Except for <Modal> and <Popover>, which is now <Modal.Panel /> and <Popover.Panel /> respectively.
67+
68+
With new root components, the **main props** have been moved to the root component. (for example, props previously on the Popover and Modal panels).
69+
70+
Ex:
71+
72+
```
73+
<Modal bind:show> -> <Modal.Root bind:show>
74+
```
75+
76+
For further reference, read the [RFC](https://github.com/qwikifiers/qwik-ui/issues/700) on dot notation.
77+
78+
### Popover Refactor
79+
80+
Based on feedback we have received from the community, we have also improved the developer experience of the Popover component.
81+
82+
```tsx
83+
import { component$ } from '@builder.io/qwik';
84+
import { Popover } from '@qwik-ui/headless';
85+
86+
export default component$(() => {
87+
return (
88+
<Popover.Root gutter={4}>
89+
<Popover.Trigger class="popover-trigger">Click me</Popover.Trigger>
90+
<Popover.Panel class="popover-panel">
91+
I am anchored to the popover trigger!
92+
</Popover.Panel>
93+
</Popover.Root>
94+
);
95+
});
96+
```
97+
98+
- By default, the popover is now anchored to its trigger. The API surface should also be simpler.
99+
100+
- A new `hover` prop has also been introduced on the root, useful for things like tooltips.
101+
102+
- Programmatically toggling the popover is still possible, make sure to put the same id on the `<Popover.Root />` that is passed to the `usePopover` hook. Refer to the docs for more info.
103+
104+
#### <Popover.Root />
105+
106+
There is a new root compomnent. Configurable props have been moved to the root component.
107+
108+
#### Deprecated Props
109+
110+
- You no longer need to style the popover open state with `:popover-open`. Instead, use the `data-open` attribute for it to style across browsers.
111+
112+
```css
113+
.popover-panel[data-open] {
114+
background: green;
115+
}
116+
```
117+
118+
- You no longer need to pass a `popovertarget` prop to the `<Popover.Trigger />` component. Same with an id prop on the `<Popover.Panel />` component.
119+
120+
- The `placement` prop has been deprecated, and combined with the `floating` prop.
121+
122+
For example, `floating="right` will now float the popover to the right.
123+
124+
#### Opting out of the floating library
125+
126+
To opt-out of the floating library, set the `floating={false}` on the `<Popover.Root />` component.
127+
128+
May 2024, Chrome will be adding support for the CSS anchor API. This will allow us to remove the floating UI library entirely when that gains more support across browsers.
129+
130+
### Docs Improvements
131+
132+
A couple of docs improvements have been made:
133+
134+
- The docs have been updated to reflect the new API.
135+
- The headless docs no longer include styles in the examples. There is an example CSS section in each component page. If you do not find one, please open an issue on GitHub.
136+
- Part of the Accordion and Modal docs have been simplified
137+
- The examples now include icons from the `qwikest/icons` package rather than an abstract component you could not use.

‎.changeset/image-1.png

109 KB
Loading

‎.changeset/silent-yaks-crash.md

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,52 @@
22
'@qwik-ui/headless': minor
33
---
44

5-
**feat**: select now has a multi-select feature!
5+
### Select API Changes
66

7-
To opt-in to the multi-select mode, set the `multiple` prop to `true`. Please refer to the `Multiple Selections` section in the docs for more information.
7+
- `<SelectOption />` has been renamed to `<Select.ItemLabel />`.
8+
- `<Select.Value />` has been renamed to `<Select.DisplayText />`.
9+
10+
### `<Select.Item />`
11+
12+
A new component that allows for customize of the list item.
13+
14+
#### `<Select.ItemIndicator />`
815

9-
**refactor**: `<SelectOption />` has been replaced with `<Select.ItemLabel />`.
16+
This component is used to render an icon or other visual element that is displayed next to the `<Select.ItemLabel />` whenever an item is selected.
1017

11-
The previous API did not allow for customization of list items. The new API introduces a new component:
18+
### Multi-select
19+
20+
To opt-in to the multi-select mode, set the `multiple` prop to `true`. Please refer to the `Multiple Selections` section in the docs for more information.
21+
22+
The previous API did not allow for customization of list items. The new API introduces a couple new components:
1223

1324
```tsx
1425
<Select.Item>
1526
<Select.ItemLabel>My Display Option!</Select.ItemLabel>
27+
<Select.ItemIndicator>
28+
{/* anything goes here */}
29+
</Select.ItemIndicator>
1630
<Select.Item>
1731
```
1832

19-
You can now put anything you'd like in your `<Select.Item />`, just like a list item!
33+
You can now put anything you'd like in your `<Select.Item />`, just like a normal li tag!
34+
35+
There is a new reactive signal called `bind:displayText` that can be used to read the value of the display text. There is a new docs example that shows this in action with item pills.
36+
37+
#### bind syntax
38+
39+
We have been exploring more with the `bind` syntax. `bind:x` is a convention based on `bind:value` and `bind:checked`, where a signal is passed and two way data binding is enabled.
40+
41+
> This is much more performant than previous two way data binding, thanks to signals.
42+
43+
As a general note:
44+
45+
name -> initial value
46+
47+
anything that does not start with `bind:` is a static value.
48+
49+
bind:name -> reactive signal
2050

21-
There is also another new component called `<Select.ItemIndicator />`. This component is used to render an icon or other visual element that is displayed next to the `<Select.ItemLabel />` whenever an item is selected.
51+
anything that starts with `bind:` is a reactive signal.
2252

23-
**docs**: The docs have been updated to reflect the new API.
53+
If you find yourself curious to explore the bind syntax more, try typing `bind:` on a root component in Qwik UI, you should see a list of available things you can reactively customize!

‎apps/website/src/routes/docs/headless/collapsible/examples/animation.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Collapsible } from '@qwik-ui/headless';
3-
import styles from '../snippets/collapsible.css?inline';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -10,11 +9,14 @@ export default component$(() => {
109
<Collapsible.Root class="collapsible">
1110
<Collapsible.Trigger class="collapsible-trigger">
1211
<span>Trigger</span>
13-
<SVG class="collapsible-transition" />
12+
<LuChevronDown class="collapsible-transition" />
1413
</Collapsible.Trigger>
1514
<Collapsible.Content class="collapsible-animation collapsible-content">
1615
<p class="collapsible-content-outline">Content</p>
1716
</Collapsible.Content>
1817
</Collapsible.Root>
1918
);
2019
});
20+
21+
// internal
22+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$, useSignal } from '@builder.io/qwik';
2-
import styles from '../snippets/collapsible.css?inline';
32
import { Collapsible } from '@qwik-ui/headless';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -16,7 +15,7 @@ export default component$(() => {
1615
<Collapsible.Root class="collapsible">
1716
<Collapsible.Trigger class="collapsible-trigger">
1817
<span>Trigger</span>
19-
<SVG />
18+
<LuChevronDown />
2019
</Collapsible.Trigger>
2120
<Collapsible.Content class="collapsible-content collapsible-content-outline ">
2221
Content
@@ -26,3 +25,6 @@ export default component$(() => {
2625
</>
2726
);
2827
});
28+
29+
// internal
30+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/examples/disabled.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Collapsible } from '@qwik-ui/headless';
3-
import styles from '../snippets/collapsible.css?inline';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -10,11 +9,14 @@ export default component$(() => {
109
<Collapsible.Root class="collapsible" disabled>
1110
<Collapsible.Trigger class="collapsible-trigger">
1211
<span>Trigger</span>
13-
<SVG />
12+
<LuChevronDown />
1413
</Collapsible.Trigger>
1514
<Collapsible.Content class="collapsible-content collapsible-content-outline ">
1615
Content
1716
</Collapsible.Content>
1817
</Collapsible.Root>
1918
);
2019
});
20+
21+
// internal
22+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Collapsible } from '@qwik-ui/headless';
3-
import styles from '../snippets/collapsible.css?inline';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -10,11 +9,14 @@ export default component$(() => {
109
<Collapsible.Root class="collapsible">
1110
<Collapsible.Trigger class="collapsible-trigger">
1211
<span>Trigger</span>
13-
<SVG />
12+
<LuChevronDown />
1413
</Collapsible.Trigger>
1514
<Collapsible.Content class="collapsible-content collapsible-content-outline ">
1615
Content
1716
</Collapsible.Content>
1817
</Collapsible.Root>
1918
);
2019
});
20+
21+
// internal
22+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$, useSignal, $ } from '@builder.io/qwik';
22
import { Collapsible } from '@qwik-ui/headless';
3-
import styles from '../snippets/collapsible.css?inline';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -22,7 +21,7 @@ export default component$(() => {
2221
<Collapsible.Root class="collapsible" onOpenChange$={handleOpenChange$}>
2322
<Collapsible.Trigger class="collapsible-trigger">
2423
<span>Trigger</span>
25-
<SVG />
24+
<LuChevronDown />
2625
</Collapsible.Trigger>
2726
<Collapsible.Content class="collapsible-content collapsible-content-outline ">
2827
Content
@@ -31,3 +30,6 @@ export default component$(() => {
3130
</>
3231
);
3332
});
33+
34+
// internal
35+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/examples/open.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Collapsible } from '@qwik-ui/headless';
3-
import styles from '../snippets/collapsible.css?inline';
4-
import SVG from './svg';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
54

65
export default component$(() => {
76
useStyles$(styles);
@@ -10,11 +9,14 @@ export default component$(() => {
109
<Collapsible.Root class="collapsible" open>
1110
<Collapsible.Trigger class="collapsible-trigger">
1211
<span>Trigger</span>
13-
<SVG />
12+
<LuChevronDown />
1413
</Collapsible.Trigger>
1514
<Collapsible.Content class="collapsible-content collapsible-content-outline ">
1615
Content
1716
</Collapsible.Content>
1817
</Collapsible.Root>
1918
);
2019
});
20+
21+
// internal
22+
import styles from '../snippets/collapsible.css?inline';

‎apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.collapsible-trigger {
66
width: 100%;
7-
border: 2px dotted hsla(var(--primary) / 1);
7+
border: 2px dotted hsla(var(--foreground) / 1);
88
border-radius: calc(var(--border-radius) / 2);
99
padding: 0.5rem;
1010
display: flex;
@@ -20,13 +20,24 @@
2020
background-color: hsla(var(--primary) / 0.08);
2121
}
2222

23+
.collapsible-trigger svg {
24+
width: 1.25rem;
25+
height: 1.25rem;
26+
}
27+
28+
.collapsible-trigger[data-open] {
29+
border-bottom: none;
30+
}
31+
2332
.collapsible-trigger[data-open] svg {
2433
transform: rotate(180deg);
2534
}
2635

2736
.collapsible-content {
2837
width: 100%;
29-
background-color: hsl(var(--background));
38+
border: 2px dotted hsla(var(--primary) / 1);
39+
font-weight: 500;
40+
background: hsla(var(--primary) / 0.2);
3041
border-radius: calc(var(--border-radius) / 2);
3142
max-width: var(--select-width);
3243
color: hsl(var(--foreground));

0 commit comments

Comments
 (0)