mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
fix(progress-step): inherit unclickable styling if preventChangeOnClick
is true
(#1535)
Fixes #1534
This commit is contained in:
parent
bf337c48ae
commit
7a98ec26eb
2 changed files with 7 additions and 2 deletions
|
@ -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 -->
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue