refactor: label docs and tests

Author: thejackshelton

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

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

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

@@ -14,7 +14,11 @@ Renders an accessible label associated with controls.
 
 <Showcase name="hero" />
 
-### Features
+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.
+
+## ✨ Features
 
 <FeatureList
   features={[
@@ -23,34 +27,9 @@ Renders an accessible label associated with 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.
+<CodeSnippet name="building-blocks" />
 
 ### 🎨 Anatomy
 
@@ -62,3 +41,15 @@ This component is based on the native label element, it will automatically apply
     },
   ]}
 />
+
+## Why use a headless label?
+
+The Qwik UI headless label component keeps focus on the input when double clicking.
+
+The native behavior will try to select and focus the text of the label. This is often times not the desired behavior.
+
+{/* Not caught up to main, but would have an issues prop here from FeatureList */}
+
+## Example CSS
+
+<CodeSnippet name="label.css" />

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

@@ -0,0 +1,11 @@
+import { component$ } 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>
+  );
+});

apps/website/src/routes/docs/headless/label/examples/label.css renamed to apps/website/src/routes/docs/headless/label/snippets/label.css

@@ -3,14 +3,14 @@ input {
   all: unset;
 }
 
-.LabelRoot {
+.label-container {
   font-size: 15px;
   font-weight: 500;
   line-height: 35px;
-  color: black;
+  color: hsl(var(--foreground));
 }
 
-.Input {
+input {
   width: 200px;
   display: inline-flex;
   align-items: center;
@@ -20,13 +20,15 @@ input {
   height: 35px;
   font-size: 15px;
   line-height: 1;
-  background-color: white;
-  box-shadow: 0 0 0 1px black;
+  background-color: hsl(var(--background));
+  box-shadow: 0 0 0 1px hsl(var(--foreground));
 }
-.Input:focus {
-  box-shadow: 0 0 0 2px black;
+
+input:focus {
+  box-shadow: 0 0 0 2px hsl(var(--foreground));
 }
-.Input::selection {
+
+input::selection {
   background-color: var(--black-a9);
   color: white;
 }

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

@@ -20,36 +20,11 @@ Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/
   features={['Provides context for assistive technology to read the progress of a task.']}
 />
 
-<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/progress)
-
-[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)/progress/index.mdx>)
-
-</div>
-
 ## Building blocks
 
-```tsx
-import { component$ } from '@builder.io/qwik';
-import { Progress, ProgressIndicator } from '@qwik-ui/headless';
-
-export default component$(() => {
-  const progress = 30;
-
-  return (
-    <Progress value={progress} class="progress">
-      <ProgressIndicator
-        class="progress-indicator"
-        style={{
-          transform: `translateX(-${100 - progress}%)`,
-        }}
-      />
-    </Progress>
-  );
-});
-```
+<CodeSnippet name="building-blocks" />
+
+{/* TODO: Match docs conventions with the select, collapsible, or label. */}
 
 ## Accessibility
 

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

@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik';
+import { Progress, ProgressIndicator } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const progress = 30;
+
+  return (
+    <Progress value={progress} class="progress">
+      <ProgressIndicator
+        class="progress-indicator"
+        style={{
+          transform: `translateX(-${100 - progress}%)`,
+        }}
+      />
+    </Progress>
+  );
+});

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

@@ -2,22 +2,17 @@ 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');
+    return rootLocator.locator('label');
   };
 
-  const getForElement = () => {
-    return rootLocator.getByTestId('input');
+  const getInput = () => {
+    return rootLocator.locator('input');
   };
 
   return {
     ...rootLocator,
-    getRoot,
     getLabel,
-    getForElement,
+    getInput,
   };
 }

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

@@ -3,32 +3,38 @@ 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;
+  const driver = createTestDriver(page);
 
-  return { driver, getLabel, getForElement };
+  return { driver };
 }
 
-test.describe('Label usaged', () => {
-  test('should have a label', async ({ page }) => {
-    const { getLabel } = await setup(page, 'hero');
-    await expect(getLabel()).toBeVisible();
+test.describe('Label usage', () => {
+  test(`GIVEN a label
+        WHEN a label is rendered
+        THEN it should be visible
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await expect(d.getLabel()).toBeVisible();
   });
 
-  test('should focus on for', async ({ page }) => {
-    const { getLabel, getForElement } = await setup(page, 'hero');
-    const label = getLabel();
-    const forElement = getForElement();
+  test(`GIVEN a label and an input
+        WHEN the label is clicked
+        THEN the input should be focused
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
 
-    await label.click();
-    await expect(forElement).toBeFocused();
+    await d.getLabel().click();
+    await expect(d.getInput()).toBeFocused();
   });
 
-  test('should not select the text on label', async ({ page }) => {
-    const { getLabel } = await setup(page, 'hero');
-    const label = getLabel();
+  test(`GIVEN a label
+        WHEN the label is double clicked
+        THEN the label text should not be selected
+    `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
 
-    await label.dblclick();
+    await d.getLabel().dblclick();
     const selection = await page.evaluate(() => window.getSelection()?.toString());
     expect(selection).toBeFalsy();
   });