Merge branch 'main' into dynamic-fonts

maiieul · maiieul · commit 0e709541c74a · 2024-04-06T12:19:54.000+02:00
diff --git a/.changeset/eleven-bulldogs-hug.md b/.changeset/eleven-bulldogs-hug.md
diff --git a/.changeset/lucky-carrots-pay.md b/.changeset/lucky-carrots-pay.md
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -37,6 +37,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Draft,
     Collapsible: ComponentStatus.Beta,
     Combobox: ComponentStatus.Beta,
+    Label: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
diff --git a/apps/website/src/routes/docs/headless/label/examples/hero.tsx b/apps/website/src/routes/docs/headless/label/examples/hero.tsx
@@ -0,0 +1,25 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Label } from '@qwik-ui/headless';
+import styles from '../snippets/label.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+
+  return (
+    <div
+      class="label-container"
+      style={{
+        display: 'flex',
+        padding: '0 20px',
+        flexWrap: 'wrap',
+        gap: 15,
+        alignItems: 'center',
+      }}
+    >
+      <Label class="label" for="firstName">
+        First name
+      </Label>
+      <input class="input" type="text" id="firstName" placeholder="John Doe" />
+    </div>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/label/index.mdx b/apps/website/src/routes/docs/headless/label/index.mdx
@@ -0,0 +1,55 @@
+---
+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" />
+
+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={[
+    'Text selection is prevented when double clicking label.',
+    'Supports nested controls.',
+  ]}
+/>
+
+## Building blocks
+
+<CodeSnippet name="building-blocks" />
+
+### 🎨 Anatomy
+
+<AnatomyTable
+  propDescriptors={[
+    {
+      name: 'Label',
+      description: 'The root container for the label',
+    },
+  ]}
+/>
+
+## 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" />
diff --git a/apps/website/src/routes/docs/headless/label/snippets/building-blocks.tsx b/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>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/label/snippets/label.css b/apps/website/src/routes/docs/headless/label/snippets/label.css
@@ -0,0 +1,34 @@
+/* reset */
+input {
+  all: unset;
+}
+
+.label-container {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 35px;
+  color: hsl(var(--foreground));
+}
+
+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: hsl(var(--background));
+  box-shadow: 0 0 0 1px hsl(var(--foreground));
+}
+
+input:focus {
+  box-shadow: 0 0 0 2px hsl(var(--foreground));
+}
+
+input::selection {
+  background-color: var(--black-a9);
+  color: white;
+}
diff --git a/apps/website/src/routes/docs/headless/menu.md b/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)
diff --git a/apps/website/src/routes/docs/headless/progress/index.mdx b/apps/website/src/routes/docs/headless/progress/index.mdx
@@ -20,44 +20,49 @@ 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
 
 Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
 
 ## 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.
 
diff --git a/apps/website/src/routes/docs/headless/progress/snippets/building-blocks.tsx b/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>
+  );
+});
diff --git a/apps/website/src/routes/docs/styled/label/index.mdx b/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>
 ```
diff --git a/packages/kit-headless/CHANGELOG.md b/packages/kit-headless/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.5
+
+### Patch Changes
+
+- refactor: strip browser user agent styles relating to max-width (by [@thejackshelton](https://github.com/thejackshelton) in [#676](https://github.com/qwikifiers/qwik-ui/pull/676))
+
+- 🐞🩹 collapsible renders correctly on CSR (by [@thejackshelton](https://github.com/thejackshelton) in [#681](https://github.com/qwikifiers/qwik-ui/pull/681))
+
+- ✨ headless label hits draft status! (by [@thejackshelton](https://github.com/thejackshelton) in [#688](https://github.com/qwikifiers/qwik-ui/pull/688))
+
 ## 0.3.4
 
 ### Patch Changes
diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/headless",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Qwik UI headless components library",
   "publishConfig": {
     "access": "public"
diff --git a/packages/kit-headless/src/components/label/index.ts b/packages/kit-headless/src/components/label/index.ts
@@ -0,0 +1 @@
+export * from './label';
diff --git a/packages/kit-headless/src/components/label/label.driver.ts b/packages/kit-headless/src/components/label/label.driver.ts
@@ -0,0 +1,18 @@
+import { type Locator, type Page } from '@playwright/test';
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getLabel = () => {
+    return rootLocator.locator('label');
+  };
+
+  const getInput = () => {
+    return rootLocator.locator('input');
+  };
+
+  return {
+    ...rootLocator,
+    getLabel,
+    getInput,
+  };
+}
diff --git a/packages/kit-headless/src/components/label/label.test.ts b/packages/kit-headless/src/components/label/label.test.ts
@@ -0,0 +1,41 @@
+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);
+
+  return { driver };
+}
+
+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(`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 d.getLabel().click();
+    await expect(d.getInput()).toBeFocused();
+  });
+
+  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 d.getLabel().dblclick();
+    const selection = await page.evaluate(() => window.getSelection()?.toString());
+    expect(selection).toBeFalsy();
+  });
+});
diff --git a/packages/kit-headless/src/components/label/label.tsx b/packages/kit-headless/src/components/label/label.tsx
@@ -0,0 +1,23 @@
+import { PropsOf, Slot, component$, sync$, $ } from '@builder.io/qwik';
+
+type LabelProps = PropsOf<'label'>;
+
+export const Label = component$<LabelProps>((props) => {
+  const handleMouseDownSync$ = sync$((event: MouseEvent) => {
+    if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+  });
+
+  const handleMouseDown$ = $((event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('button, input, select, textarea')) return;
+  });
+
+  return (
+    <label
+      {...props}
+      onMouseDown$={[handleMouseDownSync$, handleMouseDown$, props.onMouseDown$]}
+    >
+      <Slot />
+    </label>
+  );
+});
diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts
diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json
diff --git a/packages/kit-styled/src/components/label/label.tsx b/packages/kit-styled/src/components/label/label.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
