Repository: Sage/carbon (ts)

Issue:
Remove padding-rigth on Message Component
### Desired behaviour

When using a [Message](https://carbon.sage.com/?path=/docs/message--default-story) component and close button is not shown, padding right should be equals than left.

### Current behaviour

When using a [Message](https://carbon.sage.com/?path=/docs/message--default-story) component and close button is not shown, this place is not fulled with text. Padding-right is maintained.
![Captura de pantalla 2023-03-08 a las 12 37 28](https://user-images.githubusercontent.com/111743200/223728156-bc189c81-f090-47a9-99b0-f2af18facbd9.png)


### Suggested Solution

Maybe close button should not be position absolute.

### CodeSandbox or Storybook URL

https://codesandbox.io/s/inspiring-roentgen-zyxj6z

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(message): add conditional padding based on the showCloseIcon props truth value
fix #5904

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes.

If applicable, add screenshots of a codesandbox to help explain your request. You can paste these directly into GitHub.

Please DO NOT share screenshots or the source code of your project.

You can create a codesandbox to show the behaviour before/after this pull request by forking this template https://codesandbox.io/s/carbon-quickstart-j5pb2

If you include a CodeSandbox link, the bot will fork it with the new built version of carbon.
If you have a commit that includes fixes #XXXX and issue #XXXX has a CodeSandbox link in the body, the bot will fork
it with the new built version of carbon.
-->

This PR will introduce conditional padding, when `showCloseIcon` is `true`, css property `padding-right` will be `50px`, which is the current hard-coded pixel value which adds enough space for the close icon. However, when `false`, this will be changed to `20px`, ensuring padding is equal on both sides.

<img width="525" alt="Screenshot 2023-03-31 at 13 00 35" src="https://user-images.githubusercontent.com/114918852/229114838-a52b9362-5c1d-4350-9920-16ddcc59b85a.png">

### Current behaviour

<!--
A clear and concise description of the behaviour before this change.

If applicable, add screenshots. You can paste these directly into GitHub.
-->

Currently, the css property padding-right is hard coded at `50px` regardless of the `showCloseIcon` props truth value.

<img width="528" alt="Screenshot 2023-03-31 at 13 00 24" src="https://user-images.githubusercontent.com/114918852/229114864-c1a159cc-8e42-4342-be86-6fe7b03ac549.png">

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [x] Cypress automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in CodeSandbox/storybook
- [ ] Add new Cypress test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!-- How can a reviewer test this PR? -->

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by `codesandbox[bot]`.

<!-- Add CodeSandbox here -->


Patch:
diff --git a/cypress/locators/message/index.js b/cypress/locators/message/index.js
index 628dc54f5..ae5780b44 100644
--- a/cypress/locators/message/index.js
+++ b/cypress/locators/message/index.js
@@ -3,6 +3,7 @@ import {
   MESSAGE_CHILDREN,
   MESSAGE_TITLE,
   MESSAGE_DISMISS_ICON,
+  MESSAGE_CONTENT,
   VARIANT_PREVIEW,
 } from "./locators";
 
@@ -11,4 +12,5 @@ export const messagePreview = () => cy.get(MESSAGE_PREVIEW);
 export const messageChildren = () => cy.get(MESSAGE_CHILDREN);
 export const messageTitle = () => cy.get(MESSAGE_TITLE);
 export const messageDismissIcon = () => cy.get(MESSAGE_DISMISS_ICON);
+export const messageContent = () => cy.get(MESSAGE_CONTENT);
 export const variantPreview = () => cy.get(VARIANT_PREVIEW);
diff --git a/cypress/locators/message/locators.js b/cypress/locators/message/locators.js
index 49e8a0b28..35d27e77c 100644
--- a/cypress/locators/message/locators.js
+++ b/cypress/locators/message/locators.js
@@ -6,5 +6,6 @@ export const MESSAGE_PREVIEW = 'div[data-component="Message"]';
 export const MESSAGE_CHILDREN = 'div[data-element="content-body"]';
 export const MESSAGE_TITLE = '[data-element="content-title"]';
 export const MESSAGE_DISMISS_ICON = 'span[data-element="close"]';
+export const MESSAGE_CONTENT = '[data-element="message-content"]';
 export const VARIANT_PREVIEW =
   'div[data-component="Message"] > div:nth-child(1)';
diff --git a/src/components/message/message-content/__snapshots__/message-content.spec.tsx.snap b/src/components/message/message-content/__snapshots__/message-content.spec.tsx.snap
index 5eac2ad69..426763d4c 100644
--- a/src/components/message/message-content/__snapshots__/message-content.spec.tsx.snap
+++ b/src/components/message/message-content/__snapshots__/message-content.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MessageContent when rendered should render correctly 1`] = `
-<styled.div>
+<styled.div
+  data-element="message-content"
+>
   <Content>
     children
   </Content>
diff --git a/src/components/message/message-content/message-content.component.tsx b/src/components/message/message-content/message-content.component.tsx
index ab2749b23..171062645 100644
--- a/src/components/message/message-content/message-content.component.tsx
+++ b/src/components/message/message-content/message-content.component.tsx
@@ -3,16 +3,25 @@ import React from "react";
 import Content from "../../content";
 import MessageContentStyle from "./message-content.style";
 
-interface MessageContentProps {
+export interface MessageContentProps {
   /** set message title */
   title?: React.ReactNode;
   /** set content to component */
   children?: React.ReactNode;
+  /** determines if the close icon is shown */
+  showCloseIcon?: boolean;
 }
 
-const MessageContent = ({ title, children }: MessageContentProps) => {
+const MessageContent = ({
+  title,
+  children,
+  showCloseIcon,
+}: MessageContentProps) => {
   return (
-    <MessageContentStyle>
+    <MessageContentStyle
+      showCloseIcon={showCloseIcon}
+      data-element="message-content"
+    >
       <Content title={title}>{children}</Content>
     </MessageContentStyle>
   );
diff --git a/src/components/message/message-content/message-content.spec.tsx b/src/components/message/message-content/message-content.spec.tsx
index 31b94660e..c9ee5fa86 100644
--- a/src/components/message/message-content/message-content.spec.tsx
+++ b/src/components/message/message-content/message-content.spec.tsx
@@ -1,6 +1,8 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import MessageContent from "./message-content.component";
+import MessageContentStyle from "./message-content.style";
+import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
 
 describe("MessageContent", () => {
   describe("when rendered", () => {
@@ -10,4 +12,26 @@ describe("MessageContent", () => {
       ).toMatchSnapshot();
     });
   });
+  describe("showCloseIcon prop checks", () => {
+    it.each([
+      [true, 50],
+      [false, 20],
+    ])(
+      "padding changes should be correct when showCloseIcon is %s",
+      (boolVal, paddingVal) => {
+        const wrapper = mount(
+          <MessageContent showCloseIcon={boolVal}>children</MessageContent>
+        );
+
+        assertStyleMatch(
+          {
+            padding: `15px ${paddingVal}px 15px 20px`,
+            whiteSpace: "pre-wrap",
+            flex: "1",
+          },
+          wrapper.find(MessageContentStyle)
+        );
+      }
+    );
+  });
 });
diff --git a/src/components/message/message-content/message-content.style.ts b/src/components/message/message-content/message-content.style.ts
index ab6bda400..8c9fb13bf 100644
--- a/src/components/message/message-content/message-content.style.ts
+++ b/src/components/message/message-content/message-content.style.ts
@@ -1,7 +1,11 @@
 import styled from "styled-components";
+import { MessageContentProps } from "./message-content.component";
 
-const MessageContentStyle = styled.div`
-  padding: 15px 50px 15px 20px;
+const MessageContentStyle = styled.div<
+  Pick<MessageContentProps, "showCloseIcon">
+>`
+  padding: 15px ${({ showCloseIcon }) => (showCloseIcon ? "50px" : "20px")} 15px
+    20px;
   white-space: pre-wrap;
   flex: 1;
 
diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 4eb6669f2..7a6cae73f 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -79,7 +79,9 @@ export const Message = ({
       {...marginProps}
     >
       <TypeIcon variant={variant} transparent={transparent} />
-      <MessageContent title={title}>{children}</MessageContent>
+      <MessageContent showCloseIcon={showCloseIcon} title={title}>
+        {children}
+      </MessageContent>
       {renderCloseIcon()}
     </MessageStyle>
   ) : null;
diff --git a/src/components/message/message.stories.mdx b/src/components/message/message.stories.mdx
index 0f90ea448..be382e849 100644
--- a/src/components/message/message.stories.mdx
+++ b/src/components/message/message.stories.mdx
@@ -55,6 +55,14 @@ Message variant is `info` by default
   <Story name="default" story={stories.Default} />
 </Canvas>
 
+### showCloseIcon
+
+When the `showCloseIcon` is `false` the close icon will not be rendered, and padding with be equal on both sides.
+
+<Canvas>
+  <Story name="showCloseIcon" story={stories.ShowCloseIcon} />
+</Canvas>
+
 ### Error
 
 <Canvas>
diff --git a/src/components/message/message.stories.tsx b/src/components/message/message.stories.tsx
index 68034e218..d5e4dcfda 100644
--- a/src/components/message/message.stories.tsx
+++ b/src/components/message/message.stories.tsx
@@ -20,6 +20,15 @@ export const Default: ComponentStory<typeof Message> = () => {
   );
 };
 
+export const ShowCloseIcon: ComponentStory<typeof Message> = () => (
+  <Box width="600px">
+    <Message showCloseIcon={false} open>
+      A longer custom message which now shows the close icon is not rendered and
+      padding is equal on both sides
+    </Message>
+  </Box>
+);
+
 export const Error: ComponentStory<typeof Message> = () => {
   const [isOpen, setIsOpen] = useState(true);
   return (


Test patch:
diff --git a/src/components/message/message.test.js b/src/components/message/message.test.js
index 3020abae1..164a62a95 100644
--- a/src/components/message/message.test.js
+++ b/src/components/message/message.test.js
@@ -11,6 +11,7 @@ import {
   messageChildren,
   messageTitle,
   messageDismissIcon,
+  messageContent,
   variantPreview,
 } from "../../../cypress/locators/message/index";
 import {
@@ -107,14 +108,27 @@ context("Tests for Message component", () => {
       }
     );
 
-    it.each([true, false])(
+    it.each([
+      [true, 50],
+      [false, 20],
+    ])(
       "should check showCloseIcon when it's %s for Message component",
-      (boolVal) => {
+      (boolVal, paddingVal) => {
         CypressMountWithProviders(<MessageComponent showCloseIcon={boolVal} />);
         if (boolVal === true) {
           messageDismissIcon().should("be.visible");
+          messageContent().should(
+            "have.css",
+            "padding",
+            `15px ${paddingVal}px 15px 20px`
+          );
         } else {
           messageDismissIcon().should("not.exist");
+          messageContent().should(
+            "have.css",
+            "padding",
+            `15px ${paddingVal}px`
+          );
         }
       }
     );