mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-12 01:17:04 +02:00
chore: demo misc improvements (#9796)
https://linear.app/unleash/issue/2-2577/transition-screen-between-the-guides https://linear.app/unleash/issue/2-2582/page-scrolls-in-back Includes what should be the last batch of demo improvements at this stage: - Visually aligns the Back button for consistent layout - Replaces “Start” with “Start tutorial” for new topics - Updates topic titles for clarity and consistency - Applies bold styling to all step titles - Prevents page scroll when the step target is set to body
This commit is contained in:
Nuno Góis
GitHub
parent
e6813a4910
commit
ee9b0a0193
@ -63,12 +63,18 @@ const StyledTooltipTitle = styled('div')(({ theme }) => ({
|
||||
const StyledTooltipActions = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: theme.spacing(3),
|
||||
'&&& button': {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledBackButton = styled(Button)({
|
||||
padding: 0,
|
||||
minWidth: 0,
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
export interface IDemoStepTooltipProps extends TooltipRenderProps {
|
||||
step: ITutorialTopicStep;
|
||||
@ -92,7 +98,7 @@ export const DemoStepTooltip = ({
|
||||
}: IDemoStepTooltipProps) => {
|
||||
const nextLabel =
|
||||
stepIndex === 0
|
||||
? 'Start'
|
||||
? 'Start tutorial'
|
||||
: stepIndex === topics[topic].steps.length - 1
|
||||
? 'Finish'
|
||||
: 'Next';
|
||||
@ -112,28 +118,23 @@ export const DemoStepTooltip = ({
|
||||
<CloseIcon />
|
||||
</StyledCloseButton>
|
||||
<StyledTooltipTitle>
|
||||
<ConditionallyRender
|
||||
condition={Boolean(step.title)}
|
||||
show={step.title}
|
||||
elseShow={
|
||||
<Typography fontWeight='bold'>
|
||||
{topics[topic].title}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
<Typography fontWeight='bold'>
|
||||
{step.title || topics[topic].title}
|
||||
</Typography>
|
||||
</StyledTooltipTitle>
|
||||
{step.content}
|
||||
<StyledTooltipActions>
|
||||
<div>
|
||||
<ConditionallyRender
|
||||
condition={topic > 0 || stepIndex > 0}
|
||||
condition={
|
||||
!step.hideBackButton && stepIndex > 0
|
||||
}
|
||||
show={
|
||||
<Button
|
||||
variant='text'
|
||||
<StyledBackButton
|
||||
onClick={() => onBack(step)}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</StyledBackButton>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@ -164,25 +165,19 @@ export const DemoStepTooltip = ({
|
||||
<CloseIcon />
|
||||
</StyledCloseButton>
|
||||
<StyledTooltipTitle>
|
||||
<ConditionallyRender
|
||||
condition={Boolean(step.title)}
|
||||
show={step.title}
|
||||
elseShow={
|
||||
<Typography fontWeight='bold'>
|
||||
{topics[topic].title}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
<Typography fontWeight='bold'>
|
||||
{step.title || topics[topic].title}
|
||||
</Typography>
|
||||
</StyledTooltipTitle>
|
||||
{step.content}
|
||||
<StyledTooltipActions>
|
||||
<div>
|
||||
<ConditionallyRender
|
||||
condition={topic > 0 || stepIndex > 0}
|
||||
condition={!step.hideBackButton && stepIndex > 0}
|
||||
show={
|
||||
<Button variant='text' onClick={() => onBack(step)}>
|
||||
<StyledBackButton onClick={() => onBack(step)}>
|
||||
Back
|
||||
</Button>
|
||||
</StyledBackButton>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -118,6 +118,8 @@ export const DemoSteps = ({
|
||||
}
|
||||
|
||||
if (action === ACTIONS.UPDATE) {
|
||||
if (step.target === 'body') return;
|
||||
|
||||
const el = document.querySelector(
|
||||
step.target as string,
|
||||
) as HTMLElement | null;
|
||||
|
||||
@ -37,10 +37,10 @@ const ENVIRONMENT = 'dev';
|
||||
|
||||
export const TOPICS: ITutorialTopic[] = [
|
||||
{
|
||||
title: 'Enable/disable a feature flag',
|
||||
title: 'How to enable/disable a feature flag',
|
||||
steps: [
|
||||
{
|
||||
title: 'Enable/disable a feature flag',
|
||||
title: 'How to enable/disable a feature flag',
|
||||
href: `/projects/${PROJECT}?sort=name`,
|
||||
target: 'body',
|
||||
placement: 'center',
|
||||
@ -91,11 +91,11 @@ export const TOPICS: ITutorialTopic[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Enable for a specific user',
|
||||
title: 'Next: How to enable for a specific user',
|
||||
setup: specificUser,
|
||||
steps: [
|
||||
{
|
||||
title: 'Enable for a specific user',
|
||||
title: 'Next: How to enable for a specific user',
|
||||
href: `/projects/${PROJECT}?sort=name`,
|
||||
target: 'body',
|
||||
placement: 'center',
|
||||
@ -335,11 +335,11 @@ export const TOPICS: ITutorialTopic[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Adjust gradual rollout',
|
||||
title: 'Next: How to adjust gradual rollout',
|
||||
setup: gradualRollout,
|
||||
steps: [
|
||||
{
|
||||
title: 'Adjust gradual rollout',
|
||||
title: 'Next: How to adjust gradual rollout',
|
||||
href: `/projects/${PROJECT}?sort=name`,
|
||||
target: 'body',
|
||||
placement: 'center',
|
||||
@ -468,11 +468,11 @@ export const TOPICS: ITutorialTopic[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Adjust variants',
|
||||
title: 'Next: How to adjust variants',
|
||||
setup: variants,
|
||||
steps: [
|
||||
{
|
||||
title: 'Adjust variants',
|
||||
title: 'Next: How to adjust variants',
|
||||
href: `/projects/${PROJECT}?sort=name`,
|
||||
target: 'body',
|
||||
placement: 'center',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user