Skip to content

Commit 7b43f72

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #680 from ditadi/feat-headless-label
feat: headless label
2 parents e9bf6ce + 0e334a0 commit 7b43f72

File tree

15 files changed

+269
-34
lines changed

15 files changed

+269
-34
lines changed

‎apps/website/src/_state/component-statuses.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const statusByComponent: ComponentKitsStatuses = {
3737
Carousel: ComponentStatus.Draft,
3838
Collapsible: ComponentStatus.Beta,
3939
Combobox: ComponentStatus.Beta,
40+
Label: ComponentStatus.Draft,
4041
Modal: ComponentStatus.Beta,
4142
Pagination: ComponentStatus.Draft,
4243
Popover: ComponentStatus.Beta,

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { component$, useStylesScoped$ } from '@builder.io/qwik';
2+
import { Label } from '@qwik-ui/headless';
3+
import styles from '../snippets/label.css?inline';
4+
5+
export default component$(() => {
6+
useStylesScoped$(styles);
7+
8+
return (
9+
<div
10+
class="label-container"
11+
style={{
12+
display: 'flex',
13+
padding: '0 20px',
14+
flexWrap: 'wrap',
15+
gap: 15,
16+
alignItems: 'center',
17+
}}
18+
>
19+
<Label class="label" for="firstName">
20+
First name
21+
</Label>
22+
<input class="input" type="text" id="firstName" placeholder="John Doe" />
23+
</div>
24+
);
25+
});

‎apps/website/src/routes/docs/headless/label/index.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: Qwik UI | Progress
3+
---
4+
5+
import { statusByComponent } from '~/_state/component-statuses';
6+
import { FeatureList } from '~/components/feature-list/feature-list';
7+
import { Note } from '~/components/note/note';
8+
9+
<StatusBanner status={statusByComponent.headless.Label} />
10+
11+
# Label
12+
13+
Renders an accessible label associated with controls.
14+
15+
<Showcase name="hero" />
16+
17+
This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute.
18+
19+
For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.
20+
21+
## ✨ Features
22+
23+
<FeatureList
24+
features={[
25+
'Text selection is prevented when double clicking label.',
26+
'Supports nested controls.',
27+
]}
28+
/>
29+
30+
## Building blocks
31+
32+
<CodeSnippet name="building-blocks" />
33+
34+
### 🎨 Anatomy
35+
36+
<AnatomyTable
37+
propDescriptors={[
38+
{
39+
name: 'Label',
40+
description: 'The root container for the label',
41+
},
42+
]}
43+
/>
44+
45+
## Why use a headless label?
46+
47+
The Qwik UI headless label component keeps focus on the input when double clicking.
48+
49+
The native behavior will try to select and focus the text of the label. This is often times not the desired behavior.
50+
51+
{/* Not caught up to main, but would have an issues prop here from FeatureList */}
52+
53+
## Example CSS
54+
55+
<CodeSnippet name="label.css" />

‎apps/website/src/routes/docs/headless/label/snippets/building-blocks.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Label } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<div>
7+
<Label for="firstName">First name</Label>
8+
<input type="text" id="firstName" placeholder="John Doe" />
9+
</div>
10+
);
11+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* reset */
2+
input {
3+
all: unset;
4+
}
5+
6+
.label-container {
7+
font-size: 15px;
8+
font-weight: 500;
9+
line-height: 35px;
10+
color: hsl(var(--foreground));
11+
}
12+
13+
input {
14+
width: 200px;
15+
display: inline-flex;
16+
align-items: center;
17+
justify-content: center;
18+
border-radius: 4px;
19+
padding: 0 10px;
20+
height: 35px;
21+
font-size: 15px;
22+
line-height: 1;
23+
background-color: hsl(var(--background));
24+
box-shadow: 0 0 0 1px hsl(var(--foreground));
25+
}
26+
27+
input:focus {
28+
box-shadow: 0 0 0 2px hsl(var(--foreground));
29+
}
30+
31+
input::selection {
32+
background-color: var(--black-a9);
33+
color: white;
34+
}

