Merge pull request #1715 from dxc-technology/gomezivann/new-props-table

New Props table design

Author: raquelarrojo

lib/src/accordion/Accordion.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import DxcAccordion from "./Accordion";
-import DxcHeading from "../heading/Heading";
 import DxcTextInput from "../text-input/TextInput";
 import DxcButton from "../button/Button";
 import Title from "../../.storybook/components/Title";

lib/src/accordion/types.ts

@@ -50,7 +50,7 @@ type Props = {
    */
   margin?: Space | Margin;
   /**
-   * Value of the tabindex.
+   * Value of the tabindex attribute.
    */
   tabIndex?: number;
 };

lib/src/alert/types.ts

@@ -13,11 +13,11 @@ type Props = {
   type?: "info" | "confirm" | "warning" | "error";
   /**
    * Uses on of the available alert modes:
-   *    'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked. 
+   *    'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
    *              There is no overlay layer. Position should be decided by the user.
-   *    'modal':  The alert will be displayed in the middle of the screen with an overlay layer behind. 
+   *    'modal':  The alert will be displayed in the middle of the screen with an overlay layer behind.
    *              The onClose function will be executed when the X button or the overlay is clicked. d
-   *              The user has the responsibility of hidding the modal in the onClose function, otherwise the modal will remain visible.
+   *              The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
    */
   mode?: "inline" | "modal";
   /**
@@ -33,7 +33,7 @@ type Props = {
    */
   children?: React.ReactNode;
   /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). 
+   * Size of the margin 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 margin sizes.
    */
   margin?: Space | Margin;
@@ -42,7 +42,7 @@ type Props = {
    */
   size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
   /**
-   * Tabindex value given to the close button.
+   * Value of the tabindex attribute applied to the close button.
    */
   tabIndex?: number;
 };

lib/src/card/types.ts

@@ -47,15 +47,15 @@ type Props = {
    */
   margin?: Space | Size;
   /**
-   * Value of the tabindex given when there is an href.
+   * Value of the tabindex attribute applied when the component is clickable.
    */
   tabIndex?: number;
   /**
    * Determines whether or not the component should have an outline.
    */
   outlined?: boolean;
   /**
-   * Custom content that will be placed in the card component.
+   * Custom content that will be placed inside the component.
    */
   children?: React.ReactNode;
 };

lib/src/date-input/types.ts

