Feat figma properties alignment breaking

docs/migration/v0.4.x-to-v0.5.x.md

@@ -0,0 +1,3 @@
+## Migration Beta (0.4.x) ➡ Beta (0.5.x)
+
+No breaking changes

docs/migration/v0.5.x-to-v0.6.x.md

@@ -0,0 +1,18 @@
+## Migration Beta (0.5.x) ➡ Beta (0.6.x)
+
+### Components
+
+We changed some properties for components to align with Figma properties:
+
+#### Accordion-Item
+
+-   `content` ➡️ `text`
+
+#### Notification
+
+-   `behaviour="closeable|permanent"` ➡️ `closeable="true/false"`- Defaults to `false`
+
+#### Form-Components (Input, Select, Checkbox, Radio, Switch, Textarea)
+
+-   `variant="hidden"` ➡️ `showLabel="true/false"` - Defaults to `true`
+-   `customValidity` ➡️ `validation`

packages/components/src/components/accordion-item/accordion-item.lite.tsx

@@ -53,8 +53,8 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 				</Show>
 			</summary>
 			<div>
-				<Show when={props.content} else={props.children}>
-					{props.content}
+				<Show when={props.text} else={props.children}>
+					{props.text}
 				</Show>
 			</div>
 		</details>

packages/components/src/components/accordion-item/model.ts

