Skip to content

Simplify workshop guided run by removing the progress box #46598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pelikhan merged 2 commits into from
Jul 19, 2026
Merged

Simplify workshop guided run by removing the progress box #46598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc90f12
Simplify workshop guided run layout
Copilot Jul 19, 2026
92832a2
Merge remote-tracking branch 'origin/main' into copilot/simplify-work…
Copilot Jul 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 0 additions & 102 deletions docs/src/components/workshop/WorkshopExperience.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,19 +475,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
</div>
</div>

<section class="aw-workshop-progress-card" aria-label="Workshop progress">
<div class="aw-workshop-progress-overview">
<div class="aw-workshop-progress-stat">
<span data-workshop-lesson-percent>0%</span>
<p>Complete</p>
</div>
<p class="aw-workshop-progress-context" data-workshop-lesson-context>Start with the welcome step, then follow the path selected above.</p>
</div>
<div class="aw-workshop-progress-timeline">
<div class="aw-workshop-progress-track"><span data-workshop-lesson-bar style={`width: ${initialFlow.length ? '0%' : '100%'};`} /></div>
</div>
</section>

<article class="aw-workshop-step-content sl-markdown-content" data-workshop-step-content set:html={initialStep ? renderTutorialStep(initialStep) : ''} />

<div class="aw-workshop-panel-footer">
Expand Down Expand Up @@ -674,12 +661,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
return step.html || '';
};

const calculateProgressPercent = (stepIndex, flowLength) => {
if (stepIndex < 0) return 0;
if (flowLength <= 1) return 100;
return Math.round((stepIndex / (flowLength - 1)) * 100);
};

const setupScreen = root.querySelector('[data-workshop-setup]');
const setupSteps = root.querySelectorAll('[data-workshop-setup-step]');
const tutorialScreen = root.querySelector('[data-workshop-tutorial]');
Expand All @@ -690,9 +671,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
const nextButton = root.querySelector('[data-workshop-next]');
const stepBodyContainer = root.querySelector('[data-workshop-step-content]');
const stepSummary = root.querySelector('[data-workshop-step-summary]');
const lessonPercent = root.querySelector('[data-workshop-lesson-percent]');
const lessonBar = root.querySelector('[data-workshop-lesson-bar]');
const lessonContext = root.querySelector('[data-workshop-lesson-context]');
let setupStep = 'workspace';

const showSetupStep = (stepName, opts = {}) => {
Expand Down Expand Up @@ -842,15 +820,9 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
const journey = manifest.journeys.find((item) => item.id === state.journeyId) || manifest.journeys[0];
const scenario = manifest.scenarios.find((item) => item.id === state.scenarioId) || manifest.scenarios[0];
const stepIndex = visibleFlow.indexOf(activeStep.key);
const progressPercent = calculateProgressPercent(stepIndex, visibleFlow.length);
if (tunnelPanel) {
tunnelPanel.hidden = state.journeyId !== 'vscode' || setupStep !== 'scenario';
}
lessonPercent.textContent = `${progressPercent}%`;
lessonBar.style.width = `${progressPercent}%`;
lessonContext.textContent = stepIndex >= 0
? `${stepIndex + 1} of ${visibleFlow.length} in this ${journey.label} run.`
: 'Linked step from the workshop source.';
stepSummary.textContent = activeStep.summary || 'Follow the guided path for this lesson.';
flowTitle.textContent = `${journey.label} x ${scenario.label}`;
stepPosition.textContent = stepIndex >= 0 ? `Step ${stepIndex + 1} of ${visibleFlow.length}` : 'Linked step';
Expand Down Expand Up @@ -1284,73 +1256,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
line-height: 1.5;
}

.aw-workshop-progress-card {
display: grid;
gap: 0.75rem;
padding-bottom: 1rem;
border-bottom: 1px solid color-mix(in srgb, var(--aw-border) 82%, transparent);
}

.aw-workshop-progress-overview {
display: grid;
min-width: 0;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
}

.aw-workshop-progress-stat {
display: grid;
gap: 0.15rem;
min-width: 6rem;
}

.aw-workshop-progress-stat > span {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.04em;
}

.aw-workshop-progress-stat > p,
.aw-workshop-progress-context {
margin: 0;
color: var(--aw-text-muted);
}

.aw-workshop-progress-stat > p {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.aw-workshop-progress-context {
align-self: center;
font-size: 0.95rem;
line-height: 1.55;
}

.aw-workshop-progress-timeline {
position: relative;
display: block;
align-items: center;
min-height: auto;
}

.aw-workshop-progress-track {
height: 0.5rem;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--aw-bg-subtle) 80%, var(--aw-border) 20%);
}

.aw-workshop-progress-track > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--sl-color-accent);
transition: width 0.25s ease;
}

.aw-workshop-step-content {
display: block;
min-width: 0;
Expand Down Expand Up @@ -1607,12 +1512,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
box-shadow: none;
}

@media (max-width: 72rem) {
.aw-workshop-progress-overview {
grid-template-columns: 1fr;
}
}

