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

…3459)

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

* fix: issue with showIcon

* fix: issue with showIcon

* fix: issue with vue output

* fix: issue with showIcon

* chore: update snapshots

__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -15,4 +15,5 @@
   - link "Small arrow_right\" / \""
   - link "Content arrow_up_right\" / \""
   - link "(Default) Internal arrow_right\" / \""
-  - link "External arrow_up_right\" / \""
+  - link "External arrow_up_right\" / \""
+  - link "Show Icon"

docs/development.md

@@ -36,5 +36,5 @@ npx playwright test --update-snapshots
 
 You can also use `docker-compose` to test or regenerate screenshots.
 
--   testing: `docker-compose -f ./e2e/docker-compose.yml up`
--   update screenshots: `docker-compose -f ./e2e/docker-compose.regenerate.yml up`
+- testing: `docker-compose -f ./e2e/docker-compose.yml up`
+- update screenshots: `docker-compose -f ./e2e/docker-compose.regenerate.yml up`

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/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/checkbox/checkbox.scss

@@ -67,7 +67,7 @@
 
 				border-width: form-components.$check-border-size;
 
-				&::before {
+				&:not([data-hide-icon-before="true"])::before {
 					align-content: center;
 					font-size: calc(
 						var(--db-icon-font-size) - 2 *

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}