feat: align properties with figma to have a nearly 1:1 relationship

packages/components/scripts/utils/index.ts

@@ -21,6 +21,11 @@ export const runReplacements = (
 		replacements = [...replacements, ...component.overwrites.global];
 	}
 
+	replacements.push({
+		from: ',\n' + ',',
+		to: ','
+	});
+
 	for (const replacement of replacements) {
 		const option = {
 			files: file,

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

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

packages/components/src/components/badge/badge.lite.tsx

@@ -1,6 +1,7 @@
 import {
 	onMount,
 	onUpdate,
+	Show,
 	useMetadata,
 	useRef,
 	useStore
@@ -51,7 +52,9 @@ export default function DBBadge(props: DBBadgeProps) {
 				props.placement?.startsWith('corner') &&
 				(props.label ?? DEFAULT_LABEL)
 			}>
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</span>
 	);
 }

packages/components/src/components/badge/model.ts

@@ -4,7 +4,8 @@ import {
 	GlobalState,
 	InitializedState,
 	SemanticProps,
-	SizeProps
+	SizeProps,
+	TextProps
 } from '../../shared/model';
 
 export const BadgePlacementList = [
@@ -34,7 +35,8 @@ export type DBBadgeProps = DBBadgeDefaultProps &
 	GlobalProps &
 	SemanticProps &
 	SizeProps &
-	EmphasisProps;
+	EmphasisProps &
+	TextProps;
 
 export type DBBadgeDefaultState = {};
 

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

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

packages/components/src/components/brand/model.ts

@@ -1,13 +1,23 @@
-import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
+import {
+	GlobalProps,
+	GlobalState,
+	IconProps,
+	ShowIconProps,
+	TextProps
+} from '../../shared/model';
 
 export type DBBrandDefaultProps = {
 	/**
-	 * Disable the default logo svg to pass in a custom `img`
+	 * @deprecated: Disable the default logo svg to pass in a custom `img`
 	 */
 	hideLogo?: boolean;
 };
 
-export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps;
+export type DBBrandProps = DBBrandDefaultProps &
+	GlobalProps &
+	IconProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBBrandDefaultState = {};
 

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

@@ -1,6 +1,6 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls, getBooleanAsString } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -27,6 +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-size={props.size}
 			data-state={props.state}
 			data-width={props.width}
@@ -40,7 +41,9 @@ export default function DBButton(props: DBButtonProps) {
 			onClick={(event: ClickEvent<HTMLButtonElement>) =>
 				state.handleClick(event)
 			}>
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</button>
 	);
 }

packages/components/src/components/button/model.ts

@@ -4,7 +4,9 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
+	ShowIconProps,
 	SizeProps,
+	TextProps,
 	WidthProps
 } from '../../shared/model';
 
@@ -79,7 +81,9 @@ export type DBButtonProps = DBButtonDefaultProps &
 	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps &
-	SizeProps;
+	SizeProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBButtonDefaultState = {};
 

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

@@ -17,7 +17,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
 useMetadata({});
@@ -167,13 +170,12 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					}
 					aria-describedby={state._descByIds}
 				/>
-				<Show when={props.label}>
-					<span>{props.label}</span>
+				<Show when={props.label} else={props.children}>
+					{props.label}
 				</Show>
-				{props.children}
 			</label>
 
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/components/icon/icon.lite.tsx

@@ -1,4 +1,4 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBIconProps, DBIconState } from './model';
 import { cls } from '../../utils';
 
@@ -20,7 +20,9 @@ export default function DBIcon(props: DBIconProps) {
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
 			aria-hidden="true">
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</span>
 	);
 }

packages/components/src/components/icon/model.ts

@@ -1,4 +1,9 @@
-import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
+import {
+	GlobalProps,
+	GlobalState,
+	IconProps,
+	TextProps
+} from '../../shared/model';
 
 export const IconVariantList = ['default', 'inverted', 'filled'] as const;
 export type IconVariantType = (typeof IconVariantList)[number];
@@ -11,7 +16,10 @@ export type DBIconDefaultProps = {
 	weight?: IconWeightType;
 };
 
-export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps;
+export type DBIconProps = DBIconDefaultProps &
+	GlobalProps &
+	IconProps &
+	TextProps;
 
 export type DBIconDefaultState = {};
 

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

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

packages/components/src/components/infotext/model.ts

@@ -3,7 +3,9 @@ import {
 	GlobalState,
 	IconProps,
 	SemanticProps,
-	SizeProps
+	ShowIconProps,
+	SizeProps,
+	TextProps
 } from '../../shared/model';
 
 export type DBInfotextDefaultProps = {};
@@ -12,7 +14,9 @@ export type DBInfotextProps = DBInfotextDefaultProps &
 	GlobalProps &
 	SemanticProps &
 	IconProps &
-	SizeProps;
+	SizeProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBInfotextDefaultState = {};
 

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

@@ -8,7 +8,14 @@ import {
 	useStore,
 	useTarget
 } from '@builder.io/mitosis';
-import { cls, delay, hasVoiceOver, isArrayOfStrings, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getHideIcon,
+	hasVoiceOver,
+	isArrayOfStrings,
+	uuid
+} from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
 	DEFAULT_DATALIST_ID_SUFFIX,
@@ -27,7 +34,10 @@ import {
 	ValueLabelType
 } from '../../shared/model';
 import DBInfotext from '../infotext/infotext.lite';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 
 useMetadata({});
 
@@ -161,8 +171,10 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-icon={props.icon}
-			data-icon-after={props.iconAfter}>
+			data-icon-after={props.iconAfter}
+			data-hide-icon-after={getHideIcon(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<input
 				aria-invalid={props.customValidity === 'invalid'}
@@ -217,7 +229,7 @@ export default function DBInput(props: DBInputProps) {
 				</datalist>
 			</Show>
 			{props.children}
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/components/input/model.ts

@@ -13,6 +13,7 @@ import {
 	IconProps,
 	InputEventProps,
 	InputEventState,
+	ShowIconProps,
 	ValueLabelType
 } from '../../shared/model';
 
@@ -77,7 +78,8 @@ export type DBInputProps = DBInputDefaultProps &
 	FormProps &
 	IconProps &
 	IconAfterProps &
-	FormMessageProps;
+	FormMessageProps &
+	ShowIconProps;
 
 export type DBInputDefaultState = {
 	_dataListId?: string;

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 } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -38,15 +38,15 @@ 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-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={props.text}>
-				<span>{props.text}</span>
+			<Show when={props.text} else={props.children}>
+				{props.text}
 			</Show>
-			{props.children}
 		</a>
 	);
 }

packages/components/src/components/link/link.scss

@@ -17,18 +17,16 @@
 		@extend %db-link-height;
 	}
 
-	&:not([data-variant="inline"]) {
-		&[data-content="internal"] {
-			@include icons.set-icon("arrow_right", "after");
+	&[data-content="internal"] {
+		@include icons.set-icon("arrow_right", "after");
 
-			&::after {
-				vertical-align: top;
-			}
+		&::after {
+			vertical-align: top;
 		}
+	}
 
-		&[data-content="external"] {
-			@include icons.set-icon("arrow_up_right", "after");
-		}
+	&[data-content="external"] {
+		@include icons.set-icon("arrow_up_right", "after");
 	}
 
 	&[data-content="internal"],