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

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

View file

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

View file

@ -31,7 +31,8 @@
let step = {};
const { stepsById, add, change } = getContext("ProgressIndicator");
const { stepsById, add, change, preventChangeOnClick } =
getContext("ProgressIndicator");
$: add({ id, complete, disabled });
@ -67,7 +68,8 @@
aria-disabled="{disabled}"
tabindex="{!current && !disabled ? '0' : '-1'}"
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="{() => {
if (!step.complete) return;