Add/improve slotProps handling for Label & Description

* Add slot props support to Label * Refactor slot props usage in Description * Add missing slot props to RadioGroupLabel and RadioGroupDescription
rgossiaux · Jan 28, 2022 · cdc0d86 · cdc0d86
1 parent 0430f2d
commit cdc0d86
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 12 deletions.
diff --git a/src/lib/components/description/Description.svelte b/src/lib/components/description/Description.svelte
@@ -12,7 +12,6 @@
   export let as: SupportedAs = "p";
   export let use: HTMLActionArray = [];
 
-  $: slotProps = $contextStore?.props?.slotProps ?? {};
   const id = `headlessui-description-${useId()}`;
   let contextStore = useDescriptionContext();
   if (!contextStore) {
@@ -22,12 +21,15 @@
   }
 
   onMount(() => $contextStore?.register(id));
+
+  $: slotProps = $contextStore!.slotProps;
 </script>
 
 <Render
   name={"Description"}
   {...$$restProps}
   {as}
+  {slotProps}
   {...$contextStore?.props}
   {id}
   use={[...use, forwardEvents]}

diff --git a/src/lib/components/description/DescriptionProvider.svelte b/src/lib/components/description/DescriptionProvider.svelte
@@ -1,7 +1,8 @@
 <script lang="ts" context="module">
   export interface DescriptionContext {
     name?: string;
-    props?: { slotProps?: object };
+    slotProps?: object;
+    props?: object;
     register: (value: string) => void;
     descriptionIds?: string;
   }
@@ -19,16 +20,19 @@
   import type { Readable, Writable } from "svelte/store";
   import { writable } from "svelte/store";
   export let name: string;
+  export let slotProps = {};
   let descriptionIds: string[] = [];
   let contextStore: Writable<DescriptionContext> = writable({
     name,
-    register,
+    slotProps,
     props: $$restProps,
+    register,
   });
   setContext(DESCRIPTION_CONTEXT_NAME, contextStore);
 
   $: contextStore.set({
     name,
+    slotProps,
     props: $$restProps,
     register,
     descriptionIds:

diff --git a/src/lib/components/description/description.test.ts b/src/lib/components/description/description.test.ts
@@ -102,3 +102,33 @@ it("should be possible to use a DescriptionProvider and multiple Description com
     </div>
   `);
 });
+
+it("should be possible to use a DescriptionProvider with slot props", async () => {
+  let { container } = render(svelte`
+    <DescriptionProvider name={"test"} slotProps={{num: 12345}} let:describedby>
+      <div aria-describedby={describedby}>
+        <Description let:num>{num}</Description>
+        <span>Contents</span>
+      </div>
+    </DescriptionProvider>
+  `);
+
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-describedby="headlessui-description-1"
+    >
+      <p
+        id="headlessui-description-1"
+      >
+        12345
+      </p>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
+  `);
+});
+
diff --git a/src/lib/components/label/Label.svelte b/src/lib/components/label/Label.svelte
@@ -24,6 +24,9 @@
 
   let allProps: any = {};
   $: allProps = { ...$$restProps, ...$contextStore!.props, id };
+
+  $: slotProps = $contextStore!.slotProps;
+
   if (passive) delete allProps["onClick"];
 </script>
 
@@ -32,10 +35,11 @@
   {...allProps}
   name={"Label"}
   {as}
+  {slotProps}
   use={[...use, forwardEvents]}
   on:click={(event) => {
     if (!passive) allProps["onClick"]?.(event);
   }}
 >
-  <slot />
+  <slot {...slotProps} />
 </Render>
diff --git a/src/lib/components/label/LabelProvider.svelte b/src/lib/components/label/LabelProvider.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   export interface LabelContext {
     name?: string;
+    slotProps?: object;
     props?: object;
     register: (value: string) => void;
     labelIds?: string;
@@ -17,16 +18,19 @@
   import type { Writable } from "svelte/store";
   import { writable } from "svelte/store";
   export let name: string;
+  export let slotProps = {};
   let labelIds: string[] = [];
   let contextStore: Writable<LabelContext> = writable({
     name,
-    register,
+    slotProps,
     props: $$restProps,
+    register,
   });
   setContext(LABEL_CONTEXT_NAME, contextStore);
 
   $: contextStore.set({
     name,
+    slotProps,
     props: $$restProps,
     register,
     labelIds: labelIds.length > 0 ? labelIds.join(" ") : undefined,

diff --git a/src/lib/components/label/label.test.ts b/src/lib/components/label/label.test.ts
@@ -31,7 +31,7 @@ it(
 
 it("should be possible to use a LabelProvider without using a Label", async () => {
   let { container } = render(svelte`
-  <LabelProvider let:labelledby>
+  <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
       No label
     </div>
@@ -46,7 +46,7 @@ it("should be possible to use a LabelProvider without using a Label", async () =
 
 it("should be possible to use a LabelProvider and a single Label, and have them linked", async () => {
   let { container } = render(svelte`
-  <LabelProvider let:labelledby>
+  <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
       <Label>I am a label</Label>
       <span>Contents</span>
@@ -74,7 +74,7 @@ it("should be possible to use a LabelProvider and a single Label, and have them
 
 it("should be possible to use a LabelProvider and multiple Label components, and have them linked", async () => {
   let { container } = render(svelte`
-  <LabelProvider let:labelledby>
+  <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
       <Label>I am a label</Label>
       <span>Contents</span>
@@ -111,7 +111,7 @@ it("should be possible to use a LabelProvider and multiple Label components, and
 
 it("should be possible to render a Label with an `as` prop", async () => {
   let { container } = render(svelte`
-  <LabelProvider let:labelledby>
+  <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
       <Label as="p">I am a label</Label>
       <span>Contents</span>
@@ -140,7 +140,7 @@ it("should be possible to render a Label with an `as` prop", async () => {
 it("should be possible to change the props of a Label", async () => {
   let classStore: Writable<string | null> = writable(null);
   let { container } = render(svelte`
-  <LabelProvider let:labelledby>
+  <LabelProvider name={"test"} let:labelledby>
     <div aria-labelledby={labelledby}>
       <Label class={$classStore}>I am a label</Label>
       <span>Contents</span>
@@ -182,6 +182,34 @@ it("should be possible to change the props of a Label", async () => {
       
       
        
+      <span>
+        Contents
+      </span>
+    </div>
+  `);
+});
+
+it("should be possible to use a LabelProvider with slot props", async () => {
+  let { container } = render(svelte`
+  <LabelProvider name={"test"} slotProps={{num: 12345}} let:labelledby>
+    <div aria-labelledby={labelledby}>
+      <Label let:num>{num}</Label>
+      <span>Contents</span>
+    </div>
+  </LabelProvider>
+`);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-labelledby="headlessui-label-1"
+    >
+      <label
+        id="headlessui-label-1"
+      >
+        12345
+      </label>
+      
+      
+       
       <span>
         Contents
       </span>

diff --git a/src/lib/components/radio-group/RadioGroupOption.svelte b/src/lib/components/radio-group/RadioGroupOption.svelte
@@ -74,8 +74,8 @@
   };
 </script>
 
-<DescriptionProvider name="RadioGroupDescription" let:describedby>
-  <LabelProvider name="RadioGroupLabel" let:labelledby>
+<DescriptionProvider name="RadioGroupDescription" {slotProps} let:describedby>
+  <LabelProvider name="RadioGroupLabel" {slotProps} let:labelledby>
     <Render
       {...{ ...$$restProps, ...propsWeControl }}
       {as}