fix: modal size

Bootstrap allows modal sizes sm to xl, but we accept xs to lg.

Limited allowed modal sizes in typing to the sizes bootstrap works with.

src/core/Avatar/Avatar.test.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { Avatar } from './Avatar';
-import { BootstrapSize } from '../types';
+import { Avatar, AvatarSize } from './Avatar';
 
 describe('Component: Avatar', () => {
-  function setup({ size }: { size?: BootstrapSize }) {
+  function setup({ size }: { size?: AvatarSize }) {
     const { container } = render(
       <Avatar
         className="red"

src/core/Avatar/Avatar.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
-import { BootstrapSize } from '../types';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 type Props = {
@@ -24,7 +23,7 @@ type Props = {
    *
    * @default md
    */
-  size?: BootstrapSize;
+  size?: AvatarSize;
 
   /**
    * Optional extra CSS class you want to add to the component.
@@ -33,6 +32,8 @@ type Props = {
   className?: string;
 };
 
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+
 /**
  * Avatar is a component which shows a circular image with any element underneath.
  * Use it for instance for showing the profile image of a logged-in user.
@@ -57,7 +58,7 @@ export function Avatar({ size, className, alt, src, children }: Props) {
   );
 }
 
-function tooltipDistanceFromSize(size?: BootstrapSize): number {
+function tooltipDistanceFromSize(size?: AvatarSize): number {
   switch (size) {
     case 'lg':
       return 42;

src/core/Modal/Modal.tsx

@@ -1,7 +1,12 @@
 import React, { Suspense } from 'react';
-import { Modal as ReactstrapModal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { BootstrapSize } from '../types';
+import {
+  Modal as ReactstrapModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader
+} from 'reactstrap';
 import { Loading } from '../Loading/Loading';
+import { ModalSize } from '../types';
 
 type Props = {
   /**
@@ -22,7 +27,7 @@ type Props = {
   /**
    * Optionally the size (width) of the modal.
    */
-  size?: BootstrapSize;
+  size?: ModalSize;
 
   /**
    * Whether the footer should stick to the bottom of the modal.

src/core/OpenCloseModal/OpenCloseModal.tsx

@@ -2,7 +2,7 @@ import React, { FormEventHandler, Suspense } from 'react';
 import { Button } from '../Button/Button';
 import { SubmitButton } from '../SubmitButton/SubmitButton';
 import { t } from '../../utilities/translation/translation';
-import { BootstrapSize } from '../types';
+import { ModalSize } from '../types';
 import { IconType } from '../Icon';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { Loading } from '../Loading/Loading';
@@ -63,7 +63,7 @@ type Props = {
   /**
    * Optionally the size (width) of the modal.
    */
-  size?: BootstrapSize;
+  size?: ModalSize;
 
   /**
    * Whether the footer should stick to the bottom of the modal.

src/core/SearchInput/SearchInput.tsx

@@ -3,7 +3,6 @@ import { debounce as lodashDebounce, DebounceSettings, uniqueId } from 'lodash';
 import { FormGroup, Input, InputGroup, InputProps, Label } from 'reactstrap';
 
 import { Icon } from '../Icon';
-import { BootstrapSize } from '../types';
 import { AddonIcon } from '../../form/AddonIcon/AddonIcon';
 
 export type SearchInputApi = {
@@ -15,7 +14,8 @@ export type SearchInputApi = {
   setValue: (value: string) => void;
 };
 
-type ModifiedInputProps = Omit<InputProps,
+type ModifiedInputProps = Omit<
+  InputProps,
   // We are going to override onChange, so it sends out strings.
   | 'onChange'
   // We want to remove the value because we use defaultValue,
@@ -31,7 +31,8 @@ type ModifiedInputProps = Omit<InputProps,
   | 'children'
   // We are going to override some properties to be able to provide docs.
   | 'placeholder'
-  | 'className'>;
+  | 'className'
+>;
 
 export type Props = ModifiedInputProps & {
   /**
@@ -45,7 +46,6 @@ export type Props = ModifiedInputProps & {
    */
   label: React.ReactNode;
 
-
   /**
    * Optionally whether the label should be invisible (aria-label).
    * This only works if label is a string.
@@ -116,7 +116,7 @@ export type Props = ModifiedInputProps & {
   /**
    * Optional size you want to give the icon.
    */
-  size?: BootstrapSize;
+  size?: InputSize;
 
   /**
    * Whether to show a "clear" button.
@@ -126,6 +126,8 @@ export type Props = ModifiedInputProps & {
   canClear?: boolean;
 };
 
+type InputSize = 'sm' | 'md' | 'lg';
+
 /**
  * SearchInput is a component which shows an input field which has
  * the onChange debounced by a number of milliseconds. Useful for
@@ -160,7 +162,7 @@ export function SearchInput(props: Props) {
   // When the onChange changes update the handleChange
   useEffect(() => {
     handleChange.current = lodashDebounce(onChange, debounce, debounceSettings);
-  }, [ onChange, debounce, debounceSettings ]);
+  }, [onChange, debounce, debounceSettings]);
 
   function handleKeyUp(event: KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') {

src/core/types.ts

@@ -12,7 +12,7 @@ export type Color =
   | 'dark'
   | 'light';
 
-export type BootstrapSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type StartOrEnd = 'start' | 'end';