Merge pull request #1333 from dxc-technology/jialecl-dialog-fullwidth

Increasing dialog content size
dxc-technology · Oct 13, 2022 · 090152f · 090152f
2 parents be1c550 + 8b9220f
commit 090152f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/lib/src/dialog/Dialog.stories.tsx b/lib/src/dialog/Dialog.stories.tsx
@@ -1,5 +1,9 @@
 import React from "react";
 import DxcDialog from "./Dialog";
+import DxcTextInput from "../text-input/TextInput";
+import DxcButton from "../button/Button";
+import DxcFlex from "../flex/Flex";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
@@ -30,6 +34,50 @@ export const DefaultDialog = () => (
   </>
 );
 
+export const DialogWithInputs = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Dialog with inputs" theme="light" level={4} />
+      <DxcDialog>
+        <DxcInset bottom="1rem">
+          <DxcFlex gap="2rem" direction="column">
+            <DxcFlex gap="1rem" direction="column">
+              <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
+              <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
+            </DxcFlex>
+            <DxcFlex justifyContent="flex-end" gap="1rem">
+              <DxcButton label="Save"></DxcButton>
+              <DxcButton label="Cancel" mode="secondary"></DxcButton>
+            </DxcFlex>
+          </DxcFlex>
+        </DxcInset>
+      </DxcDialog>
+    </ExampleContainer>
+  </>
+);
+
+const RespDialog = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Responsive dialog" theme="light" level={4} />
+      <DxcDialog>
+        <DxcInset bottom="1rem">
+          <DxcFlex gap="2rem" direction="column">
+            <DxcFlex gap="1rem" direction="column">
+              <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
+              <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
+            </DxcFlex>
+            <DxcFlex justifyContent="flex-end" gap="1rem">
+              <DxcButton label="Save"></DxcButton>
+              <DxcButton label="Cancel" mode="secondary"></DxcButton>
+            </DxcFlex>
+          </DxcFlex>
+        </DxcInset>
+      </DxcDialog>
+    </ExampleContainer>
+  </>
+);
+
 export const DialogWithoutOverlay = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Without Overlay" theme="light" level={4} />
@@ -209,3 +257,11 @@ export const DialogWithXxlargePadding = () => (
     </DxcDialog>
   </ExampleContainer>
 );
+
+export const ResponsiveDialog = RespDialog.bind({});
+ResponsiveDialog.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [375] },
+};
diff --git a/lib/src/dialog/Dialog.tsx b/lib/src/dialog/Dialog.tsx
@@ -103,11 +103,12 @@ const Dialog = styled.div<{ isCloseVisible?: boolean }>`
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
-  ${(props) => props.isCloseVisible && "min-height: 72px;"}
+  ${(props) => props.isCloseVisible && "min-height: 72px; padding-top: 24px;"}
   box-sizing: border-box;
   box-shadow: ${(props) =>
     `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`};
   border-radius: 4px;
+  position: relative;
 
   @media (min-width: ${responsiveSizes.medium}rem) {
     max-width: 80%;
@@ -124,7 +125,7 @@ const Dialog = styled.div<{ isCloseVisible?: boolean }>`
 const Children = styled.div<{ padding: Padding | Space }>`
   display: flex;
   flex-direction: column;
-
+  width: 100%;
   padding: ${(props) => (props.padding && typeof props.padding !== "object" ? spaces[props.padding] : spaces["small"])};
   padding-top: ${(props) =>
     props.padding && typeof props.padding === "object" && props.padding.top ? spaces[props.padding.top] : ""};
@@ -142,7 +143,7 @@ const CloseIconContainer = styled.button`
   margin: 0;
   background: none;
   border: none;
-  position: relative;
+  position: absolute;
   top: 20px;
   right: 20px;
   color: ${(props) => props.theme.closeIconColor};