Repository: Sage/carbon (ts)

Issue:
Adapt DateInput to available space
### Desired behaviour

I would like that DateInput component width was adapted to available width, in the same way that other components like Textbox

### Current behaviour

Currently this component has got a fixed width

### Suggested Solution

_No response_

### CodeSandbox or Storybook URL

https://codesandbox.io/s/festive-allen-h9sm9w?file=/src/index.js

### Anything else we should know?

This is the design from UX that we would like to achieve
![datetimeforcarbon](https://user-images.githubusercontent.com/85741132/215431459-a4c093ed-e152-40e5-8cac-c6f49768241b.png)


### Confidentiality

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

Pull request:
fix(date): enable width customization (FE-5659)
### Proposed behaviour

allow the use of labelWidth, inputWidth and MaxWidth props

### Current behaviour

labelWidth, inputWidth and MaxWidth props are ignored, width of the component is non-changeable

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
~~- [ ] Screenshots are included in the PR if useful~~
~~- [ ] All themes are supported if required~~
- [x] Unit tests added or updated if required
~~- [ ] Cypress automation tests added or updated if required~~
- [x] 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

- [x] Tested in CodeSandbox/storybook
- [x] Add new Cypress test coverage if required
- [x] Carbon implementation matches Design System/designs
- [x] UI Tests GitHub check reviewed if required

### Additional context

fixes #5787

### 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/src/components/date/date.component.js b/src/components/date/date.component.js
index 2c03f09b8..2223d8de7 100644
--- a/src/components/date/date.component.js
+++ b/src/components/date/date.component.js
@@ -66,6 +66,9 @@ const DateInput = React.forwardRef(
       tooltipPosition,
       value,
       inputRef,
+      inputWidth,
+      labelWidth,
+      maxWidth,
       ...rest
     },
     ref
@@ -372,6 +375,8 @@ const DateInput = React.forwardRef(
         data-role={dataRole}
         {...marginProps}
         applyDateRangeStyling={!!inputRefMap}
+        maxWidth={maxWidth}
+        inputWidth={inputWidth}
       >
         <Textbox
           {...filterOutStyledSystemSpacingProps(rest)}
@@ -395,6 +400,9 @@ const DateInput = React.forwardRef(
           size={size}
           disabled={disabled}
           readOnly={readOnly}
+          inputWidth={inputWidth}
+          labelWidth={labelWidth}
+          maxWidth={maxWidth}
           m={0}
         />
         <DatePicker
diff --git a/src/components/date/date.spec.js b/src/components/date/date.spec.js
index b7c908ee6..ccfd3068d 100644
--- a/src/components/date/date.spec.js
+++ b/src/components/date/date.spec.js
@@ -122,17 +122,39 @@ describe("Date", () => {
     <DateInput onChange={jest.fn} value="" {...props} />
   ));
 
-  describe("styles", () => {
-    it.each([
+  describe("when the size pop is set", () => {
+    describe.each([
       ["small", "120px"],
       ["medium", "135px"],
       ["large", "140px"],
-    ])("render correctly for %s size", (size, width) => {
-      assertStyleMatch(
-        { flex: "none", width },
-        mount(<StyledDateInput size={size} />),
-        { modifier: `& ${StyledInputPresentation}` }
-      );
+    ])("to %s", (size, expectedValue) => {
+      it("then the width attribute of StyledInputPresentation should match expected value", () => {
+        assertStyleMatch(
+          { width: expectedValue },
+          mount(<StyledDateInput size={size} />),
+          { modifier: `& ${StyledInputPresentation}` }
+        );
+      });
+
+      describe("with the inputWidth prop set", () => {
+        it("then the width attribute of StyledInputPresentation should be undefined", () => {
+          assertStyleMatch(
+            { width: undefined },
+            mount(<StyledDateInput size={size} inputWidth={50} />),
+            { modifier: `& ${StyledInputPresentation}` }
+          );
+        });
+      });
+
+      describe("with the maxWidth prop set", () => {
+        it("then the width attribute of StyledInputPresentation should be undefined", () => {
+          assertStyleMatch(
+            { width: undefined },
+            mount(<StyledDateInput size={size} maxWidth="300px" />),
+            { modifier: `& ${StyledInputPresentation}` }
+          );
+        });
+      });
     });
   });
 
diff --git a/src/components/date/date.stories.mdx b/src/components/date/date.stories.mdx
index bb849b7b3..2361558c3 100644
--- a/src/components/date/date.stories.mdx
+++ b/src/components/date/date.stories.mdx
@@ -199,10 +199,10 @@ be used to set the input value like in the example below, although the component
   </Story>
 </Canvas>
 
-### With custom labelWidth
+### With custom width
 
 <Canvas>
-  <Story name="with custom labelWidth">
+  <Story name="with custom width">
     {() => {
       const [state, setState] = useState("01/10/2016");
       const setValue = ({ target }) => {
@@ -214,7 +214,9 @@ be used to set the input value like in the example below, although the component
           value={state}
           onChange={setValue}
           labelInline
-          labelWidth={10}
+          labelWidth={20}
+          inputWidth={70}
+          maxWidth="300px"
         />
       );
     }}
@@ -639,7 +641,6 @@ Due to the `Textbox` component being used internally by the `Date` component the
 <ArgsTable
   of={Textbox}
   exclude={[
-    "maxWidth",
     "value",
     "formattedValue",
     "rawValue",
diff --git a/src/components/date/date.style.js b/src/components/date/date.style.js
index 92d629f05..1238d208a 100644
--- a/src/components/date/date.style.js
+++ b/src/components/date/date.style.js
@@ -20,19 +20,20 @@ const StyledDateInput = styled.div`
 
   & ${StyledInputPresentation} {
     flex: none;
-    width: ${({ size }) => datePickerWidth[size]};
+    width: ${({ inputWidth, maxWidth, size }) =>
+      maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${StyledInput} {
       margin-right: -8px;
     }
   }
 
-  ${({ applyDateRangeStyling, size, labelInline }) =>
+  ${({ applyDateRangeStyling, maxWidth, size, labelInline }) =>
     applyDateRangeStyling &&
     !labelInline &&
     css`
       ${FieldLineStyle} {
-        max-width: ${datePickerWidth[size]};
+        max-width: ${maxWidth || datePickerWidth[size]}};
       }
 
       ${StyledValidationMessage}, ${StyledLabel} {


Test patch:
diff --git a/src/components/date/date.test.js b/src/components/date/date.test.js
index 33f9c624b..aba52b6f5 100644
--- a/src/components/date/date.test.js
+++ b/src/components/date/date.test.js
@@ -42,7 +42,10 @@ import {
   fieldHelpPreview,
 } from "../../../cypress/locators";
 import { keyCode } from "../../../cypress/support/helper";
-import { verifyRequiredAsteriskForLabel } from "../../../cypress/support/component-helper/common-steps";
+import {
+  verifyRequiredAsteriskForLabel,
+  useJQueryCssValueAndAssert,
+} from "../../../cypress/support/component-helper/common-steps";
 import CypressMountWithProviders from "../../../cypress/support/component-helper/cypress-mount";
 import {
   SIZE,
@@ -325,6 +328,54 @@ context("Test for DateInput component", () => {
         .should("be.greaterThan", minValue)
         .and("be.lessThan", maxValue);
     });
+
+    it.each([
+      [10, 90, 135, 1229],
+      [30, 70, 409, 956],
+      [80, 20, 1092, 273],
+    ])(
+      "should use %s as labelWidth, %s as inputWidth and render it with correct label and input width ratios",
+      (label, input, labelRatio, inputRatio) => {
+        CypressMountWithProviders(
+          <DateInputCustom labelInline labelWidth={label} inputWidth={input} />
+        );
+
+        getDataElementByValue("label")
+          .parent()
+          .then(($el) => {
+            useJQueryCssValueAndAssert($el, "width", labelRatio);
+          });
+
+        getDataElementByValue("input")
+          .parent()
+          .then(($el) => {
+            useJQueryCssValueAndAssert($el, "width", inputRatio);
+          });
+      }
+    );
+
+    it.each(["10%", "30%", "50%", "80%", "100%"])(
+      "should check maxWidth as %s for Date Input component",
+      (maxWidth) => {
+        CypressMountWithProviders(<DateInputCustom maxWidth={maxWidth} />);
+
+        getDataElementByValue("input")
+          .parent()
+          .parent()
+          .should("have.css", "max-width", maxWidth);
+      }
+    );
+
+    it("when maxWidth has no value it should render as 100%", () => {
+      CypressMountWithProviders(
+        <DateInputCustom inputWidth={100} maxWidth="" />
+      );
+
+      getDataElementByValue("input")
+        .parent()
+        .parent()
+        .should("have.css", "max-width", "100%");
+    });
   });
 
   it("should check the pickerProps prop", () => {