@indico-data/design-system 3.0.9 → 3.1.0

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -15,65 +15,77 @@ const meta: Meta<typeof InputDateRangePicker> = {
     ),
   ],
   argTypes: {
-    toTabIndex: {
-      control: 'number',
-      description: 'The tab index of the to input field.',
+    isPortal: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
       table: {
         category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
       },
     },
     fromTabIndex: {
       control: 'number',
-      description: 'The tab index of the from input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     isFromReadOnly: {
       control: 'boolean',
-      description: 'Whether the from input is read only.',
       table: {
         category: 'Props',
       },
     },
     isToReadOnly: {
       control: 'boolean',
-      description: 'Whether the to input is read only.',
       table: {
         category: 'Props',
       },
     },
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
     },
     gutterWidth: {
       control: 'number',
-      description: 'The gutter width for the date picker.',
       table: {
         category: 'Props',
       },
     },
     setIsOpen: {
       control: 'boolean',
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -84,8 +96,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
-      description:
-        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
@@ -95,7 +105,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -105,8 +114,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     id: {
       control: 'text',
-      description:
-        'The id of the input fieldss. Each one has the id appended to it, For example an id of `holiday` would be `holiday-to` and `holiday-from`',
       table: {
         category: 'Props',
         type: {
@@ -116,7 +123,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -126,7 +132,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     selected: {
       control: false,
-      description: 'The selected date range.',
       table: {
         category: 'Props',
         type: {
@@ -136,7 +141,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input fields.',
       table: {
         category: 'Props',
         type: {
@@ -146,8 +150,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     isOpen: {
       control: 'boolean',
-      description:
-        'Whether the floatingUI component wrapped around the date picker is opened or closed.',
       table: {
         category: 'Props',
         type: {
@@ -157,7 +159,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input fields.',
       table: {
         category: 'Props',
         type: {
@@ -167,7 +168,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     toErrorMessage: {
       control: 'text',
-      description: 'An error message to display on the `to` input.',
       table: {
         category: 'Props',
         type: {
@@ -177,7 +177,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     fromErrorMessage: {
       control: 'text',
-      description: 'An error message to display on the `from` input.',
       table: {
         category: 'Props',
         type: {
@@ -187,7 +186,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -197,7 +195,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -207,7 +204,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker and input fields.',
       table: {
         category: 'Props',
         type: {
@@ -217,7 +213,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     fromLabel: {
       control: 'text',
-      description: 'The label for the `from` input.',
       table: {
         category: 'Props',
         type: {
@@ -227,7 +222,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     toLabel: {
       control: 'text',
-      description: 'The label for the `to` input.',
       table: {
         category: 'Props',
         type: {
@@ -237,7 +231,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     month: {
       control: 'date',
-      description: 'The currently displayed month.',
       table: {
         category: 'Props',
         type: {
@@ -247,7 +240,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     closeOnSelect: {
       control: 'boolean',
-      description: 'Whether to close the date picker when a complete range is selected.',
       table: {
         category: 'Props',
         type: {
@@ -257,7 +249,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether to clear the selected dates when the picker is closed.',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -8,8 +8,10 @@ import { FloatUI } from '../../../floatUI';
 import { Col, Row } from '../../../grid';
 import { formatDateAsString } from '../inputDatePicker/helpers';
 import { Button } from '../../../button';
-
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 interface InputDateRangePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
@@ -20,6 +22,7 @@ interface InputDateRangePickerProps {
   month?: Date;
   selected?: DateRange | undefined;
   isOpen?: boolean;
+  /** Whether the date picker is open. */
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   className?: string;
   inputIconName?: IconName;
@@ -27,17 +30,27 @@ interface InputDateRangePickerProps {
   toErrorMessage?: string | undefined;
   fromErrorMessage?: string | undefined;
   'data-testid'?: string;
+  /** The gutter width for the date picker. */
   gutterWidth?: number;
   fromLabel?: string;
   toLabel?: string;
   closeOnSelect?: boolean;
   clearOnClose?: boolean;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** Whether the from input is read only. */
   isFromReadOnly?: boolean;
+  /** Whether the to input is read only. */
   isToReadOnly?: boolean;
   toTabIndex?: number;
+  /** The tab index of the from input field. */
   fromTabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
+  isPortal?: boolean;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -69,6 +82,9 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     isToReadOnly,
     toTabIndex,
     fromTabIndex,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -149,7 +165,13 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
   };
 
   return (
-    <FloatUI isOpen={isOpen} setIsOpen={setIsOpen} ariaLabel={ariaLabel}>
+    <FloatUI
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      ariaLabel={ariaLabel}
+      portalOptions={portalOptions}
+      floatingOptions={floatingOptions}
+    >
       <Row gutterWidth={gutterWidth}>
         <Col>
           <Input

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx

@@ -20,37 +20,53 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     ),
   ],
   argTypes: {
-    dateTabIndex: {
-      control: 'number',
-      description: 'The tab index of the date input field.',
+    isPortal: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    portalOptions: {
+      control: false,
       table: {
         category: 'Props',
+        type: {
+          summary: '{ rootId?: string }',
+        },
+      },
+    },
+    floatingOptions: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ placement?: Placement; middleware?: Middleware[] }',
+        },
       },
     },
     timeTabIndex: {
       control: 'number',
-      description: 'The tab index of the time input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     timePickerRef: {
       control: false,
-      description: 'The ref of the time picker input field.',
       table: {
         category: 'Props',
       },
     },
     isReadOnly: {
       control: 'boolean',
-      description: 'Whether the date picker is read only.',
       table: {
         category: 'Props',
       },
@@ -58,7 +74,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
 
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
@@ -66,21 +81,18 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
 
     timeValue: {
       control: 'text',
-      description: 'The time value to display.',
       table: {
         category: 'Props',
       },
     },
     onTimeChange: {
       action: 'timeChanged',
-      description: 'Callback function that is called when the time is changed.',
       table: {
         category: 'Events',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -91,8 +103,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
-      description:
-        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
@@ -102,7 +112,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -112,7 +121,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -122,7 +130,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -132,7 +139,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -142,7 +148,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected date.',
       table: {
         category: 'Props',
         type: {
@@ -152,7 +157,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -162,7 +166,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input field.',
       table: {
         category: 'Props',
         type: {
@@ -172,7 +175,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isClearable: {
       control: 'boolean',
-      description: 'Whether the input field should be clearable.',
       table: {
         category: 'Props',
         type: {
@@ -182,7 +184,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isOpen: {
       control: false,
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
         type: {
@@ -192,7 +193,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether the input field should be cleared when the date picker is closed.',
       table: {
         category: 'Props',
         type: {
@@ -202,7 +202,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     errorMessage: {
       control: 'text',
-      description: 'An error message to display.',
       table: {
         category: 'Props',
         type: {
@@ -212,7 +211,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -222,7 +220,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -232,7 +229,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -242,7 +238,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     initialMonth: {
       control: 'date',
-      description: 'The month to display.',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx

@@ -7,8 +7,11 @@ import { FloatUI } from '../../../floatUI';
 import { formatDateAsString } from './helpers';
 import { TimePicker } from '../../timePicker/TimePicker';
 import { Row, Col } from '../../../grid';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { PortalOptions } from '../datePicker/types';
 
 export interface SingleInputDateTimePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
@@ -27,14 +30,25 @@ export interface SingleInputDateTimePickerProps {
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
   'data-testid'?: string;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
+  /** The time value to display. */
   timeValue?: string;
+  /** Callback function that is called when the time is changed. */
   onTimeChange?: (time: string) => void;
+  /** Whether the date picker is read only. */
   isReadOnly?: boolean;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** The ref of the time picker input field. */
   timePickerRef?: React.LegacyRef<HTMLInputElement>;
   dateTabIndex?: number;
+  /** The tab index of the time input field. */
   timeTabIndex?: number;
+  portalOptions?: PortalOptions;
+  floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
+  isPortal?: boolean;
 }
 
 export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
@@ -64,6 +78,9 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
     dateTabIndex,
     timeTabIndex,
     ref,
+    portalOptions,
+    floatingOptions,
+    isPortal,
     ...rest
   } = props;
 
@@ -115,7 +132,14 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
   return (
     <Row className="date-time-picker-row">
       <Col className="date-picker-col">
-        <FloatUI className="date-picker-float-ui" isOpen={isOpen} ariaLabel={ariaLabel}>
+        <FloatUI
+          className="date-picker-float-ui"
+          isOpen={isOpen}
+          ariaLabel={ariaLabel}
+          isPortal={isPortal}
+          portalOptions={portalOptions}
+          floatingOptions={floatingOptions}
+        >
           <Input
             ref={ref}
             className={`date-picker-input`}

package/src/components/forms/numberInput/NumberInput.stories.tsx

@@ -11,7 +11,6 @@ const meta: Meta = {
     ...inputArgTypes,
     value: {
       control: 'number',
-      description: 'The value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -22,7 +21,6 @@ const meta: Meta = {
     },
     min: {
       control: 'number',
-      description: 'The minimum value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -33,7 +31,6 @@ const meta: Meta = {
     },
     max: {
       control: 'number',
-      description: 'The maximum value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -44,7 +41,6 @@ const meta: Meta = {
     },
     step: {
       control: 'number',
-      description: 'The step value for the input field',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/numberInput/NumberInput.tsx

@@ -7,9 +7,13 @@ import { DisplayFormError } from '../subcomponents/DisplayFormError';
 import { BaseInputProps } from '../input/Input';
 
 export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+  /** The value for the input field */
   value?: number | '';
+  /** The minimum value for the input field */
   min?: number;
+  /** The maximum value for the input field */
   max?: number;
+  /** The step value for the input field */
   step?: number;
 }
 

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -11,7 +11,6 @@ const meta: Meta = {
     ...baseInputArgTypes,
     hasShowPassword: {
       control: 'boolean',
-      description: 'Toggles the visibility of the password',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -14,6 +14,7 @@ export interface PasswordInputProps extends LabelProps {
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
+  /** Toggles the visibility of the password */
   hasShowPassword?: boolean;
   defaultValue?: string;
 }

package/src/components/forms/radio/Radio.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta = {
     },
     onChange: {
       control: false,
-      description: 'onChange event handler',
       table: {
         category: 'Callbacks',
         type: {
@@ -24,7 +23,6 @@ const meta: Meta = {
     },
     label: {
       control: 'text',
-      description: 'The label for the Radio field',
       table: {
         category: 'Props',
         type: {
@@ -35,7 +33,6 @@ const meta: Meta = {
     },
     name: {
       control: 'text',
-      description: 'The name for the Radio field',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
     },
     value: {
       control: 'text',
-      description: 'This holds the value that will be emitted when the radio is selected',
       table: {
         category: 'Props',
         type: {
@@ -57,7 +53,6 @@ const meta: Meta = {
     },
     id: {
       control: 'text',
-      description: 'This explains what button group this radio belongs to.',
       table: {
         category: 'Props',
         type: {
@@ -68,7 +63,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Toggles the disabled state of the Radio field',
       table: {
         category: 'Props',
         type: {