diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx
index ee4350ffaa84..d1a2462bc502 100644
--- a/components/article/PlatformPicker.tsx
+++ b/components/article/PlatformPicker.tsx
@@ -22,6 +22,14 @@ function showPlatformSpecificContent(platform: string) {
.filter((el) => platforms.some((platform) => el.classList.contains(platform.value)))
.forEach((el) => {
el.style.display = el.classList.contains(platform) ? '' : 'none'
+
+ // hack: special handling for minitoc links -- we can't pass the tool classes
+ // directly to the Primer NavList.Item generated
, it gets passed down
+ // to the child . So if we find an that has the tool class and its
+ // parent is an , we hide/unhide that element as well.
+ if (el.tagName === 'A' && el.parentElement && el.parentElement.tagName === 'LI') {
+ el.parentElement.style.display = el.classList.contains(platform) ? '' : 'none'
+ }
})
// find all platform-specific *inline* elements and hide or show as appropriate
diff --git a/tests/fixtures/content/get-started/liquid/platform-specific.md b/tests/fixtures/content/get-started/liquid/platform-specific.md
index c4d3ca4fecb0..a1dedcb2577a 100644
--- a/tests/fixtures/content/get-started/liquid/platform-specific.md
+++ b/tests/fixtures/content/get-started/liquid/platform-specific.md
@@ -7,6 +7,7 @@ versions:
ghae: '*'
ghec: '*'
type: how_to
+defaultPlatform: windows
---
## General
diff --git a/tests/rendering-fixtures/playwright-rendering.spec.ts b/tests/rendering-fixtures/playwright-rendering.spec.ts
index ed95e4298b5d..837c6610f69b 100644
--- a/tests/rendering-fixtures/playwright-rendering.spec.ts
+++ b/tests/rendering-fixtures/playwright-rendering.spec.ts
@@ -72,6 +72,24 @@ test.describe('platform picker', () => {
await expect(page.getByRole('heading', { name: /Macintosh/ })).not.toBeVisible()
})
+ test('minitoc matches picker', async ({ page }) => {
+ // default platform set to windows in fixture fronmatter
+ await page.goto('/get-started/liquid/platform-specific')
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Macintosh until 1999' }),
+ ).not.toBeVisible()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Windows 95 was awesome' }),
+ ).toBeVisible()
+ await page.getByTestId('platform-picker').getByRole('link', { name: 'Linux' }).click()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Macintosh until 1999' }),
+ ).not.toBeVisible()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'The year of Linux on the desktop' }),
+ ).toBeVisible()
+ })
+
test('remember last clicked OS', async ({ page }) => {
await page.goto('/get-started/liquid/platform-specific')
await page.getByTestId('platform-picker').getByRole('link', { name: 'Windows' }).click()
@@ -97,20 +115,6 @@ test.describe('tool picker', () => {
await expect(page.getByText('this is cli content')).not.toBeVisible()
await expect(page.getByText('this is desktop content')).not.toBeVisible()
await expect(page.getByText('this is webui content')).toBeVisible()
-
- // Go to page again so that we start with the default webui content and can
- // check the minitoc links
- await page.goto('/get-started/liquid/tool-specific')
- await expect(
- page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
- ).toBeVisible()
- await expect(
- page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
- ).not.toBeVisible()
- await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click()
- await expect(
- page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
- ).not.toBeVisible()
})
test('prefer default tool', async ({ page }) => {
@@ -132,6 +136,24 @@ test.describe('tool picker', () => {
await expect(page.getByText('this is desktop content')).not.toBeVisible()
await expect(page.getByText('this is webui content')).toBeVisible()
})
+
+ test('minitoc matches picker', async ({ page }) => {
+ // default tool set to desktop in fixture fronmatter
+ await page.goto('/get-started/liquid/tool-specific')
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
+ ).toBeVisible()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
+ ).not.toBeVisible()
+ await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
+ ).not.toBeVisible()
+ await expect(
+ page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
+ ).toBeVisible()
+ })
})
test('filter article cards', async ({ page }) => {