diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.input.tsx
new file mode 100644
index 0000000000..b27e24d85d
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.input.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+ <>
+
+
+
+ >
+);
diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.output.tsx
new file mode 100644
index 0000000000..dc6f07ccf7
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.output.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+ <>
+
+
+
+ >
+);
diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.input.tsx
new file mode 100644
index 0000000000..6ab2b38fc7
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.input.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+ <>
+
+
+
+ >
+);
diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.output.tsx
new file mode 100644
index 0000000000..2dc37cc4ad
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.output.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+ <>
+
+
+
+ >
+);
diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isdockedonmobile-prop.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isdockedonmobile-prop.test.ts
new file mode 100644
index 0000000000..c08a261aaa
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isdockedonmobile-prop.test.ts
@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'modal-isdockedonmobile-prop');
diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isscrollable-prop.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isscrollable-prop.test.ts
new file mode 100644
index 0000000000..174b89d259
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isscrollable-prop.test.ts
@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'modal-isscrollable-prop');
diff --git a/packages/codemods/src/transforms/v2/web-react/modal-isdockedonmobile-prop.ts b/packages/codemods/src/transforms/v2/web-react/modal-isdockedonmobile-prop.ts
new file mode 100644
index 0000000000..9dd3760c9b
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/modal-isdockedonmobile-prop.ts
@@ -0,0 +1,52 @@
+import { API, FileInfo } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+ const j = api.jscodeshift;
+ const root = j(fileInfo.source);
+
+ // Find import statements for the specific module and ModalDialog specifier
+ const importStatements = root.find(j.ImportDeclaration, {
+ source: {
+ value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value),
+ },
+ });
+
+ // Check if the module is imported
+ if (importStatements.length > 0) {
+ const modalDialogSpecifier = importStatements.find(j.ImportSpecifier, {
+ imported: {
+ type: 'Identifier',
+ name: 'ModalDialog',
+ },
+ });
+
+ // Check if ModalDialog specifier is present
+ if (modalDialogSpecifier.length > 0) {
+ // Find ModalDialog components in the module
+ const modalDialogComponents = root.find(j.JSXOpeningElement, {
+ name: {
+ type: 'JSXIdentifier',
+ name: 'ModalDialog',
+ },
+ });
+
+ modalDialogComponents.forEach((path) => {
+ if (path.node && path.node.attributes) {
+ // Check if the component already has the isDockedOnMobile attribute
+ const hasIsDockedOnMobileAttribute = path.node.attributes.some(
+ (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'isDockedOnMobile',
+ );
+
+ // If not, add isDockedOnMobile attribute
+ if (!hasIsDockedOnMobileAttribute) {
+ path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('isDockedOnMobile'), null));
+ }
+ }
+ });
+ }
+ }
+
+ return root.toSource();
+};
+
+export default transform;
diff --git a/packages/codemods/src/transforms/v2/web-react/modal-isscrollable-prop.ts b/packages/codemods/src/transforms/v2/web-react/modal-isscrollable-prop.ts
new file mode 100644
index 0000000000..06fe2f602d
--- /dev/null
+++ b/packages/codemods/src/transforms/v2/web-react/modal-isscrollable-prop.ts
@@ -0,0 +1,52 @@
+import { API, FileInfo } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+ const j = api.jscodeshift;
+ const root = j(fileInfo.source);
+
+ // Find import statements for the specific module and ModalDialog specifier
+ const importStatements = root.find(j.ImportDeclaration, {
+ source: {
+ value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value),
+ },
+ });
+
+ // Check if the module is imported
+ if (importStatements.length > 0) {
+ const modalDialogSpecifier = importStatements.find(j.ImportSpecifier, {
+ imported: {
+ type: 'Identifier',
+ name: 'ModalDialog',
+ },
+ });
+
+ // Check if ModalDialog specifier is present
+ if (modalDialogSpecifier.length > 0) {
+ // Find ModalDialog components in the module
+ const modalDialogComponents = root.find(j.JSXOpeningElement, {
+ name: {
+ type: 'JSXIdentifier',
+ name: 'ModalDialog',
+ },
+ });
+
+ modalDialogComponents.forEach((path) => {
+ if (path.node && path.node.attributes) {
+ // Check if the component already has the isScrollable attribute
+ const hasIsScrollableAttribute = path.node.attributes.some(
+ (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'isScrollable',
+ );
+
+ // If not, add isScrollable attribute
+ if (!hasIsScrollableAttribute) {
+ path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('isScrollable'), null));
+ }
+ }
+ });
+ }
+ }
+
+ return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md
index efe7b76703..b8f5f74da8 100644
--- a/packages/web-react/DEPRECATIONS-v2.md
+++ b/packages/web-react/DEPRECATIONS-v2.md
@@ -192,7 +192,33 @@ non-scrollable by default. It will be possible to re-enable the inside scrolling
#### Migration Guide
-Add `isScrollable` prop to the `ModalDialog` component.
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p -t v2/web-react/modal-iscrollable-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isScrollable` prop to the `ModalDialog` component.
+
+### ModalDialog `isExpandedOnMobile` Prop
+
+The `isExpandedOnMobile` prop will be set to `true` by default in the next major release and the ModalDialog will be
+expanded on mobile by default. It will be possible to re-collapse the inside by setting the `isExpandedOnMobile` prop
+to `false` value.
+
+#### Migration Guide
+
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p -t v2/web-react/modal-isexpandedonmobile-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isExpandedOnMobile={false}` prop to the `ModalDialog` component to keep the current behavior.
### ModalDialog Uniform Appearance
@@ -201,7 +227,15 @@ remain accessible via the `isDockedOnMobile` property.
#### Migration Guide
-Add `isDockedOnMobile` prop to the `ModalDialog` component.
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p -t v2/web-react/modal-isdockeonmobile-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isDockedOnMobile` prop to the `ModalDialog` component.
### Alert `danger` Icon