Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(console): guide navigation anchors should be clickable and jump to the step (#4364)

Browse source
This commit is contained in:
Charles Zhao 2023-08-17 02:17:55 -05:00 committed by GitHub
parent 7cc31c105d
commit ca88b0c248
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/mdx-components-v2/Steps/index.module.scss
View file

@ -40,8 +40,14 @@
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--color-surface-5); border: 1px solid var(--color-surface-5);
padding: _.unit(3) _.unit(4); padding: _.unit(3) _.unit(4);
user-select: none;
cursor: pointer;
&:hover {
background: var(--color-surface-5);
}
&.active { &.active {
background: var(--color-surface-1); background: var(--color-focused-variant);
} }
} }

16
packages/console/src/mdx-components-v2/Steps/index.tsx
View file

@ -4,6 +4,7 @@ import React, { useRef, type ReactElement, useEffect, useState, useMemo, useCont
import useScroll from '@/hooks/use-scroll'; import useScroll from '@/hooks/use-scroll';
import { GuideContext } from '@/pages/Applications/components/Guide'; import { GuideContext } from '@/pages/Applications/components/Guide';
import { onKeyDownHandler } from '@/utils/a11y';
import Sample from '../Sample'; import Sample from '../Sample';
import { type Props as StepProps } from '../Step'; import { type Props as StepProps } from '../Step';
@ -76,6 +77,13 @@ export default function Steps({ children: reactChildren }: Props) {
setActiveIndex(reversedActiveIndex === -1 ? -1 : children.length - reversedActiveIndex - 1); setActiveIndex(reversedActiveIndex === -1 ? -1 : children.length - reversedActiveIndex - 1);
}, [children.length, scrollTop]); }, [children.length, scrollTop]);
const navigateToStep = (index: number) => {
const stepRef = stepReferences.current[index];
if (stepRef) {
stepRef.scrollIntoView({ behavior: 'smooth' });
}
};
return ( return (
<div className={classNames(styles.wrapper, isCompact && styles.fullWidth)}> <div className={classNames(styles.wrapper, isCompact && styles.fullWidth)}>
{!isCompact && ( {!isCompact && (
@ -84,7 +92,15 @@ export default function Steps({ children: reactChildren }: Props) {
{children.map((component, index) => ( {children.map((component, index) => (
<div <div
key={component.props.title} key={component.props.title}
role="button"
tabIndex={0}
className={classNames(styles.stepper, index === activeIndex && styles.active)} className={classNames(styles.stepper, index === activeIndex && styles.active)}
onKeyDown={onKeyDownHandler(() => {
navigateToStep(index);
})}
onClick={() => {
navigateToStep(index);
}}
> >
{index + 1}. {component.props.title} {index + 1}. {component.props.title}
</div> </div>