‎apps/website/src/routes/docs/headless/menu.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
- [Carousel](/docs/headless/carousel)
1818
- [Collapsible](/docs/headless/collapsible)
1919
- [Combobox](/docs/headless/combobox)
20+
- [Label](/docs/headless/label)
2021
- [Modal](/docs/headless/modal)
2122
- [Pagination](/docs/headless/pagination)
2223
- [Popover](/docs/headless/popover)

‎apps/website/src/routes/docs/headless/progress/index.mdx‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,49 @@ Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/
2020
features={['Provides context for assistive technology to read the progress of a task.']}
2121
/>
2222

23-
<div class="mb-6 flex flex-col gap-2">
24-
[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/progress)
25-
26-
[Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
27-
28-
[Edit This Page 🗒️](<https://github.com/qwikifiers/qwik-ui/edit/main/apps/website/src/routes/docs/headless/(components)/progress/index.mdx>)
29-
30-
</div>
31-
3223
## Building blocks
3324

34-
```tsx
35-
import { component$ } from '@builder.io/qwik';
36-
import { Progress, ProgressIndicator } from '@qwik-ui/headless';
37-
38-
export default component$(() => {
39-
const progress = 30;
40-
41-
return (
42-
<Progress value={progress} class="progress">
43-
<ProgressIndicator
44-
class="progress-indicator"
45-
style={{
46-
transform: `translateX(-${100 - progress}%)`,
47-
}}
48-
/>
49-
</Progress>
50-
);
51-
});
52-
```
25+
<CodeSnippet name="building-blocks" />
26+
27+
{/* TODO: Match docs conventions with the select, collapsible, or label. */}
5328

5429
## Accessibility
5530

5631
Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
5732

5833
## API
5934

60-
### Root
35+
### Progress
36+
37+
Contains all of the progress parts.
38+
39+
<APITable
40+
propDescriptors={[
41+
{
42+
name: 'class',
43+
type: 'string',
44+
description: 'CSS classes to apply to the Progress.',
45+
},
46+
{
47+
name: 'value',
48+
type: 'number',
49+
description: 'The progress value.',
50+
},
51+
{
52+
name: 'max',
53+
type: 'number',
54+
description: 'The maximum progress value',
55+
},
56+
{
57+
name: 'getValueLabel',
58+
type: 'function',
59+
description:
60+
'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.',
61+
},
62+
]}
63+
/>
64+
65+
### Progress Indicator
6166

6267
Contains all of the progress parts.
6368

‎apps/website/src/routes/docs/headless/progress/snippets/building-blocks.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Progress, ProgressIndicator } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const progress = 30;
6+
7+
return (
8+
<Progress value={progress} class="progress">
9+
<ProgressIndicator
10+
class="progress-indicator"
11+
style={{
12+
transform: `translateX(-${100 - progress}%)`,
13+
}}
14+
/>
15+
</Progress>
16+
);
17+
});

‎apps/website/src/routes/docs/styled/label/index.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,22 @@ qwik-ui add label
2222

2323
```tsx
2424
import { component$, Slot, PropsOf } from '@builder.io/qwik';
25+
import { Label as QwikUILabel } from '@qwik-ui/headless';
2526
import { cn } from '@qwik-ui/utils';
2627

2728
type LabelProps = PropsOf<'label'>;
2829

2930
export const Label = component$<LabelProps>((props) => {
3031
return (
31-
<label
32+
<QwikUILabel
3233
{...props}
3334
class={cn(
3435
'font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
3536
props.class,
3637
)}
3738
>
3839
<Slot />
39-
</label>
40+
</QwikUILabel>
4041
);
4142
});
4243
```
@@ -48,5 +49,5 @@ import { Label } from '@/components/ui/label';
4849
```
4950

5051
```tsx
51-
<Label htmlFor="email">Your email address</Label>
52+
<Label for="email">Your email address</Label>
5253
```

‎packages/kit-headless/src/components/label/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './label';

0 commit comments

Comments
 (0)