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.

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 Nav.Tile id mandatory and update examples #3097

Merged
Merged
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions .changeset/tall-pigs-perform.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@skeletonlabs/skeleton-svelte': patch
'@skeletonlabs/skeleton-react': patch
---

bugfix: Make use of `useId` on Navigation component to set default `id` for Tiles if user had not defined it explicitly
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import React, { createContext, useContext } from 'react';
import React, { createContext, useContext, useId } from 'react';
import { NavContextState, NavRailProps, NavBarProps, NavTileProps } from './types.js';

// Contexts ---
@@ -187,6 +187,11 @@ export const NavTile: React.FC<NavTileProps> = ({
// Get Context
const ctx = useContext<NavContextState>(NavContext);

const generatedId = useId();
if (!id) {
id = generatedId;
}

// Local
const TileElement = href ? 'a' : 'button';
const role = href ? undefined : 'button';
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script lang="ts">
import { useId } from '$lib/internal/use-id.js';
import { getNavigationContext } from './context.js';
import type { NavTileProps } from './types.js';
let {
id,
id = useId(),
href,
target,
label,
@@ -57,7 +58,7 @@
}
</script>

<!-- @component An individual Navgiation component tile. -->
<!-- @component An individual Navigation component tile. -->

<svelte:element
this={element}
2 changes: 1 addition & 1 deletion packages/skeleton-svelte/src/lib/components/Toast/types.ts
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ export interface Toast {
// Context ---

// https://zagjs.com/components/react/toast#programmatic-control
/** Provides accesss to the Toast Context API. */
/** Provides access to the Toast Context API. */
export interface ToastContext {
/** Used to create display a new Toast instance. */
create: (toast: Toast) => void;