From 75790282460a211899aabecb58c69e35f403e401 Mon Sep 17 00:00:00 2001
From: Harald Brunner <brunnerh@users.noreply.github.com>
Date: Wed, 5 Jan 2022 14:19:41 +0100
Subject: [PATCH] Propagate `name` and `required` from TileGroup. Remove `name`
 from `RadioTile`.

---
 src/Tile/RadioTile.svelte |  9 ++++-----
 src/Tile/TileGroup.svelte | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 2738bc03..65b9b5cf 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -20,13 +20,11 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the input */
-  export let name = "";
-
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { add, update, selectedValue, name, required } =
+    getContext("TileGroup");
 
   add({ value, checked });
 
@@ -36,11 +34,12 @@
 <input
   type="radio"
   id="{id}"
-  name="{name}"
+  name="{$name}"
   value="{value}"
   checked="{checked}"
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
+  required="{$required}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 4a5cc508..f27b5d8f 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -8,6 +8,15 @@
   /** Set to `true` to disable the tile group */
   export let disabled = false;
 
+  /**
+   * Set to `true` to mark the selection as required.
+   * For validation to trigger, a `name` has to be specified as well.
+   */
+  export let required = false;
+
+  /** Specify a name attribute for the radio inputs */
+  export let name = "";
+
   /** Specify the legend text */
   export let legend = "";
 
@@ -16,9 +25,13 @@
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const inputsName = writable(name);
+  const inputsRequired = writable(required);
 
   setContext("TileGroup", {
     selectedValue,
+    name: { subscribe: inputsName.subscribe },
+    required: { subscribe: inputsRequired.subscribe },
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -30,6 +43,8 @@
   });
 
   $: selected = $selectedValue;
+  $: inputsName.set(name);
+  $: inputsRequired.set(required);
   $: dispatch("select", $selectedValue);
 </script>