diff --git a/docs/migration/alpha-beta.md b/docs/migration/alpha-beta.md
index f53ed9d6b8c..5a661a91966 100644
--- a/docs/migration/alpha-beta.md
+++ b/docs/migration/alpha-beta.md
@@ -43,6 +43,7 @@ The prop labelVariant for form-components (input, checkbox, ...) has been rename
| 🔄 changed `db-accordion` title | We replaced `title` with `headlinePlain` because there is already a html default `title`, which caused trouble | Rename `title` to `headlinePlain` or use the slot `headline` |
| ❌ removed prop `areaPopup` from `db-navigation-item` | We no longer support opening sub-navigations from via prop. | There is no alternative at the moment. |
| 🔄 changed `db-header` slot names | The slot names for "action" containers changed | 1. `callToAction` ➡ `primaryAction`
2. `actionBar` ➡ `secondaryAction` |
+| 🔄 renamed `size` & `variant` in `db-section` | The property `size` & `variant` in `db-section` was renamed to `spacing` & `width` to align it with other components | Find every `db-section` and replace `size` with `spacing` and `variant` with `width` |
### React
diff --git a/packages/components/src/components/accordion/model.ts b/packages/components/src/components/accordion/model.ts
index 70b54e16496..3a4856aa59a 100644
--- a/packages/components/src/components/accordion/model.ts
+++ b/packages/components/src/components/accordion/model.ts
@@ -6,17 +6,23 @@ import {
} from '../../shared/model';
import { DBAccordionItemDefaultProps } from '../accordion-item/model';
+export const AccordionVariantList = ['card'] as const;
+export type AccordionVariantType = (typeof AccordionVariantList)[number];
+
+export const AccordionBehaviourList = ['multiple', 'single'] as const;
+export type AccordionBehaviourType = (typeof AccordionBehaviourList)[number];
+
export interface DBAccordionDefaultProps {
/**
* Defines the display of the accordion and the items:
* "default": with a dividing line between the items
* "card": w/o dividing line, but items are shown in the card variant
*/
- variant?: 'card';
+ variant?: AccordionVariantType;
/**
* To allow multiple items open at the same time or only 1 item
*/
- behaviour?: 'multiple' | 'single';
+ behaviour?: AccordionBehaviourType;
/**
* The index of items which should be open when loading the accordion
diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts
index fd5fad6f8ef..63eec4002d8 100644
--- a/packages/components/src/components/badge/model.ts
+++ b/packages/components/src/components/badge/model.ts
@@ -6,18 +6,22 @@ import {
SizeProps
} from '../../shared/model';
+export const BadgePlacementList = [
+ 'inline',
+ 'corner-top-left',
+ 'corner-top-right',
+ 'corner-center-left',
+ 'corner-center-right',
+ 'corner-bottom-left',
+ 'corner-bottom-right'
+] as const;
+export type BadgePlacementType = (typeof BadgePlacementList)[number];
+
export interface DBBadgeDefaultProps {
/**
* The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
*/
- placement?:
- | 'inline'
- | 'corner-top-left'
- | 'corner-top-right'
- | 'corner-center-left'
- | 'corner-center-right'
- | 'corner-bottom-left'
- | 'corner-bottom-right';
+ placement?: BadgePlacementType;
}
export type DBBadgeProps = DBBadgeDefaultProps &
diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts
index d16ecc29dda..f4b048edece 100644
--- a/packages/components/src/components/button/model.ts
+++ b/packages/components/src/components/button/model.ts
@@ -4,18 +4,24 @@ import {
GlobalProps,
GlobalState,
IconProps,
+ SizeProps,
+ SizeType,
WidthProps
} from '../../shared/model';
-// TODO: 👇 Find a way to make react-docgen work without duplicating the types below
-enum buttonVariants {
- 'outlined' = 'outlined',
- 'brand' = 'brand',
- 'filled' = 'filled',
- 'ghost' = 'ghost'
-}
-export const buttonVariantsList = Object.values(buttonVariants);
-export type ButtonVariantsType = 'outlined' | 'brand' | 'filled' | 'ghost';
+export const ButtonVariantList = [
+ 'outlined',
+ 'brand',
+ 'filled',
+ 'ghost'
+] as const;
+export type ButtonVariantType = (typeof ButtonVariantList)[number];
+
+export const ButtonTypeList = ['button', 'reset', 'submit'] as const;
+export type ButtonTypeType = (typeof ButtonTypeList)[number];
+
+export const ButtonStateList = ['loading'] as const;
+export type ButtonStateType = (typeof ButtonStateList)[number];
export type DBButtonDefaultProps = {
/**
@@ -51,7 +57,7 @@ export type DBButtonDefaultProps = {
/**
* The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
*/
- type?: 'button' | 'reset' | 'submit';
+ type?: ButtonTypeType;
/**
* The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
@@ -61,24 +67,20 @@ export type DBButtonDefaultProps = {
/**
* Show loading progress inside button.
*/
- state?: 'loading';
-
- /**
- * The size of the button
- */
- size?: 'small';
+ state?: ButtonStateType;
/**
* Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
*/
- variant?: ButtonVariantsType | string;
+ variant?: ButtonVariantType | string;
};
export type DBButtonProps = DBButtonDefaultProps &
GlobalProps &
ClickEventProps &
IconProps &
- WidthProps;
+ WidthProps &
+ SizeProps;
export type DBButtonDefaultState = {};
diff --git a/packages/components/src/components/card/model.ts b/packages/components/src/components/card/model.ts
index e3716bea9d6..14622939e39 100644
--- a/packages/components/src/components/card/model.ts
+++ b/packages/components/src/components/card/model.ts
@@ -6,13 +6,19 @@ import {
SpacingProps
} from '../../shared/model';
+export const CardBehaviourList = ['default', 'interactive'] as const;
+export type CardBehaviourType = (typeof CardBehaviourList)[number];
+
+export const CardElevationLevelList = ['1', '2', '3'] as const;
+export type CardElevationLevelType = (typeof CardElevationLevelList)[number];
+
export type DBCardDefaultProps = {
/**
* Makes the card interactive
*/
- behaviour?: 'default' | 'interactive';
+ behaviour?: CardBehaviourType;
- elevationLevel?: '1' | '2' | '3';
+ elevationLevel?: CardElevationLevelType;
};
export type DBCardProps = DBCardDefaultProps &
diff --git a/packages/components/src/components/divider/model.ts b/packages/components/src/components/divider/model.ts
index 4b07c55bc94..7a572b869e7 100644
--- a/packages/components/src/components/divider/model.ts
+++ b/packages/components/src/components/divider/model.ts
@@ -1,8 +1,14 @@
import { EmphasisProps, GlobalProps, GlobalState } from '../../shared/model';
+export const DividerMarginList = ['none', '_'] as const;
+export type DividerMarginType = (typeof DividerMarginList)[number];
+
+export const DividerVariantList = ['horizontal', 'vertical'] as const;
+export type DividerVariantType = (typeof DividerVariantList)[number];
+
export type DBDividerDefaultProps = {
- margin?: 'none' | '_';
- variant?: 'horizontal' | 'vertical';
+ margin?: DividerMarginType;
+ variant?: DividerVariantType;
};
export type DBDividerProps = DBDividerDefaultProps &
diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts
index 5fef9c000da..35df8400444 100644
--- a/packages/components/src/components/drawer/model.ts
+++ b/packages/components/src/components/drawer/model.ts
@@ -4,21 +4,33 @@ import {
GlobalProps,
GlobalState,
InnerCloseButtonProps,
+ SpacingProps,
WidthProps
} from '../../shared/model';
+export const DrawerBackdropList = [
+ 'none',
+ 'strong',
+ 'weak',
+ 'invisible'
+] as const;
+export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
+
+export const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;
+export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
+
export interface DBDrawerDefaultProps {
/**
* The backdrop attribute changes the opacity of the backdrop.
* The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
*/
- backdrop?: 'strong' | 'weak' | 'invisible' | 'none';
+ backdrop?: DrawerBackdropType;
/**
* The direction attribute changes the position & animation of the drawer.
* E.g. "left" slides from left screen border to the right.
*/
- direction?: 'left' | 'right' | 'up' | 'down';
+ direction?: DrawerDirectionType;
/**
* React specific to change the header of the drawer.
@@ -33,10 +45,6 @@ export interface DBDrawerDefaultProps {
* The "end" depends on which direction you use.
*/
rounded?: boolean;
- /**
- * The @dependabot recreate attribute changes the padding inside the drawer.
- */
- spacing?: 'medium' | 'small' | 'large' | 'none';
/**
* The withCloseButton attribute shows/hides the default close button.
@@ -48,7 +56,8 @@ export type DBDrawerProps = DBDrawerDefaultProps &
GlobalProps &
CloseEventProps &
InnerCloseButtonProps &
- WidthProps;
+ WidthProps &
+ SpacingProps;
export interface DBDrawerDefaultState {
handleDialogOpen: () => void;
diff --git a/packages/components/src/components/header/model.ts b/packages/components/src/components/header/model.ts
index 2998107bf28..7e5c13e944d 100644
--- a/packages/components/src/components/header/model.ts
+++ b/packages/components/src/components/header/model.ts
@@ -1,4 +1,5 @@
import {
+ ContainerWidthProps,
GlobalProps,
GlobalState,
InitializedState,
@@ -14,11 +15,6 @@ export interface DBHeaderDefaultProps {
secondaryAction?: unknown;
drawerOpen?: boolean;
- /**
- * Set max width for header
- */
- width?: 'full' | 'medium' | 'large';
-
/**
* Forces the header to use mobile layout for desktop as well.
* You should only use this setting if you really can't provide a smaller navigation.
@@ -35,7 +31,8 @@ export interface DBHeaderDefaultProps {
export type DBHeaderProps = DBHeaderDefaultProps &
GlobalProps &
- ToggleEventProps;
+ ToggleEventProps &
+ ContainerWidthProps;
export interface DBHeaderDefaultState {
forcedToMobile?: boolean;
diff --git a/packages/components/src/components/icon/model.ts b/packages/components/src/components/icon/model.ts
index 83fae8189a3..597cc4d19d1 100644
--- a/packages/components/src/components/icon/model.ts
+++ b/packages/components/src/components/icon/model.ts
@@ -1,8 +1,14 @@
import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
+export const IconVariantList = ['default', 'inverted', 'filled'] as const;
+export type IconVariantType = (typeof IconVariantList)[number];
+
+export const IconWeightList = ['16', '20', '24', '32', '48', '64'] as const;
+export type IconWeightType = (typeof IconWeightList)[number];
+
export type DBIconDefaultProps = {
- variant?: 'default' | 'inverted' | 'filled';
- weight?: '16' | '20' | '24' | '32' | '48' | '64';
+ variant?: IconVariantType;
+ weight?: IconWeightType;
};
export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps;
diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
index 075a8e810bf..8aae70a247f 100644
--- a/packages/components/src/components/input/model.ts
+++ b/packages/components/src/components/input/model.ts
@@ -17,6 +17,26 @@ import {
KeyValueType
} from '../../shared/model';
+export const InputTypeList = [
+ 'color',
+ 'date',
+ 'datetime-local',
+ 'email',
+ 'file', // TODO: move this to own component
+ 'hidden',
+ 'month',
+ 'number',
+ 'password',
+ 'range', // TODO: move this to own component
+ 'search',
+ 'tel',
+ 'text',
+ 'time',
+ 'url',
+ 'week'
+] as const;
+export type InputTypeType = (typeof InputTypeList)[number];
+
export type DBInputDefaultProps = {
dataList?: KeyValueType[];
dataListId?: string;
@@ -36,24 +56,7 @@ export type DBInputDefaultProps = {
/**
* Type of form control
*/
- type?:
- | 'color'
- | 'date'
- | 'datetime-local'
- | 'email'
- | 'file' // TODO: move this to own component
- | 'hidden'
- | 'month'
- | 'number'
- | 'password'
- | 'range' // TODO: move this to own component
- | 'search'
- | 'tel'
- | 'text'
- | 'time'
- | 'url'
- | 'week'
- | string;
+ type?: InputTypeType | string;
step?: number | string;
};
diff --git a/packages/components/src/components/link/model.ts b/packages/components/src/components/link/model.ts
index f6cf6e95e7b..c683f06d75f 100644
--- a/packages/components/src/components/link/model.ts
+++ b/packages/components/src/components/link/model.ts
@@ -6,11 +6,20 @@ import {
LinkProps
} from '../../shared/model';
+export const LinkVariantList = ['adaptive', 'brand', 'inline'] as const;
+export type LinkVariantType = (typeof LinkVariantList)[number];
+
+export const LinkSizeList = ['medium', 'small'] as const;
+export type LinkSizeType = (typeof LinkSizeList)[number];
+
+export const LinkContentList = ['external', 'internal'] as const;
+export type LinkContentType = (typeof LinkContentList)[number];
+
export interface DBLinkDefaultProps {
- content?: 'external' | 'internal';
+ content?: LinkContentType;
id?: string;
- size?: 'medium' | 'small';
- variant?: 'adaptive' | 'brand' | 'inline';
+ size?: LinkSizeType;
+ variant?: LinkVariantType;
}
export type DBLinkProps = DBLinkDefaultProps &
diff --git a/packages/components/src/components/notification/model.ts b/packages/components/src/components/notification/model.ts
index e09538a9bcb..d59e19672e7 100644
--- a/packages/components/src/components/notification/model.ts
+++ b/packages/components/src/components/notification/model.ts
@@ -9,18 +9,37 @@ import {
SemanticProps
} from '../../shared/model';
+export const NotificationVariantList = [
+ 'docked',
+ 'standalone',
+ 'overlay'
+] as const;
+export type NotificationVariantType = (typeof NotificationVariantList)[number];
+
+export const NotificationLinkVariantList = ['block', 'inline'] as const;
+export type NotificationLinkVariantType =
+ (typeof NotificationLinkVariantList)[number];
+
+export const NotificationAriaLiveList = ['assertive', 'polite', 'off'] as const;
+export type NotificationAriaLiveType =
+ (typeof NotificationAriaLiveList)[number];
+
+export const NotificationBehaviourList = ['closable', 'permanent'] as const;
+export type NotificationBehaviourType =
+ (typeof NotificationBehaviourList)[number];
+
export interface DBNotificationDefaultProps {
/**
* The arialive attribute will lead to that the screenreader interrupts immediately
* and reads out the notification if set to "assertive", while it will wait for the
* user's idleness when set to "polite", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)
*/
- ariaLive?: 'assertive' | 'polite' | 'off' | undefined;
+ ariaLive?: NotificationAriaLiveType;
/**
* The behaviour attribute shows/hides the close button on the top right.
*/
- behaviour?: 'closable' | 'permanent';
+ behaviour?: NotificationBehaviourType;
/**
* The headline attribute changes the text of the bold headline.
@@ -30,7 +49,7 @@ export interface DBNotificationDefaultProps {
/**
* The linkVariant will be used if slotLink is set.
*/
- linkVariant?: 'block' | 'inline';
+ linkVariant?: NotificationLinkVariantType;
/**
* The slotImage can be set instead of an icon.
@@ -53,7 +72,7 @@ export interface DBNotificationDefaultProps {
* The standalone notifications are used e.g. inside a form to show an alert for a specific field.
* The overlay notifications are used for absolute and floating notifications like snackbars etc.
*/
- variant?: 'docked' | 'standalone' | 'overlay';
+ variant?: NotificationVariantType;
}
export type DBNotificationProps = DBNotificationDefaultProps &
diff --git a/packages/components/src/components/page/model.ts b/packages/components/src/components/page/model.ts
index 5914d23f3cc..acc7fed75e7 100644
--- a/packages/components/src/components/page/model.ts
+++ b/packages/components/src/components/page/model.ts
@@ -1,10 +1,17 @@
import { GlobalProps, GlobalState } from '../../shared/model';
+export const PageVariantList = ['auto', 'fixed'] as const;
+export type PageVariantType = (typeof PageVariantList)[number];
+
+export const PageDocumentOverflowList = ['hidden', 'auto'] as const;
+export type PageDocumentOverflowType =
+ (typeof PageDocumentOverflowList)[number];
+
export interface DBPageDefaultProps {
/**
* The documentOverflow sets the overflow:hidden/auto to the root document
*/
- documentOverflow?: 'hidden' | 'auto';
+ documentOverflow?: PageDocumentOverflowType;
/**
* Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
*/
@@ -22,7 +29,7 @@ export interface DBPageDefaultProps {
/**
* The variant=fixed uses flex-box to make header and footer static
*/
- variant?: 'auto' | 'fixed';
+ variant?: PageVariantType;
}
export type DBPageProps = DBPageDefaultProps & GlobalProps;
diff --git a/packages/components/src/components/radio/model.ts b/packages/components/src/components/radio/model.ts
index 0571c2e66ca..d1a5ac64e3a 100644
--- a/packages/components/src/components/radio/model.ts
+++ b/packages/components/src/components/radio/model.ts
@@ -1,19 +1,19 @@
import {
+ ChangeEventProps,
+ ChangeEventState,
FocusEventProps,
FocusEventState,
- ChangeEventState,
- ChangeEventProps,
- GlobalProps,
- GlobalState,
+ FormCheckProps,
FormProps,
FormState,
- FormCheckProps,
- InitializedState
+ GlobalProps,
+ GlobalState,
+ InitializedState,
+ SizeProps
} from '../../shared/model';
export interface DBRadioDefaultProps {
describedbyid?: string;
- size?: 'small';
}
export type DBRadioProps = DBRadioDefaultProps &
@@ -21,7 +21,8 @@ export type DBRadioProps = DBRadioDefaultProps &
ChangeEventProps &
FocusEventProps &
FormProps &
- FormCheckProps;
+ FormCheckProps &
+ SizeProps;
export type DBRadioDefaultState = {};
diff --git a/packages/components/src/components/section/model.ts b/packages/components/src/components/section/model.ts
index 7fe0c4ceca9..9ab1de8eea1 100644
--- a/packages/components/src/components/section/model.ts
+++ b/packages/components/src/components/section/model.ts
@@ -1,18 +1,16 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import {
+ ContainerWidthProps,
+ GlobalProps,
+ GlobalState,
+ SpacingProps
+} from '../../shared/model';
-export interface DBSectionDefaultProps {
- /**
- * The size attribute changes the `padding-block` (former `padding-top` and `padding-bottom`) of the container inside the section.
- */
- size?: 'small' | 'medium' | 'large' | 'none';
+export interface DBSectionDefaultProps {}
- /**
- * The variant attribute changes the `padding-inline` (former `padding-left` and `padding-right`) of the container inside the section.
- */
- variant?: 'medium' | 'large' | 'full';
-}
-
-export type DBSectionProps = DBSectionDefaultProps & GlobalProps;
+export type DBSectionProps = DBSectionDefaultProps &
+ GlobalProps &
+ SpacingProps &
+ ContainerWidthProps;
export interface DBSectionDefaultState {}
diff --git a/packages/components/src/components/section/section.lite.tsx b/packages/components/src/components/section/section.lite.tsx
index 665c7ddf0b9..c38a136c406 100644
--- a/packages/components/src/components/section/section.lite.tsx
+++ b/packages/components/src/components/section/section.lite.tsx
@@ -30,9 +30,9 @@ export default function DBSection(props: DBSectionProps) {
ref={ref}
id={state._id}
className={cls('db-section', props.className)}
- data-size={props.size || 'medium'}>
+ data-spacing={props.spacing || 'medium'}>
{/* TODO: We need to reevaluate whether we could get rid of this tag */}
- {props.children}
+ {props.children}
);
}
diff --git a/packages/components/src/components/section/section.scss b/packages/components/src/components/section/section.scss
index b3b4f02fee6..3ba5e7d8a5c 100644
--- a/packages/components/src/components/section/section.scss
+++ b/packages/components/src/components/section/section.scss
@@ -9,38 +9,38 @@
padding-inline: variables.$db-spacing-fixed-md;
}
- &[data-variant="full"] {
+ &[data-width="full"] {
padding-inline: 0;
}
- &[data-size="none"] {
+ &[data-spacing="none"] {
padding-block: 0;
}
- &[data-size="small"] {
+ &[data-spacing="small"] {
padding-block: variables.$db-spacing-responsive-sm;
}
- &[data-size="medium"] {
+ &[data-spacing="medium"] {
padding-block: variables.$db-spacing-responsive-md;
}
- &[data-size="large"] {
+ &[data-spacing="large"] {
padding-block: variables.$db-spacing-responsive-lg;
}
& > div {
margin: 0 auto;
- &[data-variant="full"] {
+ &[data-width="full"] {
max-inline-size: none;
}
- &[data-variant="medium"] {
+ &[data-width="medium"] {
max-inline-size: screen-sizes.$db-breakpoint-md;
}
- &[data-variant="large"] {
+ &[data-width="large"] {
max-inline-size: screen-sizes.$db-breakpoint-lg;
}
}
diff --git a/packages/components/src/components/tabs/model.ts b/packages/components/src/components/tabs/model.ts
index 20e5b73796e..0402dc23821 100644
--- a/packages/components/src/components/tabs/model.ts
+++ b/packages/components/src/components/tabs/model.ts
@@ -9,6 +9,13 @@ import {
import { DBTabItemProps } from '../tab-item/model';
import { DBTabPanelProps } from '../tab-panel/model';
+export const TabsBehaviourList = ['scrollbar', 'arrows'] as const;
+export type TabsBehaviourType = (typeof TabsBehaviourList)[number];
+
+export const TabsInitialSelectedModeList = ['auto', 'manually'] as const;
+export type TabsInitialSelectedModeType =
+ (typeof TabsInitialSelectedModeList)[number];
+
export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
export interface DBTabsDefaultProps {
/**
@@ -19,7 +26,7 @@ export interface DBTabsDefaultProps {
/**
* Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
*/
- behaviour?: 'scrollbar' | 'arrows';
+ behaviour?: TabsBehaviourType;
/**
* Default behaviour is auto selecting the first tab, change selected tab by index
@@ -29,7 +36,7 @@ export interface DBTabsDefaultProps {
/**
* Default behaviour is auto selecting the first tab, disable it with 'manually'
*/
- initialSelectedMode?: 'auto' | 'manually';
+ initialSelectedMode?: TabsInitialSelectedModeType;
/**
* The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts
index e55d7fb6765..fd0695c0899 100644
--- a/packages/components/src/components/tag/model.ts
+++ b/packages/components/src/components/tag/model.ts
@@ -7,13 +7,16 @@ import {
OverflowProps
} from '../../shared/model';
+export const TagBehaviourList = ['static', 'removable'] as const;
+export type TagBehaviourType = (typeof TagBehaviourList)[number];
+
export interface DBTagDefaultProps {
/**
* Defines the behaviour of the component:
* - static: default behaviour without remove button
* - removable: add a remove button at the end of the tag
*/
- behaviour?: 'static' | 'removable';
+ behaviour?: TagBehaviourType;
/**
* Disable tag.
diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
index 865bbefb608..40df658db9f 100644
--- a/packages/components/src/components/textarea/model.ts
+++ b/packages/components/src/components/textarea/model.ts
@@ -14,6 +14,17 @@ import {
InputEventState
} from '../../shared/model';
+export const TextareaResizeList = [
+ 'none',
+ 'both',
+ 'horizontal',
+ 'vertical'
+] as const;
+export type TextareaResizeType = (typeof TextareaResizeList)[number];
+
+export const TextareaWrapList = ['hard', 'soft', 'off'] as const;
+export type TextareaWrapType = (typeof TextareaWrapList)[number];
+
export interface DBTextareaDefaultProps {
/**
* The visible width of the text control, in average character widths. If it is specified, it must be a positive integer
@@ -22,7 +33,7 @@ export interface DBTextareaDefaultProps {
/**
* In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this
*/
- resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+ resize?: TextareaResizeType;
/**
* The number of visible text lines for the control. If it is specified, it must be a positive integer
*/
@@ -35,7 +46,7 @@ export interface DBTextareaDefaultProps {
/**
* Indicates how the control should wrap the value for form submission.
*/
- wrap?: 'hard' | 'soft' | 'off';
+ wrap?: TextareaWrapType;
}
export type DBTextareaProps = DBTextareaDefaultProps &
diff --git a/packages/components/src/components/tooltip/model.ts b/packages/components/src/components/tooltip/model.ts
index 6a02f48251a..b2a744648ea 100644
--- a/packages/components/src/components/tooltip/model.ts
+++ b/packages/components/src/components/tooltip/model.ts
@@ -9,8 +9,11 @@ import {
PopoverState
} from '../../shared/model';
+export const TooltipVariantList = ['with arrow', 'basic'] as const;
+export type TooltipVariantType = (typeof TooltipVariantList)[number];
+
export interface DBTooltipDefaultProps {
- variant?: 'with arrow' | 'basic';
+ variant?: TooltipVariantType;
}
export type DBTooltipProps = DBTooltipDefaultProps &
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index a36d5f33a43..99c4600cae3 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -35,13 +35,15 @@ export type GlobalState = {
defaultValues?: { [key: string]: string };
};
-export type SemanticType =
- | 'adaptive'
- | 'neutral'
- | 'critical'
- | 'informational'
- | 'warning'
- | 'successful';
+export const SemanticList = [
+ 'adaptive',
+ 'neutral',
+ 'critical',
+ 'informational',
+ 'warning',
+ 'successful'
+] as const;
+export type SemanticType = (typeof SemanticList)[number];
export type SemanticProps = {
/**
* The semantic defines the default variants for most components.
@@ -63,30 +65,36 @@ export type IconAfterProps = {
iconAfter?: IconTypes;
};
+export const SpacingList = ['medium', 'small', 'large', 'none'] as const;
+export type SpacingType = (typeof SpacingList)[number];
+
export type SpacingProps = {
/**
- * The spacing attribute changes the padding of the card.
- */
- spacing?: 'none' | 'medium' | 'small';
-};
-
+ * The spacing attribute changes the padding of the component.
+ */
+ spacing?: SpacingType;
+};
+
+export const PlacementList = [
+ 'left',
+ 'right',
+ 'top',
+ 'bottom',
+ 'left-start',
+ 'left-end',
+ 'right-start',
+ 'right-end',
+ 'top-start',
+ 'top-end',
+ 'bottom-start',
+ 'bottom-end'
+] as const;
+export type PlacementType = (typeof PlacementList)[number];
export type PlacementProps = {
/**
* The `placement` attributes values change the position to absolute and adds a transform based on the placement.
*/
- placement?:
- | 'left'
- | 'right'
- | 'top'
- | 'bottom'
- | 'left-start'
- | 'left-end'
- | 'right-start'
- | 'right-end'
- | 'top-start'
- | 'top-end'
- | 'bottom-start'
- | 'bottom-end';
+ placement?: PlacementType;
};
export type NavigationBehaviourState = {
@@ -107,55 +115,85 @@ export type OverflowProps = {
overflow?: boolean;
};
+export const OrientationList = ['horizontal', 'vertical'] as const;
+export type OrientationType = (typeof OrientationList)[number];
export type OrientationProps = {
- orientation?: 'horizontal' | 'vertical';
+ orientation?: OrientationType;
};
+export const WidthList = ['full', 'auto'] as const;
+export type WidthType = (typeof WidthList)[number];
export type WidthProps = {
/**
* Width of the component. Auto width based on children size, full width based on parent elements width.
*/
- width?: 'full' | 'auto';
+ width?: WidthType;
+};
+
+export const MaxWidthList = ['full', 'medium', 'large'] as const;
+export type MaxWidthType = (typeof MaxWidthList)[number];
+
+export type ContainerWidthProps = {
+ /**
+ * Set max width for the component
+ */
+ width?: MaxWidthType;
};
+export const PopoverDelayList = ['none', 'slow', 'fast'] as const;
+export type PopoverDelayType = (typeof PopoverDelayList)[number];
+export const PopoverAnimationList = ['enabled', 'disabled'] as const;
+export type PopoverAnimationType = (typeof PopoverAnimationList)[number];
+export const PopoverWidthList = ['auto', 'fixed'] as const;
+export type PopoverWidthType = (typeof PopoverWidthList)[number];
export type PopoverProps = {
/**
* Add a delay before showing the tooltip
*/
- delay?: 'none' | 'slow' | 'fast';
+ delay?: PopoverDelayType;
/**
* Disable animation
*/
- animation?: 'enabled' | 'disabled';
+ animation?: PopoverAnimationType;
/**
* Use fixed with for default max-width
*/
- width?: 'auto' | 'fixed';
+ width?: PopoverWidthType;
};
export type PopoverState = {
handleAutoPlacement: () => void;
};
+export const SizeList = ['small', 'medium'] as const;
+export type SizeType = (typeof SizeList)[number];
export type SizeProps = {
/**
* The size attribute changes the font-size and other related sizes of the component.
*/
- size?: 'medium' | 'small';
+ size?: SizeType;
};
+export const EmphasisList = ['weak', 'strong'] as const;
+export type EmphasisType = (typeof EmphasisList)[number];
export type EmphasisProps = {
/**
* The emphasis attribute divides in between a weak or strong importance.
*/
- emphasis?: 'weak' | 'strong';
+ emphasis?: EmphasisType;
};
+export const CustomValidityList = [
+ 'invalid',
+ 'valid',
+ 'no-validation'
+] as const;
+export type CustomValidityType = (typeof CustomValidityList)[number];
export type FormProps = {
/**
* Marks an input element as invalid (red) | valid(green) | no-validation(grey). Overwrites the :user-valid selector.
*/
- customValidity?: 'invalid' | 'valid' | 'no-validation';
+ customValidity?: CustomValidityType;
/**
* The disabled attribute can be set to keep a user from clicking on the form element.
*/
@@ -200,6 +238,8 @@ export type FormTextProps = {
readOnly?: boolean;
};
+export const CheckVariantList = ['hidden'] as const;
+export type CheckVariantType = (typeof CheckVariantList)[number];
export type FormCheckProps = {
/**
* Define the radio or checkbox elements checked state
@@ -209,7 +249,7 @@ export type FormCheckProps = {
/**
* Hide the label of a radio/checkbox.
*/
- variant?: 'hidden';
+ variant?: CheckVariantType;
};
export type FormMessageState = {
@@ -217,11 +257,73 @@ export type FormMessageState = {
getInvalidMessage: () => string;
};
+export const LabelVariantList = ['above', 'floating', 'hidden'] as const;
+export type LabelVariantType = (typeof LabelVariantList)[number];
+export const AutoCompleteList = [
+ 'off',
+ 'on',
+ 'name',
+ 'honorific-prefix',
+ 'given-name',
+ 'additional-name',
+ 'family-name',
+ 'honorific-suffix',
+ 'nickname',
+ 'email',
+ 'username',
+ 'new-password',
+ 'current-password',
+ 'one-time-code',
+ 'organization-title',
+ 'organization',
+ 'street-address',
+ 'shipping',
+ 'billing',
+ 'address-line1',
+ 'address-line2',
+ 'address-line3',
+ 'address-level4',
+ 'address-level3',
+ 'address-level2',
+ 'address-level1',
+ 'country',
+ 'country-name',
+ 'postal-code',
+ 'cc-name',
+ 'cc-given-name',
+ 'cc-additional-name',
+ 'cc-family-name',
+ 'cc-number',
+ 'cc-exp',
+ 'cc-exp-month',
+ 'cc-exp-year',
+ 'cc-csc',
+ 'cc-type',
+ 'transaction-currency',
+ 'transaction-amount',
+ 'language',
+ 'bday',
+ 'bday-day',
+ 'bday-month',
+ 'bday-year',
+ 'sex',
+ 'tel',
+ 'tel-country-code',
+ 'tel-national',
+ 'tel-area-code',
+ 'tel-local',
+ 'tel-extension',
+ 'impp',
+ 'url',
+ 'photo',
+ 'webauthn'
+] as const;
+export type AutoCompleteType = (typeof AutoCompleteList)[number];
export type FormMessageProps = {
/**
* Change the variant of the label to float or hidden
*/
- variant?: 'above' | 'floating' | 'hidden';
+ variant?: LabelVariantType;
/**
* Text that appears in the form control when it has no value set
*/
@@ -249,65 +351,7 @@ export type FormMessageProps = {
/**
* See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
*/
- autocomplete?:
- | string
- | 'off'
- | 'on'
- | 'name'
- | 'honorific-prefix'
- | 'given-name'
- | 'additional-name'
- | 'family-name'
- | 'honorific-suffix'
- | 'nickname'
- | 'email'
- | 'username'
- | 'new-password'
- | 'current-password'
- | 'one-time-code'
- | 'organization-title'
- | 'organization'
- | 'street-address'
- | 'shipping'
- | 'billing'
- | 'address-line1'
- | 'address-line2'
- | 'address-line3'
- | 'address-level4'
- | 'address-level3'
- | 'address-level2'
- | 'address-level1'
- | 'country'
- | 'country-name'
- | 'postal-code'
- | 'cc-name'
- | 'cc-given-name'
- | 'cc-additional-name'
- | 'cc-family-name'
- | 'cc-number'
- | 'cc-exp'
- | 'cc-exp-month'
- | 'cc-exp-year'
- | 'cc-csc'
- | 'cc-type'
- | 'transaction-currency'
- | 'transaction-amount'
- | 'language'
- | 'bday'
- | 'bday-day'
- | 'bday-month'
- | 'bday-year'
- | 'sex'
- | 'tel'
- | 'tel-country-code'
- | 'tel-national'
- | 'tel-area-code'
- | 'tel-local'
- | 'tel-extension'
- | 'impp'
- | 'url'
- | 'photo'
- | 'webauthn';
+ autocomplete?: string | AutoCompleteType;
};
export type FormState = {
@@ -321,52 +365,39 @@ export type InitializedState = {
initialized: boolean;
};
-export type ImageProps = {
- /**
- * [Alternative text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt) for an image.
- */
- imgAlt?: string;
- /**
- * The [height attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height) for the image.
- */
- imgHeight?: number;
- /**
- * The [source](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src) of an image.
- */
- imgSrc?: string;
- /**
- * The [width attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width) for the image.
- */
- imgWidth?: number;
-};
-
+export const LinkCurrentList = [
+ 'time',
+ 'true',
+ 'false',
+ 'date',
+ 'page',
+ 'step',
+ 'location'
+] as const;
+export type LinkCurrentType = (typeof LinkCurrentList)[number];
+export const LinkTargetList = ['_self', '_blank', '_parent', '_top'] as const;
+export type LinkTargetType = (typeof LinkTargetList)[number];
+export const LinkReferrerPolicyList = [
+ 'no-referrer',
+ 'no-referrer-when-downgrade',
+ 'origin',
+ 'origin-when-cross-origin',
+ 'same-origin',
+ 'strict-origin',
+ 'strict-origin-when-cross-origin',
+ 'unsafe-url'
+] as const;
+export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
export type LinkProps = {
- current?:
- | boolean
- | 'time'
- | 'true'
- | 'false'
- | 'date'
- | 'page'
- | 'step'
- | 'location'
- | undefined;
+ current?: boolean | LinkCurrentType;
disabled?: boolean;
href?: string;
hreflang?: string;
label?: string;
- target?: '_self' | '_blank' | '_parent' | '_top';
+ target?: LinkTargetType;
rel?: string;
role?: string;
- referrerpolicy?:
- | 'no-referrer'
- | 'no-referrer-when-downgrade'
- | 'origin'
- | 'origin-when-cross-origin'
- | 'same-origin'
- | 'strict-origin'
- | 'strict-origin-when-cross-origin'
- | 'unsafe-url';
+ referrerpolicy?: LinkReferrerPolicyType;
selected?: boolean;
text?: string;
};
@@ -403,11 +434,13 @@ export type CloseEventState = {
handleClose?: (event: any) => void;
};
+export const AlignmentList = ['start'] as const;
+export type AlignmentType = (typeof AlignmentList)[number];
export type AlignmentProps = {
/**
* Define the content alignment in full width
*/
- alignment?: 'start' | 'center';
+ alignment?: AlignmentType;
};
export type ActiveProps = {
diff --git a/showcases/angular-showcase/src/app/components/section/section.component.html b/showcases/angular-showcase/src/app/components/section/section.component.html
index 74de8678d89..76c945f0509 100644
--- a/showcases/angular-showcase/src/app/components/section/section.component.html
+++ b/showcases/angular-showcase/src/app/components/section/section.component.html
@@ -12,8 +12,8 @@
>
{{ exampleName }}
diff --git a/showcases/patternhub/components/default-page.tsx b/showcases/patternhub/components/default-page.tsx
index a9deed68c8b..937e905a053 100644
--- a/showcases/patternhub/components/default-page.tsx
+++ b/showcases/patternhub/components/default-page.tsx
@@ -99,7 +99,7 @@ const DefaultPage = ({ children }: any) => {
}>
-
+
{children}
diff --git a/showcases/react-showcase/src/components/section/index.tsx b/showcases/react-showcase/src/components/section/index.tsx
index a525cc3ff04..3ff17d2c745 100644
--- a/showcases/react-showcase/src/components/section/index.tsx
+++ b/showcases/react-showcase/src/components/section/index.tsx
@@ -4,11 +4,11 @@ import defaultComponentVariants from '../../../../shared/section.json';
import { type DBSectionProps } from '../../../../../output/react/src/components/section/model';
import { getVariants } from '../data';
-const getSection = ({ variant, size, children }: DBSectionProps) => (
+const getSection = ({ width, spacing, children }: DBSectionProps) => (
+ spacing={spacing}
+ width={width}>
{children}
);
diff --git a/showcases/shared/section.json b/showcases/shared/section.json
index 8b4c15098aa..36abb8cec10 100644
--- a/showcases/shared/section.json
+++ b/showcases/shared/section.json
@@ -20,7 +20,7 @@
]
},
{
- "name": "Variant",
+ "name": "Width",
"examples": [
{
"name": "(Default) Full",
@@ -34,20 +34,20 @@
"name": "Medium",
"style": { "width": "100%", "display": "block" },
"props": {
- "variant": "medium"
+ "width": "medium"
}
},
{
"name": "Large",
"style": { "width": "100%", "display": "block" },
"props": {
- "variant": "large"
+ "width": "large"
}
}
]
},
{
- "name": "Size",
+ "name": "Spacing",
"examples": [
{
"name": "(Default) Medium",
@@ -56,13 +56,13 @@
{
"name": "Large",
"props": {
- "size": "large"
+ "spacing": "large"
}
},
{
"name": "Small",
"props": {
- "size": "small"
+ "spacing": "small"
}
}
]
diff --git a/showcases/vue-showcase/src/components/section/Section.vue b/showcases/vue-showcase/src/components/section/Section.vue
index 40086605ac4..99889275231 100644
--- a/showcases/vue-showcase/src/components/section/Section.vue
+++ b/showcases/vue-showcase/src/components/section/Section.vue
@@ -11,8 +11,8 @@ import { DBSection } from "../../../../../output/vue/src";
>
{{ exampleName }}