@@ -1,15 +1,12 @@
 import {
 	GlobalProps,
 	GlobalState,
+	TextProps,
 	ToggleEventProps,
 	ToggleEventState
 } from '../../shared/model';
 
 export type DBAccordionItemDefaultProps = {
-	/**
-	 * Alternative for passing only a string instead of children
-	 */
-	content?: string;
 	/**
 	 * Initial state for the accordion item
 	 */
@@ -34,7 +31,8 @@ export type DBAccordionItemDefaultProps = {
 
 export type DBAccordionItemProps = DBAccordionItemDefaultProps &
 	GlobalProps &
-	ToggleEventProps;
+	ToggleEventProps &
+	TextProps;
 
 export type DBAccordionItemDefaultState = {
 	_open: boolean;

packages/components/src/components/brand/brand.lite.tsx

@@ -1,5 +1,5 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 import { DEFAULT_ICON } from '../../shared/constants';
 
@@ -15,7 +15,7 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
 			<Show when={props.text} else={props.children}>

packages/components/src/components/button/button.lite.tsx

@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls, getBooleanAsString, getHideIcon } from '../../utils';
+import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -27,7 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-size={props.size}
 			data-state={props.state}
 			data-width={props.width}

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -8,7 +8,14 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
-import { cls, delay, hasVoiceOver, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getBooleanAsString,
+	getHideProp,
+	hasVoiceOver,
+	uuid
+} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -51,7 +58,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -61,7 +68,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
@@ -146,11 +153,11 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		<div
 			class={cls('db-checkbox', props.className)}
 			data-size={props.size}
-			data-variant={props.variant}>
+			data-hide-label={getHideProp(props.showLabel)}>
 			<label htmlFor={state._id}>
 				<input
-					aria-invalid={props.customValidity === 'invalid'}
-					data-custom-validity={props.customValidity}
+					aria-invalid={props.validation === 'invalid'}
+					data-custom-validity={props.validation}
 					ref={ref}
 					type="checkbox"
 					id={state._id}

packages/components/src/components/infotext/infotext.lite.tsx

@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 
 useMetadata({});
 
@@ -19,7 +19,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}>
+			data-hide-icon-after={getHideProp(props.showIcon ?? true)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

packages/components/src/components/input/input.lite.tsx

@@ -11,7 +11,8 @@ import {
 import {
 	cls,
 	delay,
-	getHideIcon,
+	getBooleanAsString,
+	getHideProp,
 	hasVoiceOver,
 	isArrayOfStrings,
 	uuid
@@ -77,7 +78,7 @@ export default function DBInput(props: DBInputProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -87,7 +88,7 @@ export default function DBInput(props: DBInputProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid &&
 					(props.required ||
 						props.minLength ||
@@ -171,14 +172,15 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-label={getHideProp(props.showLabel)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-icon={props.icon}
 			data-icon-after={props.iconAfter}
-			data-hide-icon-after={getHideIcon(props.showIcon)}>
+			data-hide-icon-after={getHideProp(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<input
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				id={state._id}
 				name={props.name}

packages/components/src/components/input/input.scss

@@ -26,7 +26,7 @@ $icon-padding: calc(
 		--db-form-component-padding-inline-end: #{$icon-padding};
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		--db-label-visible-height: 0;
 		--db-label-visible-spacing: 1;
 	}

packages/components/src/components/link/link.lite.tsx

@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBLinkProps, DBLinkState } from './model';
-import { cls, getBooleanAsString, getHideIcon } from '../../utils';
+import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -38,7 +38,7 @@ export default function DBLink(props: DBLinkProps) {
 			aria-label={props.label}
 			aria-current={props.current}
 			data-size={props.size}
-			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}
+			data-hide-icon-after={getHideProp(props.showIcon ?? true)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>

packages/components/src/components/navigation-item/navigation-item.lite.tsx

@@ -9,7 +9,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import DBButton from '../button/button.lite';
-import { cls, getBooleanAsString, getHideIcon, uuid } from '../../utils';
+import { cls, getBooleanAsString, getHideProp, uuid } from '../../utils';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
@@ -97,7 +97,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-active={props.active}
 			aria-disabled={getBooleanAsString(props.disabled)}>
 			<Show when={!state.hasSubNavigation}>

packages/components/src/components/notification/model.ts

@@ -26,10 +26,6 @@ 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 type DBNotificationDefaultProps = {
 	/**
 	 * The arialive attribute will lead to that the screenreader interrupts immediately
@@ -39,9 +35,9 @@ export type DBNotificationDefaultProps = {
 	ariaLive?: NotificationAriaLiveType;
 
 	/**
-	 * The behaviour attribute shows/hides the close button on the top right.
+	 * The closeable attribute shows/hides the close button on the top right.
 	 */
-	behaviour?: NotificationBehaviourType;
+	closeable?: boolean;
 
 	/**
 	 * The headline attribute changes the text of the bold headline.

packages/components/src/components/notification/notification.lite.tsx

@@ -2,7 +2,7 @@ import { Show, Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBNotificationProps, DBNotificationState } from './model';
 import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -28,7 +28,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>
@@ -45,7 +45,7 @@ export default function DBNotification(props: DBNotificationProps) {
 
 			<Slot name="link" />
 
-			<Show when={props.behaviour !== 'permanent'}>
+			<Show when={props.closeable}>
 				<DBButton
 					id={props.closeButtonId}
 					icon="cross"

packages/components/src/components/radio/radio.lite.tsx

@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBRadioProps, DBRadioState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -76,12 +76,12 @@ export default function DBRadio(props: DBRadioProps) {
 	return (
 		<label
 			data-size={props.size}
-			data-variant={props.variant}
+			data-hide-label={getHideProp(props.showLabel)}
 			class={cls('db-radio', props.className)}
 			htmlFor={state._id}>
 			<input
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				type="radio"
 				id={state._id}

packages/components/src/components/select/select.lite.tsx

@@ -9,7 +9,14 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
-import { cls, delay, getHideIcon, hasVoiceOver, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getBooleanAsString,
+	getHideProp,
+	hasVoiceOver,
+	uuid
+} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -80,7 +87,7 @@ export default function DBSelect(props: DBSelectProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -90,7 +97,7 @@ export default function DBSelect(props: DBSelectProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
@@ -166,12 +173,13 @@ export default function DBSelect(props: DBSelectProps) {
 		<div
 			class={cls('db-select', props.className)}
 			data-variant={props.variant}
+			data-hide-label={getHideProp(props.showLabel)}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}>
+			data-hide-icon={getHideProp(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				required={props.required}
 				disabled={props.disabled}

packages/components/src/components/select/select.scss

@@ -42,7 +42,7 @@ $has-before-padding: calc(
 		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		--db-label-visible-height: 0;
 		--db-label-visible-spacing: 1;
 	}