From 7529d3f392ba6c4db701bc0d15a781f8c7a6b82d Mon Sep 17 00:00:00 2001 From: Angelina Date: Thu, 20 Aug 2026 13:32:41 +0300 Subject: [PATCH 1/2] feat(ChangelogDialog): add modalClassName prop The `--gc-changelog-dialog-*` variables are read by the modal, which is rendered in a portal above the element `className` is applied to, so they could only be set globally. `modalClassName` gives a per-instance way to set them. Co-Authored-By: Claude Opus 5 --- src/components/ChangelogDialog/ChangelogDialog.tsx | 4 +++- src/components/ChangelogDialog/README.md | 3 +++ .../__stories__/ChangelogDialog.stories.tsx | 14 ++++++++++++++ .../__tests__/ChangelogDialog.test.tsx | 11 ++++++++++- 4 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx index 580e6215..e79e4b6c 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.tsx +++ b/src/components/ChangelogDialog/ChangelogDialog.tsx @@ -30,6 +30,7 @@ export interface ChangelogDialogProps { error?: boolean | {title: string; description: string}; disableHeightTransition?: boolean; className?: string; + modalClassName?: string; } let nextId = 1; @@ -55,6 +56,7 @@ export function ChangelogDialog(props: ChangelogDialogProps) { loading, error, className, + modalClassName, } = props; const idRef = React.useRef(undefined); @@ -64,7 +66,7 @@ export function ChangelogDialog(props: ChangelogDialogProps) { return ( = (props: ChangelogDialogProps) => ( + + + + +); + +export const CustomMaxWidth = CustomMaxWidthTemplate.bind({}); +CustomMaxWidth.args = { + ...Default.args, +}; diff --git a/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx index 41d8771b..9b2dec73 100644 --- a/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx +++ b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx @@ -124,7 +124,7 @@ test('Calls onStoryClick and onLinkClick', async () => { expect(handleLinkClick).toBeCalledWith('https://example.com'); }); -test('Applies className to the element the size CSS variables are set on', () => { +test('Applies className to the dialog', () => { const {baseElement} = render( , ); @@ -132,3 +132,12 @@ test('Applies className to the element the size CSS variables are set on', () => // eslint-disable-next-line testing-library/no-node-access expect(baseElement.querySelector('.gc-changelog-dialog')).toHaveClass('custom-class'); }); + +test('Applies modalClassName to the element the size CSS variables are read on', () => { + const {baseElement} = render( + , + ); + + // eslint-disable-next-line testing-library/no-node-access + expect(baseElement.querySelector('.gc-changelog-dialog__modal')).toHaveClass('custom-class'); +}); From 7879ddf797693d4146ab602bd76d5e56570832fc Mon Sep 17 00:00:00 2001 From: Angelina Date: Thu, 20 Aug 2026 14:55:19 +0300 Subject: [PATCH 2/2] fix(ChangelogDialog): drop --gc-changelog-dialog-max-width Set `--g-modal-max-width` on the modal via `modalClassName` instead of going through a component-specific alias. The deprecated `--gc-changelog-dialog-width` keeps working. `--gc-changelog-dialog-max-width` has not been released yet, so nothing in a published version depends on it. Co-Authored-By: Claude Opus 5 --- src/components/ChangelogDialog/ChangelogDialog.scss | 7 ++----- src/components/ChangelogDialog/README.md | 13 ++++++------- .../__stories__/ChangelogDialog.stories.tsx | 2 +- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss index 74ddd458..e7c8694e 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.scss +++ b/src/components/ChangelogDialog/ChangelogDialog.scss @@ -7,13 +7,10 @@ $maxItemsHeight: 70vh; --gc-changelog-dialog-max-height: #{$maxItemsHeight}; --gc-changelog-dialog-meta-width: 80px; - // `--gc-changelog-dialog-width` is deprecated in favor of `--gc-changelog-dialog-max-width` + // `--gc-changelog-dialog-width` is deprecated in favor of `--g-modal-max-width` &__modal { --g-modal-width: 100%; - --g-modal-max-width: var( - --gc-changelog-dialog-max-width, - var(--gc-changelog-dialog-width, 732px) - ); + --g-modal-max-width: var(--gc-changelog-dialog-width, 732px); } &__full-list-link-icon { diff --git a/src/components/ChangelogDialog/README.md b/src/components/ChangelogDialog/README.md index 30a646ea..aaeff43e 100644 --- a/src/components/ChangelogDialog/README.md +++ b/src/components/ChangelogDialog/README.md @@ -76,11 +76,10 @@ Component for displaying the changelog. It looks like a list of versions in a mo ### CSS API -| Name | Description | Default | -| :--------------------------------- | :---------------------------------------------------- | :------ | -| `--gc-changelog-dialog-max-width` | Maximum dialog width | `732px` | -| `--gc-changelog-dialog-max-height` | Maximum height of the list of versions | `70vh` | -| `--gc-changelog-dialog-meta-width` | Width of the item meta column (date, "New" label) | `80px` | -| ~~`--gc-changelog-dialog-width`~~ | **Deprecated**, use `--gc-changelog-dialog-max-width` | — | +| Name | Description | Default | +| :--------------------------------- | :------------------------------------------------ | :------ | +| `--gc-changelog-dialog-max-height` | Maximum height of the list of versions | `70vh` | +| `--gc-changelog-dialog-meta-width` | Width of the item meta column (date, "New" label) | `80px` | +| ~~`--gc-changelog-dialog-width`~~ | **Deprecated**, use `--g-modal-max-width` | — | -The variables are read by the modal, which is rendered in a portal above the element `className` is applied to. Set them either globally or via the `modalClassName` prop — passing them through `className` has no effect. +To change the dialog width, set the `Modal` variables — `--g-modal-max-width`, `--g-modal-width` — on the modal itself via the `modalClassName` prop. The component sets `--g-modal-max-width: 732px` there, so the overriding rule has to win the cascade over the component styles. diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx index a73879c8..980b120b 100644 --- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx +++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx @@ -143,7 +143,7 @@ const CUSTOM_MAX_WIDTH_CLASS = 'changelog-dialog-custom-max-width'; const CustomMaxWidthTemplate: StoryFn = (props: ChangelogDialogProps) => ( - + );