@dxc-technology/halstack-react 0.0.0-39dd536 → 0.0.0-3a65d35

package/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] },
+};

package/dialog/types.d.ts

@@ -26,6 +26,7 @@ declare type Props = {
      */
     onBackgroundClick?: () => void;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

package/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import DropdownPropsType from "./types";
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: DropdownPropsType) => JSX.Element;
 export default DxcDropdown;