feat: headless label

Author: ditadi

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

@@ -37,6 +37,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Draft,
     Collapsible: ComponentStatus.Draft,
     Combobox: ComponentStatus.Beta,
+    Label: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,

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

@@ -0,0 +1,31 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Label } from '@qwik-ui/headless';
+import styles from './label.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        padding: '0 20px',
+        flexWrap: 'wrap',
+        gap: 15,
+        alignItems: 'center',
+      }}
+      data-testid="root"
+    >
+      <Label class="LabelRoot" for="firstName" data-testid="label">
+        First name
+      </Label>
+      <input
+        class="Input"
+        type="text"
+        id="firstName"
+        placeholder="John Doe"
+        data-testid="input"
+      />
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/label/examples/label.css

@@ -0,0 +1,32 @@
+/* reset */
+input {
+  all: unset;
+}
+
+.LabelRoot {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 35px;
+  color: black;
+}
+
+.Input {
+  width: 200px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 35px;
+  font-size: 15px;
+  line-height: 1;
+  background-color: white;
+  box-shadow: 0 0 0 1px black;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px black;
+}
+.Input::selection {
+  background-color: var(--black-a9);
+  color: white;
+}

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

@@ -0,0 +1,64 @@
+---
+title: Qwik UI | Progress
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+import { FeatureList } from '~/components/feature-list/feature-list';
+import { Note } from '~/components/note/note';
+
+<StatusBanner status={statusByComponent.headless.Label} />
+
+# Label
+
+Renders an accessible label associated with controls.
+
+<Showcase name="hero" />
+
+### Features
+
+<FeatureList
+  features={[
+    'Text selection is prevented when double clicking label.',
+    'Supports nested controls.',
+  ]}
+/>
+
+<div class="mb-6 flex flex-col gap-2">
+[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/label)
+
+[Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
+
+[Edit This Page 🗒️](<https://github.com/qwikifiers/qwik-ui/edit/main/apps/website/src/routes/docs/headless/(components)/label/index.mdx>)
+
+</div>
+
+## Building blocks
+
+```tsx
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Label } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <div>
+      <Label for="firstName">First name</Label>
+      <input type="text" id="firstName" placeholder="John Doe" />
+    </div>
+  );
+});
+```
+
+## Accessibility
+
+This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.
+
+### 🎨 Anatomy
+
+<AnatomyTable
+  propDescriptors={[
+    {
+      name: 'Label',
+      description: 'The root container for the label',
+    },
+  ]}
+/>

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

@@ -17,6 +17,7 @@
 - [Carousel](/docs/headless/carousel)
 - [Collapsible](/docs/headless/collapsible)
 - [Combobox](/docs/headless/combobox)
+- [Label](/docs/headless/label)
 - [Modal](/docs/headless/modal)
 - [Pagination](/docs/headless/pagination)
 - [Popover](/docs/headless/popover)

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

@@ -57,7 +57,37 @@ Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/p
 
 ## API
 
-### Root
+### Progress
+
+Contains all of the progress parts.
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'class',
+      type: 'string',
+      description: 'CSS classes to apply to the Progress.',
+    },
+    {
+      name: 'value',
+      type: 'number',
+      description: 'The progress value.',
+    },
+    {
+      name: 'max',
+      type: 'number',
+      description: 'The maximum progress value',
+    },
+    {
+      name: 'getValueLabel',
+      type: 'function',
+      description:
+        '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.',
+    },
+  ]}
+/>
+
+### Progress Indicator
 
 Contains all of the progress parts.
 

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

@@ -22,21 +22,22 @@ qwik-ui add label
 
 ```tsx
 import { component$, Slot, PropsOf } from '@builder.io/qwik';
+import { Label as QwikUILabel } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
 type LabelProps = PropsOf<'label'>;
 
 export const Label = component$<LabelProps>((props) => {
   return (
-    <label
+    <QwikUILabel
       {...props}
       class={cn(
         'font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )}
     >
       <Slot />
-    </label>
+    </QwikUILabel>
   );
 });
 ```
@@ -48,5 +49,5 @@ import { Label } from '@/components/ui/label';
 ```
 
 ```tsx
-<Label htmlFor="email">Your email address</Label>
+<Label for="email">Your email address</Label>
 ```

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

@@ -0,0 +1 @@
+export * from './label';

packages/kit-headless/src/components/label/label.driver.ts

@@ -0,0 +1,23 @@
+import { type Locator, type Page } from '@playwright/test';
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getRoot = () => {
+    return rootLocator;
+  };
+
+  const getLabel = () => {
+    return rootLocator.getByTestId('label');
+  };
+
+  const getForElement = () => {
+    return rootLocator.getByTestId('input');
+  };
+
+  return {
+    ...rootLocator,
+    getRoot,
+    getLabel,
+    getForElement,
+  };
+}

packages/kit-headless/src/components/label/label.test.ts

@@ -0,0 +1,35 @@
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './label.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/label/${exampleName}`);
+  const driver = createTestDriver(page.getByTestId('root'));
+  const { getLabel, getForElement } = driver;
+
+  return { driver, getLabel, getForElement };
+}
+
+test.describe('Label usaged', () => {
+  test('should have a label', async ({ page }) => {
+    const { getLabel } = await setup(page, 'hero');
+    await expect(getLabel()).toBeVisible();
+  });
+
+  test('should focus on for', async ({ page }) => {
+    const { getLabel, getForElement } = await setup(page, 'hero');
+    const label = getLabel();
+    const forElement = getForElement();
+
+    await label.click();
+    await expect(forElement).toBeFocused();
+  });
+
+  test('should not select the text on label', async ({ page }) => {
+    const { getLabel } = await setup(page, 'hero');
+    const label = getLabel();
+
+    await label.dblclick();
+    const selection = await page.evaluate(() => window.getSelection()?.toString());
+    expect(selection).toBeFalsy();
+  });
+});