Skip to content

Commit 4ff133b

Browse files
metonymmetonym
committed
feat(tile-group): add legendChildren slot
1 parent ddb6abd commit 4ff133b

File tree

5 files changed

+48
-16
lines changed

5 files changed

+48
-16
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4411,19 +4411,20 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
44114411

44124412
### Props
44134413

4414-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4415-
| :--------- | :------- | :--------------- | :------- | ------------------------------- | ---------------------- | --------------------------------------------------------- |
4416-
| selected | No | <code>let</code> | Yes | <code>T &#124; undefined</code> | <code>undefined</code> | Specify the selected tile value. |
4417-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
4418-
| required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button. |
4419-
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs. |
4420-
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
4414+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4415+
| :--------- | :------- | :--------------- | :------- | ------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4416+
| selected | No | <code>let</code> | Yes | <code>T &#124; undefined</code> | <code>undefined</code> | Specify the selected tile value. |
4417+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
4418+
| required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button. |
4419+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs. |
4420+
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text.<br />Alternatively, use the named slot "legendChildren".<br />@example <br />`svelte<br />&lt;TileGroup&gt;<br /> &lt;span slot="legendChildren"&gt;Custom Legend&lt;/span&gt;<br />&lt;/TileGroup&gt;<br />` |
44214421

44224422
### Slots
44234423

4424-
| Slot name | Default | Props | Fallback |
4425-
| :-------- | :------ | :---------------------------------- | :------- |
4426-
| -- | Yes | <code>Record<string, never> </code> | -- |
4424+
| Slot name | Default | Props | Fallback |
4425+
| :------------- | :------ | :---------------------------------- | :------------------------ |
4426+
| legendChildren | No | <code>Record<string, never> </code> | <code>{legendText}</code> |
4427+
| -- | Yes | <code>Record<string, never> </code> | -- |
44274428

44284429
### Events
44294430

‎docs/src/COMPONENT_API.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17499,7 +17499,7 @@
1749917499
{
1750017500
"name": "legendText",
1750117501
"kind": "let",
17502-
"description": "Specify the legend text",
17502+
"description": "Specify the legend text.\nAlternatively, use the named slot \"legendChildren\".\n@example \n```svelte\n<TileGroup>\n <span slot=\"legendChildren\">Custom Legend</span>\n</TileGroup>\n```",
1750317503
"type": "string",
1750417504
"value": "\"\"",
1750517505
"isFunction": false,
@@ -17511,6 +17511,12 @@
1751117511
],
1751217512
"moduleExports": [],
1751317513
"slots": [
17514+
{
17515+
"name": "legendChildren",
17516+
"default": false,
17517+
"fallback": "{legendText}",
17518+
"slot_props": "Record<string, never>"
17519+
},
1751417520
{
1751517521
"name": null,
1751617522
"default": true,

‎src/Tile/TileGroup.svelte‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,16 @@
2626
*/
2727
export let name = undefined;
2828
29-
/** Specify the legend text */
29+
/**
30+
* Specify the legend text.
31+
* Alternatively, use the named slot "legendChildren".
32+
* @example
33+
* ```svelte
34+
* <TileGroup>
35+
* <span slot="legendChildren">Custom Legend</span>
36+
* </TileGroup>
37+
* ```
38+
*/
3039
export let legendText = "";
3140
3241
import { createEventDispatcher, setContext } from "svelte";
@@ -86,8 +95,10 @@
8695
</script>
8796

8897
<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
89-
{#if legendText}
90-
<legend class:bx--label={true}>{legendText}</legend>
98+
{#if legendText || $$slots.legendChildren}
99+
<legend class:bx--label={true}>
100+
<slot name="legendChildren">{legendText}</slot>
101+
</legend>
91102
{/if}
92103
<div>
93104
<slot />

‎tests/Tile/TileGroup.slot.test.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import { TileGroup } from "carbon-components-svelte";
3+
</script>
4+
5+
<TileGroup legendText="Default legend">
6+
<span slot="legendChildren">Custom legend content</span>
7+
</TileGroup>

‎types/Tile/TileGroup.svelte.d.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,14 @@ type $Props<T> = {
3737
name?: string;
3838

3939
/**
40-
* Specify the legend text
40+
* Specify the legend text.
41+
* Alternatively, use the named slot "legendChildren".
42+
* @example
43+
* ```svelte
44+
* <TileGroup>
45+
* <span slot="legendChildren">Custom Legend</span>
46+
* </TileGroup>
47+
* ```
4148
* @default ""
4249
*/
4350
legendText?: string;
@@ -52,5 +59,5 @@ export default class TileGroup<
5259
> extends SvelteComponentTyped<
5360
TileGroupProps<T>,
5461
{ select: CustomEvent<T> },
55-
{ default: Record<string, never> }
62+
{ legendChildren: Record<string, never>; default: Record<string, never> }
5663
> {}

0 commit comments

Comments
 (0)