mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(link)!: do not render p for disabled link

Browse source 
Closes #1924

Svelte 5 will not compile if `div` is nested inside `p` element. Refactor Link to render an `a` instead of `p` when disabled.
This commit is contained in:
metonym 2024-03-06 19:07:45 -08:00 • committed by Enrico Sacchetti
commit 8bffc17d65
4 changed files with 24 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

18
COMPONENT_INDEX.md
View file

@ -1963,15 +1963,15 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles | | visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
### Slots ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -5831,7 +5831,7 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the top-level HTML element", "description": "Obtain a reference to the top-level HTML element",
"type": "null | HTMLAnchorElement | HTMLParagraphElement", "type": "null | HTMLAnchorElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -5851,13 +5851,13 @@
} }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "p" }, { "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "p" }, { "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "p" }, { "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "p" } { "type": "forwarded", "name": "mouseleave", "element": "a" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "a | p" } "rest_props": { "type": "Element", "name": "a" }
}, },
{ {
"moduleName": "ListBox", "moduleName": "ListBox",

11
src/Link/Link.svelte
View file

@ -1,6 +1,4 @@
<script> <script>
/** @restProps {a | p} */
/** /**
* Specify the size of the link * Specify the size of the link
* @type {"sm" | "lg"} * @type {"sm" | "lg"}
@ -34,10 +32,15 @@
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-no-redundant-roles -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
{#if disabled} {#if disabled}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<p <a
bind:this="{ref}" bind:this="{ref}"
role="link"
aria-disabled="true"
class:bx--link="{true}" class:bx--link="{true}"
class:bx--link--disabled="{disabled}" class:bx--link--disabled="{disabled}"
class:bx--link--inline="{inline}" class:bx--link--inline="{inline}"
@ -56,7 +59,7 @@
</slot> </slot>
</div> </div>
{/if} {/if}
</p> </a>
{:else} {:else}
<a <a
bind:this="{ref}" bind:this="{ref}"

4
types/Link/Link.svelte.d.ts vendored
View file

@ -1,7 +1,7 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements"; import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["a"] & SvelteHTMLElements["p"]; type RestProps = SvelteHTMLElements["a"];
export interface LinkProps extends RestProps { export interface LinkProps extends RestProps {
/** /**
@ -45,7 +45,7 @@ export interface LinkProps extends RestProps {
* Obtain a reference to the top-level HTML element * Obtain a reference to the top-level HTML element
* @default null * @default null
*/ */
ref?: null | HTMLAnchorElement | HTMLParagraphElement; ref?: null | HTMLAnchorElement;
[key: `data-${string}`]: any; [key: `data-${string}`]: any;
} }