From da24b44a4a114542ad5f2e9a2cd66b41c488bae4 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Thu, 30 Jan 2025 18:33:58 -0500 Subject: [PATCH 1/5] add type --- packages/code/src/Code/Code.types.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/code/src/Code/Code.types.ts b/packages/code/src/Code/Code.types.ts index 601ea219cd..02a20101ce 100644 --- a/packages/code/src/Code/Code.types.ts +++ b/packages/code/src/Code/Code.types.ts @@ -1,3 +1,5 @@ +import { BaseFontSize } from '@leafygreen-ui/tokens'; + import { LanguageOption } from '../Panel/Panel.types'; import { SyntaxProps } from '../Syntax/Syntax.types'; import { Language } from '../types'; @@ -104,6 +106,13 @@ export type CodeProps = Omit< * @deprecated */ copyable?: boolean; + + /** + * Determines the base font-size of the component + * + * @default 13 + */ + baseFontSize?: BaseFontSize; } & ( | { /** From b651ed2fb14af7ca77185199ddefeaffdf7da00e Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Thu, 30 Jan 2025 18:44:18 -0500 Subject: [PATCH 2/5] add baseFontSize prop --- packages/code/src/Code.stories.tsx | 91 +++++++++++++----------------- packages/code/src/Code/Code.tsx | 6 +- 2 files changed, 43 insertions(+), 54 deletions(-) diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx index 470b3052aa..ac70f527d6 100644 --- a/packages/code/src/Code.stories.tsx +++ b/packages/code/src/Code.stories.tsx @@ -124,18 +124,15 @@ interface FontSizeProps { } export const LiveExample: StoryType = ({ - baseFontSize, highlightLines, ...args }: CodeProps & FontSizeProps) => ( - - - {jsSnippet} - - + + {jsSnippet} + ); LiveExample.parameters = { chromatic: { @@ -144,38 +141,32 @@ LiveExample.parameters = { }; export const WithCustomActions: StoryType = ({ - baseFontSize, highlightLines, ...args }: CodeProps & FontSizeProps) => ( - - - } - > - {jsSnippet} - - + + } + > + {jsSnippet} + ); export const WithLanguageSwitcher: StoryType = ({ - baseFontSize, ...args }: CodeProps & FontSizeProps) => ( - - - + ); WithLanguageSwitcher.parameters = { controls: { @@ -193,17 +184,15 @@ WithLanguageSwitcher.parameters = { export const WithDeprecatedCustomActionProps: StoryType< typeof Code, FontSizeProps -> = ({ baseFontSize, highlightLines, ...args }: CodeProps & FontSizeProps) => ( - - - {jsSnippet} - - +> = ({ highlightLines, ...args }: CodeProps) => ( + + {jsSnippet} + ); WithDeprecatedCustomActionProps.parameters = { controls: { @@ -221,14 +210,12 @@ WithDeprecatedCustomActionProps.parameters = { export const WithDeprecatedLanguageSwitcherProps: StoryType< typeof Code, FontSizeProps -> = ({ baseFontSize, ...args }: CodeProps & FontSizeProps) => ( - - - +> = ({ ...args }: CodeProps) => ( + ); WithDeprecatedLanguageSwitcherProps.parameters = { controls: { diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx index 4eab86cb43..333675485c 100644 --- a/packages/code/src/Code/Code.tsx +++ b/packages/code/src/Code/Code.tsx @@ -6,7 +6,8 @@ import { useIsomorphicLayoutEffect } from '@leafygreen-ui/hooks'; import ChevronDown from '@leafygreen-ui/icon/dist/ChevronDown'; import ChevronUp from '@leafygreen-ui/icon/dist/ChevronUp'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -import { useBaseFontSize } from '@leafygreen-ui/leafygreen-provider'; +// import { useBaseFontSize } from '@leafygreen-ui/leafygreen-provider'; +import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography'; import CodeContextProvider from '../CodeContext/CodeContext'; import { LGIDs, numOfCollapsedLinesOfCode } from '../constants'; @@ -51,6 +52,7 @@ function Code({ className, onCopy, panel, + baseFontSize: baseFontSizeProp, // Deprecated props copyable = false, showCustomActionButtons = false, @@ -69,7 +71,7 @@ function Code({ const [collapsedCodeHeight, setCollapsedCodeHeight] = useState(0); const isMultiline = useMemo(() => hasMultipleLines(children), [children]); const { theme, darkMode } = useDarkMode(darkModeProp); - const baseFontSize = useBaseFontSize(); + const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp); useIsomorphicLayoutEffect(() => { const scrollableElement = scrollableElementRef.current; From bf6d557414a6eab8589bd32ce8166ad46a0b92b8 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Thu, 30 Jan 2025 18:49:52 -0500 Subject: [PATCH 3/5] readme --- .changeset/chatty-ears-exercise.md | 4 ++++ packages/code/README.md | 1 + packages/code/src/Code/Code.tsx | 1 - 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.changeset/chatty-ears-exercise.md b/.changeset/chatty-ears-exercise.md index 6b096e5783..f2202158e0 100644 --- a/.changeset/chatty-ears-exercise.md +++ b/.changeset/chatty-ears-exercise.md @@ -73,6 +73,10 @@ e.g. {snippet} ``` + +### `baseFontSize` +Adds `baseFontSize` prop, which allows you to override the `LeafyGreenProvider` value. + ## Deprecated The following props have been marked as `deprecated`: diff --git a/packages/code/README.md b/packages/code/README.md index e37e940187..1c01cad71d 100644 --- a/packages/code/README.md +++ b/packages/code/README.md @@ -98,6 +98,7 @@ const SomeComponentWithoutPanel = () => ( | `highlightLines` | `Array` | An optional array of lines to highlight. The array can only contain numbers corresponding to the line numbers to highlight, and / or tuples representing a range (e.g. `[6, 10]`); | | | `copyButtonAppearance` | `'none'`, `'hover'`, `'persist'` | Determines the appearance of the copy button without a panel. The copy button allows the code block to be copied to the user's clipboard by clicking the button. If `hover`, the copy button will only appear when the user hovers over the code block. On mobile devices, the copy button will always be visible. If `persist`, the copy button will always be visible. If `none`, the copy button will not be rendered. **_Note: This prop will be ignored if the `panel` prop is defined. Either use `copyButtonAppearance` or `panel`, not both_**. | `hover` | | `panel` | `React.ReactNode` | Slot to pass the `` sub-component which will render the top panel with a language switcher, custom action buttons, and copy button. If no props are passed to the panel sub-component, the panel will render with only the copy button. **_Note: This prop takes precedence over `copyButtonAppearance`. Either use `copyButtonAppearance` or `panel`, not both._** | `` | +| `baseFontSize` | `'13'` \| `'16'` | Determines the base font-size of the component | `13` | | `copyable` (`Deprecated`) | `boolean` | When true, allows the code block to be copied to the user's clipboard. **_Note:_** `@deprecated` - use `` or `copyButtonAppearance` | `false` | | `chromeTitle`(`Deprecated`) | `string` | Shows a filename-like title in the window chrome frame.**NOTE:** While you can set this prop if `showWindowChrome` is `false`, it will not be displayed unless the `showWindowChrome` prop is `true`. **_Note:_** `@deprecated` - use `panel={}` | `''` | | `showCustomActionButtons` (`Deprecated`) | `boolean` | Shows custom action buttons in the panel if set to `true` and there is at least one item in `customActionButtons`. **_Note:_** `@deprecated` - use `` | `false` | diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx index 333675485c..43de1fcbc7 100644 --- a/packages/code/src/Code/Code.tsx +++ b/packages/code/src/Code/Code.tsx @@ -6,7 +6,6 @@ import { useIsomorphicLayoutEffect } from '@leafygreen-ui/hooks'; import ChevronDown from '@leafygreen-ui/icon/dist/ChevronDown'; import ChevronUp from '@leafygreen-ui/icon/dist/ChevronUp'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -// import { useBaseFontSize } from '@leafygreen-ui/leafygreen-provider'; import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography'; import CodeContextProvider from '../CodeContext/CodeContext'; From 1f8fb7f9690222be587292c8168e6547f3f257dc Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Mon, 3 Feb 2025 17:13:44 -0500 Subject: [PATCH 4/5] delay. check --- packages/code/src/Code.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx index a74766d07f..bc5ed74973 100644 --- a/packages/code/src/Code.stories.tsx +++ b/packages/code/src/Code.stories.tsx @@ -313,6 +313,7 @@ WithoutPanel.parameters = { export const Loading = () => {}; Loading.parameters = { + chromatic: { delay: 2000 }, // 2-second delay controls: { exclude: /.*/g, }, From 0d52e9781a7c7302592a740a49538fb0d385e8e6 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Tue, 4 Feb 2025 16:26:44 -0500 Subject: [PATCH 5/5] increase delay? --- packages/code/src/Code.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx index bc5ed74973..2d987ae89a 100644 --- a/packages/code/src/Code.stories.tsx +++ b/packages/code/src/Code.stories.tsx @@ -10,7 +10,6 @@ import { import { css } from '@leafygreen-ui/emotion'; import Icon from '@leafygreen-ui/icon'; import IconButton from '@leafygreen-ui/icon-button'; -import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider'; import { languageOptions, @@ -313,7 +312,7 @@ WithoutPanel.parameters = { export const Loading = () => {}; Loading.parameters = { - chromatic: { delay: 2000 }, // 2-second delay + chromatic: { delay: 5000 }, // 5-second delay controls: { exclude: /.*/g, },