From ebabcbe36aa8daf4c00b0e251407aabe7a0a8a7d Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Tue, 26 Aug 2025 09:05:45 -0400 Subject: [PATCH] feat(panel): update Panel to find the current language option by matching either its display name or language value. --- .changeset/flat-carrots-change.md | 29 ++++++++ packages/code/src/Code.stories.tsx | 6 +- packages/code/src/Code/Code.spec.tsx | 70 ++++++++++++++++++- .../LanguageSwitcherExample.tsx | 24 +++---- packages/code/src/Panel/Panel.tsx | 2 +- packages/code/src/testing/Code.testutils.tsx | 4 ++ .../code/src/testing/getTestUtils.spec.tsx | 2 +- 7 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 .changeset/flat-carrots-change.md diff --git a/.changeset/flat-carrots-change.md b/.changeset/flat-carrots-change.md new file mode 100644 index 0000000000..d1446b5c6f --- /dev/null +++ b/.changeset/flat-carrots-change.md @@ -0,0 +1,29 @@ +--- +'@leafygreen-ui/code': patch +--- + +Fixes bug that prevented the language select from rendering if the `displayName` and `language` differed. + +```tsx +// languageOptions passed to ` +export const languageOptions = [ + { + displayName: 'JavaScript', + language: 'javascript', + }, + { + displayName: 'Python', + language: 'python', + }, + { + displayName: 'macOS', + language: 'shell', + }, +]; + +// This will render the language selector. +} +/> +``` \ No newline at end of file diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx index a2aa592274..5a55a5cd95 100644 --- a/packages/code/src/Code.stories.tsx +++ b/packages/code/src/Code.stories.tsx @@ -11,10 +11,8 @@ import { css } from '@leafygreen-ui/emotion'; import Icon from '@leafygreen-ui/icon'; import IconButton from '@leafygreen-ui/icon-button'; -import { - languageOptions, - LanguageSwitcherWithPanelExample, -} from './LanguageSwitcher/LanguageSwitcherExample'; +import { LanguageSwitcherWithPanelExample } from './LanguageSwitcher/LanguageSwitcherExample'; +import { languageOptions } from './testing/Code.testutils'; import Code, { CodeProps, CopyButton, diff --git a/packages/code/src/Code/Code.spec.tsx b/packages/code/src/Code/Code.spec.tsx index 0d73f3309a..d1e549a5f7 100644 --- a/packages/code/src/Code/Code.spec.tsx +++ b/packages/code/src/Code/Code.spec.tsx @@ -409,6 +409,74 @@ describe('packages/Code', () => { ); } }); + + describe('when the language and displayName are the same', () => { + test('renders the language picker', () => { + const { getLanguageSwitcherUtils } = renderCode({ + language: languageOptions[0].displayName, + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguageSwitcherUtils().getInput()).toBeDefined(); + }); + + test('the language pickers display the displayName', () => { + const { getLanguageSwitcherUtils } = renderCode({ + language: languageOptions[0].displayName, + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguageSwitcherUtils().getInput()).toHaveTextContent( + 'JavaScript', + ); + }); + + test('sets the correct language', () => { + const { getLanguage } = renderCode({ + language: languageOptions[0].displayName, + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguage()).toBe('JavaScript'); + }); + }); + + describe('when the language and displayName are different', () => { + test('renders the language picker', () => { + const { getLanguageSwitcherUtils } = renderCode({ + language: languageOptions[2].language, // language is shell. displayName is macOS + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguageSwitcherUtils().getInput()).toBeDefined(); + }); + + test('the language pickers displays the displayName', () => { + const { getLanguageSwitcherUtils } = renderCode({ + language: languageOptions[2].language, // language is shell. displayName is macOS + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguageSwitcherUtils().getInput()).toHaveTextContent( + 'macOS', + ); + }); + + test('sets the correct language', () => { + const { getLanguage } = renderCode({ + language: languageOptions[2].language, // language is shell. displayName is macOS + panel: ( + {}} languageOptions={languageOptions} /> + ), + }); + expect(getLanguage()).toBe('shell'); + }); + }); }); describe('custom action buttons', () => { @@ -490,7 +558,7 @@ describe('packages/Code', () => { const { getLanguageSwitcherUtils } = renderCodeWithLanguageSwitcher({}); const trigger = getLanguageSwitcherUtils().getInput(); userEvent.click(trigger!); - expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(2); + expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(3); }); test('options displayed in select are based on the languageOptions prop', () => { diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx b/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx index f78333958a..e39a440056 100644 --- a/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx +++ b/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx @@ -1,20 +1,10 @@ import React, { useState } from 'react'; import { LanguageOption } from '../Panel/Panel.types'; +import { languageOptions } from '../testing/Code.testutils'; import { Language } from '../types'; import Code, { Panel } from '..'; -export const languageOptions = [ - { - displayName: 'JavaScript', - language: Language.JavaScript, - }, - { - displayName: 'Python', - language: Language.Python, - }, -]; - const jsSnippet = ` function greeting(entity) { @@ -34,9 +24,17 @@ print (greeting("World")) `; +const shellSnippet = ` + +#!/bin/sh +echo "Hello world" + +`; + const snippetMap = { [Language.JavaScript]: jsSnippet, [Language.Python]: pythonSnippet, + [Language.Shell]: shellSnippet, }; export function LanguageSwitcherWithPanelExample({ @@ -61,7 +59,7 @@ export function LanguageSwitcherWithPanelExample({ return ( } > - {snippetMap[languageIndex as 'javascript' | 'python']} + {snippetMap[languageIndex as 'javascript' | 'python' | 'shell']} ); } diff --git a/packages/code/src/Panel/Panel.tsx b/packages/code/src/Panel/Panel.tsx index 693f420f7d..2605979ec7 100644 --- a/packages/code/src/Panel/Panel.tsx +++ b/packages/code/src/Panel/Panel.tsx @@ -41,7 +41,7 @@ function Panel({ showCustomActionButtons && !!filteredCustomActionIconButtons.length; const currentLanguage = languageOptions?.find( - option => option.displayName === language, + option => option.displayName === language || option.language === language, ); const shouldRenderLanguageSwitcher = diff --git a/packages/code/src/testing/Code.testutils.tsx b/packages/code/src/testing/Code.testutils.tsx index 34482063a1..df05f91e90 100644 --- a/packages/code/src/testing/Code.testutils.tsx +++ b/packages/code/src/testing/Code.testutils.tsx @@ -42,6 +42,10 @@ export const languageOptions = [ displayName: 'Python', language: Language.Python, }, + { + displayName: 'macOS', + language: Language.Shell, + }, ]; export const renderCode = ( diff --git a/packages/code/src/testing/getTestUtils.spec.tsx b/packages/code/src/testing/getTestUtils.spec.tsx index 161c2142d0..7c5b825627 100644 --- a/packages/code/src/testing/getTestUtils.spec.tsx +++ b/packages/code/src/testing/getTestUtils.spec.tsx @@ -105,7 +105,7 @@ describe('packages/tabs/getTestUtils', () => { {}, ); userEvent.click(getLanguageSwitcherUtils().getInput()!); - expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(2); + expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(3); }); });