Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make library interoperable with Svelte 5 #1926

Merged
merged 3 commits into from
Mar 7, 2024
Merged

Make library interoperable with Svelte 5 #1926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5ea940
fix: avoid using reserved `$` for Svelte 5 compat
metonym Mar 7, 2024
0b7aca1
fix(link)!: do not render `p` for disabled link
metonym Mar 7, 2024
6e9cd6e
fix(search): hoist ignore `a11y autofocus` comment
metonym Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 6 additions & 6 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/ContentSwitcher/Switch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@

ctx.add({ id, text, selected });

const unsubscribe = ctx.currentId.subscribe(($) => {
selected = $ === id;
const unsubscribe = ctx.currentId.subscribe((currentId) => {
selected = currentId === id;
});

afterUpdate(() => {
Expand Down
11 changes: 7 additions & 4 deletions src/Link/Link.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<script>
/** @restProps {a | p} */

/**
* Specify the size of the link
* @type {"sm" | "lg"}
Expand Down Expand Up @@ -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}"
Expand All @@ -56,7 +59,7 @@
</slot>
</div>
{/if}
</p>
</a>
{:else}
<a
bind:this="{ref}"
Expand Down
4 changes: 2 additions & 2 deletions src/ProgressIndicator/ProgressIndicator.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@

const dispatch = createEventDispatcher();
const steps = writable([]);
const stepsById = derived(steps, ($) =>
$.reduce((a, c) => ({ ...a, [c.id]: c }), {})
const stepsById = derived(steps, (steps) =>
steps.reduce((a, c) => ({ ...a, [c.id]: c }), {})
);
const preventChangeOnClickStore = writable(preventChangeOnClick);

Expand Down
1 change: 1 addition & 0 deletions src/Search/Search.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
$: dispatch(expanded ? "expand" : "collapse");
</script>

<!-- svelte-ignore a11y-autofocus -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Long-term, I recommend we remove autofocus functionality and guide users to instead utilize ref to manually set focus based on user or server events.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed – would love to sort out the ignorable a11y warnings from the rest.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Continued in #1929

{#if skeleton}
<SearchSkeleton
size="{size}"
Expand Down
4 changes: 2 additions & 2 deletions types/Link/Link.svelte.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand Down Expand Up @@ -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;
}
Expand Down
Loading