feat(ChangelogDialog): add modalClassName prop

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 {

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<number | undefined>(undefined);
@@ -64,7 +66,7 @@ export function ChangelogDialog(props: ChangelogDialogProps) {
     return (
         <Dialog
             className={b(null, className)}
-            modalClassName={b('modal')}
+            modalClassName={b('modal', modalClassName)}
             open={open}
             onClose={onClose}
             disableBodyScrollLock={disableBodyScrollLock}

src/components/ChangelogDialog/README.md

@@ -20,6 +20,7 @@ Component for displaying the changelog. It looks like a list of versions in a mo
 | onLinkClick             | `Function`                        |          |             | Action on click to "Read more", takes the version link          |
 | onRetryClick            | `Function`                        |          |             | Action on click to "Retry" in the error state                   |
 | className               | `String`                          |          |             | Dialog CSS class                                                |
+| modalClassName          | `String`                          |          |             | Modal CSS class, see [CSS API](#css-api)                        |
 
 ### ChangelogItem object
 
@@ -75,9 +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`         | —       |
+
+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.

src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx

@@ -138,3 +138,17 @@ Error.args = {
     open: true,
     error: true,
 };
+
+const CUSTOM_MAX_WIDTH_CLASS = 'changelog-dialog-custom-max-width';
+
+const CustomMaxWidthTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogProps) => (
+    <React.Fragment>
+        <style>{`.${CUSTOM_MAX_WIDTH_CLASS} { --g-modal-max-width: 1000px; }`}</style>
+        <DefaultTemplate {...props} modalClassName={CUSTOM_MAX_WIDTH_CLASS} />
+    </React.Fragment>
+);
+
+export const CustomMaxWidth = CustomMaxWidthTemplate.bind({});
+CustomMaxWidth.args = {
+    ...Default.args,
+};

src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx

@@ -124,11 +124,20 @@ 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(
         <ChangelogDialog open items={items} className="custom-class" onClose={jest.fn()} />,
     );
 
     // 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(
+        <ChangelogDialog open items={items} modalClassName="custom-class" onClose={jest.fn()} />,
+    );
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(baseElement.querySelector('.gc-changelog-dialog__modal')).toHaveClass('custom-class');
+});