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

fix(progress-step): inherit unclickable styling if preventChangeOnClick is true (#1535)

Browse source 
Fixes #1534
This commit is contained in:
brunnerh 2022-12-08 05:02:24 +01:00 • committed by GitHub
commit 7a98ec26eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -19,10 +19,12 @@
const stepsById = derived(steps, ($) => const stepsById = derived(steps, ($) =>
$.reduce((a, c) => ({ ...a, [c.id]: c }), {}) $.reduce((a, c) => ({ ...a, [c.id]: c }), {})
); );
const preventChangeOnClickStore = writable(preventChangeOnClick);
setContext("ProgressIndicator", { setContext("ProgressIndicator", {
steps, steps,
stepsById, stepsById,
preventChangeOnClick: { subscribe: preventChangeOnClickStore.subscribe },
add: (step) => { add: (step) => {
steps.update((_) => { steps.update((_) => {
if (step.id in $stepsById) { if (step.id in $stepsById) {
@ -58,6 +60,7 @@
current: i === currentIndex, current: i === currentIndex,
})) }))
); );
$: preventChangeOnClickStore.set(preventChangeOnClick);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->

6
src/ProgressIndicator/ProgressStep.svelte
View file

@ -31,7 +31,8 @@
let step = {}; let step = {};
const { stepsById, add, change } = getContext("ProgressIndicator"); const { stepsById, add, change, preventChangeOnClick } =
getContext("ProgressIndicator");
$: add({ id, complete, disabled }); $: add({ id, complete, disabled });
@ -67,7 +68,8 @@
aria-disabled="{disabled}" aria-disabled="{disabled}"
tabindex="{!current && !disabled ? '0' : '-1'}" tabindex="{!current && !disabled ? '0' : '-1'}"
class:bx--progress-step-button="{true}" class:bx--progress-step-button="{true}"
class:bx--progress-step-button--unclickable="{current}" class:bx--progress-step-button--unclickable="{current ||
$preventChangeOnClick}"
on:click on:click
on:click="{() => { on:click="{() => {
if (!step.complete) return; if (!step.complete) return;