@media (max-width: 50rem) {
:global(.content-panel:has([data-workshop-root])),
:global(.sl-markdown-content:has(> [data-workshop-root])) {
Expand Down Expand Up @@ -1646,7 +1545,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
}

.aw-workshop-panel-summary,
.aw-workshop-progress-card,
.aw-workshop-panel-actions {
display: none;
}
Expand Down
32 changes: 1 addition & 31 deletions docs/tests/workshop.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,32 +51,23 @@ async function shouldNavigateToVisibleStep(page: Page, isPresent: boolean, stepK
}

test.describe('Workshop tutorial', () => {
test('progress summary follows the active step instead of saved completion history', async ({ page }) => {
test('step position follows the active step instead of saved completion history', async ({ page }) => {
await startWorkshop(page);

const flowKeys = await getFlowStepKeys(page);
const flowLength = flowKeys.length;
const firstStepPercent = flowLength <= 1 ? 100 : 0;
const thirdStepPercent = flowLength <= 1 ? 100 : Math.round((2 / (flowLength - 1)) * 100);

await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 1 of ${flowLength}`);
await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${firstStepPercent}%`);
await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`1 of ${flowLength} in this GitHub.com run.`);
await expect(page.locator('.aw-workshop-progress-card')).not.toContainText('Go to step');

await page.getByRole('button', { name: /Next step/i }).click();
await page.getByRole('button', { name: /Next step/i }).click();

await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 3 of ${flowLength}`);
await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${thirdStepPercent}%`);
await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`3 of ${flowLength} in this GitHub.com run.`);

await page.getByRole('button', { name: /Previous step/i }).click();
await page.getByRole('button', { name: /Previous step/i }).click();

await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 1 of ${flowLength}`);
await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${firstStepPercent}%`);
await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`1 of ${flowLength} in this GitHub.com run.`);
});

test('switching entry path clears previous scenario and restarts the flow', async ({ page }) => {
Expand Down Expand Up @@ -121,22 +112,18 @@ test.describe('Workshop tutorial', () => {
await expect(page.getByRole('button', { name: /Next step|Finish workshop/i })).toBeVisible();
if (isZenMobileViewport) {
await expect(page.locator('.aw-workshop-flow-header')).toBeHidden();
await expect(page.locator('.aw-workshop-progress-card')).toBeHidden();
await expect(page.locator('.aw-workshop-panel-summary')).toBeHidden();
await expect(page.locator('.aw-workshop-panel-actions')).toBeHidden();
} else {
await expect(page.locator('.aw-workshop-flow-header')).toBeVisible();
await expect(page.locator('.aw-workshop-progress-card')).toBeVisible();
await expect(page.locator('.aw-workshop-panel-summary')).toBeVisible();
await expect(page.locator('.aw-workshop-panel-actions')).toBeVisible();
}

const layout = await page.evaluate(() => {
const panelShell = document.querySelector('.aw-workshop-panel-shell');
const progressCard = document.querySelector('.aw-workshop-progress-card');
const stepContent = document.querySelector('.aw-workshop-step-content');
const panelShellStyle = panelShell ? window.getComputedStyle(panelShell) : null;
const progressCardStyle = progressCard ? window.getComputedStyle(progressCard) : null;
const stepContentStyle = stepContent ? window.getComputedStyle(stepContent) : null;
const workshopRoot = document.querySelector('.aw-workshop');
const panelHeader = document.querySelector('.aw-workshop-panel-header');
Expand All @@ -148,7 +135,6 @@ test.describe('Workshop tutorial', () => {
'.aw-workshop',
'.aw-workshop-panel-shell',
'.aw-workshop-panel-header',
'.aw-workshop-progress-card',
'.aw-workshop-step-content',
'.aw-workshop-panel-footer',
];
Expand Down Expand Up @@ -187,14 +173,6 @@ test.describe('Workshop tutorial', () => {
paddingLeft: panelShellStyle.paddingLeft,
paddingRight: panelShellStyle.paddingRight,
} : null,
progressCardStyle: progressCardStyle ? {
borderTopWidth: progressCardStyle.borderTopWidth,
borderRightWidth: progressCardStyle.borderRightWidth,
borderBottomWidth: progressCardStyle.borderBottomWidth,
borderLeftWidth: progressCardStyle.borderLeftWidth,
backgroundColor: progressCardStyle.backgroundColor,
boxShadow: progressCardStyle.boxShadow,
} : null,
stepContentStyle: stepContentStyle ? {
borderWidth: stepContentStyle.borderWidth,
borderRadius: stepContentStyle.borderRadius,
Expand All @@ -219,14 +197,6 @@ test.describe('Workshop tutorial', () => {
paddingLeft: '0px',
paddingRight: '0px',
});
expect(layout.progressCardStyle).toEqual({
borderTopWidth: '0px',
borderRightWidth: '0px',
borderBottomWidth: '1px',
borderLeftWidth: '0px',
backgroundColor: 'rgba(0, 0, 0, 0)',
boxShadow: 'none',
});
expect(layout.stepContentStyle).toMatchObject({
borderWidth: '0px',
borderRadius: '0px',
Expand Down