From ef344939e985e8063b2f0d922ccbc48dea660107 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Tue, 7 Jan 2025 11:58:41 -0500 Subject: [PATCH 001/103] wip --- packages/code/src/Code.stories.tsx | 52 ++++++++++-- packages/code/src/Code/Code.styles.ts | 7 +- packages/code/src/Code/Code.tsx | 38 +++++---- .../src/LanguageSwitcher/LanguageSwitcher.tsx | 81 ++++++++++--------- .../LanguageSwitcherExample.tsx | 14 +++- packages/code/src/Panel/Panel.styles.ts | 5 +- packages/code/src/Panel/Panel.tsx | 25 +++--- packages/code/src/types.ts | 6 ++ 8 files changed, 148 insertions(+), 80 deletions(-) diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx index bdfb319e37..58aad531f1 100644 --- a/packages/code/src/Code.stories.tsx +++ b/packages/code/src/Code.stories.tsx @@ -12,7 +12,7 @@ import IconButton from '@leafygreen-ui/icon-button'; import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider'; import LanguageSwitcherExample from './LanguageSwitcher/LanguageSwitcherExample'; -import Code, { CodeProps, Language } from '.'; +import Code, { CodeProps, Language, Panel } from '.'; const jsSnippet = ` import datetime from './'; @@ -128,7 +128,7 @@ const customActionButtons = [ {}} aria-label="label" key="1"> , - , + // , , ]; -export const WithCustomActions = LiveExample.bind({}); -WithCustomActions.args = { - showCustomActionButtons: true, - customActionButtons, -}; +// export const WithCustomActions = LiveExample.bind({}); +// WithCustomActions.args = { +// showCustomActionButtons: true, +// customActionButtons, +// // panel: [ +// // +// // ] +// }; + +export const WithCustomActions: StoryType = ({ + baseFontSize, + highlightLines, + ...args +}: CodeProps & FontSizeProps) => ( + + option.displayName === args.language, + )} + customActionButtons={customActionButtons} + showCustomActionButtons + showCopyButton + contents={jsSnippet} + title="Language Switcher" + /> + } + > + {jsSnippet} + + +); export const WithLanguageSwitcher: StoryType = ({ baseFontSize, diff --git a/packages/code/src/Code/Code.styles.ts b/packages/code/src/Code/Code.styles.ts index 46796bf6af..77fcf097e3 100644 --- a/packages/code/src/Code/Code.styles.ts +++ b/packages/code/src/Code/Code.styles.ts @@ -42,10 +42,13 @@ export const wrapperStyle: Record = { export const contentWrapperStyles = css` position: relative; display: grid; - grid-template-areas: 'code panel'; - grid-template-columns: auto 38px; + /* grid-template-areas: 'code panel'; */ + /* grid-template-columns: auto 38px; */ border-radius: inherit; z-index: 0; // new stacking context + grid-template-areas: + 'panel' + 'code'; `; export const contentWrapperStylesNoPanel = css` diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx index a57c262bbe..867b1006b3 100644 --- a/packages/code/src/Code/Code.tsx +++ b/packages/code/src/Code/Code.tsx @@ -82,6 +82,7 @@ function Code({ onChange, customActionButtons = [], showCustomActionButtons = false, + panel, ...rest }: CodeProps) { const scrollableElementRef = useRef(null); @@ -229,6 +230,23 @@ function Code({ }, )} > + {/* Can make this a more robust check in the future */} + {/* Right now the panel will only be rendered with copyable or a language switcher */} + {/* {showPanel && ( + + )} */} + 
)}
             className={cx(
@@ -236,7 +254,8 @@ function Code({
               getCodeWrapperVariantStyle(theme),
               {
                 [codeWrapperStyleWithLanguagePicker]: showLanguagePicker,
-                [codeWrapperStyleNoPanel]: !showPanel,
+                // [codeWrapperStyleNoPanel]: !showPanel,
+                [codeWrapperStyleNoPanel]: !panel,
                 [singleLineCodeWrapperStyle]: !isMultiline,
                 [getExpandableCodeWrapperStyle(
                   expanded,
@@ -255,22 +274,7 @@ function Code({
             {renderedSyntaxComponent}
- {/* Can make this a more robust check in the future */} - {/* Right now the panel will only be rendered with copyable or a language switcher */} - {showPanel && ( - - )} + {!!panel && panel} {showExpandButton && ( - ), -); - -CustomSelectMenuButton.displayName = 'CustomSelectMenuButton'; diff --git a/packages/code/src/CustomSelectMenuButton/index.ts b/packages/code/src/CustomSelectMenuButton/index.ts deleted file mode 100644 index 863dfeabe5..0000000000 --- a/packages/code/src/CustomSelectMenuButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CustomSelectMenuButton } from './CustomSelectMenuButton'; diff --git a/packages/code/src/WindowChrome/WindowChrome.spec.tsx b/packages/code/src/WindowChrome/WindowChrome.spec.tsx deleted file mode 100644 index d369f953ff..0000000000 --- a/packages/code/src/WindowChrome/WindowChrome.spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { cleanup, render } from '@testing-library/react'; - -import { typeIs } from '@leafygreen-ui/lib'; - -import WindowChrome from './WindowChrome'; - -afterAll(cleanup); - -const title = 'chrome/title.js'; - -describe('packages/Syntax', () => { - const { container } = render(); - - const windowChromeContainer = container.firstChild as HTMLElement; - - if (!windowChromeContainer || !typeIs.element(windowChromeContainer)) { - throw new Error('Code element not found'); - } - - test(`renders ${title} within the simulated window chrome`, () => { - expect(windowChromeContainer.textContent).toBe(title); - }); -}); diff --git a/packages/code/src/WindowChrome/WindowChrome.styles.ts b/packages/code/src/WindowChrome/WindowChrome.styles.ts deleted file mode 100644 index 47a7925f98..0000000000 --- a/packages/code/src/WindowChrome/WindowChrome.styles.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { css } from '@leafygreen-ui/emotion'; -import { Theme } from '@leafygreen-ui/lib'; -import { palette } from '@leafygreen-ui/palette'; -import { fontFamilies, typeScales } from '@leafygreen-ui/tokens'; - -import { variantColors } from '../globalStyles'; - -export const windowChromeHeight = 28; -const controlSize = 12; -const controlSpacing = 8; -const borderRadius = 4; - -export const windowChromeStyle = css` - display: flex; - align-items: center; - justify-content: center; - height: ${windowChromeHeight}px; - padding-left: ${controlSize}px; - padding-right: ${controlSize}px; - border-radius: ${borderRadius}px ${borderRadius}px 0 0; - font-family: ${fontFamilies.default}; -`; - -export const windowChromeThemeStyles: Record = { - [Theme.Light]: css` - color: ${palette.gray.dark2}; - background-color: ${variantColors.light[1]}; - `, - [Theme.Dark]: css` - color: ${palette.gray.light1}; - background-color: ${variantColors.dark[1]}; - `, -}; - -export const textStyle = css` - padding-left: ${controlSpacing}px; - padding-right: ${controlSpacing}px; - font-size: ${typeScales.body1.fontSize}px; -`; diff --git a/packages/code/src/WindowChrome/WindowChrome.tsx b/packages/code/src/WindowChrome/WindowChrome.tsx deleted file mode 100644 index 5a50ace8db..0000000000 --- a/packages/code/src/WindowChrome/WindowChrome.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { cx } from '@leafygreen-ui/emotion'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; - -import { - textStyle, - windowChromeStyle, - windowChromeThemeStyles, -} from './WindowChrome.styles'; - -interface WindowChromeProps { - chromeTitle?: string; -} - -function WindowChrome({ chromeTitle = '' }: WindowChromeProps) { - const { theme } = useDarkMode(); - - return ( -
-
{chromeTitle}
-
- ); -} - -WindowChrome.displayName = 'WindowChrome'; - -WindowChrome.propTypes = { - darkMode: PropTypes.bool, - chromeTitle: PropTypes.string, -}; - -export default WindowChrome; diff --git a/packages/code/src/WindowChrome/index.ts b/packages/code/src/WindowChrome/index.ts deleted file mode 100644 index d181cbc3f9..0000000000 --- a/packages/code/src/WindowChrome/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WindowChrome } from './WindowChrome'; From 893f0215d3ebf5bab016325d67defdf8850baba1 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Fri, 10 Jan 2025 17:38:53 -0500 Subject: [PATCH 018/103] fix onChangeError --- packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx | 1 - packages/code/src/Panel/Panel.types.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx b/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx index 564eb16a2c..6b37f641c7 100644 --- a/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx +++ b/packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx @@ -68,7 +68,6 @@ function LanguageSwitcher({ diff --git a/packages/code/src/Panel/Panel.types.ts b/packages/code/src/Panel/Panel.types.ts index 9345d3ccb1..45385c965b 100644 --- a/packages/code/src/Panel/Panel.types.ts +++ b/packages/code/src/Panel/Panel.types.ts @@ -13,7 +13,7 @@ export interface LanguageSwitcherProps { } export type PanelProps = Partial> & - ComponentPropsWithRef<'div'> & { + Omit, 'onChange'> & { /** * Callback fired when Code is copied via the copy button. * From 2fd12a6179a2092955520fa09ca55d2dfe51a192 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Fri, 10 Jan 2025 17:40:03 -0500 Subject: [PATCH 019/103] remove comment --- packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx index 721a29ad5d..a14b5e67b2 100644 --- a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx +++ b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx @@ -33,8 +33,6 @@ function LanguageSwitcher({ language, languageOptions, onChange }: Props) { } }; - console.log('💚'); - return (