@@ -9,14 +9,6 @@ type Margin = {
 };
 
 type Props = {
-  /**
-   * Text to be placed above the date.
-   */
-  label?: string;
-  /**
-   * Name attribute of the input element.
-   */
-  name?: string;
   /**
    * Initial value of the input element, only when it is uncontrolled.
    */
@@ -26,9 +18,13 @@ type Props = {
    */
   value?: string;
   /**
-   * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
+   * Text to be placed above the date input.
    */
-  format?: string;
+  label?: string;
+  /**
+   * Name attribute of the input element.
+   */
+  name?: string;
   /**
    * Helper text to be placed above the date.
    */
@@ -37,6 +33,10 @@ type Props = {
    * If true, the date format will appear as placeholder in the field.
    */
   placeholder?: boolean;
+  /**
+   * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
+   */
+  format?: string;
   /**
    * If true, the date input will have an action to clear the entered value.
    */
@@ -46,18 +46,18 @@ type Props = {
    */
   disabled?: boolean;
   /**
-   * If true, the component will not be mutable, meaning the user can not edit the control.
-   * The date picker cannot be opened either. In addition, the clear action will not be displayed 
-   * even if the flag is set to true.
-   */
-  readOnly?: boolean;
-  /**
-   * If true, the date will be optional, showing '(Optional)'
+   * If true, the date will be optional, showing the text '(Optional)'
    * next to the label. Otherwise, the field will be considered required and an error will be
    * passed as a parameter to the OnBlur and onChange functions when it has
    * not been filled.
    */
   optional?: boolean;
+  /**
+   * If true, the component will not be mutable, meaning the user can not edit the control.
+   * The date picker cannot be opened either. In addition, the clear action will not be displayed
+   * even if the flag is set to true.
+   */
+  readOnly?: boolean;
   /**
    * This function will be called when the user types within the input
    * element of the component. An object including the string value, the
@@ -127,15 +127,15 @@ export type CalendarPropsType = {
    */
   innerDate: Dayjs;
   /**
-   * Function called when the date showned needs to be updated
+   * Function called when the showed date needs to be updated.
    */
   onInnerDateChange: (date: Dayjs) => void;
   /**
    * Function called when a date is selected.
    */
   onDaySelect: (date: Dayjs) => void;
   /**
-   * Current date
+   * Current date.
    */
   today: Dayjs;
 };
@@ -150,7 +150,7 @@ export type YearPickerPropsType = {
    */
   onYearSelect: (year: number) => void;
   /**
-   * Current date
+   * Current date.
    */
   today: Dayjs;
 };

lib/src/dialog/types.ts

@@ -1,31 +1,36 @@
 type Props = {
   /**
-   * If true, the close 'x' button will be visible.
+   * If true, the close button will be visible.
    */
   isCloseVisible?: boolean;
   /**
-   * This function will be called when the user clicks the close 'x' button.
-   * The responsibility of hiding the modal lies with the user.
+   * This function will be called when the user clicks the close button.
+   * The responsibility of hiding the dialog lies with the user.
    */
   onCloseClick?: () => void;
+  /**
+   * This function will be called when the user clicks on the background of the modal.
+   * The responsibility of hiding the dialog lies with the user.
+   */
+  onBackgroundClick?: () => void;
   /**
    * If true, the dialog will be displayed over a darker background that covers the content behind.
    */
   overlay?: boolean;
   /**
-   * This function will be called when the user clicks background of the modal.
-   * The responsibility of hiding the modal lies with the user.
+   * Area within the dialog that can be used to render custom content.
+   * We strongly encourage users to not change the
+   * tabindex of the inner components or elements. This
+   * can lead to unpredictable behaviour for keyboard users, affecting
+   * the order of focus and focus locking within the dialog.
    */
-  onBackgroundClick?: () => void;
+  children: React.ReactNode;
   /**
-   * Value of the tabindex given to the close 'x' button.
+   * Value of the tabindex applied to the close button.
+   * Note that values greater than 0 are strongly discouraged. It can
+   * lead to unexpected behaviours with the focus within the dialog.
    */
   tabIndex?: number;
-  /**
-   * The area inside the dialog. This area can be used to render
-   * custom content.
-   */
-  children: React.ReactNode;
 };
 
 export default Props;

lib/src/dropdown/types.ts

@@ -52,14 +52,18 @@ type Props = {
    */
   caretHidden?: boolean;
   /**
-   * This function will be called every time the selection changes.
-   * The value of the selected option will be passed as a parameter.
+   * If true, the component will be disabled.
    */
-  onSelectOption: (value: string) => void;
+  disabled?: boolean;
   /**
    * If true, the options are showed when the dropdown is hover.
    */
   expandOnHover?: boolean;
+  /**
+   * This function will be called every time the selection changes.
+   * The value of the selected option will be passed as a parameter.
+   */
+  onSelectOption: (value: string) => void;
   /**
    * Size of the margin to be applied to the component.
    * You can pass an object with 'top', 'bottom', 'left' and 'right'
@@ -71,13 +75,9 @@ type Props = {
    */
   size?: Size;
   /**
-   * Value of the tabindex.
+   * Value of the tabindex attribute.
    */
   tabIndex?: number;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
 };
 
 export type DropdownMenuProps = {

lib/src/flex/types.ts

@@ -1,5 +1,5 @@
 type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-type Gap = { rowGap: Spaces; columnGap?: Spaces } | { rowGap?: Spaces; columnGap?: Spaces } | Spaces;
+type Gap = { rowGap: Spaces; columnGap?: Spaces } | { rowGap?: Spaces; columnGap: Spaces } | Spaces;
 
 type CommonProps = {
   /**

lib/src/footer/types.ts

@@ -44,24 +44,24 @@ type FooterPropsType = {
    * the bottom part of the footer.
    */
   bottomLinks?: BottomLink[];
+  /**
+   * The text that will be displayed as copyright disclaimer.
+   */
+  copyright?: string;
   /**
    * The center section of the footer. Can be used to render custom
    * content in this area.
    */
   children?: React.ReactNode;
   /**
-   * The text that will be displayed as copyright disclaimer.
+   * Size of the top margin to be applied to the footer.
    */
-  copyright?: string;
+  margin?: Space | Size;
   /**
-   * Value of the tabindex for all interactuable elements, except those
+   * Value of the tabindex for all interactive elements, except those
    * inside the custom area.
    */
   tabIndex?: number;
-  /**
-   * Size of the top margin to be applied to the footer.
-   */
-  margin?: Space | Size;
 };
 
 export default FooterPropsType;

lib/src/header/types.ts

@@ -1,8 +1,6 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-
 type Props = {
   /**
-   * Wether a contrast line should appear at the bottom of the header.
+   * Whether a contrast line should appear at the bottom of the header.
    */
   underlined?: boolean;
   /**
@@ -21,12 +19,11 @@ type Props = {
    */
   onClick?: () => void;
   /**
-   * Size of the bottom margin to be applied to the header
-   * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * Size of the bottom margin to be applied to the header.
    */
-  margin?: Space;
+  margin?: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
   /**
-   * Value of the tabindex for all interactuable elements, except those inside the
+   * Value of the tabindex for all interactive elements, except those inside the
    * custom area.
    */
   tabIndex?: number;