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
| 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 |
| 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 |
| 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` |
| 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 |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
| 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 |
| 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 |
| 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 |
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
### Slots

12
docs/src/COMPONENT_API.json
View file

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

11
src/Link/Link.svelte
View file

@ -1,6 +1,4 @@
<script>
/** @restProps {a | p} */
/**
* Specify the size of the link
* @type {"sm" | "lg"}
@ -34,10 +32,15 @@
</script>
<!-- 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}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<p
<a
bind:this="{ref}"
role="link"
aria-disabled="true"
class:bx--link="{true}"
class:bx--link--disabled="{disabled}"
class:bx--link--inline="{inline}"
@ -56,7 +59,7 @@
</slot>
</div>
{/if}
</p>
</a>
{:else}
<a
bind:this="{ref}"

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

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